/* Shared, restrained visual system for the chat and sign-in pages. */
:root {
  --surface: rgba(12, 25, 43, .82);
  --surface-raised: rgba(20, 37, 58, .92);
  --line: rgba(161, 194, 226, .15);
  --muted: #a7b8cb;
  --accent: #70b8ff;
}

@keyframes ambient-drift {
  0%, 100% { background-position: 0% 45%; }
  50% { background-position: 100% 55%; }
}

body.chat-page,
body.login-page {
  background: linear-gradient(120deg, #081321 4%, #102b46 35%, #102d37 62%, #0b1931 96%) !important;
  background-size: 220% 220% !important;
  animation: ambient-drift 38s ease-in-out infinite;
  color: #edf4fb;
}

/* Chat shell */
.chat-page .screen-notice-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, #132a43, #0c1c30);
  color: #edf4fb;
  box-shadow: 0 24px 70px rgba(1, 9, 22, .45);
  animation: screen-notice-in 240ms ease-out both;
}
.chat-page .screen-notice-dialog::backdrop {
  background: rgba(3, 12, 23, .65); backdrop-filter: blur(5px);
  animation: screen-notice-backdrop-in 240ms ease-out both;
}
.chat-page .screen-notice-dialog.is-closing { animation: screen-notice-out 180ms ease-in both; }
.chat-page .screen-notice-dialog.is-closing::backdrop { animation: screen-notice-backdrop-out 180ms ease-in both; }
@keyframes screen-notice-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes screen-notice-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(5px) scale(.98); }
}
@keyframes screen-notice-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes screen-notice-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
.chat-page .screen-notice-icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  margin-bottom: 16px; border: 1px solid rgba(112, 184, 255, .3);
  border-radius: 11px; background: rgba(112, 184, 255, .12);
  color: #acd5ff; font-size: 20px; font-weight: 600;
}
.chat-page .screen-notice-dialog h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.chat-page .screen-notice-dialog p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.chat-page .screen-notice-dialog form { display: flex; justify-content: flex-end; margin-top: 24px; }
.chat-page .screen-notice-dialog button {
  min-height: 40px; padding: 0 22px; border: 0; border-radius: 10px;
  background: #3379bf; color: #fff; font: inherit; font-size: 14px; cursor: pointer;
}
.chat-page .screen-notice-dialog button:hover { background: #438ed2; }
.chat-page .screen-notice-dialog button:focus-visible { outline: 2px solid #acd5ff; outline-offset: 3px; }
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .chat-page .screen-notice-dialog {
    width: min(420px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    padding: 22px 20px;
    border-radius: 16px;
  }
  .chat-page .screen-notice-dialog h2 { font-size: 17px; }
  .chat-page .screen-notice-dialog p { font-size: 15px; overflow-wrap: anywhere; }
  .chat-page .screen-notice-dialog form { margin-top: 20px; }
  .chat-page .screen-notice-dialog button { width: 100%; min-height: 48px; font-size: 15px; touch-action: manipulation; }
}
.chat-page .app-header {
  min-height: 68px;
  background: transparent !important;
  border-color: var(--line) !important;
}
.chat-page .header-logo {
  background: #eaf3ff !important;
  border-radius: 12px !important;
}
.chat-page .app-header h1 { font-weight: 600; letter-spacing: -.02em; }
.chat-page .header-actions { gap: 10px !important; }
.chat-page #status-indicator { color: var(--muted); font-size: 12px; }
.chat-page #status-indicator .animate-pulse { animation: none; background: #5bd4af; }
.chat-page #current-user { color: var(--muted); }
.chat-page .parking-lot-dropdown-btn,
.chat-page .screen-dropdown-btn,
.chat-page .history-btn,
.chat-page .quick-dropdown-btn {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: #d9e5f2;
  box-shadow: none;
}
.chat-page .parking-lot-dropdown-btn:hover,
.chat-page .screen-dropdown-btn:hover,
.chat-page .history-btn:hover,
.chat-page .quick-dropdown-btn:hover {
  border-color: rgba(135, 190, 243, .38);
  background: rgba(112, 184, 255, .1);
  color: #fff;
}
.chat-page .parking-lot-dropdown-menu,
.chat-page .screen-dropdown-menu,
.chat-page .quick-dropdown-menu,
.chat-page .mobile-user-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #13253b;
  box-shadow: 0 18px 42px rgba(1, 9, 22, .3);
}
.chat-page #chat-messages {
  min-height: 0;
  padding: 28px clamp(18px, 4vw, 64px) !important;
  scrollbar-color: rgba(142, 172, 204, .35) transparent;
}
.chat-page #chat-messages > .message-bubble {
  width: min(100%, 920px);
  margin-right: auto;
  margin-left: auto;
}
.chat-page #welcome-area {
  max-width: 760px;
  min-height: 100%;
  margin: auto;
}
.chat-page .welcome-mark {
  width: 58px;
  height: 58px;
  background: rgba(112, 184, 255, .13);
  border: 1px solid rgba(112, 184, 255, .27);
  color: #acd5ff;
  font-size: 29px;
  box-shadow: none;
}
.chat-page #welcome-area h2 {
  color: #f5f8fc;
  font-size: clamp(23px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -.035em;
}
.chat-page .welcome-hint { color: var(--muted); }
.chat-page #quick-questions { width: min(100%, 540px); margin-top: 24px; }
.chat-page .quick-btn {
  padding: 11px 14px;
  border-color: var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #d6e3f0;
}
.chat-page .quick-btn:hover { border-color: rgba(112, 184, 255, .45); background: rgba(112, 184, 255, .1); }
.chat-page .ai-bubble {
  border: 1px solid var(--line);
  background: rgba(15, 30, 49, .9);
  box-shadow: 0 8px 26px rgba(2, 12, 26, .1);
}
.chat-page .user-bubble { background: #245a93; box-shadow: none; }
.chat-page .ai-bubble.dashboard-answer-bubble { width: 100%; max-width: 100%; }
.chat-page .number-card,
.chat-page .chart-container {
  border-color: var(--line);
  background: rgba(8, 21, 37, .75);
  box-shadow: none;
}
.chat-page .chart-dashboard-container { min-height: 0 !important; padding: 16px; }
.chat-page .chart-dashboard-container .chart-inner { height: auto !important; }
.chat-page .dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.chat-page .dashboard-metric-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
}
.chat-page .dashboard-metric-label { display: block; color: var(--muted); font-size: 12px; }
.chat-page .dashboard-metric-value { display: block; margin-top: 5px; color: var(--accent); font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .chat-page .dashboard-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .chat-page .dashboard-card-grid { grid-template-columns: 1fr; }
}
.chat-page > footer {
  position: relative;
  z-index: 51;
  padding-top: 15px;
  padding-bottom: 17px;
  border-color: var(--line) !important;
  background: transparent !important;
}
.chat-page footer .max-w-3xl { max-width: 880px; }
.chat-page #user-input {
  min-height: 43px;
  border-color: var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
  color: #f4f8fd;
}
.chat-page #user-input::placeholder { color: #97abc0; }
.chat-page #user-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(112, 184, 255, .12); }
.chat-page #send-btn { min-height: 43px; border-radius: 11px; background: #3379bf; box-shadow: none; }
.chat-page #send-btn:hover { background: #438ed2; }
.chat-page .history-panel {
  top: 68px;
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
}
.chat-page .history-new-chat-primary,
.chat-page .history-rail-toggle {
  border-color: var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  box-shadow: none;
}

