/* Twocy · caixinha da TwocyAI (Ctrl+Shift+A). Mesmos tokens da central rápida
   (paste.css): claro por padrão, escuro pelo Windows ou pela Aparência. */
:root {
  color-scheme: light dark;
  --font: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --white: #ffffff; --off: #fbfbf8; --paper: #f6f5f1;
  --ink: #0d0d0c; --muted: #6e6e66; --muted2: #96968e;
  --border: #ecebe4; --border2: #e1e0d8;
  --accent: #ff4d1c; --accent2: #ff6a3d; --accent-soft: #fff1ec;
  --green: #168342; --red: #dc2626;
  --shadow-float: 0 8px 18px rgba(16, 14, 8, .08), 0 24px 60px rgba(16, 14, 8, .16);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --white: #252525; --off: #1f1f1f; --paper: #191919;
    --ink: #d6d6d6; --muted: #969696; --muted2: #7e7e7e;
    --border: #2d2d2d; --border2: #3a3a3a;
    --accent: #ff5a2c; --accent2: #ff7a4d; --accent-soft: #2c1a12;
    --green: #2ee06a; --red: #f0564b;
    --shadow-float: 0 8px 18px rgba(0, 0, 0, .25), 0 26px 64px rgba(0, 0, 0, .32);
  } }
:root[data-theme="dark"] { color-scheme: dark;
    --white: #252525; --off: #1f1f1f; --paper: #191919;
    --ink: #d6d6d6; --muted: #969696; --muted2: #7e7e7e;
    --border: #2d2d2d; --border2: #3a3a3a;
    --accent: #ff5a2c; --accent2: #ff7a4d; --accent-soft: #2c1a12;
    --green: #2ee06a; --red: #f0564b;
    --shadow-float: 0 8px 18px rgba(0, 0, 0, .25), 0 26px 64px rgba(0, 0, 0, .32);
  }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
