/* Dorally / conversa — chat, cartões do que a Dora fez, painel lateral e composer.
   Só tokens do app.css. Movimento: entrada das mensagens, palavras da resposta e "pensando";
   tudo some com prefers-reduced-motion. */

.main:has(.conversation-focus) {padding-bottom:12px;}
.conversation-focus {
  display:grid;grid-template-columns:minmax(0,1fr) 0;gap:0;
  height:calc(100dvh - 40px);min-height:420px;
  transition:grid-template-columns .32s cubic-bezier(.2,.8,.3,1);
}
.conversation-focus.has-canvas {grid-template-columns:minmax(0,1fr) min(420px,38vw);}
.convo {position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;}

/* Identidade única: avatar e nome no topo, uma vez. */
.conversation-focus__head {
  position:relative;flex:none;display:flex;justify-content:center;
  padding:2px 0 8px;
}
.convo__id {display:flex;flex-direction:column;align-items:center;gap:0;}
.convo__avatar {width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(60,80,255,.35));}
.convo__name {
  margin:-6px 0 0;padding:3px 12px;border:1px solid var(--linha-forte);border-radius:999px;
  background:var(--ameixa);font:600 12.5px/1.3 var(--fonte-texto);color:var(--tinta);
}
.chat__close {
  display:grid;place-items:center;flex:none;width:36px;height:36px;
  border:1px solid var(--linha);border-radius:11px;background:transparent;
  color:var(--tinta-2);cursor:pointer;transition:background .16s ease,color .16s ease;
}
.conversation-focus__head .chat__close {position:absolute;right:0;top:4px;}
.chat__close:hover {background:var(--ameixa-2);color:var(--tinta);}
.chat__close svg {width:19px;height:19px;}
.chat__close:focus-visible,.chat__retry:focus-visible {box-shadow:var(--foco);outline:none;}

