/* Веб-чат сотрудников. Палитра и формы — по макету заказчика docs/webchat/demo.html.
   Без внешних шрифтов и CDN: сервер в закрытом контуре. */
:root {
  --bg: #f6f8fb; --panel: #ffffff; --text: #18212f; --muted: #6b7482;
  --line: #e5e9f0; --brand: #2398c6; --brand2: #16739a; --accent: #ffbd1a;
  --danger: #d9543f; --ok: #2f9b71; --shadow: 0 18px 60px rgba(17, 35, 52, .10);
  --radius: 20px; --side: #13232f; --side2: #203746;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand2); }

/* ===== Экран «нужна ссылка» и служебные страницы ===== */
.boot { position: fixed; inset: 0; display: grid; place-items: center; color: var(--muted); }
.gate {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(135deg, #102633, #1b4255);
}
.gate-card {
  width: min(460px, 100%); background: #fff; border-radius: 24px; padding: 30px;
  box-shadow: var(--shadow);
}
.gate-card h2 { margin: 0 0 10px; font-size: 22px; }
.gate-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.logo, .brand-mark {
  display: grid; place-items: center; font-weight: 800; color: #10212c;
  background: linear-gradient(135deg, var(--brand), #71cbe8 62%, var(--accent));
}
.logo { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px; }

/* ===== Каркас ===== */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.sidebar {
  background: var(--side); color: #fff; padding: 20px 14px; display: flex; flex-direction: column;
  gap: 14px; min-height: 0;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 0 6px 6px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; flex: 0 0 42px; }
.brand strong { display: block; font-size: 15px; }
.brand span { font-size: 12px; color: #9fb0bd; }
.new-chat {
  border: 1px solid #2c4a5b; background: #1b303e; color: #fff; border-radius: 12px;
  padding: 11px 12px; text-align: left; font-weight: 600;
}
.new-chat:hover { background: var(--side2); }
.history-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #7f95a3; padding: 6px 8px 0; }
.history { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.history-empty { color: #7f95a3; font-size: 12px; padding: 6px 8px; line-height: 1.4; }
.history-item {
  border: 0; background: transparent; color: #cbd6de; text-align: left; border-radius: 10px;
  padding: 9px 10px; display: flex; flex-direction: column; gap: 2px;
}
.history-item:hover { background: #1b303e; color: #fff; }
.history-item.active { background: var(--side2); color: #fff; }
.history-item b {
  font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-item span { font-size: 11px; color: #7f95a3; }
.sidebar-note {
  background: #1b303e; border: 1px solid #294758; border-radius: 14px; padding: 12px;
  color: #bfd0da; font-size: 12px; line-height: 1.45;
}
.user { display: flex; gap: 10px; align-items: center; padding: 10px 6px 0; border-top: 1px solid #29404f; }
.avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #2f5366;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.user-info { min-width: 0; flex: 1; }
.user-info b, .user-info span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info b { font-size: 13px; }
.user-info span { font-size: 11px; color: #91a6b4; }
.logout {
  border: 1px solid #2c4a5b; background: transparent; color: #bfd0da; border-radius: 10px;
  padding: 6px 9px; font-size: 12px;
}
.logout:hover { background: var(--side2); color: #fff; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 64px; flex: 0 0 64px; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.topbar h1 {
  font-size: 17px; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-btn {
  display: none; border: 1px solid var(--line); background: #fff; border-radius: 10px;
  width: 40px; height: 40px; font-size: 18px;
}
.status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #43b883; box-shadow: 0 0 0 4px rgba(67, 184, 131, .12); }

.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.messages-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* ===== Пустой экран ===== */
.welcome {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: 0 10px 35px rgba(18, 39, 56, .05);
}
.welcome h2 { margin: 0 0 8px; font-size: 24px; }
.welcome p { margin: 0; color: var(--muted); line-height: 1.5; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  border: 1px solid #dce6ee; background: #fff; color: #355364; border-radius: 999px;
  padding: 8px 13px; font-size: 13px; text-align: left;
}
.chip:hover { border-color: #9ed3e8; background: #f6fcff; }
.abilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.ability { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ability .icon {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: #eef7fb;
  display: grid; place-items: center;
}
.ability b { font-size: 12px; display: block; margin-bottom: 2px; }
.ability span { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* ===== Сообщения ===== */
.msg { display: flex; gap: 12px; }
.msg.you { flex-direction: row-reverse; }
.msg .avatar { background: #e9f5fa; color: #1f7fa6; }
.msg.you .avatar { background: #2a4b5d; color: #fff; }
.msg-body { min-width: 0; max-width: min(720px, calc(100% - 46px)); display: flex; flex-direction: column; gap: 8px; }
.msg.you .msg-body { align-items: flex-end; }
.bubble {
  border-radius: 16px; padding: 12px 16px; line-height: 1.55; font-size: 14px;
  overflow-wrap: anywhere;
}
.bubble p { margin: 0 0 10px; }
.bubble p:last-child { margin-bottom: 0; }
.ai .bubble { background: var(--panel); border: 1px solid #e2edf3; }
.you .bubble { background: #1e92c2; color: #fff; white-space: pre-wrap; }
.no-answer .bubble { background: #fff8e3; border-color: #f3e0a1; color: #5c4d1c; }
.error .bubble { background: #fff1ee; border-color: #f6c9c0; color: #7a2a1d; }
.unanswered { font-size: 11px; color: var(--muted); }
.cite {
  border: 0; background: #e3f2f9; color: #16739a; border-radius: 6px; font-size: 11px;
  font-weight: 700; padding: 0 5px; margin: 0 1px; vertical-align: super; line-height: 1.4;
}
.cite:hover { background: var(--brand); color: #fff; }

.sources-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sources { display: flex; flex-direction: column; gap: 6px; }
.source {
  display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 12px;
  border: 1px solid #d7e6ee; background: #fff; border-radius: 10px; padding: 7px 10px; color: #3d5462;
}
.source:hover { border-color: #9ed3e8; background: #f6fcff; }
.source-n {
  flex: 0 0 auto; min-width: 18px; height: 18px; border-radius: 6px; background: #e3f2f9;
  color: #16739a; font-weight: 700; font-size: 11px; display: grid; place-items: center;
}
.source-label { line-height: 1.4; }

.actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fb {
  border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 3px 9px; font-size: 14px;
  filter: grayscale(1); opacity: .7;
}
.fb:hover { opacity: 1; filter: none; }
.fb.active { filter: none; opacity: 1; border-color: #9ed3e8; background: #eef7fb; }
.fb-thanks { font-size: 12px; color: var(--muted); }
.fb-form { display: flex; gap: 6px; width: 100%; }
.fb-form input {
  flex: 1; min-width: 0; border: 1px solid #d9e1e8; border-radius: 9px; padding: 6px 10px; font-size: 13px; outline: none;
}
.fb-form input:focus { border-color: #82c9e5; }
.btn {
  border: 0; border-radius: 9px; background: var(--brand); color: #fff; padding: 6px 12px; font-size: 13px;
}
.btn:hover { background: var(--brand2); }
.btn.secondary { background: #fff; color: #355364; border: 1px solid #d9e1e8; }
.btn.secondary:hover { background: #f6fcff; }

.typing .bubble { color: var(--muted); display: flex; align-items: center; gap: 10px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #9fb6c3; animation: blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* ===== Ввод вопроса ===== */
.composer { padding: 14px 24px 16px; border-top: 1px solid var(--line); background: #fff; }
.composer-box {
  max-width: 860px; margin: 0 auto; border: 1px solid #d9e1e8; border-radius: 16px; padding: 8px;
  display: flex; gap: 10px; align-items: flex-end; box-shadow: 0 5px 20px rgba(26, 55, 74, .04);
}
.composer-box:focus-within { border-color: #82c9e5; }
.composer textarea {
  border: 0; resize: none; outline: none; min-height: 44px; max-height: 160px; flex: 1;
  padding: 11px 10px; background: transparent; line-height: 1.45;
}
.composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send {
  width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 12px; background: var(--brand);
  color: #fff; font-size: 18px;
}
.send:hover { background: var(--brand2); }
.send:disabled { background: #9fc9da; cursor: default; }
.hint { font-size: 11px; color: #8b96a2; margin-top: 8px; text-align: center; }

/* ===== Панель источника ===== */
.panel-backdrop, .menu-backdrop { position: fixed; inset: 0; background: rgba(16, 33, 44, .38); z-index: 30; }
.source-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); z-index: 40;
  background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.source-head { display: flex; gap: 12px; align-items: flex-start; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.source-head > div { flex: 1; min-width: 0; }
.source-kicker { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.source-head h3 { margin: 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.source-section { margin-top: 4px; font-size: 13px; color: #355364; overflow-wrap: anywhere; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; width: 36px; height: 36px; flex: 0 0 36px; }
.icon-btn:hover { background: #f6f8fb; }
.source-note {
  margin: 14px 20px 0; background: #fff8e3; border: 1px solid #f3e0a1; border-radius: 12px;
  padding: 10px 12px; font-size: 12px; color: #6b5b24; line-height: 1.45;
}
.source-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; white-space: pre-wrap;
  line-height: 1.6; font-size: 14px; overflow-wrap: anywhere;
}
.source-body.loading { color: var(--muted); }
.source-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.gdoc-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: var(--brand);
  color: #fff; border-radius: 11px; padding: 10px 14px; font-size: 14px; font-weight: 600;
}
.gdoc-btn:hover { background: var(--brand2); }
.source-foot-note { font-size: 11px; color: var(--muted); margin-top: 8px; }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60;
  background: #18212f; color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 13px;
  max-width: calc(100% - 32px); box-shadow: var(--shadow);
}

/* ===== Мобильная версия: история прячется в меню ===== */
@media (max-width: 860px) {
  .abilities { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 35;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .app.menu-open .sidebar { transform: none; }
  .menu-btn { display: inline-grid; place-items: center; }
  .topbar { padding: 0 12px; height: 56px; flex-basis: 56px; }
  .topbar h1 { font-size: 15px; }
  .status { display: none; }
  .messages { padding: 14px 12px; }
  .welcome { padding: 20px 16px; }
  .welcome h2 { font-size: 20px; }
  .msg { gap: 8px; }
  .msg .avatar { display: none; }
  .msg-body { max-width: 100%; }
  .msg.you .msg-body { max-width: 88%; }
  .composer { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .hint { display: none; }
  .source-panel { width: 100%; }
  .toast { bottom: 84px; }
}