/* ============================================================
   Kriou.Web — home.css
   Tokens exclusivamente via var(--*) de brand.kriou.com
   ============================================================ */

/* ── RESET / BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 68px;
    height: 100%;
}
body {
    height: 100%;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2.8rem;
    position: relative;
    z-index: 1;
}
@media (max-width: 680px) { .shell { padding: 0 1.4rem; } }

.dot   { color: var(--terra); }
.eyebrow {
    font-family: var(--font-mono); font-size: .67rem;
    text-transform: uppercase; letter-spacing: .20em;
    color: var(--terra); display: inline-flex; align-items: center; gap: .75rem;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--terra); flex-shrink: 0; }

/* ── HEADER ───────────────────────────────────────────────── */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(237,233,226,.93);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--border-s);
    transition: box-shadow .3s;
}
.hdr-shell {
    display: flex; align-items: center;
    justify-content: space-between; height: 64px;
}
.wordmark {
    font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500;
    color: var(--ink); text-decoration: none; letter-spacing: -.018em; flex-shrink: 0;
    cursor: pointer;
}
.wordmark::after { content: "."; color: var(--terra); }

nav.primary { display: flex; align-items: center; gap: .2rem; }
nav.primary a {
    color: var(--ink-2); text-decoration: none; font-size: .875rem;
    padding: .42rem .85rem; border-radius: var(--r);
    border-bottom: 1.5px solid transparent;
    transition: color .18s, background .18s, border-color .18s;
}
nav.primary a:hover { color: var(--ink); background: var(--paper-alt); }
nav.primary a.active { color: var(--terra); border-bottom-color: var(--terra); }

.hdr-right { display: flex; align-items: center; gap: 1.2rem; }

.locale {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
    display: flex; align-items: center;
}
.locale button {
    background: none; border: none; color: var(--ink-3); cursor: pointer;
    padding: .28rem .4rem; font-family: inherit; font-size: inherit; transition: color .2s;
}
.locale button.on { color: var(--terra); font-weight: 600; }
.locale-sep { color: var(--ink-4); font-size: .75rem; margin: 0 .05rem; }

.btn-entrar {
    display: inline-flex; align-items: center;
    font-family: var(--font-sans); font-size: .85rem; font-weight: 600;
    padding: .52rem 1.3rem; border-radius: var(--r);
    background: var(--ink); color: var(--paper);
    text-decoration: none; border: none; cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-entrar:hover {
    background: var(--terra); transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(159,80,56,.22);
}

@media (max-width: 640px) {
    nav.primary a:not(.active) { display: none; }
    .locale { display: none; }
    .hdr-shell { height: 56px; }
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
    padding: 10rem 0 7rem; position: relative; overflow: hidden;
    min-height: 88vh; display: flex; align-items: center;
}
.hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 900px 500px at 8% 35%, rgba(159,80,56,.065) 0%, transparent 58%),
        radial-gradient(ellipse 600px 350px at 92% 70%, rgba(92,112,72,.045) 0%, transparent 55%);
}
.hero-rule {
    position: absolute; top: 10%; right: 0; width: 1px; height: 80%;
    background: linear-gradient(to bottom, transparent, var(--border-s) 20%, var(--border-s) 80%, transparent);
    opacity: .4;
}
.hero-inner { display: grid; grid-template-columns: 1fr 400px; gap: 5rem; align-items: center; }
@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-panel { display: none; }
    .hero { min-height: auto; padding-bottom: 5rem; }
}

.hero h1 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(3rem,5.5vw,5.2rem); line-height: 1.02;
    letter-spacing: -.030em; margin: 1.4rem 0 2rem; max-width: 15ch;
}
.hero h1 em { font-style: italic; color: var(--terra); }
.hero .lead {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.2rem,2vw,1.48rem); line-height: 1.42;
    color: var(--ink-2); max-width: 44ch; margin-bottom: 1.6rem;
}
.hero .support {
    font-size: .93rem; color: var(--ink-3); line-height: 1.76;
    max-width: 50ch; margin-bottom: 2.8rem;
}
.hero .support strong { color: var(--ink-2); font-weight: 500; }

.ctas { display: flex; gap: .9rem; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none; font-size: .875rem; font-weight: 600;
    padding: .82rem 1.65rem; border-radius: var(--r);
    transition: all .2s; cursor: pointer; border: none;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover {
    background: var(--terra); transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(159,80,56,.22);
}
.btn-ghost { color: var(--ink-2); border: 1px solid var(--border-s); background: none; }
.btn-ghost:hover { color: var(--ink); background: var(--paper-alt); }
.arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }

/* Status panel */
.hero-panel {
    background: var(--paper-alt); border: 1px solid var(--border-s);
    border-radius: var(--r); padding: 2rem;
    box-shadow: 0 2px 18px rgba(80,60,40,.07), inset 0 0 0 1px rgba(255,255,255,.18);
    position: relative;
}
.hero-panel::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 3px; height: 100%; background: var(--terra);
    border-radius: var(--r) 0 0 var(--r);
}
.panel-lbl {
    font-family: var(--font-mono); font-size: .62rem;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--terra); margin-bottom: 1.4rem;
}
.panel-row {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: .82rem 0; border-bottom: 1px solid var(--border);
}
.panel-row:last-child { border-bottom: none; padding-bottom: 0; }
.pip { width: 7px; height: 7px; border-radius: 50%; margin-top: .52rem; flex-shrink: 0; }
.pip.building { background: var(--terra); animation: pulse 2s ease-in-out infinite; }
.pip.ready    { background: var(--olive); }
.pip.soon     { background: var(--ink-4); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.panel-copy { font-size: .84rem; color: var(--ink-2); line-height: 1.48; }
.panel-copy strong { color: var(--ink); font-weight: 600; font-size: .87rem; display: block; margin-bottom: .1rem; }
.panel-copy .tag {
    font-family: var(--font-mono); font-size: .58rem;
    text-transform: uppercase; letter-spacing: .12em; color: var(--ink-4);
}

/* ── PRODUTOS ─────────────────────────────────────────────── */
.section-produtos {
    padding: 7rem 0;
    background: var(--paper-alt);
    border-top: 1px solid var(--border-s);
    border-bottom: 1px solid var(--border-s);
}
.sec-head { margin-bottom: 3.6rem; }
.sec-head h2 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(2.2rem,3.8vw,3.1rem); line-height: 1.05;
    letter-spacing: -.025em; margin: 1.2rem 0 1rem;
}
.sec-head h2 em { font-style: italic; color: var(--terra); }
.sec-head p {
    font-family: var(--font-serif); font-style: italic;
    font-size: 1.1rem; color: var(--ink-2); line-height: 1.5; max-width: 52ch;
}

