/* ==========================================================================
   PROCESA PILOT · 03-support-agent
   Дизайн: аутентичный Telegram (тёмная тема). Палитра Telegram Desktop:
   чат #0E1621 · сайдбар #17212B · пузыри клиента #182533 · пузыри агента
   #2B5278 · акцент #64B5EF · статусы/онлайн #4FAE4E. Шрифты — системный
   стек; моно только в технической панели (консоль агента) и подписи.
   ========================================================================== */

:root {
  /* палитра Telegram Dark */
  --tg-chat-bg: #0E1621;
  --tg-sidebar: #17212B;
  --tg-bubble-in: #182533;
  --tg-bubble-out: #2B5278;
  --tg-accent: #64B5EF;
  --tg-green: #4FAE4E;
  --tg-text: #FFFFFF;
  --tg-text-2: #AAB8C5;
  --tg-dim: #708499;
  --tg-hover: #202B36;
  --tg-line: #0D141C;
  --tg-field: #17212B;

  /* консоль агента (тёмная DevTools-панель) */
  --con-bg: #1B1E23;
  --con-head: #22262C;
  --con-line: #2E333B;
  --con-panel: #23272E;
  --con-deep: #14171B;
  --con-text: #C6CBD2;
  --con-dim: #7A828E;
  --con-ok: #57C15E;
  --con-warn: #E0A244;
  --con-red: #E06C75;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* хвостики пузырей: svg-маска, прямая кромка утоплена в пузырь на 3px */
  --tail-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M12 0v16C12 6.6 6.8 1.4 0 0z'/%3E%3C/svg%3E");
  --tail-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M0 0v16C0 6.6 5.2 1.4 12 0z'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--tg-chat-bg);
  color: var(--tg-text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; }
::selection { background: var(--tg-accent); color: #0E1621; }

/* ---------- каркас: сайдбар · чат · консоль ---------- */
.app {
  height: calc(100vh - 26px);
  display: grid;
  grid-template-columns: 318px minmax(0, 1fr) 400px;
  min-height: 0;
}
.sig {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0F16;
  color: #4A5764;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  user-select: none;
}

/* ---------- сайдбар (список чатов Telegram) ---------- */
.sidebar {
  background: var(--tg-sidebar);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--tg-line);
}
.sb-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 14px;
}
.sb-burger, .sb-search {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--tg-dim);
  user-select: none;
}
.sb-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sb-brand {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-brand b { color: var(--tg-accent); font-weight: 600; }
.sb-case {
  font-size: 11.5px;
  color: var(--tg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* метрики смены */
.metrics { flex: none; padding: 10px 14px 8px; }
.sb-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-dim);
}
.metrics .sb-label { padding: 0 2px 8px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric {
  min-width: 0;
  background: #1C2733;
  border-radius: 10px;
  padding: 9px 11px 10px;
}
.m-l {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-v {
  margin-top: 3px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.m-v.good { color: var(--tg-green); }
.m-s {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--tg-dim);
  white-space: normal;
}
.metric.flash { animation: mflash 0.9s ease-out; }
@keyframes mflash {
  0% { box-shadow: 0 0 0 1.5px var(--tg-accent), 0 0 16px rgba(100, 181, 239, 0.35); }
  100% { box-shadow: 0 0 0 1.5px transparent; }
}

/* список сценариев — как чаты в сайдбаре TG */
.sb-group { flex: none; padding: 10px 16px 4px; }
.chatlist {
  flex: 1 1 auto;
  min-height: 110px;
  overflow-y: auto;
  padding: 2px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 12px);
  margin: 0 6px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tg-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.row:hover { background: var(--tg-hover); }
.row.sel { background: var(--tg-bubble-out); }
.row:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: -2px; }
.row-ava {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.av-1 { background: linear-gradient(180deg, #6BB3E8, #3E88D6); }
.av-2 { background: linear-gradient(180deg, #FFB35C, #F0813F); }
.av-3 { background: linear-gradient(180deg, #FF8A7A, #EF4E5F); }
.av-4 { background: linear-gradient(180deg, #A0DE7E, #54CB68); }
.row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.row-t {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-s {
  font-size: 13px;
  color: var(--tg-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-foot {
  flex: none;
  margin-top: auto;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--tg-line);
  font-size: 12px;
  line-height: 1.55;
  color: var(--tg-dim);
}
.sb-foot p + p { margin-top: 6px; }

/* ---------- чат (окно Telegram) ---------- */
.chatpane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--tg-chat-bg);
}
.chat-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 56px;
  padding: 0 12px;
  background: var(--tg-sidebar);
  border-bottom: 1px solid var(--tg-line);
}
.ch-back {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--tg-dim);
  user-select: none;
}
.ch-ava {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6BB3E8, #3E88D6);
  display: grid;
  place-items: center;
  user-select: none;
}
.ch-ava svg { width: 20px; height: 20px; }
.ch-id { min-width: 0; flex: 1; }
.ch-name {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--tg-green);
}
.ch-status .st-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tg-green);
}
.ch-status.typing { color: var(--tg-accent); }
.ch-act {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--tg-dim);
  user-select: none;
}

/* лента сообщений */
.chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.svc { align-self: center; margin: 2px 0 6px; }
.svc span, .chat-hint {
  display: inline-block;
  background: rgba(112, 132, 153, 0.16);
  color: #A8B6C4;
  border-radius: 12px;
  padding: 4px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}
.chat-hint { align-self: center; margin: auto; max-width: 440px; padding: 6px 13px; }

.msg { display: flex; animation: fadeUp 0.22s ease-out; }
.msg.in { justify-content: flex-start; }
.msg.out { justify-content: flex-end; }
.bubble {
  position: relative;
  max-width: min(76%, 540px);
  padding: 6px 12px 7px;
  border-radius: 12px;
  background: var(--tg-bubble-in);
  color: var(--tg-text);
  font-size: 15px;
  line-height: 1.4;
  display: flow-root; /* содержит float времени, не обрезает хвостик */
  overflow-wrap: break-word;
}
.msg.in .bubble { border-top-left-radius: 3px; }
.msg.out .bubble { background: var(--tg-bubble-out); border-top-right-radius: 3px; }

/* хвостик пузыря — svg-маска у верхнего угла, как в Telegram Desktop */
.msg .bubble::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 16px;
  pointer-events: none;
}
.msg.in .bubble::after {
  left: -9px;
  background: var(--tg-bubble-in);
  -webkit-mask: var(--tail-in) 0 0 / 12px 16px no-repeat;
  mask: var(--tail-in) 0 0 / 12px 16px no-repeat;
}
.msg.out .bubble::after {
  right: -9px;
  background: var(--tg-bubble-out);
  -webkit-mask: var(--tail-out) 0 0 / 12px 16px no-repeat;
  mask: var(--tail-out) 0 0 / 12px 16px no-repeat;
}

/* время и галочки прочтения внутри пузыря */
.b-time {
  float: right;
  margin: 8px -3px -5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  user-select: none;
}
.checks { color: var(--tg-accent); }
.src {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tg-accent);
}

/* «печатает…» — пузырь с тремя точками */
.b-typing {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 13px 14px;
}
.td {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  animation: tdot 1.1s ease-in-out infinite;
}
.td:nth-child(2) { animation-delay: 0.16s; }
.td:nth-child(3) { animation-delay: 0.32s; }
@keyframes tdot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2.5px); }
}

