/* Встроенный чат Таскера — порт чат-части cc-pocket public/style.css. Все правила и
   цвет-переменные скоупим под #chat, чтобы НЕ перетереть :root-переменные Пульса
   (--bg/--surface/--accent у Пульса свои). Тема через html[data-theme="dark"] #chat. */

#chat {
  --c-bg: #ffffff; --c-surface: #f7f8fa; --c-surface2: #eef0f3; --c-line: #e4e7eb;
  --c-text: #16181d; --c-muted: #6b7280; --c-accent: #2563eb; --c-accent-press: #1e51c9;
  --c-user: #2563eb; --c-user-text: #ffffff; --c-assistant: #f2f3f5; --c-code-bg: #f0f1f4;
  --c-busy: #16a34a; --c-danger: #dc2626;
  width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-text); border-radius: 10px; overflow: hidden;
  border: 1px solid var(--c-line);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
html[data-theme="dark"] #chat {
  --c-bg: #0f1115; --c-surface: #171a21; --c-surface2: #1e222b; --c-line: #2a2f3a;
  --c-text: #e9ebef; --c-muted: #8b929f; --c-accent: #5b8cff; --c-accent-press: #4575ec;
  --c-user: #2563eb; --c-user-text: #ffffff; --c-assistant: #1b1f27; --c-code-bg: #0c0e13;
  --c-busy: #34d399; --c-danger: #ff6b6b;
}
#chat[hidden] { display: none !important; }

#chat button { font: inherit; cursor: pointer; border: 0; border-radius: 11px; color: var(--c-text); }
#chat button.ghost { background: var(--c-surface2); padding: .4rem .7rem; }
#chat button.accent { background: var(--c-accent); color: #fff; padding: .42rem .8rem; font-weight: 600; }
#chat button.accent:active { background: var(--c-accent-press); }
#chat button:disabled { opacity: .5; }

#chat #status { flex: 0 0 auto; padding: .45rem .9rem; font-size: .85rem; color: var(--c-busy); background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
#chat #status.thinking { font-weight: 600; color: var(--c-busy); }
#chat #status.done { font-weight: 600; color: var(--c-accent); }
#chat #messages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .8rem .7rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
#chat .msg { padding: .55rem .8rem; border-radius: 15px; max-width: 86%; white-space: pre-wrap; word-break: break-word; font-size: .95rem; }
#chat .msg.user { align-self: flex-end; background: var(--c-user); color: var(--c-user-text); border-bottom-right-radius: 5px; }
#chat .msg.assistant { align-self: flex-start; background: var(--c-assistant); border: 1px solid var(--c-line); border-bottom-left-radius: 5px; white-space: normal; }
#chat .msg.system { align-self: center; color: var(--c-muted); font-size: .82rem; background: none; text-align: center; }
#chat .msg.system button { margin: .2rem .25rem 0; padding: .35rem .7rem; font-size: .85rem; }

#chat .msg.assistant h1, #chat .msg.assistant h2, #chat .msg.assistant h3 { margin: .3rem 0 .35rem; font-size: 1rem; }
#chat .msg.assistant ul, #chat .msg.assistant ol { margin: .3rem 0; padding-left: 1.2rem; }
#chat .msg.assistant li { margin: .12rem 0; }
#chat .msg.assistant a { color: var(--c-accent); }
#chat .msg.assistant code { background: var(--c-code-bg); border: 1px solid var(--c-line); border-radius: 6px; padding: .05rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
#chat .msg.assistant pre { background: var(--c-code-bg); border: 1px solid var(--c-line); border-radius: 10px; padding: .65rem .75rem; overflow-x: auto; margin: .4rem 0; }
#chat .msg.assistant pre code { background: none; border: 0; padding: 0; font-size: .82rem; line-height: 1.45; }
#chat .msg.assistant del { opacity: .65; }
#chat .msg.assistant blockquote { margin: .4rem 0; padding: .2rem .7rem; border-left: 3px solid var(--c-line); color: var(--c-muted); }
#chat .msg.assistant hr { border: 0; border-top: 1px solid var(--c-line); margin: .6rem 0; }
#chat .msg.assistant table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: .4rem 0; font-size: .88rem; -webkit-overflow-scrolling: touch; }
#chat .msg.assistant th, #chat .msg.assistant td { border: 1px solid var(--c-line); padding: .3rem .5rem; text-align: left; }
#chat .msg.assistant thead th { background: var(--c-surface2); font-weight: 650; }
#chat .msg.assistant tbody tr:nth-child(even) td { background: var(--c-surface); }

#chat #chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem .6rem 0; }
#chat #chips .chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--c-surface2); border: 1px solid var(--c-line); border-radius: 999px; padding: .2rem .6rem; font-size: .82rem; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat #chips .chip button { background: none; padding: 0 .1rem; color: var(--c-muted); font-size: 1rem; line-height: 1; }
#chat #composer { flex: 0 0 auto; display: flex; gap: .35rem; align-items: flex-end; padding: .55rem .6rem; background: var(--c-bg); border-top: 1px solid var(--c-line); }
#chat #composer #attach { width: 2.6rem; height: 2.9rem; flex: 0 0 auto; background: none; font-size: 1.2rem; padding: 0; }
#chat #composer textarea { flex: 1; resize: none; padding: .6rem .8rem; border: 1px solid var(--c-line); border-radius: 18px; background: var(--c-surface); color: var(--c-text); font: inherit; max-height: 140px; }
#chat #composer textarea:focus { outline: none; border-color: var(--c-accent); }
#chat #composer textarea:disabled { opacity: .55; }
#chat #composer #send { width: 2.9rem; height: 2.9rem; flex: 0 0 auto; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 1.05rem; }
#chat #composer #send:active { background: var(--c-accent-press); }