/* Grid — alinhamento perfeito entre os 6 cards */
.produtos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    align-items: stretch;  /* todos os cards mesma altura por linha */
}
@media (max-width: 900px) { .produtos-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .produtos-grid { grid-template-columns: 1fr; } }

.card {
    background: var(--paper);
    border: 1px solid var(--border-s);
    border-radius: var(--r);
    padding: 2.2rem 1.8rem;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 4px rgba(80,60,40,.05);
    transition: transform .22s, box-shadow .22s;
    position: relative; overflow: hidden;
    text-decoration: none; color: inherit; cursor: pointer;
}
.card::after {
    content: ""; position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: var(--terra); transform: scaleX(0);
    transform-origin: left; transition: transform .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(80,60,40,.12); }
.card:hover::after { transform: scaleX(1); }
.card-num {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em;
    color: var(--ink-3); text-transform: uppercase; margin-bottom: 1.4rem;
    display: flex; align-items: center; justify-content: space-between;
}
.card-status {
    font-family: var(--font-mono); font-size: .56rem;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .18rem .5rem; border-radius: 3px; white-space: nowrap;
}
.card-status.building { background: rgba(181,67,30,.10); color: var(--terra); border: 1px solid rgba(181,67,30,.22); }
.card-status.soon     { background: rgba(139,127,114,.09); color: var(--ink-3); border: 1px solid var(--border-s); }
.card-big {
    font-family: var(--font-serif); font-style: italic; font-size: 3.6rem;
    line-height: 1; color: var(--terra); opacity: .10; margin-bottom: .4rem;
    transition: opacity .22s; user-select: none;
}
.card:hover .card-big { opacity: .18; }
.card h3 {
    font-family: var(--font-serif); font-weight: 500; font-size: 1.45rem;
    line-height: 1.1; letter-spacing: -.015em; margin-bottom: .9rem; color: var(--ink);
}
.card h3 em { font-style: italic; color: var(--terra); }
.card p { font-size: .88rem; color: var(--ink-2); line-height: 1.68; flex-grow: 1; margin-bottom: 0; }
.card-foot {
    padding-top: 1.2rem; margin-top: 1.6rem;
    border-top: 1px solid var(--border-s);
    display: flex; align-items: center; justify-content: space-between;
}
.card-tag { font-family: var(--font-mono); font-size: .59rem; text-transform: uppercase; letter-spacing: .10em; color: var(--ink-3); }
.card-arr { color: var(--ink-3); transition: color .2s, transform .2s; }
.card:hover .card-arr { color: var(--terra); transform: translateX(3px); }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
    background: var(--night); border-top: 1px solid rgba(255,255,255,.05);
    padding: 5rem 0 4rem; text-align: center;
    position: relative; overflow: hidden;
}
.site-footer::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(159,80,56,.06) 0%, transparent 70%);
    pointer-events: none;
}
.footer-wordmark {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 400;
    color: rgba(255,255,255,.78); margin-bottom: 2.4rem;
    line-height: 1.2; position: relative; z-index: 1;
}
.footer-sep { width: 32px; height: 1px; background: rgba(255,255,255,.1); margin: 0 auto 2.2rem; position: relative; z-index: 1; }
.footer-meta {
    font-family: var(--font-mono); font-size: .62rem;
    color: rgba(255,255,255,.18); letter-spacing: .12em;
    text-transform: uppercase; position: relative; z-index: 1;
}
.footer-meta span { margin: 0 .5rem; }

