/* Minimal responsive polish layer.
   UI-only overrides for landing, auth, logged-in shell, modals, and Aura. */

:root {
  --ec-wide-shell: min(1240px, calc(100% - 32px));
  --ec-page-shell: min(1240px, calc(100% - 40px));
  --ec-mobile-shell: calc(100% - 14px);
}

html,
body {
  overflow-x: hidden;
}

body {
  -webkit-tap-highlight-color: transparent;
}

/* Landing layout balance */
#landing-screen .lp-wrap,
#landing-screen #lp-hero .lp-hero-inner,
#landing-screen #lp-lang-section > div {
  width: var(--ec-page-shell) !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
}

#landing-screen .lp-section {
  padding-block: clamp(5rem, 7vw, 7.25rem) !important;
}

#landing-screen .lp-section-head {
  max-width: 860px;
}

#landing-screen .lp-grid-two {
  gap: clamp(28px, 4vw, 52px);
}

#landing-screen .lp-pricing-grid {
  gap: 16px !important;
  background: transparent !important;
}

#landing-screen .lp-plan,
#landing-screen .lp-lifetime,
#landing-screen .lp-wbox,
#landing-screen .lp-panel,
#landing-screen .lp-panel-soft,
#landing-screen .lp-truth-card,
#landing-screen .lp-roadmap-card {
  box-shadow: 0 28px 72px -52px rgba(0, 0, 0, 0.94) !important;
}

#landing-screen #lp-premium .lp-bento {
  gap: 16px !important;
}

#landing-screen .lp-reserve-row {
  align-items: stretch;
}

#landing-screen #lp-lang-btn {
  max-width: min(100%, 360px);
}

#landing-screen #lp-lang-menu {
  max-width: min(320px, calc(100vw - 28px));
}

/* Desktop shell polish */
@media (min-width: 1180px) {
  html body #rooms-screen .top-bar,
  html body #chat-screen .chat-top-bar,
  html body #chat-screen #messages,
  html body #chat-screen .input-bar,
  html body #reply-bar,
  html body #chat-screen .enc-indicator,
  html body #chat-screen #onion-bar,
  html body #vault-screen > div:nth-child(1),
  html body #vault-screen > div:nth-child(2),
  html body #vault-screen > div:nth-child(3),
  html body #vault-screen #vault-content,
  html body #rooms-screen .rooms-list {
    width: var(--ec-wide-shell) !important;
  }

  #landing-screen #lp-hero .lp-hero-inner {
    max-width: 980px !important;
  }

  #login-screen > div:first-child,
  #setup-new > div:first-child,
  #setup-join > div:first-child,
  #recovery-screen > div:first-child {
    width: min(980px, calc(100% - 48px)) !important;
  }

  #login-screen form,
  #setup-new > div:last-child,
  #setup-join > div:last-child,
  #recovery-screen > div:last-child,
  #pin-screen > div:last-child {
    width: min(560px, 100%) !important;
  }

  #settings-modal > .modal,
  #profile-modal > .modal,
  #profile-sub-modal > .modal,
  #notes-modal > .modal,
  #sessions-modal > .modal,
  #admin-modal > .modal,
  #room-picker-modal > .modal,
  #create-room-modal > .modal,
  #join-room-modal > .modal,
  #room-options-modal > .modal,
  #vault-upload-modal > .modal,
  #vault-pw-modal > .modal,
  #vault-note-modal > .modal {
    max-width: min(760px, 92vw) !important;
  }

  #profile-modal > .modal,
  #settings-modal > .modal,
  #admin-modal > .modal {
    max-width: min(820px, 92vw) !important;
  }
}

/* Tablet adjustments */
@media (max-width: 960px) {
  #landing-screen .lp-wrap,
  #landing-screen #lp-hero .lp-hero-inner,
  #landing-screen #lp-lang-section > div {
    width: calc(100% - 28px) !important;
  }

  #landing-screen #lp-premium .lp-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #landing-screen .lp-pricing-grid {
    grid-template-columns: 1fr !important;
  }

  #landing-screen .lp-plan,
  #landing-screen .lp-lifetime {
    border-radius: 24px !important;
  }

  #landing-screen .lp-reserve-row {
    flex-direction: column;
  }

  #landing-screen .lp-reserve-row > button {
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }

  #landing-screen #lp-lang-menu {
    right: 0 !important;
    left: auto !important;
  }
}