/* Rolagem: coluna de leitura centrada, com a última mensagem sempre acima do composer. */
.conversation-focus .chat {
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:22px;
  padding:18px max(4px,calc((100% - 740px)/2)) 28px;
  scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent;overscroll-behavior:contain;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px);
}
.chat__row {display:flex;width:100%;min-width:0;}
.chat__row--user {justify-content:flex-end;}
.chat__row--dora {justify-content:flex-start;}
.chat__row.is-new {animation:chat-in .32s cubic-bezier(.2,.8,.3,1) both;}
@keyframes chat-in {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.conversation-focus .bubble {min-width:0;font:400 15.5px/1.7 var(--fonte-texto);color:var(--tinta);overflow-wrap:anywhere;}
.conversation-focus .bubble--dora {padding:0;background:transparent;border:0;border-radius:0;}
.conversation-focus .bubble--me {
  max-width:min(76%,560px);padding:10px 16px;white-space:pre-wrap;
  background:var(--marca-grad-suave),var(--ameixa-2);border:1px solid color-mix(in srgb,var(--marca-violeta) 22%,var(--linha));
  border-radius:20px 20px 6px 20px;
}
.conversation-focus .bubble--dora {width:100%;max-width:100%;}
.bubble--dora .bubble__text p {margin:0 0 .7em;}
.bubble--dora .bubble__text p:last-child {margin-bottom:0;}
.bubble--dora .bubble__text strong {font-weight:700;color:var(--tinta);}
.bubble--dora .bubble__text em {color:var(--tinta);}
.bubble--dora .bubble__text code {padding:1px 6px;border-radius:6px;background:var(--ameixa-2);font-size:.92em;}
.bubble--dora .bubble__text ul,.bubble--dora .bubble__text ol {margin:.2em 0 .8em;padding-left:1.25em;}
.bubble--dora .bubble__text li {margin:.25em 0;}
.bubble--dora .bubble__text li::marker {color:var(--lavanda);}
/* Palavras da resposta entram em sequência (o texto inteiro já está no DOM). */
/* "backwards": o estado inicial só vale durante a animação; sem animação, o texto fica visível. */
.bubble__text.is-reveal .w {animation:word-in .34s ease-out backwards;animation-delay:var(--d,0ms);}
@keyframes word-in {from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.conversation-focus .bubble--failed {color:var(--perigo);}

/* "Pensando": três pontos. */
.typing {display:inline-flex;gap:5px;align-items:center;height:26px;padding:0 2px;}
.typing i {width:7px;height:7px;border-radius:50%;background:var(--lavanda);opacity:.35;animation:typing 1.1s ease-in-out infinite;}
.typing i:nth-child(2) {animation-delay:.15s;}
.typing i:nth-child(3) {animation-delay:.3s;}
@keyframes typing {0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

.chat__retry {
  margin:10px 0 0;display:inline-flex;min-height:32px;align-items:center;
  border:1px solid var(--linha-forte);border-radius:10px;
  background:var(--ameixa);color:var(--tinta);font-size:13px;cursor:pointer;padding:5px 12px;
}
.chat__retry:hover {border-color:var(--lavanda);}

/* Estado vazio: sem segundo avatar (a identidade está no topo). */
.chat__empty {align-self:center;text-align:center;margin:auto 0;max-width:520px;padding:0 18px 24px;color:var(--tinta-2);}
.chat__empty h2 {font:700 clamp(22px,2.6vw,30px)/1.24 var(--fonte-titulo);color:var(--tinta);margin:0 0 12px;letter-spacing:-.015em;}
.chat__empty p {font-size:14px;line-height:1.6;margin:0 auto 22px;max-width:365px;}
.chat__suggestions {display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.chat__suggestions .chip {font-size:12.5px;border:1px solid var(--linha-forte);padding:0 13px;min-height:34px;border-radius:10px;transition:background .12s ease,border-color .12s ease;}
.chat__suggestions .chip:hover {border-color:var(--lavanda);}

/* ── Cartões: o que a Dora fez ── */
.chat__parts {display:grid;gap:10px;margin-top:12px;max-width:560px;}
.bubble__text.is-reveal + .chat__parts > * {animation:card-in .42s cubic-bezier(.2,.8,.3,1) both;animation-delay:.25s;}
@keyframes card-in {from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.chat-card {
  position:relative;padding:14px 16px;border:1px solid var(--linha);border-radius:16px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ev,var(--lavanda)) 9%,var(--ameixa)) 0%,var(--ameixa) 55%);
  box-shadow:0 10px 28px rgba(5,7,26,.18);
}
.chat-card svg {width:15px;height:15px;flex:none;}
.chat-card h4 {margin:2px 0 6px;font:700 16px/1.3 var(--fonte-titulo);color:var(--tinta);}
.chat-card__op {font-size:12px;font-weight:700;color:var(--ev,var(--lavanda));}
.chat-card__meta {display:flex;align-items:center;gap:7px;margin:3px 0 0;font-size:13.5px;color:var(--tinta-2);}
.chat-card--event {padding-left:20px;}
.chat-card--event::before {content:"";position:absolute;left:9px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--ev,var(--lavanda));}
.chat-card--event.is-deleted h4 {text-decoration:line-through;color:var(--tinta-2);}
.chat-card--event.is-deleted .chat-card__op {color:var(--perigo);}
.chat-card__actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.chat-card__btn {
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;
  border:1px solid var(--linha-forte);border-radius:10px;background:transparent;
  color:var(--tinta);font:600 13px/1 var(--fonte-texto);cursor:pointer;
  transition:border-color .14s ease,background .14s ease;
}
.chat-card__btn:hover {border-color:var(--lavanda);background:var(--ameixa-2);}
.chat-card__btn--yes {border-color:transparent;background:var(--marca-grad);color:var(--marca-tinta);}
.chat-card__btn--yes:hover {background:var(--marca-grad);filter:brightness(1.06);}
.chat-card__btn:disabled {opacity:.6;cursor:wait;}
.chat-card--memory .chat-card__memo {margin:4px 0 0;font-size:15px;color:var(--tinta);}
.chat-card__head {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-weight:700;font-size:13.5px;color:var(--tinta);}
.chat-card__head span {display:inline-flex;align-items:center;gap:7px;}
.chat-card__panel {display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--linha);border-radius:10px;background:transparent;color:var(--tinta-2);cursor:pointer;}
.chat-card__panel:hover {color:var(--tinta);border-color:var(--lavanda);}
.chat-card__rows {display:grid;gap:2px;}
.chat-card__empty,.chat-card__more {margin:4px 0 0;font-size:13px;color:var(--tinta-2);}
.ev-mini {
  display:flex;gap:10px;align-items:stretch;width:100%;padding:8px 8px 8px 4px;border:0;border-radius:10px;
  background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background .14s ease;
}
.ev-mini:hover {background:var(--ameixa-2);}
.ev-mini__bar {flex:none;width:3px;border-radius:3px;background:var(--ev,var(--lavanda));}
.ev-mini__body {display:grid;gap:2px;min-width:0;}
.ev-mini__body strong {font-size:14.5px;font-weight:600;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ev-mini__body small {display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tinta-2);}
.ev-mini__body small svg {width:13px;height:13px;}
.slot-chips {display:flex;flex-wrap:wrap;gap:8px;}
.slot-chip {
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 10px 0 12px;
  border:1px solid var(--linha-forte);border-radius:12px;background:var(--ameixa-2);
  color:var(--tinta);cursor:pointer;transition:border-color .14s ease,transform .14s ease;
}
.slot-chip strong {font-size:14px;}
.slot-chip small {font-size:12px;color:var(--tinta-2);}
.slot-chip svg {color:var(--lavanda);}
.slot-chip:hover {border-color:var(--lavanda);transform:translateY(-1px);}
.chat-card--task {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;}
.chat-card--task h4 {margin:2px 0 2px;}
.chat-card--task.is-done h4 {text-decoration:line-through;color:var(--tinta-2);}
.task-check {display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tinta-2);cursor:pointer;}
.task-check svg {width:22px;height:22px;}
.task-check[aria-pressed=true] {color:var(--hortela);}
.task-check:hover {color:var(--lavanda);}
.chat-tasks {list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.chat-tasks li {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 4px;border-radius:10px;font-size:14.5px;}
.chat-tasks li:hover {background:var(--ameixa-2);}
.chat-tasks li small {font-size:12px;color:var(--tinta-2);}
.chat-tasks li.is-done span {text-decoration:line-through;color:var(--tinta-2);}
.chat-card button:focus-visible,.slot-chip:focus-visible,.ev-mini:focus-visible {box-shadow:var(--foco);outline:none;}

/* ── Painel lateral (artefato) ── */
.canvas {
  min-width:0;display:flex;flex-direction:column;overflow:hidden;
  margin:0 0 0 18px;border:1px solid var(--linha);border-radius:20px;background:var(--ameixa);
  opacity:0;transform:translateX(24px);visibility:hidden;
  transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.3,1),visibility 0s linear .32s;
}
.has-canvas .canvas {opacity:1;transform:none;visibility:visible;transition-delay:0s;}
.canvas__head {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px 18px;border-bottom:1px solid var(--linha);}
.canvas__head h3 {margin:0;font:700 17px/1.3 var(--fonte-titulo);}
.canvas__body {flex:1;overflow-y:auto;padding:10px 12px 18px;scrollbar-width:thin;}
.canvas-day + .canvas-day {margin-top:12px;}
.canvas-day h4 {margin:8px 4px 4px;font-size:12.5px;font-weight:700;color:var(--tinta-2);}