/* ── KRIA LANDING ─────────────────────────────────────────── */
.kria-landing-glow {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 700px 500px at 20% 40%, rgba(181,67,30,.055) 0%, transparent 60%),
        radial-gradient(ellipse 500px 400px at 80% 65%, rgba(92,112,72,.04) 0%, transparent 55%);
}
.kria-landing-inner {
    min-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 4rem 2rem; text-align: center;
    width: 100%; max-width: 760px; margin: 0 auto;
    position: relative; z-index: 1;
}
.kria-landing-eyebrow {
    font-family: var(--font-mono); font-size: .67rem;
    text-transform: uppercase; letter-spacing: .20em;
    color: var(--terra); display: inline-flex; align-items: center;
    gap: .75rem; margin-bottom: 2rem;
}
.kria-landing-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--terra); flex-shrink: 0; }
.kria-landing-h1 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(2.8rem,6vw,4.6rem); line-height: 1.0;
    letter-spacing: -.03em; margin-bottom: 1.4rem;
}
.kria-landing-h1 em { font-style: italic; color: var(--terra); }
.kria-landing-sub {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.1rem,2vw,1.35rem); line-height: 1.5;
    color: var(--ink-2); margin-bottom: 3rem; max-width: 46ch;
}
.kria-input-wrap { position: relative; width: 100%; max-width: 680px; margin: 0 auto 1.6rem; }
.kria-landing-input {
    width: 100%; padding: 1.1rem 4rem 1.1rem 1.5rem;
    background: var(--paper-alt); border: 1px solid var(--border-s);
    border-radius: 8px; font-family: var(--font-sans); font-size: 1rem;
    color: var(--ink); outline: none;
    box-shadow: 0 2px 12px rgba(80,60,40,.06), inset 0 0 0 1px rgba(255,255,255,.3);
    transition: border-color .2s, box-shadow .2s;
}
.kria-landing-input::placeholder { color: var(--ink-4); }
.kria-landing-input:focus {
    border-color: rgba(181,67,30,.4);
    box-shadow: 0 2px 12px rgba(80,60,40,.06), 0 0 0 3px rgba(181,67,30,.10), inset 0 0 0 1px rgba(255,255,255,.3);
}
.kria-landing-send {
    position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 6px;
    background: var(--terra); border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; cursor: pointer; transition: background .2s;
}
.kria-landing-send:hover { background: var(--terra-deep); }
.kria-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 3rem; }
.kria-chip {
    font-family: var(--font-sans); font-size: .82rem; color: var(--ink-2);
    background: none; border: 1px solid var(--border-s);
    border-radius: 100px; padding: .38rem .95rem;
    cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.kria-chip:hover { background: var(--paper-alt); color: var(--terra); border-color: rgba(181,67,30,.3); }
.kria-landing-meta {
    font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
    letter-spacing: .14em; color: var(--ink-4);
    display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap;
}
.kria-landing-meta span::before { content: "· "; }
.kria-landing-meta span:first-child::before { content: ""; }

/* ── KRIA CHAT — HEADER ───────────────────────────────────── */
.chat-header-center { display: flex; align-items: center; gap: .75rem; }
.chat-header-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(181,67,30,.12); border: 1px solid rgba(181,67,30,.25);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-style: italic; font-size: .95rem;
    color: var(--terra); font-weight: 500;
}
.chat-header-info { display: flex; flex-direction: column; gap: .05rem; }
.chat-header-name { font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.chat-header-status {
    font-family: var(--font-mono); font-size: .6rem;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--olive); line-height: 1.2;
}
.chat-header-status::before { content: "● "; font-size: .45rem; }
.btn-nova-conversa {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-sans); font-size: .82rem; font-weight: 500;
    padding: .45rem 1.1rem; border-radius: var(--r);
    background: none; border: 1px solid var(--border-s);
    color: var(--ink-2); cursor: pointer;
    transition: background .18s, color .18s;
}
.btn-nova-conversa:hover { background: var(--paper-alt); color: var(--ink); }

/* ── KRIA CHAT — LAYOUT PRINCIPAL ────────────────────────── */
/*
   Estrutura:
   <body> (height:100%)
     <header> fixo 64px
     <div class="chat-page-wrap"> (restante da viewport, flex coluna)
       <div class="chat-area"> (ocupa tudo, flex coluna)
         <div class="chat-messages"> (flex:1, scroll interno)
         <div class="chat-input-bar"> (fixo no fundo, sem crescer)
*/

/* wrapper que preenche o espaço abaixo do header */
.chat-page-wrap {
    position: fixed;
    top: 64px;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--paper);
}

/* chat-area precisa de position relative para o scroll-btn se ancorar */
.chat-area { position: relative; }

.chat-area {
    width: 100%;
    max-width: 766px;
    margin: 0 auto;
    padding: 0 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;   /* crucial — permite flex-child encolher abaixo do conteúdo */
}

/* ── MENSAGENS ────────────────────────────────────────────── */
.chat-messages {
    flex: 1;
    min-height: 0;      /* permite scroll interno */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 2rem 0 .5rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-s); border-radius: 4px; }

/* ── BALÕES ───────────────────────────────────────────────── */
@keyframes msgIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* Kria — sem fundo, texto direto, largura total */
.cmsg-kria {
    width: 100%;
    padding: .75rem 0;
    font-size: .95rem; line-height: 1.75;
    color: var(--ink-2);
    align-self: flex-start;
    word-break: break-word;
    animation: msgIn .18s ease both;
    cursor: text;
    border-bottom: 1px solid var(--border);
    position: relative; /* ancora ::before do copy marker — não afeta layout */
}
.cmsg-kria:last-of-type { border-bottom: none; }
.cmsg-kria strong { color: var(--ink); font-weight: 600; }

/* Usuário — balão escuro, alinhado à direita */
.cmsg-user {
    max-width: 68%;
    padding: .78rem 1.1rem;
    font-size: .93rem; line-height: 1.65;
    background: var(--ink);
    color: rgba(244,241,236,.92);
    align-self: flex-end;
    border-radius: 16px 4px 4px 16px;
    word-break: break-word;
    animation: msgIn .18s ease both;
    position: relative; /* ancora ::before do copy marker — não afeta layout */
}

/* Scroll-down button — fixo acima do input */
.scroll-down-btn {
    position: absolute;
    bottom: 5.5rem;   /* acima do input bar */
    left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--border-s);
    box-shadow: 0 2px 10px rgba(80,60,40,.14);
    color: var(--ink-2);
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    z-index: 20;
}
.scroll-down-btn:hover { background: var(--paper-alt); box-shadow: 0 3px 14px rgba(80,60,40,.18); }
.scroll-down-btn svg { display: block; }

/* ── TYPING DOTS ──────────────────────────────────────────── */
.cmsg-typing {
    width: 100%;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
    align-self: flex-start;
    display: none; gap: .35rem; align-items: center;
}
.cmsg-typing.visible { display: flex; }
.tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: tdot 1.2s ease-in-out infinite; }
.tdot:nth-child(2){animation-delay:.2s} .tdot:nth-child(3){animation-delay:.4s}
@keyframes tdot { 0%,80%,100%{transform:scale(.7);opacity:.5} 40%{transform:scale(1);opacity:1} }

/* ── INPUT BAR — grudada no fundo ─────────────────────────── */
.chat-input-bar {
    flex-shrink: 0;
    /* padding-bottom apertado pra texto beta ficar bem próximo da borda inferior.
       Mantém .8rem em cima (separa do scroll de mensagens). */
    padding: .8rem 0 .4rem;
    background: linear-gradient(to top, var(--paper) 60%, transparent);
}
.chat-input-inner { position: relative; }