body { padding: 10px; font: 13px/1.45 var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, .quote:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd { padding: 1px 5px; border: 1px solid var(--border2); border-radius: 5px; background: var(--paper); font: 10.5px var(--mono); color: var(--muted); }
[hidden] { display: none !important; }

.card { display: grid; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--border2); border-radius: 18px; background: var(--white); box-shadow: var(--shadow-float); cursor: grab; }
.card:active { cursor: grabbing; }
.card input, .card textarea, .quote, .answer-text { cursor: auto; }
.head { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.brand { display: inline-flex; align-items: center; gap: 6px; letter-spacing: -.01em; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.title { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.shortcut { margin-left: auto; }
.icon { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; }
.icon:hover { background: var(--paper); color: var(--ink); }

/* texto selecionado */
.quote { margin: 0; max-height: 92px; overflow: auto; padding: 9px 12px; border-left: 3px solid var(--accent); border-radius: 4px 10px 10px 4px; background: var(--paper); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
.paste-in { width: 100%; resize: none; padding: 9px 12px; border: 1px solid var(--border2); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }

/* ações */
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.actions button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border: 1px solid var(--border2); border-radius: 10px; background: var(--off); font-weight: 600; font-size: 12.5px; }
.actions button:hover { border-color: var(--accent); }
.actions button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.actions button[aria-pressed="true"] kbd { border-color: var(--accent); color: var(--accent); }
/* Traduzir + idioma de destino colados (a origem a IA detecta) */
.tr { display: flex; min-width: 0; }
.tr > button { flex: 1; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.lang { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; border: 1px solid var(--border2); border-left: 0; border-radius: 0 10px 10px 0; background: var(--off); color: var(--muted); font: 600 11.5px var(--mono); cursor: pointer; }
.lang:hover, .lang:focus-within { border-color: var(--accent); color: var(--accent); }
.lang select { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding: 0 12px 0 2px; cursor: pointer; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 3px center, right 0 center; background-size: 3px 3px; background-repeat: no-repeat; }
.lang select option { color: #111; background: #fff; font-family: var(--font); }
.tr:has(button[aria-pressed="true"]) .lang { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ask { display: flex; gap: 6px; }
.ask input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--border2); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.send { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--ink); color: var(--white); font-weight: 700; }

/* resposta */
.answer { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.answer-head { display: flex; align-items: center; gap: 8px; margin: 0; font: 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.answer-text { max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; user-select: text; }
.answer-tools { display: flex; gap: 6px; }
.answer-tools button { height: 30px; padding: 0 12px; border: 1px solid var(--border2); border-radius: 9px; background: var(--off); font-size: 12px; font-weight: 600; }
.answer-tools button:hover { border-color: var(--accent); }
.loading { display: inline-flex; gap: 3px; }
.loading i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: blink 1s infinite; }
.loading i:nth-child(2) { animation-delay: .15s; } .loading i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }
.status { margin: 0; min-height: 0; font-size: 12px; color: var(--muted); }
.status:empty { display: none; }
.status.error { color: var(--red); }
.status.ok { color: var(--green); }
@media (prefers-reduced-motion: reduce) { .loading i { animation: none; } }

/* ── Chat IA (sem abrir a dash) ── */
.mode { margin-left: auto; height: 26px; padding: 0 10px; border: 1px solid var(--border2); border-radius: 999px; background: var(--off); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.mode:hover { border-color: var(--accent); color: var(--accent); }
.mode + .shortcut { margin-left: 0; }
.chat { display: grid; gap: 8px; }
.chat-log { display: grid; gap: 8px; max-height: 340px; overflow: auto; padding-right: 2px; }
.chat-log:empty { display: none; }
.msg { max-width: 92%; padding: 8px 11px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.msg.me { justify-self: end; background: var(--ink); color: var(--white); border-bottom-right-radius: 4px; }
.msg.ai { justify-self: start; background: var(--paper); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg.ai small { display: block; margin-top: 4px; color: var(--muted); font: 10.5px var(--mono); }
.items { display: grid; gap: 4px; margin-top: 8px; }
.item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--white); min-width: 0; }
.item .kind { flex: none; font: 10px var(--mono); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--border2); color: var(--muted); }
.item .what { flex: 1; min-width: 0; }
.item b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item b.is-link { color: var(--accent); font-weight: 500; }
.item span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.item span i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.item button { flex: none; height: 26px; padding: 0 8px; border: 1px solid var(--border2); border-radius: 7px; background: var(--off); font-size: 11.5px; font-weight: 600; }
.item button:hover { border-color: var(--accent); color: var(--accent); }
/* microfone do chat: clica, fala, clica de novo → texto no campo */
.mic { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 9px; border: 1px solid var(--border2); border-radius: 10px; background: var(--off); color: var(--muted); }
.mic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mic:hover { border-color: var(--accent); color: var(--accent); }
.mic .rec-time { font: 600 11px var(--mono); }
.mic .rec-time:empty { display: none; }
.mic.is-recording { border-color: var(--accent); background: var(--accent); color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; }
.mic.is-busy { opacity: .6; pointer-events: none; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mic.is-recording { animation: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { height: 28px; padding: 0 11px; border: 1px solid var(--border2); border-radius: 999px; background: var(--off); font-size: 12px; color: var(--muted); }
.chips button:hover { border-color: var(--accent); color: var(--ink); }
.thinking { display: inline-flex; gap: 3px; padding: 4px 0; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: blink 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
.dash-link { justify-self: start; border: 0; background: none; padding: 0; color: var(--muted); font-size: 11.5px; text-decoration: underline; }

/* ── AI Agent: botão laranja e, no chat, a "janela da IA" (como o cartão
   TwocyAI da landing, sem a borda laranja): névoa laranja/vermelha animada
   por trás. Claro: versão pêssego. ── */
.mode { display: inline-flex; align-items: center; gap: 6px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border2)); background: var(--accent-soft); color: var(--accent); }
.mode::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.mode:hover { border-color: var(--accent); color: var(--accent); }
.card.is-chat .mode { border-color: var(--border2); background: transparent; color: var(--muted); }
.card.is-chat .mode::before { display: none; }

.card.is-chat { position: relative; overflow: hidden; isolation: isolate; border-color: #0000000a;
  background: linear-gradient(165deg, #fffaf8, #fff4ef); box-shadow: 0 16px 40px -20px #ff5a2c80, 0 24px 60px rgba(16, 14, 8, .12); }
.card.is-chat::before { content: ''; position: absolute; inset: -35%; z-index: -1; pointer-events: none;
  background: radial-gradient(32% 38% at 72% 66%, #ffc2ad, transparent 70%), radial-gradient(26% 30% at 22% 18%, #ffe3d8, transparent 70%);
  filter: blur(18px); animation: ai-fog 16s ease-in-out infinite alternate; }
@keyframes ai-fog {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-7%, 5%) scale(1.1); }
  100% { transform: translate(5%, -6%) scale(1.03); }
}
.card.is-chat .title { color: var(--accent); }
.card.is-chat .msg.me { background: var(--accent); color: #fff; }
.card.is-chat .msg.ai { background: rgba(255, 255, 255, .65); border-color: rgba(0, 0, 0, .05); }
.card.is-chat .item { background: rgba(255, 255, 255, .7); }
.card.is-chat .ask input, .card.is-chat .chips button { background: rgba(255, 255, 255, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.is-chat {
  border-color: #ffffff0d; background: linear-gradient(165deg, #181314, #110e0f 60%, #0f0c0d); box-shadow: 0 0 44px -14px #ff5a2c66, 0 26px 64px rgba(0, 0, 0, .45); }
  :root:not([data-theme="light"]) .card.is-chat::before { background: radial-gradient(32% 38% at 72% 66%, #7a1f16d0, transparent 70%), radial-gradient(26% 30% at 22% 14%, #3a1a14, transparent 70%); }
  :root:not([data-theme="light"]) .card.is-chat .msg.ai { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .card.is-chat .item { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .07); }
  :root:not([data-theme="light"]) .card.is-chat .ask input, :root:not([data-theme="light"]) .card.is-chat .chips button { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
}
:root[data-theme="dark"] .card.is-chat { border-color: #ffffff0d; background: linear-gradient(165deg, #181314, #110e0f 60%, #0f0c0d); box-shadow: 0 0 44px -14px #ff5a2c66, 0 26px 64px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .card.is-chat::before { background: radial-gradient(32% 38% at 72% 66%, #7a1f16d0, transparent 70%), radial-gradient(26% 30% at 22% 14%, #3a1a14, transparent 70%); }
:root[data-theme="dark"] .card.is-chat .msg.ai { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .card.is-chat .item { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .07); }
:root[data-theme="dark"] .card.is-chat .ask input, :root[data-theme="dark"] .card.is-chat .chips button { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
@media (prefers-reduced-motion: reduce) { .card.is-chat::before { animation: none; } }
/* brilho só dentro do card (igual ao painel da dash): sem halo laranja em volta */
.card.is-chat { box-shadow: var(--shadow-float) !important; }

/* 01/10: copiar a resposta da IA + "mover para a pasta" proposto pela IA (confirmar no clique) */
.msg .copy-answer { display: block; margin-top: 8px; padding: 3px 9px; border: 1px solid var(--border2, #ffffff26); border-radius: 999px; background: transparent; color: inherit; font: 600 11.5px/1.4 inherit; opacity: .75; cursor: pointer; }
.msg .copy-answer:hover { opacity: 1; }
.msg .actions-proposed { display: grid; gap: 6px; margin-top: 10px; }
.msg .action { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #ffffff0d; border: 1px solid #ffffff14; font-size: 12.5px; }
:root[data-theme="light"] .msg .action { background: #0000000a; border-color: #00000014; }
.msg .action span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .action .dot { display: inline-block; width: 7px; height: 7px; margin: 0 4px 1px 2px; border-radius: 50%; vertical-align: middle; }
.msg .action button { flex: none; padding: 4px 11px; border: 0; border-radius: 999px; background: var(--accent, #ff5a2c); color: #fff; font: 700 12px inherit; cursor: pointer; }
.msg .action button:disabled { opacity: .7; cursor: default; }
.msg .action button.is-done { background: #16a34a; }

/* Sem sombra (01/10): a janela transparente cortava a sombra e aparecia um retângulo cinza atrás do HUD. */
.card, .card.is-chat { box-shadow: none !important; }

/* Copiar (só ícone) e "+" nova conversa (01/10) */
.msg .copy-answer { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 6px; padding: 0; border: 0; border-radius: 7px; background: transparent; opacity: .55; font-size: 12px; }
.msg .copy-answer:hover, .msg .copy-answer:focus-visible { opacity: 1; background: var(--off); }
.msg .copy-answer svg, .new-chat svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.new-chat { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 1px solid var(--border2); border-radius: 999px; background: transparent; color: var(--muted); }
.new-chat[hidden] { display: none; }
.new-chat:not([hidden]) + .mode { margin-left: 6px; }
.pro-link { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font: 700 inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Resposta da IA formatada (02/10) */
.msg.ai code { font: 11.5px var(--mono); padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 9%, transparent); }
.msg.ai mark { background: color-mix(in srgb, #ffd54a 55%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Barra de rolagem fina, no tom do app (02/10, #41): a padrão do Windows ficava grossa e cinza. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }