/* =========================================================
   Liloo Chat — estilos complementares ao Tailwind
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --sidebar-w: 260px;
}

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

/* Sem transições no primeiro paint */
.preload *, .preload *::before, .preload *::after { transition: none !important; }

/* Transição suave de cores ao trocar tema (fallback sem View Transitions) */
.theme-transition, .theme-transition *, .theme-transition *::before, .theme-transition *::after {
  transition: background-color .35s var(--ease-in-out), color .35s var(--ease-in-out),
              border-color .35s var(--ease-in-out), fill .35s, stroke .35s !important;
}

/* View Transitions: revelação circular */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* Ícones */
[data-icon] { display: inline-flex; flex-shrink: 0; }
[data-icon] > svg { width: 100%; height: 100%; }

/* ---------- Animações ---------- */
@keyframes fade-up   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in    { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes blink     { 50% { opacity: 0; } }
@keyframes bounce-dot { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes collapse  { to { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.97); } }

.animate-in   { animation: fade-up .5s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.animate-fade { animation: fade-in .35s var(--ease-out) both; }
.animate-out  { animation: collapse .28s var(--ease-in-out) forwards; overflow: hidden; }

/* ---------- Botões ---------- */
.btn-icon {
  display: inline-grid; place-items: center;
  height: 36px; width: 36px; border-radius: 10px;
  color: rgb(82 82 82);
  transition: background-color .2s, color .2s, transform .15s var(--ease-out);
}
.btn-icon:hover { background: rgb(0 0 0 / .05); color: rgb(23 23 23); }
.btn-icon:active { transform: scale(.94); }
.dark .btn-icon { color: rgb(180 180 180); }
.dark .btn-icon:hover { background: rgb(255 255 255 / .07); color: #fff; }

:focus-visible { outline: 2px solid rgb(139 92 246 / .6); outline-offset: 2px; border-radius: 10px; }

.chip {
  display: none; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: rgb(82 82 82);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
@media (min-width: 480px) { .chip { display: inline-flex; } }
.chip:hover { background: rgb(0 0 0 / .05); }
.chip.active { background: rgb(139 92 246 / .1); color: rgb(109 40 217); }
.dark .chip { color: rgb(180 180 180); }
.dark .chip:hover { background: rgb(255 255 255 / .07); }
.dark .chip.active { background: rgb(139 92 246 / .18); color: rgb(196 181 253); }

/* Enviar / Parar */
.send-btn {
  position: relative; display: grid; place-items: center;
  height: 36px; width: 36px; border-radius: 999px;
  background: #0d0d0d; color: #fff;
  transition: background-color .25s, opacity .25s, transform .2s var(--ease-out);
}
.send-btn:hover:not(:disabled) { transform: scale(1.06); }
.send-btn:active:not(:disabled) { transform: scale(.94); }
.send-btn:disabled { background: rgb(0 0 0 / .1); color: rgb(255 255 255); cursor: default; }
.dark .send-btn { background: #fff; color: #0d0d0d; }
.dark .send-btn:disabled { background: rgb(255 255 255 / .15); color: rgb(33 33 33); }
.send-btn > [data-icon] { position: absolute; transition: opacity .25s, transform .35s var(--ease-out); }
.send-btn .icon-stop { opacity: 0; transform: scale(.4) rotate(-90deg); }
.send-btn.is-generating .icon-send { opacity: 0; transform: scale(.4) translateY(-6px); }
.send-btn.is-generating .icon-stop { opacity: 1; transform: none; }

/* Alternador de tema */
.theme-toggle { position: relative; }
.theme-toggle > [data-icon] { position: absolute; transition: opacity .4s, transform .5s var(--ease-out); }
.theme-toggle .icon-moon { opacity: 1; transform: none; }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
.dark .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
.dark .theme-toggle .icon-sun { opacity: 1; transform: none; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; overflow: hidden;
  transition: width .35s var(--ease-out), transform .35s var(--ease-out);
}
.sidebar-inner { width: var(--sidebar-w); transition: opacity .25s; }
.sidebar.collapsed { width: 0; }
.sidebar.collapsed .sidebar-inner { opacity: 0; }

.overlay {
  position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .4);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}

@media (max-width: 767px) {
  .sidebar {
    position: fixed; inset-block: 0; left: 0; z-index: 40;
    transform: translateX(-100%); box-shadow: none;
  }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgb(0 0 0 / .2); }
  .overlay.show { opacity: 1; pointer-events: auto; }
}

/* Botões que aparecem com a sidebar fechada */
.collapse-x {
  max-width: 220px; opacity: 1; overflow: hidden; flex-shrink: 0;
  transition: max-width .4s var(--ease-out), opacity .3s var(--ease-out), transform .4s var(--ease-out);
}
.collapse-x.is-hidden { max-width: 0; opacity: 0; transform: translateX(-8px); pointer-events: none; }
.collapse-x-right { padding: 2px; margin: -2px; }
.collapse-x-right.is-hidden { transform: scale(.8); padding: 0; margin: 0; }

/* Navegação em grupo (Módulos) */
.nav-group-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 10px; border-radius: 12px; font-size: 14px; font-weight: 500; text-align: left;
  transition: background-color .2s;
}
.nav-group-btn:hover { background: rgb(0 0 0 / .05); }
.dark .nav-group-btn:hover { background: rgb(255 255 255 / .05); }
.nav-group-btn[aria-pressed="true"] { background: rgb(0 0 0 / .07); }
.dark .nav-group-btn[aria-pressed="true"] { background: rgb(255 255 255 / .07); }
.nav-count { font-size: 12px; font-weight: 400; color: rgb(115 115 115); }
.dark .nav-count { color: rgb(163 163 163); }
.history-back {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px 8px; font-size: 12px; font-weight: 500;
  color: rgb(115 115 115); border-radius: 10px; transition: color .2s;
}
.history-back:hover { color: rgb(23 23 23); }
.dark .history-back:hover { color: #fff; }
.nav-group-btn .chev { transition: transform .35s var(--ease-out); }
.nav-group-btn[aria-expanded="false"] .chev { transform: rotate(-90deg); }

.nav-sub { position: relative; margin: 2px 0 4px 19px; padding-left: 10px; border-left: 1px solid rgb(0 0 0 / .08); }
.dark .nav-sub { border-color: rgb(255 255 255 / .08); }
.nav-sub li { animation: fade-up .35s var(--ease-out) both; }
.nav-sub li:nth-child(2) { animation-delay: 40ms; }
.nav-sub li:nth-child(3) { animation-delay: 80ms; }
.nav-sub li:nth-child(4) { animation-delay: 120ms; }
.nav-sub li:nth-child(5) { animation-delay: 160ms; }
.nav-sub-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px; font-size: 14px; color: rgb(64 64 64);
  transition: background-color .2s, color .2s, transform .2s var(--ease-out);
}
.nav-sub-item [data-icon] { color: rgb(115 115 115); transition: color .2s; }
.nav-sub-item:hover { background: rgb(0 0 0 / .05); color: rgb(23 23 23); }
.nav-sub-item:hover [data-icon] { color: inherit; }
.nav-sub-item:active { transform: scale(.98); }
.nav-sub-item.active { background: rgb(0 0 0 / .07); color: rgb(23 23 23); font-weight: 500; }
.nav-sub-item.active::before { /* marcador na linha-guia */
  content: ''; position: absolute; left: -11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: currentColor;
}
.dark .nav-sub-item { color: rgb(200 200 200); }
.dark .nav-sub-item [data-icon] { color: rgb(150 150 150); }
.dark .nav-sub-item:hover, .dark .nav-sub-item.active { background: rgb(255 255 255 / .06); color: #fff; }

/* Avatar do header */
.avatar-btn { display: grid; place-items: center; border-radius: 999px; padding: 2px;
  transition: box-shadow .25s, transform .2s var(--ease-out); }
.avatar-btn:hover { box-shadow: 0 0 0 3px rgb(0 0 0 / .06); }
.avatar-btn:active { transform: scale(.94); }
.avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgb(139 92 246 / .35); }
.dark .avatar-btn:hover { box-shadow: 0 0 0 3px rgb(255 255 255 / .1); }
.popover.origin-tr { transform-origin: top right; }

.brand-logo { display: inline-flex; align-items: center; transition: opacity .2s, transform .25s var(--ease-out); }
.brand-logo:hover { opacity: .8; }
.brand-logo:active { transform: scale(.97); }

.search-box { background: rgb(0 0 0 / .04); transition: background-color .2s, box-shadow .2s; }
.search-box:focus-within { background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }
.dark .search-box { background: rgb(255 255 255 / .05); }
.dark .search-box:focus-within { background: rgb(255 255 255 / .08); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }

.history-group-title {
  padding: 14px 10px 6px; font-size: 12px; font-weight: 500; color: rgb(115 115 115);
}
.history-item {
  position: relative; display: flex; align-items: center; width: 100%;
  border-radius: 10px; padding: 8px 10px; font-size: 14px; text-align: left;
  transition: background-color .18s;
}
.history-item:hover, .history-item.menu-open { background: rgb(0 0 0 / .05); }
.history-item.active { background: rgb(0 0 0 / .07); }
.dark .history-item:hover, .dark .history-item.menu-open { background: rgb(255 255 255 / .05); }
.dark .history-item.active { background: rgb(255 255 255 / .08); }
.history-item .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.history-item .more {
  display: grid; place-items: center; height: 24px; width: 24px; border-radius: 6px;
  opacity: 0; transition: opacity .15s, background-color .15s; color: rgb(115 115 115);
}
.history-item:hover .more, .history-item.active .more, .history-item.menu-open .more { opacity: 1; }
.history-item .more:hover { background: rgb(0 0 0 / .07); color: inherit; }
.dark .history-item .more:hover { background: rgb(255 255 255 / .1); }
@media (hover: none) { .history-item .more { opacity: 1; } }
.history-item input {
  flex: 1; min-width: 0; background: transparent; outline: none;
  border-radius: 6px; box-shadow: 0 0 0 1px rgb(139 92 246 / .6); padding: 0 4px; margin: -1px -4px;
}

/* ---------- Popovers ---------- */
.popover {
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97);
  transform-origin: top left; pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out), visibility 0s .22s;
}
.popover.popover-up { transform-origin: bottom center; transform: translateY(6px) scale(.97); }
.popover.open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out), visibility 0s;
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 10px; font-size: 14px; text-align: left;
  transition: background-color .15s;
}
.menu-item:hover { background: rgb(0 0 0 / .05); }
.dark .menu-item:hover { background: rgb(255 255 255 / .07); }
.model-item .check { opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease-out); margin-top: 2px; }
.model-item.selected .check { opacity: 1; transform: none; }
[data-popover] .chev { transition: transform .3s var(--ease-out); }
[data-popover][aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---------- Sugestões ---------- */
.suggestion {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 14px 16px; border-radius: 16px; border: 1px solid rgb(229 229 229);
  transition: background-color .2s, border-color .2s, transform .25s var(--ease-out), box-shadow .25s;
}
.suggestion:hover { background: rgb(250 250 250); transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgb(0 0 0 / .15); }
.suggestion:active { transform: translateY(0) scale(.99); }
.dark .suggestion { border-color: rgb(255 255 255 / .08); }
.dark .suggestion:hover { background: rgb(255 255 255 / .04); box-shadow: none; }

/* ---------- Composer ---------- */
.composer { transition: box-shadow .25s, border-color .25s; }
.composer:focus-within { border-color: rgb(212 212 212); box-shadow: 0 6px 30px -10px rgb(0 0 0 / .18); }
.dark .composer:focus-within { border-color: rgb(255 255 255 / .16); }

/* ---------- Mensagens ---------- */
.typing { display: inline-flex; gap: 5px; align-items: center; height: 28px; }
.typing span { height: 7px; width: 7px; border-radius: 999px; background: currentColor; animation: bounce-dot 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

.msg-actions { opacity: 0; transform: translateY(-2px); transition: opacity .2s, transform .25s var(--ease-out); }
.msg:hover .msg-actions, .msg:last-child .msg-actions, .msg-actions:focus-within { opacity: 1; transform: none; }
@media (hover: none) { .msg-actions { opacity: 1; transform: none; } }
.msg-actions .btn-icon { height: 30px; width: 30px; border-radius: 8px; }
.msg-actions .btn-icon.on { color: rgb(124 58 237); }
.dark .msg-actions .btn-icon.on { color: rgb(196 181 253); }

.streaming .md > :last-child::after {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 999px;
  background: currentColor; vertical-align: middle; animation: blink 1s steps(1) infinite;
}

/* Conteúdo markdown */
.md { font-size: 15.5px; line-height: 1.75; overflow-wrap: anywhere; }
.md > * + * { margin-top: .85em; }
.md h3 { font-size: 1.1em; font-weight: 600; margin-top: 1.4em; }
.md strong { font-weight: 600; }
.md ul, .md ol { padding-left: 1.4em; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li + li { margin-top: .3em; }
.md li::marker { color: rgb(163 163 163); }
.md :not(pre) > code {
  font-size: .87em; padding: .15em .4em; border-radius: 6px;
  background: rgb(0 0 0 / .06); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dark .md :not(pre) > code { background: rgb(255 255 255 / .1); }
.code-block { border-radius: 14px; overflow: hidden; background: #f7f7f8; border: 1px solid rgb(0 0 0 / .05); }
.dark .code-block { background: #171717; border-color: rgb(255 255 255 / .06); }
.code-block header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 16px; font-size: 12px; color: rgb(115 115 115);
}
.code-block header button {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px;
  transition: background-color .15s, color .15s;
}
.code-block header button:hover { background: rgb(0 0 0 / .06); color: rgb(38 38 38); }
.dark .code-block header button:hover { background: rgb(255 255 255 / .08); color: #fff; }
.code-block pre { padding: 4px 16px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.65; }
.code-block code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Rolar para baixo */
.scroll-down { opacity: 0; transform: translate(-50%, 8px) scale(.9); pointer-events: none;
  transition: opacity .25s, transform .3s var(--ease-out); }
.scroll-down.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed; z-index: 70; pointer-events: none;
  padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 500;
  background: #0d0d0d; color: #fff; white-space: nowrap;
  opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .2s var(--ease-out);
}
.tooltip.show { opacity: 1; transform: none; }
.dark .tooltip { background: #fff; color: #0d0d0d; }
@media (hover: none) { .tooltip { display: none; } }

/* ---------- Toast ---------- */
.toast {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px;
  background: #0d0d0d; color: #fff; font-size: 14px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4);
  animation: toast-in .35s var(--ease-out) both;
}
.toast.out { animation: toast-out .25s var(--ease-in-out) forwards; }
.dark .toast { background: #fff; color: #0d0d0d; }

/* ---------- Scrollbar ---------- */
.scroll-thin { scrollbar-width: thin; scrollbar-color: rgb(0 0 0 / .15) transparent; }
.dark .scroll-thin { scrollbar-color: rgb(255 255 255 / .15) transparent; }
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgb(0 0 0 / .15); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.dark .scroll-thin::-webkit-scrollbar-thumb { background-color: rgb(255 255 255 / .15); }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   Zoom da interface: unidades de viewport (vh/dvh) também são
   ampliadas pelo zoom do <html>; dividimos por --zoom para que
   as telas continuem ocupando exatamente 100% da altura.
   ========================================================= */
:root { --zoom: 1; --vh100: calc(100dvh / var(--zoom)); }
.h-dvh { height: calc(100dvh / var(--zoom, 1)) !important; }
.min-h-dvh { min-height: calc(100dvh / var(--zoom, 1)) !important; }
.min-h-dvh-4 { min-height: calc(100dvh / var(--zoom, 1) - 4rem); }

/* --- auditoria: alvos de toque no celular --- */
@media (max-width: 600px) {
  .brand-logo { padding: 8px 4px; margin: -8px -4px; }
}