/* поле ввода */
.composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
}
.c-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--tg-dim);
  user-select: none;
}
.composer input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: var(--tg-field);
  padding: 0 16px;
  font: 400 15px/1.2 var(--font-ui);
  color: var(--tg-text);
  outline: none;
  transition: border-color 0.15s;
}
.composer input::placeholder { color: var(--tg-dim); }
.composer input:focus { border-color: rgba(100, 181, 239, 0.55); }
.send {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--tg-accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.send svg { width: 20px; height: 20px; margin: 1px 2px 0 0; }
.send:hover:not(:disabled) { background: #5AABEA; }
.send:active:not(:disabled) { transform: scale(0.94); }
.send:disabled { background: #233144; color: #5C6B7A; cursor: default; }
.send:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 2px; }

/* ---------- консоль агента (DevTools) ---------- */
.console {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--con-bg);
  border-left: 1px solid var(--con-line);
  font-family: var(--font-mono);
}
.con-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  background: var(--con-head);
  border-bottom: 1px solid var(--con-line);
}
.con-dots { display: flex; gap: 6px; flex: none; }
.con-dots i { width: 10px; height: 10px; border-radius: 50%; }
.con-dots i:nth-child(1) { background: #FF5F57; }
.con-dots i:nth-child(2) { background: #FEBC2E; }
.con-dots i:nth-child(3) { background: #28C840; }
.con-title {
  min-width: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--con-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.con-live {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--con-ok);
}
.con-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--con-ok);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }
.con-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.think-sec { padding: 9px 0 12px; border-bottom: 1px dashed var(--con-line); }
.think-sec:first-child { padding-top: 2px; }
.think-sec.last { border-bottom: none; }
.sec-n {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--con-dim);
  margin-bottom: 8px;
}
.ph { color: var(--con-dim); font-size: 11.5px; }
.note { margin-top: 8px; font-size: 10.5px; color: var(--con-dim); }

/* 01 · retrieval: фрагменты и score */
.frag {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 9px;
  margin-bottom: 4px;
  background: var(--con-panel);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  color: var(--con-text);
  animation: fadeUp 0.25s ease-out;
}
.frag-t { min-width: 0; overflow-wrap: break-word; }
.frag-s { flex: none; color: var(--con-dim); font-variant-numeric: tabular-nums; }
.frag.hit { border-left-color: var(--con-ok); background: rgba(87, 193, 94, 0.09); }
.frag.hit .frag-s { color: var(--con-ok); font-weight: 600; }
.frag.low .frag-s { color: var(--con-red); }