/* Sign-in shell */
.login-page::before { display: none; }
.login-page .login-shell { background: transparent; }
.login-page .login-shell::before,
.login-page .brand-panel::before,
.login-page .form-panel::before,
.login-page .ambient,
.login-page .parking-perspective,
.login-page .form-orb,
.login-page .logo-halo,
.login-page .logo-orbit { display: none; }
.login-page .brand-panel { border-color: var(--line); background: transparent; }
.login-page .form-panel { background: transparent; }
.login-page .logo-stage img { box-shadow: 0 12px 30px rgba(2, 12, 26, .2); }
.login-page .art-title { filter: none; }
.login-page .art-title span,
.login-page .art-title strong { -webkit-text-stroke: 0; background-image: none; color: #eaf4ff; text-shadow: none; }
.login-page .art-title strong { color: #8dc5f5; }
.login-page .capability-card { border-color: var(--line); background: rgba(255, 255, 255, .035); box-shadow: none; }
.login-page .security-note span { box-shadow: none; }
.login-page form {
  border-color: rgba(161, 194, 226, .2);
  border-radius: 20px;
  background: rgba(11, 26, 44, .84);
  box-shadow: 0 22px 70px rgba(2, 10, 22, .22);
  backdrop-filter: blur(20px);
}
.login-page form::before { display: none; }
.login-page .login-chip { border-color: var(--line); background: rgba(255, 255, 255, .045); }
.login-page .eyebrow { color: #9bc8f1; }
.login-page .subtitle,
.login-page .help { color: var(--muted); }
.login-page input { border-color: rgba(161, 194, 226, .23); background: rgba(4, 15, 28, .52); }
.login-page input::placeholder { color: #90a5bb; }
.login-page .login-button { border: 0; background: #3379bf; box-shadow: none; }
.login-page .login-button:hover { background: #438ed2; box-shadow: none; }

@media (max-width: 768px) {
  .chat-page header.app-header { background: transparent !important; border-color: var(--line) !important; }
  .chat-page .mobile-parking-label { background: #0c2035; color: var(--muted); }
  .chat-page .parking-lot-dropdown-btn { border-color: var(--line); background: rgba(255, 255, 255, .045); }
  .chat-page .parking-lot-dropdown-btn:hover { background: rgba(112, 184, 255, .1); }
  .chat-page #chat-messages { padding: 16px 12px !important; }
  .chat-page .history-panel {
    top: 111px;
    /* The mobile drawer covers content, so it needs its own opaque copy. */
    background: linear-gradient(120deg, #081321 4%, #102b46 35%, #102d37 62%, #0b1931 96%);
    background-size: 220% 220%;
    animation: ambient-drift 38s ease-in-out infinite;
  }
  .chat-page .mobile-header-btn,
  .chat-page .screen-dropdown-btn { color: #d9e5f2; }
  .chat-page .welcome-hint { max-width: 245px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-page .screen-notice-dialog,
  .chat-page .screen-notice-dialog::backdrop { animation: none; }
  body.chat-page,
  body.login-page { animation: none; background-position: 50% 50%; }
  .chat-page .message-bubble,
  .chat-page #welcome-area.welcome-animate { animation: none; }
  .chat-page .history-panel { animation: none; }
}