/* ============================================
   Windows Container
   ============================================ */
#windows-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

/* ============================================
   XP Window
   ============================================ */
.window {
  position: absolute;
  background: #ece9d8;
  border: 2px solid #0054e3;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
  min-width: 200px;
  min-height: 100px;
  animation: window-open 0.2s ease-out;
  transition: border-radius 0.15s ease;
}

@keyframes window-open {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

.window.closing {
  animation: window-close 0.15s ease-in forwards;
}

@keyframes window-close {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}

/* ============================================
   XP Title Bar Gradient
   ============================================ */
.window-titlebar {
  background: linear-gradient(
    180deg,
    #0058ee 0%,
    #3a8cff 3%,
    #0d47e3 5%,
    #2d7aef 8%,
    #6baaf7 20%,
    #4b93f4 40%,
    #2668e8 60%,
    #1a56e4 80%,
    #0f48de 95%,
    #0039c7 100%
  );
  padding: 3px 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 24px;
  flex-shrink: 0;
}

.window-title {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 4px;
  user-select: none;
  cursor: default;
}

.window-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* ============================================
   Window Control Buttons
   ============================================ */
.window-btn {
  width: 21px;
  height: 21px;
  background: linear-gradient(
    180deg,
    #3a8cff 0%,
    #1a5cd8 45%,
    #1358c4 50%,
    #1a6aef 55%,
    #4b93f4 100%
  );
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  font-family: 'Marlett', sans-serif;
  padding: 0;
}

.window-btn:hover {
  background: linear-gradient(
    180deg,
    #6baaf7 0%,
    #4b93f4 30%,
    #3a8cff 50%,
    #6bb3ff 70%,
    #9ac4ff 100%
  );
}

.window-btn:active {
  background: linear-gradient(
    180deg,
    #0d47e3 0%,
    #1358c4 50%,
    #0a3aad 100%
  );
}

.window-btn-close:hover {
  background: linear-gradient(
    180deg,
    #e05a5a 0%,
    #c0392b 30%,
    #a93226 50%,
    #e74c3c 70%,
    #f1948a 100%
  );
}

.window-btn-close:active {
  background: linear-gradient(
    180deg,
    #922b21 0%,
    #7b241c 50%,
    #641e16 100%
  );
}

/* ============================================
   Window Body
   ============================================ */
.window-body {
  flex: 1;
  overflow: auto;
  background: #ece9d8;
  position: relative;
}

/* ============================================
   Window States
   ============================================ */
.window-minimized {
  display: none;
}

.window.restoring {
  animation: window-restore 0.2s ease-out;
}

@keyframes window-restore {
  0% { opacity: 0; transform: scale(0.85) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.window.maximizing {
  transition: left 0.2s ease-out, top 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out, border-radius 0.15s ease;
}

.window-maximized {
  border-radius: 0;
}

/* ============================================
   Dialog System
   ============================================ */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.xp-dialog {
  background: #ece9d8;
  border: 2px solid #0054e3;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.4);
  width: 380px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xp-dialog-titlebar {
  background: linear-gradient(
    180deg,
    #0058ee 0%,
    #3a8cff 3%,
    #0d47e3 5%,
    #2d7aef 8%,
    #6baaf7 20%,
    #4b93f4 40%,
    #2668e8 60%,
    #1a56e4 80%,
    #0f48de 95%,
    #0039c7 100%
  );
  padding: 4px 8px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  border-radius: 6px 6px 0 0;
  user-select: none;
  flex-shrink: 0;
}

.xp-dialog-body {
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}

.xp-dialog-error,
.xp-dialog-info {
  font-size: 36px;
  flex-shrink: 0;
  line-height: 1;
  text-align: center;
  min-width: 40px;
}

.xp-dialog-message {
  font-size: 12px;
  color: #000;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  flex: 1;
  padding-top: 2px;
}

.xp-dialog-input {
  width: 100%;
  margin-top: 8px;
  padding: 4px 6px;
  border: 1px solid #7f9db9;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  background: #fff;
}

.xp-dialog-input:focus {
  border-color: #0054e3;
}

.xp-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 24px 16px;
  flex-shrink: 0;
}

.xp-dialog-btn {
  min-width: 75px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    #f5f5f5 0%,
    #ece9d8 8%,
    #d6d0c4 20%,
    #ece9d8 50%,
    #d6d0c4 80%,
    #ece9d8 92%,
    #f5f5f5 100%
  );
  color: #000;
  outline: none;
}

.xp-dialog-btn:hover {
  background: linear-gradient(
    180deg,
    #dce8f7 0%,
    #c4d5ee 8%,
    #a8c0e4 20%,
    #c4d5ee 50%,
    #a8c0e4 80%,
    #c4d5ee 92%,
    #dce8f7 100%
  );
  border-color: #0054e3;
}

.xp-dialog-btn:active {
  background: linear-gradient(
    180deg,
    #a8c0e4 0%,
    #c4d5ee 30%,
    #dce8f7 60%,
    #c4d5ee 80%,
    #a8c0e4 100%
  );
}

.xp-dialog-btn-primary {
  font-weight: bold;
  border: 2px solid #0054e3;
  background: linear-gradient(
    180deg,
    #e8f0fb 0%,
    #d4e2f6 8%,
    #b8cff0 20%,
    #d4e2f6 50%,
    #b8cff0 80%,
    #d4e2f6 92%,
    #e8f0fb 100%
  );
}

.xp-dialog-btn-primary:hover {
  background: linear-gradient(
    180deg,
    #c4d5ee 0%,
    #a8c0e4 8%,
    #8eaad8 20%,
    #a8c0e4 50%,
    #8eaad8 80%,
    #a8c0e4 92%,
    #c4d5ee 100%
  );
}

.xp-dialog-btn-primary:active {
  background: linear-gradient(
    180deg,
    #8eaad8 0%,
    #a8c0e4 30%,
    #c4d5ee 60%,
    #a8c0e4 80%,
    #8eaad8 100%
  );
}

/* ==========================================================================
   Window Resize Handle
   ========================================================================== */

.window-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.window:hover .window-resize-handle {
  opacity: 1;
}

.window-resize-handle::before,
.window-resize-handle::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.window-resize-handle::before {
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  background:
    linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.18) 44%, transparent 44%),
    linear-gradient(135deg, transparent 54%, rgba(0,0,0,0.18) 54%, rgba(0,0,0,0.18) 58%, transparent 58%),
    linear-gradient(135deg, transparent 68%, rgba(0,0,0,0.18) 68%, rgba(0,0,0,0.18) 72%, transparent 72%);
}

