/* ============================================================
   Aitai — sistema visual
   Encontro de duas formas, carvao profundo e rosa queimado.
   ============================================================ */
:root {
  --night: #0c0e12;
  --night2: #15181e;
  --ink: #f4f0ec;
  --muted: #aaa5a3;
  --faint: #706d70;
  --rose: #df7b8c;
  --coral: #dc8d7d;
  --violet: #a9a3b2;
  --teal: #9ba7a3;
  --gold: #d8b58b;
  --ok: #78b39a;
  --grad: linear-gradient(135deg, #dc8d7d 0%, #df758a 100%);
  --grad-soft: rgba(223, 123, 140, .12);
  --glass: rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .09);
  --shadow: 0 26px 72px rgba(0, 0, 0, .46);
  --radius: 26px;
}

body {
  background: #0c0e12;
  color: var(--ink);
}
.aurora {
  background:
    radial-gradient(800px 560px at 92% -12%, rgba(223,123,140,.09), transparent 60%),
    radial-gradient(760px 560px at -8% 108%, rgba(220,141,125,.07), transparent 62%),
    #0c0e12;
}
.aitai-mark {
  display: block;
  object-fit: contain;
  border-radius: 30%;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
.brand {
  color: var(--ink);
  letter-spacing: -.75px;
}
.brand .jp { color: #8f8b8d; }
.btn, .choice-card, .round, .icon-btn, .nav button, .nav > a, .gear-btn, .help-btn {
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(223,123,140,.8);
  outline-offset: 2px;
}

@media (min-width: 900px) {
  .topbar-tools { grid-template-columns: minmax(0,1fr) 38px 38px !important; }
  .topbar-tools .gear-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    color: var(--muted);
  }
}

@media (max-width: 899px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  #app {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    background: linear-gradient(180deg, #11141a 0%, #0c0e12 45%, #0b0d11 100%);
    backdrop-filter: none;
    overflow: hidden;
  }

  /* Header compacto: marca, capacidade e configuracoes. */
  .topbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: max(11px, env(safe-area-inset-top)) 15px 10px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    background: rgba(14,16,21,.94);
    backdrop-filter: blur(18px);
  }
  .brand-wrap { min-width: 0; gap: 9px; }
  .brand-wrap .aitai-mark { width: 37px !important; height: 37px !important; flex: none; }
  .topbar .brand { font-size: 23px; line-height: .92; white-space: nowrap; }
  .topbar .brand .jp { font-size: 8.5px; letter-spacing: 2.4px; margin-top: 5px; }
  .topbar-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 7px !important;
    min-width: 0;
  }
  .topbar .slotpill {
    height: 38px;
    min-width: 68px;
    justify-content: center;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.09);
    font-size: 11px;
  }
  .topbar .slotpill .ui-icon { width: 15px; height: 15px; }
  .topbar .help-btn { display: none !important; }
  .topbar .gear-btn {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    color: var(--muted);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.09);
    font-size: 0;
  }
  .topbar .gear-btn::before {
    content: "";
    width: 17px;
    height: 17px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa5a3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.13.38.34.72.6 1 .3.3.7.45 1.1.4H21v4h-.09a1.7 1.7 0 0 0-1.51.6Z'/%3E%3C/svg%3E");
  }
  .rail-user { display: none !important; }

  /* Toda pagina fica contida entre header e navegacao. */
  .view {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 15px 14px calc(16px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  .view > * { max-width: 100%; }
  .view:not(.v-discover):not(.v-chat) .page-head {
    display: block;
    margin: 2px 2px 18px;
  }
  .view:not(.v-discover):not(.v-chat) .page-head span {
    display: block;
    color: var(--rose);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .view:not(.v-discover):not(.v-chat) .page-head h1 {
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -.8px;
  }
  .view:not(.v-discover):not(.v-chat) .page-head p {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 6px;
  }

  /* Descobrir */
  .view.v-discover { padding: 11px 14px 8px; }
  .discover, .deck-col {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .deck {
    width: 100%;
    height: clamp(360px, calc(100dvh - 255px), 600px);
    max-height: none;
    margin: 0;
  }
  .swipe-card {
    border-radius: 25px;
    border-color: rgba(255,255,255,.11);
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
  }
  .portrait::after {
    background: linear-gradient(180deg, transparent 36%, rgba(10,12,16,.1) 50%, rgba(10,12,16,.96) 100%);
  }
  .swipe-card .info { padding: 23px 21px 21px; }
  .swipe-card h2 { font-size: 29px; letter-spacing: -.7px; }
  .swipe-card h2 small { font-size: 14px; }
  .swipe-card .nat { font-size: 12px; margin: 4px 0 9px; color: rgba(244,240,236,.72); }
  .swipe-card .tag { font-size: 14.5px; line-height: 1.42; }
  .deck-actions {
    min-height: 72px;
    gap: 18px;
    margin: 10px 0 0;
  }
  .round { width: 58px; height: 58px; background: rgba(20,23,29,.92); }
  .round.big { width: 64px; height: 64px; }
  .round.info { width: 52px; height: 52px; }

  /* Cards e formularios seguem a mesma linguagem. */
  .card, .rel-item, .row, .plan-card, .seg {
    border-radius: 17px;
    border-color: rgba(255,255,255,.085);
    background: rgba(255,255,255,.035);
  }
  .relationship-grid { min-width: 0; }
  .rel-item { gap: 11px; padding: 11px; }
  .rel-item .avatar { width: 52px; height: 52px; border-radius: 15px; }
  .rel-item .meta h3 { font-size: 14px; min-width: 0; }
  .rel-actions { gap: 5px; }
  .rel-actions .icon-btn { width: 34px; height: 34px; }
  .profile-edit-card, .profile-overview, .profile-preferences, .profile-connections { padding: 16px; }

  /* Chat toma a tela inteira e respeita os safe areas. */
  .view.v-chat { padding: 0 !important; }
  .chat-head {
    flex: none;
    padding: max(11px, env(safe-area-inset-top)) 14px 11px;
    background: rgba(18,21,27,.97);
  }
  .chat-scroll { min-width: 0; padding: 18px 14px; }
  .msg { max-width: 84%; }
  .chat-input {
    flex: none;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(18,21,27,.97);
  }
  .chat-input input { min-width: 0; }
  .chat-input button { width: 46px; min-width: 46px; height: 46px; }

  /* Navegacao inferior estavel, sem estourar em 320 px. */
  .nav {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 67px;
    padding: 5px 5px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(13,15,20,.97);
    backdrop-filter: blur(18px);
  }
  .nav button, .nav > a {
    min-width: 0;
    padding: 7px 2px 4px;
    gap: 3px;
    font-size: 9.5px;
    line-height: 1.15;
    border-radius: 12px;
  }
  .nav button .ic, .nav > a .ic { width: 22px; height: 22px; }
  .nav button .ic .ui-icon, .nav > a .ic .ui-icon { width: 19px; height: 19px; }
  .nav button.active, .nav > a.active {
    color: var(--rose);
    background: rgba(223,123,140,.08);
  }
  .navbadge { top: 4px; right: 18%; }

  .modal-back { padding: 12px; }
  .modal:not(.persona-editor-modal) { border-radius: 20px; padding: 18px; }
}

@media (max-width: 370px) {
  .topbar { padding-left: 12px; padding-right: 12px; gap: 7px; }
  .brand-wrap { gap: 7px; }
  .brand-wrap .aitai-mark { width: 34px !important; height: 34px !important; }
  .topbar .brand { font-size: 21px; }
  .topbar .brand .jp { display: none; }
  .topbar .slotpill { min-width: 61px; padding: 0 8px; }
  .topbar-tools { gap: 5px !important; }
  .deck { height: clamp(340px, calc(100dvh - 246px), 560px); }
  .swipe-card .info { padding: 20px 18px; }
  .swipe-card h2 { font-size: 26px; }
  .swipe-card .tag { font-size: 13.5px; }
  .deck-actions { gap: 14px; }
}