/* 02 · tool-call: трейс вызова */
.tool-box {
  padding: 9px 11px;
  background: var(--con-deep);
  border: 1px solid var(--con-line);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.75;
  animation: fadeUp 0.25s ease-out;
}
.tool-line { color: var(--tg-accent); overflow-wrap: break-word; }
.tool-box .tool-line:first-child::before { content: "» "; color: var(--con-dim); }
.tool-line.ok { color: var(--con-ok); }
.tool-line.busy { color: var(--con-dim); animation: pulse 1.1s ease-in-out infinite; }
.tool-res {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--con-line);
  color: var(--con-dim);
  font-size: 11px;
  overflow-wrap: break-word;
}
.tool-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--con-text);
  animation: fadeUp 0.25s ease-out;
}

/* 03 · guardrails */
.g-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(46, 51, 59, 0.7);
  font-size: 11.5px;
  animation: fadeUp 0.25s ease-out;
}
.g-row:last-child { border-bottom: none; }
.g-k { flex: none; color: var(--con-dim); }
.g-v {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  text-align: right;
  color: var(--con-text);
  overflow-wrap: break-word;
}

/* 04 · решение */
.decision {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--con-panel);
  border: 1px solid var(--con-line);
  border-radius: 8px;
  animation: fadeUp 0.25s ease-out;
}
.decision-t { font-size: 12px; font-weight: 600; color: #E4E9EF; }

/* бейджи статусов */
.badge {
  display: inline-block;
  flex: none;
  padding: 2.5px 8px;
  border-radius: 9px;
  background: #2A2F36;
  color: var(--con-text);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge.ok { color: var(--con-ok); background: rgba(87, 193, 94, 0.13); }
.badge.warn { color: var(--con-warn); background: rgba(224, 162, 68, 0.13); }
.badge.accent { color: var(--tg-accent); background: rgba(100, 181, 239, 0.13); }
.badge.ink { color: #E4E9EF; background: #333A43; }

/* ---------- helpdesk: что видит оператор ---------- */
.op {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--con-line);
  border-radius: 10px;
  background: var(--con-panel);
}
.op-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--con-dim);
  margin-bottom: 10px;
}
.op-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--con-line);
  flex-wrap: wrap;
}
.op-ticket { font-size: 14px; font-weight: 600; color: var(--tg-accent); }
.op-sla { margin-left: auto; font-size: 11px; color: var(--con-dim); }
.op-sla b { color: var(--con-ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.op-sec { padding: 10px 0; border-bottom: 1px dashed var(--con-line); }
.op-sec:last-of-type { border-bottom: none; padding-bottom: 2px; }
.op-sec .sec-n { margin-bottom: 6px; }
.op-sec p {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--con-text);
}
.op-sec .op-quote {
  font-style: italic;
  border-left: 2px solid var(--con-line);
  padding-left: 9px;
  color: #98A1AC;
}
.op-sec .op-reason {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--con-warn);
}
.op-sec .op-draft {
  margin-top: 2px;
  padding: 9px 11px;
  background: var(--con-deep);
  border-left: 2px solid var(--tg-accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: #E4E9EF;
}
.op-actions { display: flex; align-items: center; gap: 12px; padding-top: 12px; flex-wrap: wrap; }
.op-note { font-size: 10.5px; letter-spacing: 0.02em; color: var(--con-ok); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--tg-accent);
  color: #fff;
  font: 600 12.5px/1 var(--font-ui);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn:hover:not(:disabled) { background: #5AABEA; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn.small { padding: 9px 18px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ---------- скроллбары ---------- */
.chat::-webkit-scrollbar,
.chatlist::-webkit-scrollbar,
.con-body::-webkit-scrollbar { width: 8px; }
.chat::-webkit-scrollbar-thumb,
.chatlist::-webkit-scrollbar-thumb,
.con-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.chat::-webkit-scrollbar-thumb:hover,
.chatlist::-webkit-scrollbar-thumb:hover,
.con-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
.chat::-webkit-scrollbar-track,
.chatlist::-webkit-scrollbar-track,
.con-body::-webkit-scrollbar-track { background: transparent; }

/* ---------- адаптив ---------- */
@media (max-width: 1380px) { .app { grid-template-columns: 286px minmax(0, 1fr) 372px; } }
@media (max-width: 1180px) {
  .app { grid-template-columns: 252px minmax(0, 1fr) 336px; }
  .bubble { max-width: 84%; }
}
@media (max-width: 960px) {
  body { overflow: auto; }
  .app { display: flex; flex-direction: column; height: auto; }
  .chatpane { order: -1; height: 76vh; min-height: 460px; }
  .chatlist { overflow: visible; }
  .bubble { max-width: 86%; }
}
@media (max-width: 560px) {
  .chatpane { height: 68vh; }
  .ch-back, .c-attach { display: none; }
  .sig { letter-spacing: 0.2em; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}