.window-resize-handle::after {
  bottom: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background:
    linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.12) 44%, transparent 44%),
    linear-gradient(135deg, transparent 54%, rgba(0,0,0,0.12) 54%, rgba(0,0,0,0.12) 58%, transparent 58%),
    linear-gradient(135deg, transparent 68%, rgba(0,0,0,0.12) 68%, rgba(0,0,0,0.12) 72%, transparent 72%);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.xp-toast {
  pointer-events: auto;
  background: #ece9d8;
  border: 2px solid #0054e3;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.35);
  padding: 0;
  min-width: 220px;
  max-width: 320px;
  font-size: 12px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  animation: toast-in 0.3s ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.xp-toast:hover {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.45);
}

.xp-toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 8px;
}

.xp-toast.hiding {
  animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
  0% { opacity: 0; transform: translateX(40px) scale(0.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(40px) scale(0.95); }
}

/* Small XP-style titlebar on toast */
.xp-toast-titlebar {
  background: linear-gradient(
    180deg,
    #0058ee 0%,
    #3a8cff 15%,
    #0d47e3 30%,
    #2668e8 60%,
    #0f48de 85%,
    #0039c7 100%
  );
  padding: 2px 6px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xp-toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.xp-toast-body {
  flex: 1;
  overflow: hidden;
}

.xp-toast-message {
  color: #333;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}