.chat-main-input {
    width: 100%;
    padding: .9rem 3rem .9rem 1.1rem;
    background: var(--paper-alt);
    border: 1px solid var(--border-s);
    border-radius: 14px;
    font-family: var(--font-sans); font-size: .95rem; color: var(--ink);
    outline: none; resize: none;
    line-height: 1.6;
    min-height: 76px;
    max-height: 160px;
    overflow-y: hidden;
    box-shadow:
        0 1px 4px rgba(80,60,40,.05),
        0 4px 14px rgba(80,60,40,.05),
        inset 0 0 0 1px rgba(255,255,255,.30);
    transition: border-color .2s, box-shadow .2s;
    display: block;
}
.chat-main-input::placeholder { color: var(--ink-4); }
.chat-main-input:focus {
    border-color: rgba(181,67,30,.35);
    box-shadow:
        0 1px 4px rgba(80,60,40,.05),
        0 4px 14px rgba(80,60,40,.05),
        0 0 0 3px rgba(181,67,30,.08),
        inset 0 0 0 1px rgba(255,255,255,.30);
}
.chat-main-input:disabled { opacity: .5; cursor: not-allowed; }

.chat-main-send {
    position: absolute; right: .55rem; bottom: .55rem;
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--terra); border: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, opacity .15s, transform .1s;
}
.chat-main-send:hover:not(:disabled) { background: var(--terra-deep); transform: scale(1.07); }
.chat-main-send:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.chat-beta-note {
    font-family: var(--font-mono); font-size: .57rem;
    text-transform: uppercase; letter-spacing: .13em;
    color: var(--ink-4); text-align: center;
    /* Bem próximo do textarea — só um respirinho mínimo. */
    margin-top: .4rem;
}

/* ── REVEAL ───────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* SEM nth-child — causa desalinhamento em grid por alterar timing de layout */

/* ── SCROLLBAR GLOBAL ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-s); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ── MARKDOWN NO CHAT ─────────────────────────────────────── */

/* Parágrafos */
.cmsg-kria p, .cmsg-user p {
    margin: 0 0 .75rem;
    line-height: 1.75;
}
.cmsg-kria p:last-child,
.cmsg-user p:last-child { margin-bottom: 0; }

/* Bold / italic */
.cmsg-kria strong, .cmsg-user strong { color: var(--ink); font-weight: 700; }
.cmsg-user strong { color: rgba(244,241,236,.98); }
.cmsg-kria em, .cmsg-user em { font-style: italic; }

/* Headers */
.md-h1 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; line-height: 1.2; margin: 1.2rem 0 .6rem; color: var(--ink); }
.md-h2 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.2; margin: 1rem 0 .5rem; color: var(--ink); }
.md-h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.3; margin: .9rem 0 .4rem; color: var(--ink); letter-spacing: -.01em; }
.md-h1:first-child, .md-h2:first-child, .md-h3:first-child { margin-top: 0; }