/* ── Composer: no fim da coluna, com o "Foco em" e o enviar ── */
.conversation-focus .composer {
  position:relative;flex:none;align-self:center;width:min(760px,100%);
  margin:6px 0 4px;padding:12px 12px 10px 16px;
  display:flex;flex-direction:column;
  border:1px solid var(--linha-forte);border-radius:24px;background:var(--ameixa);
  box-shadow:0 14px 44px rgba(5,7,26,.24);transition:border-color .16s ease,box-shadow .16s ease;
}
.conversation-focus .composer:focus-within {border-color:color-mix(in srgb,var(--lavanda) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lavanda) 18%,transparent),0 14px 44px rgba(5,7,26,.24);}
.conversation-focus .composer textarea {
  width:100%;min-height:28px;max-height:150px;padding:4px 2px;border:0;outline:none;resize:none;
  background:transparent;color:var(--tinta);font:400 15.5px/1.55 var(--fonte-texto);
}
.conversation-focus .composer textarea:focus-visible {box-shadow:none;}
.composer__bottom {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;}
.composer__send {width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;}
.composer__send svg {width:18px;height:18px;}
.composer__send:disabled {opacity:.5;cursor:wait;}
.focus {position:relative;}
.focus__btn {
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;
  border:1px solid var(--linha);border-radius:999px;background:transparent;color:var(--tinta-2);
  font:500 13px/1 var(--fonte-texto);cursor:pointer;transition:border-color .14s ease,color .14s ease;
}
.focus__btn strong {color:var(--tinta);font-weight:600;}
.focus__btn svg {width:15px;height:15px;}
.focus__btn:hover,.focus__btn[aria-expanded=true] {border-color:var(--lavanda);color:var(--tinta);}
.focus__btn:focus-visible {box-shadow:var(--foco);outline:none;}
.focus__menu {
  position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;width:280px;padding:8px;
  border:1px solid var(--linha-forte);border-radius:16px;background:var(--ameixa);
  box-shadow:0 18px 48px rgba(5,7,26,.42);animation:pop-in .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes pop-in {from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.focus__title {margin:4px 8px 6px;font-size:12px;font-weight:700;color:var(--tinta-2);}
.focus__item {display:grid;gap:2px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:var(--tinta);text-align:left;cursor:pointer;}
.focus__item strong {font-size:14px;font-weight:600;}
.focus__item small {font-size:12px;color:var(--tinta-2);}
.focus__item:hover,.focus__item:focus-visible {background:var(--ameixa-2);outline:none;}
.focus__item[aria-checked=true] strong::after {content:" ✓";color:var(--lavanda);}

/* Ir para o fim: aparece quando a pessoa sobe na conversa. */
.chat__jump {
  position:absolute;left:50%;bottom:118px;z-index:5;transform:translateX(-50%);
  display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--linha-forte);border-radius:50%;
  background:var(--ameixa);color:var(--tinta);cursor:pointer;box-shadow:0 8px 22px rgba(5,7,26,.3);
  animation:pop-in .2s ease;
}
.chat__jump[hidden] {display:none;}
.chat__jump svg {width:17px;height:17px;}

/* Início: o campo da conversa não ganha um segundo anel de foco por dentro. */
.home__dock {z-index:18;}
.dock__box textarea:focus-visible {box-shadow:none;outline:none;}
.dock__box:focus-within {border-color:color-mix(in srgb,var(--lavanda) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lavanda) 18%,transparent),0 10px 34px rgba(5,7,26,.28);}
.dock__hist {font-size:12px;font-weight:600;color:var(--tinta-2);}
.dock__hist:hover {color:var(--tinta);text-decoration:underline;}

@media(max-width:900px) {
  .conversation-focus,.conversation-focus.has-canvas {grid-template-columns:minmax(0,1fr);}
  .canvas {
    position:fixed;left:8px;right:8px;bottom:8px;z-index:40;max-height:78dvh;margin:0;
    transform:translateY(24px);box-shadow:0 -10px 40px rgba(5,7,26,.45);
  }
}
@media(max-width:760px) {
  .conversation-focus {height:calc(100dvh - 120px);min-height:300px;}
  .conversation-focus .bubble {font-size:14.5px;}
  .conversation-focus .bubble--me {max-width:86%;}
  .conversation-focus .composer {border-radius:20px;padding:10px 10px 8px 12px;}
  .focus__btn span {display:none;}
  .chat__jump {bottom:106px;}
}
@media(prefers-reduced-motion:reduce) {
  .chat__row.is-new,.bubble__text.is-reveal .w,.chat__parts > *,.typing i,.focus__menu,.chat__jump,.canvas,.conversation-focus {animation:none!important;transition:none!important;}
}