:root {
  --fundo: #f5f1ea;
  --superficie: #fffdf9;
  --borda: #e7e0d5;
  --tinta: #2b2622;
  --sutil: #7c7268;
  --acento: #d9734e;
  --acento-2: #e9a85b;
  --ouvindo: #4f9d7e;
  --pensando: #8a7fd1;
  --bolha-eu: #2b2622;
  --bolha-eu-texto: #f5f1ea;
  --bolha-ela: #fffdf9;
  --sombra: 0 1px 2px rgba(43, 38, 34, .05), 0 8px 24px rgba(43, 38, 34, .06);
  --raio: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #171513;
    --superficie: #211e1b;
    --borda: #34302b;
    --tinta: #eee8e0;
    --sutil: #a2988d;
    --bolha-eu: #eee8e0;
    --bolha-eu-texto: #171513;
    --bolha-ela: #2a2622;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #171513; --superficie: #211e1b; --borda: #34302b; --tinta: #eee8e0; --sutil: #a2988d;
  --bolha-eu: #eee8e0; --bolha-eu-texto: #171513; --bolha-ela: #2a2622; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }
button, input, select { font: inherit; color: inherit; }
button {
  border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px;
  padding: .55em 1.1em; cursor: pointer; transition: transform .1s, background .2s;
}
button:hover { background: var(--fundo); }
button:active { transform: scale(.97); }
.btn-primario { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.btn-primario:hover { background: var(--tinta); opacity: .9; }
.sutil { color: var(--sutil); }
kbd { font: 600 .8em "DM Sans", sans-serif; border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 6px; padding: 0 .4em; }

/* ---------- orb ---------- */
.orb {
  --cor: var(--acento);
  width: 140px; height: 140px; border-radius: 50%; padding: 0; border: none;
  background: radial-gradient(circle at 35% 30%, var(--acento-2), var(--cor) 60%, color-mix(in srgb, var(--cor) 70%, #000) 100%);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--cor) 35%, transparent);
  position: relative; display: grid; place-items: center;
  transition: --cor .4s, transform .3s, box-shadow .4s;
  animation: respirar 5s ease-in-out infinite;
}
.orb span {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--cor) 40%, transparent); opacity: 0;
}
.orb-botao:hover { transform: scale(1.03); background: radial-gradient(circle at 35% 30%, var(--acento-2), var(--cor) 60%, color-mix(in srgb, var(--cor) 70%, #000) 100%); }
.orb-pequeno { width: 64px; height: 64px; margin: 0 auto 1rem; }
body.ouvindo .orb-botao { --cor: var(--ouvindo); animation: none; transform: scale(1.06); }
body.ouvindo .orb-botao span { animation: onda 1.4s ease-out infinite; }
body.pensando .orb-botao { --cor: var(--pensando); animation: pensar 1.2s ease-in-out infinite; }
body.falando .orb-botao { animation: falar .6s ease-in-out infinite alternate; }
@keyframes respirar { 50% { transform: scale(1.03); } }
@keyframes onda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
@keyframes pensar { 50% { transform: scale(.94); opacity: .85; } }
@keyframes falar { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .orb, .orb span { animation: none !important; } }

/* ---------- abertura e login ---------- */
.abertura {
  position: fixed; inset: 0; z-index: 50; background: var(--fundo);
  display: grid; place-items: center; text-align: center; padding: 16px;
}
.abertura[hidden] { display: none; }
.abertura-conteudo { display: grid; justify-items: center; gap: .8rem; max-width: 420px; }
.abertura h1 { font-size: 2.2rem; margin-top: 1rem; }
.btn-grande { font-size: 1.1rem; padding: .8em 2.2em; background: var(--tinta); color: var(--fundo); border: none; }
.aviso { color: var(--acento); font-weight: 500; }
.tela-login { display: grid; place-items: center; min-height: 100%; padding: 16px; }
.cartao-login {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 24px; box-shadow: var(--sombra);
  padding: 2.2rem; width: min(380px, 100%); display: grid; gap: .8rem; text-align: center;
}
.cartao-login input { padding: .8em 1em; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo); }
.cartao-login button { background: var(--tinta); color: var(--fundo); border: none; padding: .8em; }
.erro { color: var(--acento); margin: 0; }

/* ---------- topo ---------- */
.topo {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 14px 24px; border-bottom: 1px solid var(--borda);
}
.marca { display: flex; align-items: center; gap: .6rem; }
.marca .nome { font-family: "Fraunces", serif; font-size: 1.3rem; font-weight: 600; }
.marca .status { color: var(--sutil); font-size: .9rem; }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); }
body.ouvindo .ponto, body.atenta .ponto { background: var(--ouvindo); }
body.atenta .orb-botao { --cor: var(--ouvindo); }
body.pensando .ponto { background: var(--pensando); }
.controles { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.chave { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--sutil); cursor: pointer;
  border: 1px solid var(--borda); border-radius: 999px; padding: .35em .8em; background: var(--superficie); }
.chave input { accent-color: var(--tinta); margin: 0; }
.btn-icone { width: 38px; height: 38px; padding: 0; font-size: 1.1rem; }

/* ---------- layout ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px;
  padding: 24px; max-width: 1280px; margin: 0 auto; height: calc(100vh - 68px);
}
.conversa { display: flex; flex-direction: column; min-height: 0; }
.centro-voz { display: grid; justify-items: center; gap: .5rem; padding: 12px 0 20px; }
.dica { color: var(--sutil); margin: .4rem 0 0; font-size: .9rem; }
.legenda { min-height: 1.5em; margin: 0; font-style: italic; color: var(--sutil); text-align: center; max-width: 560px; }

.mensagens { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; scroll-behavior: smooth; }
.msg { max-width: 78%; padding: .7em 1em; border-radius: var(--raio); white-space: pre-wrap; word-wrap: break-word; }
.msg.ela { align-self: flex-start; background: var(--bolha-ela); border: 1px solid var(--borda); border-bottom-left-radius: 6px; }
.msg.eu { align-self: flex-end; background: var(--bolha-eu); color: var(--bolha-eu-texto); border-bottom-right-radius: 6px; }
.msg.aviso-msg { align-self: center; background: color-mix(in srgb, var(--acento) 12%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); text-align: center; }
.msg .meta { display: block; font-size: .75rem; opacity: .6; margin-top: .2em; }

.caixa-texto { display: flex; gap: 8px; padding-top: 8px; }
.caixa-texto input { flex: 1; padding: .8em 1.1em; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); }
.caixa-texto input:focus, .cartao-login input:focus { outline: 2px solid color-mix(in srgb, var(--acento) 50%, transparent); outline-offset: 1px; }
.caixa-texto button { width: 46px; padding: 0; font-size: 1.2rem; background: var(--tinta); color: var(--fundo); border: none; }

/* ---------- lateral ---------- */
.lateral { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 20px; padding: 18px 20px; box-shadow: var(--sombra); }
.rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--sutil); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.selo { background: color-mix(in srgb, var(--ouvindo) 15%, transparent); color: var(--ouvindo); border-radius: 999px; padding: 0 .6em; text-transform: none; letter-spacing: 0; }
.selo:empty { display: none; }
.agora { border: 2px solid var(--tinta); }
.agora h2 { font-size: 1.35rem; line-height: 1.25; }
.agora .passo { margin: .6rem 0 .2rem; font-size: 1.05rem; }
.agora .passo::before { content: "Primeiro passo: "; font-weight: 600; }
.agora .cliente { margin: 0; font-size: .9rem; }
.agora .botoes { display: flex; gap: 8px; margin-top: 1rem; flex-wrap: wrap; }
.timer { font: 600 2rem "Fraunces", serif; margin-top: .6rem; font-variant-numeric: tabular-nums; }

.lista-tarefas, .lista-lembretes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-tarefas li { display: flex; align-items: flex-start; gap: .6rem; padding: .35em 0; }
.lista-tarefas input[type=checkbox] { width: 18px; height: 18px; margin-top: .2em; accent-color: var(--ouvindo); cursor: pointer; flex: none; }
.lista-tarefas .titulo { cursor: pointer; flex: 1; }
.lista-tarefas .titulo:hover { text-decoration: underline; text-underline-offset: 3px; }
.lista-tarefas .p1 { font-weight: 600; }
.lista-tarefas .tag { font-size: .75rem; color: var(--sutil); display: block; }
.lista-tarefas li.em-foco .titulo { color: var(--acento); }
.feitas li { color: var(--sutil); text-decoration: line-through; }
details summary { cursor: pointer; color: var(--sutil); font-size: .9rem; margin-top: .6rem; }
.lista-lembretes li { display: flex; gap: .7rem; font-size: .95rem; }
.lista-lembretes .hora { font-weight: 600; min-width: 4.5em; color: var(--sutil); font-variant-numeric: tabular-nums; }
.vazio { margin: 0; font-size: .9rem; }
.lista-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-agenda li { display: flex; gap: .7rem; font-size: .95rem; align-items: baseline; }
.lista-agenda .hora { font-weight: 600; min-width: 4.5em; color: var(--sutil); font-variant-numeric: tabular-nums; }
.lista-agenda li.passou { opacity: .45; }
.lista-agenda li.agora-ev .hora { color: var(--ouvindo); }
.lista-agenda a { color: var(--acento); font-size: .85rem; margin-left: .3rem; }
.lista-agenda .amanha { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sutil); margin-top: .4rem; }

/* ---------- ajustes ---------- */
dialog { border: 1px solid var(--borda); border-radius: 20px; background: var(--superficie); color: var(--tinta); padding: 0; width: min(420px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
.form-ajustes { display: grid; gap: 14px; padding: 24px; }
.form-ajustes label { display: grid; gap: 4px; font-size: .9rem; color: var(--sutil); }
.form-ajustes select, .form-ajustes input[type=number], .form-ajustes input[type=time] {
  padding: .5em .7em; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--tinta);
}
.linha-botoes { display: flex; justify-content: space-between; align-items: center; }
.link-sutil { color: var(--sutil); font-size: .9rem; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; height: auto; padding: 16px; }
  .topo { padding: 12px 16px; }
  .mensagens { max-height: 50vh; }
  .orb { width: 110px; height: 110px; }
  .msg { max-width: 90%; }
}