/* Listas */
.md-ul, .md-ol {
    margin: .4rem 0 .75rem 1.3rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.md-ul li, .md-ol li {
    font-size: .93rem; line-height: 1.65; color: var(--ink-2);
}
.md-ul { list-style: disc; }
.md-ol { list-style: decimal; }

/* Blockquote */
.md-blockquote {
    border-left: 3px solid var(--terra);
    padding: .5rem .9rem;
    margin: .5rem 0 .75rem;
    background: rgba(181,67,30,.05);
    border-radius: 0 var(--r) var(--r) 0;
    font-style: italic;
    color: var(--ink-2);
    font-size: .9rem;
}

/* Separador */
.md-hr {
    border: none;
    border-top: 1px solid var(--border-s);
    margin: 1rem 0;
}

/* Inline code */
.md-code {
    font-family: var(--font-mono);
    font-size: .83em;
    background: var(--paper-deep);
    border: 1px solid var(--border-s);
    color: var(--terra);
    padding: .08em .38em;
    border-radius: 4px;
    white-space: nowrap;
}

/* Code block */
/* Code block — paleta brand Kriou (Night territory) */
.md-code-block {
    margin: .75rem 0 .9rem;
    border-radius: var(--r-lg, 8px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    background: #1A1812;   /* night ligeiramente mais claro que --night */
    font-size: .85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.md-code-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1rem;
    background: #0F0D09;   /* mais escuro — destaca como "topo" do bloco */
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.md-code-lang {
    font-family: var(--font-mono); font-size: .6rem;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--terra);   /* terra é o sotaque — igual ao brand */
    opacity: .85;
}
.md-copy-btn {
    font-family: var(--font-mono); font-size: .6rem;
    text-transform: uppercase; letter-spacing: .1em;
    color: rgba(192,184,174,.38);   /* --ink-4 adaptado pro Night */
    background: none; border: none; cursor: pointer;
    padding: .18rem .5rem; border-radius: 3px;
    transition: color .15s, background .15s;
}
.md-copy-btn:hover {
    color: rgba(244,241,236,.9);
    background: rgba(255,255,255,.07);
}
.md-copy-btn.copied { color: #7A9A5E; }  /* olive claro — sucesso */

/* Área de código */
.md-code-block pre {
    margin: 0; padding: 1rem 1.1rem;
    overflow-x: auto;
    font-family: var(--font-mono); font-size: .82rem;
    line-height: 1.7;
    /* Cores de token — paleta brand Kriou Night */
    color: #C8B89E;        /* --paper-deep degradado — corpo do código */
    white-space: pre;
}
.md-code-block pre code {
    background: none; border: none; padding: 0;
    color: inherit; font-size: inherit; white-space: inherit;
}

/* Syntax highlight — tokens alinhados com brand */
.md-code-block .tk-keyword  { color: #D17656; }  /* terra claro — keywords */
.md-code-block .tk-string   { color: #A8B87A; }  /* olive claro — strings */
.md-code-block .tk-comment  { color: #5C5248; font-style: italic; }  /* ink-3 escuro */
.md-code-block .tk-number   { color: #C89C5A; }  /* warn adaptado */
.md-code-block .tk-function { color: #8AABB8; }  /* info claro */
.md-code-block .tk-tag      { color: #D17656; }
.md-code-block .tk-attr     { color: #C89C5A; }
.md-code-block .tk-punct    { color: #7A6E5F; }  /* ink-3 */

.md-code-block pre::-webkit-scrollbar { height: 4px; }
.md-code-block pre::-webkit-scrollbar-track { background: transparent; }
.md-code-block pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

/* ── THINKING — estilo Claude ─────────────────────────────── */
.kria-thinking {
    width: 100%;
    margin: .3rem 0 .75rem;
    border-radius: var(--r);
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--border-s);
    font-size: .85rem;
    /* Mesma largura das mensagens da Kria — sem fundo card */
}

.kria-thinking-hd {
    width: 100%;
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .85rem;
    background: none; border: none; cursor: pointer;
    text-align: left; color: var(--ink-3);
    font-family: var(--font-sans); font-size: .82rem;
    transition: background .15s;
    user-select: none;
}
.kria-thinking-hd:hover { background: rgba(0,0,0,.03); color: var(--ink-2); }

.kria-thinking-ico {
    font-size: .9rem; flex-shrink: 0; line-height: 1;
    display: inline-block;
}
.kria-thinking-ico.spinning {
    animation: kriaThinkSpin 1.1s linear infinite;
}
@keyframes kriaThinkSpin { to { transform: rotate(360deg); } }

.kria-thinking-lbl { flex: 1; font-weight: 500; }

.kria-thinking-chevron {
    font-size: 1rem; color: var(--ink-4);
    transition: transform .2s ease;
    line-height: 1;
}

/* Conteúdo expandido */
.kria-thinking-bd {
    padding: .7rem .9rem .85rem;
    border-top: 1px solid var(--border-s);
    font-family: var(--font-mono); font-size: .76rem;
    line-height: 1.7; color: var(--ink-3);
    white-space: pre-wrap; word-break: break-word;
    max-height: 360px; overflow-y: auto;
    background: rgba(0,0,0,.015);
}
.kria-thinking-bd::-webkit-scrollbar { width: 3px; }
.kria-thinking-bd::-webkit-scrollbar-thumb {
    background: var(--border-s); border-radius: 3px;
}

/* ── BLOCKQUOTE COM COPY ─────────────────────────────────── */
.md-blockquote {
    position: relative;
    border-left: 3px solid var(--terra);
    padding: .6rem .9rem .6rem .9rem;
    margin: .5rem 0 .75rem;
    background: rgba(181,67,30,.05);
    border-radius: 0 var(--r) var(--r) 0;
    display: flex; align-items: flex-start; gap: .5rem;
}
.md-blockquote-content {
    flex: 1;
    font-style: italic; color: var(--ink-2); font-size: .9rem; line-height: 1.65;
}
.md-bq-copy {
    flex-shrink: 0;
    font-family: var(--font-mono); font-size: .75rem;
    color: var(--ink-4); background: none; border: none;
    cursor: pointer; padding: .15rem .3rem; border-radius: 3px;
    transition: color .15s, background .15s;
    margin-top: .05rem;
    line-height: 1;
}
.md-bq-copy:hover { color: var(--terra); background: rgba(181,67,30,.08); }
.md-bq-copy.copied { color: var(--olive); }

/* ── GERANDO PROJETO (loading inline) ───────────────────────── */
.md-generating {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .93rem; color: var(--ink-3); padding: .2rem 0;
}
.md-gen-icon {
    display: inline-block;
    animation: thinkSpin 1s linear infinite;
    font-size: 1rem;
}

/* ── CARD DE DOWNLOAD ────────────────────────────────────────── */
.md-download-card {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .8rem .55rem .9rem;
    background: var(--paper-alt);
    border: 1px solid var(--border-s);
    border-radius: var(--r);
    box-shadow: 0 1px 4px rgba(80,60,40,.06);
    animation: msgIn .2s ease both;
    /* Sem max-width — usa a largura da bolha pra ficar numa linha só */
    width: 100%;
}
.md-dl-icon {
    font-size: 1.1rem; flex-shrink: 0;
    line-height: 1;
}
.md-dl-info {
    flex: 1; min-width: 0;
    display: flex; align-items: baseline; gap: .6rem;
    overflow: hidden;
}
.md-dl-name {
    font-family: var(--font-sans); font-weight: 600;
    font-size: .88rem; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-shrink: 1; min-width: 0;
}
.md-dl-meta {
    font-family: var(--font-mono); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-4);
    white-space: nowrap; flex-shrink: 0;
    /* meta vira inline ao lado do nome, não embaixo */
}
.md-dl-meta::before {
    content: "·";
    margin-right: .55rem;
    color: var(--ink-4);
    opacity: .5;
}
.md-dl-btn {
    display: inline-flex; align-items: center;
    font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
    padding: .35rem .85rem; border-radius: var(--r);
    background: var(--ink); color: var(--paper);
    text-decoration: none; flex-shrink: 0;
    transition: background .18s, transform .12s;
    letter-spacing: .01em;
}
.md-dl-btn:hover {
    background: var(--terra);
    transform: translateY(-1px);
}

/* Em telas estreitas (mobile), volta pra layout vertical
   pra evitar truncar demais o nome do arquivo */
@media (max-width: 480px) {
    .md-dl-info {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
    }
    .md-dl-meta::before {
        display: none;
    }
}

/* ── WORKING INDICATOR (durante thinking) ────────────────── */
.kria-working {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 0;
    color: var(--ink-3);
}
.kria-working-lbl {
    font-size: .85rem;
    font-style: italic;
    color: var(--ink-3);
    animation: kriaPulse 2s ease-in-out infinite;
}
@keyframes kriaPulse {
    0%, 100% { opacity: .5; }
    50%       { opacity: 1; }
}
.kria-working-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ink-3);
    animation: kriaWave 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
.kria-working-dot:nth-child(2) { animation-delay: .2s; }
.kria-working-dot:nth-child(3) { animation-delay: .4s; }
@keyframes kriaWave {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40%           { transform: scale(1);  opacity: 1;  }
}

/* ── KRIA GEN PROGRESS CARD ────────────────────────────── */
/* Card evolutivo de progresso de geração de projeto.
   Aparece dentro da bolha da Kria durante a geração e é
   substituído pelo md-download-card quando termina. */

.kria-gen-card {
    border: 1px solid var(--border-m, rgba(80,68,50,.30));
    border-radius: var(--r, 5px);
    background: var(--paper-alt, #EFEAE2);
    padding: .8rem 1rem;
    margin: .2rem 0;
    font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
    font-size: .78rem;
    color: var(--ink-1, #1E1A14);
}

.kria-gen-head {
    display: flex; align-items: center; gap: .5rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--border-s, rgba(80,68,50,.15));
    margin-bottom: .65rem;
}
.kria-gen-icon  { color: var(--terra, #B5431E); font-size: 1rem; line-height: 1; }
.kria-gen-title { flex: 1; font-weight: 500; color: var(--ink-1, #1E1A14); }
.kria-gen-title strong { font-weight: 600; }
.kria-gen-elapsed {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .7rem;
    color: var(--ink-3, #8A7F72);
    font-variant-numeric: tabular-nums;
}

.kria-gen-stage {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .65rem;
    color: var(--ink-2, #46403A);
}
.kria-gen-stage-icon {
    color: var(--terra, #B5431E);
    font-size: .9rem; line-height: 1;
    width: 1rem; text-align: center;
    animation: kgen-pulse 1.4s ease-in-out infinite;
}
@keyframes kgen-pulse {
    0%, 100% { opacity: 1;   }
    50%      { opacity: .55; }
}
.kria-gen-stage-text { flex: 1; font-size: .78rem; }

.kria-gen-files {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .15rem;
    max-height: 13rem; overflow-y: auto;
    margin-bottom: .65rem;
}
.kria-gen-files .kria-gen-file,
.kria-gen-files .kria-gen-file .kria-gen-file-name,
.kria-gen-files .kria-gen-file .kria-gen-file-icon {
    /* Especificidade alta pra blindar contra qualquer cascata de
       .cmsg-kria li / .cmsg-kria code / etc. Mesma fonte e tamanho
       do header "Gerando arquivos..." (.kria-gen-stage-text). */
    font-family: var(--font-sans, 'Manrope', system-ui, sans-serif) !important;
    font-size: .78rem !important;
    font-weight: 400;
    letter-spacing: 0;
}

.kria-gen-file {
    display: flex; align-items: center; gap: .45rem;
    padding: .1rem 0;
    color: var(--ink-3, #8A7F72);
    transition: color .15s;
}
.kria-gen-file-icon {
    width: .8rem; text-align: center;
    flex-shrink: 0;
    color: inherit;
}
.kria-gen-file-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kria-gen-file-active {
    color: var(--terra, #B5431E);
}
.kria-gen-file-active .kria-gen-file-icon {
    animation: kgen-pulse 1.2s ease-in-out infinite;
}
.kria-gen-file-done {
    color: var(--ink-1, #1E1A14);
}
.kria-gen-file-done .kria-gen-file-icon {
    color: var(--terra, #B5431E);
    animation: none;
}

.kria-gen-progress { display: flex; align-items: center; gap: .8rem; }
.kria-gen-bar {
    flex: 1;
    height: 4px;
    background: var(--border-s, rgba(80,68,50,.15));
    border-radius: 2px;
    overflow: hidden;
}
.kria-gen-bar-fill {
    height: 100%;
    background: var(--terra, #B5431E);
    transition: width .35s ease;
    border-radius: 2px;
}
.kria-gen-counter {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: .7rem;
    color: var(--ink-3, #8A7F72);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.kria-gen-hint {
    margin-top: .55rem;
    font-size: .72rem;
    color: var(--ink-3, #8A7F72);
    font-style: italic;
}

/* ── MARKED.JS + HIGHLIGHT.JS ────────────────────────────── */

/* Parágrafos gerados pelo marked */
.cmsg-kria p { margin: 0 0 .75rem; line-height: 1.75; }
.cmsg-kria p:last-child { margin-bottom: 0; }

/* Listas */
.cmsg-kria ul, .cmsg-kria ol {
    margin: .4rem 0 .75rem 1.4rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.cmsg-kria li { font-size: .93rem; line-height: 1.65; }

/* Blockquote */
.cmsg-kria blockquote {
    border-left: 3px solid var(--terra);
    padding: .5rem .9rem;
    margin: .5rem 0 .75rem;
    background: rgba(181,67,30,.05);
    border-radius: 0 var(--r) var(--r) 0;
    font-style: italic; color: var(--ink-2); font-size: .9rem;
}

/* Inline code */
.cmsg-kria code:not(.hljs) {
    font-family: var(--font-mono); font-size: .83em;
    background: rgba(181,67,30,.08);
    border: 1px solid rgba(181,67,30,.15);
    color: var(--terra);
    padding: .08em .38em; border-radius: 4px;
    white-space: nowrap;
}

/* Bloco de código — paleta Kriou (fundo neutro, não escuro) */
.cmsg-kria pre {
    margin: .6rem 0 .85rem;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--border-s);
    position: relative;
    background: var(--paper-alt);
    box-shadow: 0 1px 4px rgba(80,60,40,.05);
}
.cmsg-kria pre code.hljs {
    font-family: var(--font-mono);
    font-size: .82rem; line-height: 1.7;
    padding: 1rem 1.1rem;
    display: block;
    overflow-x: auto;
    background: transparent !important; /* sobrescreve fundo do tema hljs */
    color: var(--ink);
}

/* Botão copiar — paleta Kriou */
/* ── FILE PILL — bloco de código retraído ────────────────── */
.kria-file-pill {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .75rem;
    background: var(--paper-alt);
    border: 1px solid var(--border-s);
    border-radius: var(--r);
    margin: .4rem 0 .3rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.kria-file-pill:hover { border-color: rgba(181,67,30,.25); background: var(--paper); }

.kria-pill-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }

.kria-pill-name {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--ink); font-weight: 500; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kria-pill-lang {
    font-family: var(--font-mono); font-size: .58rem;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--ink-4); flex-shrink: 0;
    background: var(--paper-deep);
    border: 1px solid var(--border-s);
    padding: .1rem .35rem; border-radius: 3px;
}
.kria-pill-btn {
    width: 24px; height: 24px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border-s);
    border-radius: 4px; cursor: pointer; color: var(--ink-3);
    transition: all .15s;
}
.kria-pill-btn svg { display: block; }
.kria-pill-btn:hover { color: var(--terra); border-color: rgba(181,67,30,.3); background: rgba(181,67,30,.05); }
.kria-pill-expand { transition: transform .2s, color .15s, border-color .15s, background .15s; }
.kria-pill-dl:hover { color: var(--terra); }

/* Headers gerados pelo marked */
.cmsg-kria h1 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; margin: 1.2rem 0 .6rem; color: var(--ink); }
.cmsg-kria h2 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; margin: 1rem 0 .5rem; color: var(--ink); }
.cmsg-kria h3 { font-size: 1rem; font-weight: 700; margin: .9rem 0 .4rem; color: var(--ink); }
.cmsg-kria h1:first-child, .cmsg-kria h2:first-child, .cmsg-kria h3:first-child { margin-top: 0; }

/* Separador */
.cmsg-kria hr { border: none; border-top: 1px solid var(--border-s); margin: 1rem 0; }

/* Strong e em */
.cmsg-kria strong { color: var(--ink); font-weight: 700; }
.cmsg-kria em { font-style: italic; }

/* ── BOTÃO BAIXAR TODOS ──────────────────────────────────── */
.kria-zip-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    margin: .5rem 0 .25rem;
    padding: .52rem 1.1rem;
    background: var(--ink); color: var(--paper);
    border: none; border-radius: var(--r);
    font-family: var(--font-sans); font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: background .18s, transform .12s;
}
.kria-zip-btn:hover { background: var(--terra); transform: translateY(-1px); }
.kria-zip-btn svg { display: block; flex-shrink: 0; }

/* ── COPY MARKERS — invisíveis na tela, presentes no clipboard ─────────────
   Quando o user seleciona texto do chat e copia (Ctrl+C), o navegador
   inclui o `content` dos pseudo-elementos no clipboard. Aqui usamos a
   técnica visualmente-escondida-mas-acessível (clip-path) pra que
   "Kria:" / "Você:" / "Sistema:" apareçam no texto colado, mas não na UI.

   Cole numa próxima sessão (ChatGPT, Claude, etc) e o contexto fica
   estruturado: cada turno identificado, fácil de processar.

   Compat: Chrome/Edge/Firefox modernos. Safari pode ignorar (degrada
   pro comportamento atual — sem marker, mas não quebra nada). */
.cmsg-kria::before,
.cmsg-user::before,
.kria-gen-card::before,
.md-download-card::before {
    /* `\A` força quebra de linha no clipboard, separando turnos */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: pre;
    font-size: 1rem; /* explicit pra Firefox não tratar como font-size: 0 */
    color: transparent;
    pointer-events: none;
    user-select: text; /* garante que vai junto na seleção */
}
.cmsg-kria::before        { content: "\AKria: "; }
.cmsg-user::before        { content: "\AVocê: "; }
.kria-gen-card::before    { content: "\A[Sistema] Gerando projeto: "; }
.md-download-card::before { content: "\A[Sistema] Projeto pronto para download: "; }

/* ── TOOL ERROR INLINE (k-tool-error) ────────────────────────────────────
   Erros técnicos de tools (search_web, generate_project) renderizados
   dentro do espaço da bolha da Kria. Visual diferente de bolha normal —
   borda em terracotta, ícone, fundo discreto — pra deixar claro que é
   aviso e não resposta dela.
──────────────────────────────────────────────────────────────────────────*/
.k-tool-error {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .65rem .85rem;
    background: var(--paper-alt, rgba(181,67,30,.05));
    border-left: 3px solid var(--terra, #B5431E);
    border-radius: var(--r, 5px);
    color: var(--ink-2, #46403A);
    font-size: .82rem;
    line-height: 1.5;
    max-width: 100%;
}
.k-tool-error-icon {
    color: var(--terra, #B5431E);
    font-size: 1rem;
    line-height: 1.4;
    flex-shrink: 0;
}
.k-tool-error-msg {
    flex: 1;
}

/* ── BARRA DE SALDO (k-wallet-meter) ──────────────────────────────────────
   Termômetro do saldo do plano. Persistente acima do textarea.
   Sutil — fundo claro, fill colorido por faixa de % consumido.
   Texto pequeno mostra créditos absolutos no canto direito.
   Clica e abre /account/plano (mesmo destino do system-notice).
──────────────────────────────────────────────────────────────────────────*/
.k-wallet-meter {
    /* Barra fininha logo acima do input, segue largura do input-inner */
    margin: 0 0 .5rem 0;
    height: 4px;
    background: rgba(80,68,50,.10);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: opacity .2s;
    overflow: visible;
}
.k-wallet-meter:hover { opacity: .85; }

.k-wallet-meter-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;                              /* JS atualiza */
    background: var(--w-color, #6BA66B);    /* JS atualiza por faixa */
    transition: width .4s ease, background-color .3s ease;
}

.k-wallet-meter-text {
    position: absolute;
    right: 0;
    top: -16px;                             /* texto acima da barra */
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-3, #8A7F72);
    letter-spacing: .02em;
    user-select: none;
    pointer-events: none;
}

/* Link "Adicionar créditos →" que aparece junto do texto quando saldo
   está em faixa de alerta (≤10% ou =0%). Visualmente parte do mesmo
   bloco de texto, mas clicável. Position: absoluto também, alinhado
   à direita do texto via flex-row no container imaginário. */
.k-wallet-meter-cta {
    position: absolute;
    right: 0;
    top: -16px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #B5431E;                         /* terracotta — destaque sem agressivo */
    letter-spacing: .02em;
    cursor: pointer;
    pointer-events: auto;                   /* clicável (override do meter) */
    transition: color .2s, transform .2s;
}
.k-wallet-meter-cta:hover {
    color: #8B3A3A;
    transform: translateX(2px);
}

/* Quando há CTA visível, o texto neutro recua à esquerda dele.
   right baseado em um espaço fixo aproximado do tamanho do link
   "Adicionar créditos →" (~140px em 10px). */
.k-wallet-meter:has(.k-wallet-meter-cta:not([hidden])) .k-wallet-meter-text {
    right: 140px;
}

/* Faixas de cor por % usado (variável CSS controlada pelo JS).
   Verde >50% saldo, amarelo 20-50%, laranja 5-20%, vermelho <5%. */
.k-wallet-meter[data-level="ok"]       .k-wallet-meter-fill { background: #6BA66B; }
.k-wallet-meter[data-level="medium"]   .k-wallet-meter-fill { background: #C9A648; }
.k-wallet-meter[data-level="low"]      .k-wallet-meter-fill { background: #C97F3A; }
.k-wallet-meter[data-level="critical"] .k-wallet-meter-fill { background: #B5431E; }
.k-wallet-meter[data-level="empty"]    .k-wallet-meter-fill { background: #8B3A3A; }

/* No nível "empty" o texto fica mais marcado (vermelho discreto) */
.k-wallet-meter[data-level="empty"] .k-wallet-meter-text {
    color: #8B3A3A;
    font-weight: 600;
}

/* ── USER AVATAR + DROPDOWN ──────────────────────────────── */
.user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-weight: 600; font-size: .85rem;
    transition: background .18s, transform .12s;
    text-decoration: none;
    flex-shrink: 0;
}
.user-avatar:hover { background: var(--terra); transform: scale(1.05); }
.user-avatar-guest { background: none; border: 1.5px solid var(--border-s); color: var(--ink-2); }
.user-avatar-guest:hover { border-color: var(--terra); color: var(--terra); background: none; transform: none; }
.user-avatar-initial { line-height: 1; pointer-events: none; }

/* Botão "Entrar" no header (guest) — padrão btn-ghost btn-sm do brand book */
.nav-enter {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 1px solid var(--border-m, rgba(80,68,50,.30));
    color: var(--ink-2, #46403A);
    padding: .4rem .9rem;
    font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--r, 5px);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    flex-shrink: 0;
}
.nav-enter:hover {
    border-color: var(--terra, #B5431E);
    color: var(--terra, #B5431E);
    background: transparent;
}


.user-menu-wrap { position: relative; }

.user-dropdown {
    position: absolute; top: calc(100% + .6rem); right: 0;
    min-width: 200px;
    background: var(--paper);
    border: 1px solid var(--border-s);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 24px rgba(80,60,40,.12), 0 2px 6px rgba(80,60,40,.08);
    z-index: 300;
    overflow: hidden;
    animation: dropIn .14s ease both;
}
@keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.user-dropdown-info {
    padding: .85rem 1rem .75rem;
}
.user-dropdown-name {
    font-size: .88rem; font-weight: 600; color: var(--ink);
    margin-bottom: .15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-dropdown-email {
    font-size: .75rem; color: var(--ink-4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.user-dropdown-sep {
    height: 1px; background: var(--border-s); margin: 0;
}

.user-dropdown-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem 1rem;
    font-size: .85rem; color: var(--ink-2);
    text-decoration: none;
    transition: background .12s, color .12s;
    cursor: pointer;
}
.user-dropdown-item:hover { background: var(--paper-alt); color: var(--ink); }
.user-dropdown-item svg { flex-shrink: 0; color: var(--ink-3); }
.user-dropdown-item:hover svg { color: var(--ink-2); }

.user-dropdown-danger { color: var(--terra); }
.user-dropdown-danger:hover { background: rgba(181,67,30,.06); color: var(--terra); }
.user-dropdown-danger svg { color: var(--terra); opacity: .7; }

/* Avatar com imagem */
.user-avatar-img {
    overflow: hidden;
    padding: 0;
    border: 1.5px solid var(--border-s);
    background: var(--paper-alt);
}
.user-avatar-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.user-avatar-img:hover {
    border-color: var(--terra);
    background: var(--paper-alt);
}

/* ── Toast de chegada de crédito ──────────────────────────────────────────
   Aparece quando polling detecta saldo aumentando (pagamento em outra aba).
   Float bottom-center pra não competir com input bar — fica visível mas não
   intrusivo. Animação suave de entrada/saída. */
.k-credit-toast {
    position: fixed;
    bottom: 80px;                           /* acima do input bar */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #6BA66B, #4a7d4a);
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: 0 10px 30px rgba(0,0,0,.15), 0 4px 12px rgba(74,125,74,.4);
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
}
.k-credit-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.k-credit-toast strong {
    font-weight: 700;
    color: #fff;
}

/* ── Estado: sem créditos ─────────────────────────────────────────────────
   Quando cliente está sem saldo, input fica visualmente desabilitado.
   Cliente pode digitar (rascunho preservado), só não envia.
   Estilo similar a WhatsApp sem conexão: não trava, comunica visualmente. */
.chat-input-bar--no-credit .chat-input-inner {
    opacity: .55;
    pointer-events: none;          /* impede focar no textarea ou botão */
}
.chat-input-bar--no-credit .chat-main-input {
    background: var(--paper-alt, #f5ebe0);
    cursor: not-allowed;
}
.chat-input-bar--no-credit .chat-main-send {
    background: var(--ink-4, #8A7F72);
    cursor: not-allowed;
}
.chat-input-bar--no-credit .chat-main-send:hover {
    background: var(--ink-4, #8A7F72);  /* sem hover nesse estado */
    transform: none;
}

/* Mas o textarea continua focável pra cliente digitar rascunho — apenas o
   container externo bloqueia eventos. Excessão: re-permite cliques no
   próprio textarea pra digitar (não envia, mas escreve). */
.chat-input-bar--no-credit .chat-main-input {
    pointer-events: auto;
    cursor: text;
}