/* Mobile safe-area and compact polish */
@media (max-width: 720px) {
  #splash,
  #login-screen,
  #setup-new,
  #setup-join,
  #recovery-screen,
  #pin-screen {
    padding-inline: 10px !important;
  }

  #splash > div:last-child {
    width: var(--ec-mobile-shell) !important;
    padding: 24px 16px 22px !important;
    border-radius: 24px !important;
  }

  #splash-back-nav {
    width: var(--ec-mobile-shell) !important;
    top: max(12px, env(safe-area-inset-top, 12px));
    padding: 0 2px;
  }

  #splash-back-nav .splash-back-btn {
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
  }

  #login-screen > div:first-child,
  #setup-new > div:first-child,
  #setup-join > div:first-child,
  #recovery-screen > div:first-child {
    width: var(--ec-mobile-shell) !important;
    margin-top: max(10px, env(safe-area-inset-top, 10px)) !important;
    padding: 12px 14px !important;
    border-radius: 20px !important;
  }

  #login-screen > div:last-child,
  #setup-new > div:last-child,
  #setup-join > div:last-child,
  #recovery-screen > div:last-child,
  #pin-screen > div:last-child {
    width: var(--ec-mobile-shell) !important;
    padding-inline: 0 !important;
  }

  #login-screen form,
  #setup-new > div:last-child,
  #setup-join > div:last-child,
  #recovery-screen > div:last-child,
  #pin-screen > div:last-child {
    margin: 16px auto 24px !important;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px !important;
  }

  #login-screen input,
  #setup-new input,
  #setup-new textarea,
  #setup-join input,
  #recovery-screen input,
  #pin-screen input,
  #login-screen textarea,
  #setup-join textarea,
  #recovery-screen textarea {
    font-size: 16px !important;
  }

  #splash [id="lang-picker-dropdown"],
  #lp-lang-menu {
    max-width: min(280px, calc(100vw - 24px)) !important;
  }

  #landing-screen .lp-wrap,
  #landing-screen #lp-hero .lp-hero-inner,
  #landing-screen #lp-lang-section > div {
    width: calc(100% - 24px) !important;
  }

  #landing-screen .lp-section {
    padding-block: 4.25rem !important;
  }

  #landing-screen #lp-hero .lp-hero-inner {
    padding-inline: 0 !important;
  }

  #landing-screen #lp-hero .lp-hero-stage::after,
  #landing-screen .lp-motion-dust,
  #landing-screen [data-lp-parallax] {
    opacity: 0.5;
  }

  #landing-screen #lp-hero-canvas {
    opacity: 0.72;
  }

  #landing-screen #lp-premium .lp-bento {
    grid-template-columns: 1fr !important;
  }

  #landing-screen #lp-premium .lp-bento > * {
    grid-column: auto !important;
  }

  #landing-screen .lp-pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #landing-screen .lp-plan,
  #landing-screen .lp-lifetime,
  #landing-screen .lp-wbox,
  #landing-screen .lp-panel,
  #landing-screen .lp-panel-soft,
  #landing-screen .lp-roadmap-card,
  #landing-screen .lp-truth-card {
    border-radius: 22px !important;
  }

  #landing-screen .lp-cta-actions {
    gap: 12px;
  }

  #landing-screen .lp-cta-actions > * {
    min-height: 52px;
  }

  #landing-screen #lp-lang-btn {
    width: min(100%, 320px) !important;
    justify-content: center !important;
  }

  html body #rooms-screen .top-bar,
  html body #chat-screen .chat-top-bar,
  html body #chat-screen #messages,
  html body #chat-screen .input-bar,
  html body #reply-bar,
  html body #vault-screen > div:nth-child(1),
  html body #vault-screen > div:nth-child(2),
  html body #vault-screen > div:nth-child(3),
  html body #vault-screen #vault-content,
  html body #rooms-screen .rooms-list {
    width: calc(100% - 12px) !important;
  }

  html body #chat-screen .input-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body #chat-screen #messages {
    padding-bottom: 148px !important;
  }

  #settings-modal,
  #profile-modal,
  #profile-sub-modal,
  #notes-modal,
  #sessions-modal,
  #admin-modal,
  #room-picker-modal,
  #create-room-modal,
  #join-room-modal,
  #room-options-modal,
  #vault-upload-modal,
  #vault-pw-modal,
  #vault-note-modal {
    padding: max(10px, env(safe-area-inset-top, 10px)) 6px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
  }

  #settings-modal > .modal,
  #profile-modal > .modal,
  #profile-sub-modal > .modal,
  #notes-modal > .modal,
  #sessions-modal > .modal,
  #admin-modal > .modal,
  #room-picker-modal > .modal,
  #create-room-modal > .modal,
  #join-room-modal > .modal,
  #room-options-modal > .modal,
  #vault-upload-modal > .modal,
  #vault-pw-modal > .modal,
  #vault-note-modal > .modal {
    width: min(100%, calc(100vw - 12px)) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 12px) !important;
    border-radius: 24px !important;
  }

  #aura-fab {
    right: max(10px, env(safe-area-inset-right, 10px)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #aura-chat-window {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: min(86dvh, 680px) !important;
    border-radius: 24px !important;
  }

  #aura-messages {
    padding-inline: 14px !important;
  }

  .aura-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 480px) {
  #landing-screen .lp-wrap,
  #landing-screen #lp-hero .lp-hero-inner,
  #landing-screen #lp-lang-section > div {
    width: calc(100% - 18px) !important;
  }

  #landing-screen .lp-section {
    padding-block: 3.75rem !important;
  }

  #landing-screen #lp-hero-canvas {
    opacity: 0.62;
  }

  #landing-screen #lp-lang-menu,
  #splash [id="lang-picker-dropdown"] {
    min-width: 0 !important;
    width: min(100vw - 24px, 280px) !important;
  }

  #aura-chat-window {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    height: min(85dvh, 660px) !important;
  }

  .aura-header {
    padding: 14px 14px 12px !important;
  }
}

#landing-screen #lp-footer {
  padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px)) !important;
}

#landing-screen #lp-footer .lp-footer-inner {
  row-gap: 1rem !important;
}

@media (max-width: 820px) {
  #landing-screen #lp-footer {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  #landing-screen #lp-footer .lp-footer-links {
    gap: 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  #landing-screen .lp-hero-device,
  #landing-screen .lp-device-ring,
  #landing-screen .lp-flow-path::before,
  #landing-screen .lp-flow-dot,
  #landing-screen .lp-motion-dust span,
  #landing-screen [data-lp-parallax],
  #landing-screen .lp-depth-tilt,
  #aura-fab,
  #aura-fab::before,
  .aura-avatar-holo,
  .aura-avatar-holo.thinking,
  .aura-holo-scan {
    animation: none !important;
    transform: none !important;
  }
}