/* ===== base / reset ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }

:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#f1f3f7;
  --border:#e0e4ec;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#2563eb;
  --badge:#eef2ff;
  --shadow:0 10px 28px rgba(16,24,40,.08);
  --topbar-h:58px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  height:100vh;                 /* фиксируем высоту окна */
  display:flex;
  flex-direction:column;
  overflow:hidden;              /* глобальный скролл не нужен */
}

/* ===== topbar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--topbar-h);
  padding:12px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:5;
}
.brand{font-weight:700}
.nav a{color:var(--muted);text-decoration:none;margin:0 6px;padding:6px 12px;border-radius:8px}
.nav a.active{color:var(--accent);background:var(--badge)}

/* ===== main layout (sidebar + content) ===== */
.container{
  flex:1;                       /* всё пространство под топбаром */
  min-height:0;                 /* разрешает внутренние скроллы */
  display:grid;
  grid-template-columns:320px 1fr;
  overflow:hidden;              /* чтобы скроллились только внутренности */
}

/* ===== sidebar (dialogs list) ===== */
.sidebar{
  background:var(--panel2);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border)
}
.side-head .title{font-weight:700}
.side-head .plus{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--panel);cursor:pointer}
.side-top{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;gap:8px}
.search{flex:1;display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--border);color:var(--text)}
.search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);min-width:0}
.search input::placeholder{color:var(--muted)}
.conv-empty{color:var(--muted)}
.button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer}

/* список диалогов скроллится отдельно */
.conv-list{
  flex:1;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;background:#fff}
.item:hover{background:#f9fafb}
.item.active{background:#eef2ff;border-left:3px solid var(--accent)}
.item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-title-row{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap}
.item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.int-dot{flex-shrink:0;font-size:14px;line-height:1;font-weight:700;cursor:default;align-self:center}
.int-cold{color:#dc2626}
.int-mid{color:#ca8a04}
.int-warm{color:#16a34a}
.proc-done{font-size:11px;color:#15803d;background:#dcfce7;border-radius:6px;padding:1px 6px;margin-left:4px}
.proc-wait{font-size:11px;color:#b45309;background:#fef9c3;border-radius:6px;padding:1px 6px;margin-left:4px}

/* ===== content (chat area) ===== */
.content{
  background:var(--panel);
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;             /* внутренние области сами скроллятся */
}

/* #viewChats — непосредственный контейнер внутри .content */
.content > #viewChats{
  display:flex;
  flex-direction:column;
  min-height:0;               /* критично */
  height:100%;
}

/* header чата (фикс сверху контента) */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border);
  background:var(--panel);
  flex:0 0 auto;
}
.header .left{display:flex;flex-direction:column;gap:4px}
.header .title{font-weight:600}
.header .sub{color:var(--muted);font-size:12px}
.header .actions{display:flex;gap:8px}
.header .actions .button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.badge{background:var(--badge);color:var(--accent);border-radius:999px;padding:2px 8px;font-size:12px;border:1px solid var(--border)}

.insights{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  padding:10px 16px 0 16px;
}
.insights-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 16px 0 16px;
}
.card.compact{padding:10px}
.card.compact h3{font-size:14px;margin-bottom:8px}
.kv{display:flex;justify-content:space-between;gap:8px;padding:3px 0}
.kv span{color:var(--muted)}
.input-mini{
  height:32px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:0 8px;
  background:#fff;
  color:var(--text);
}
.sla-list{
  max-height:72px;
  overflow:auto;
  margin-top:6px;
}
.interest-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.interest-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--border);
}
.interest-red{ background:#fef2f2; }
.interest-yellow{ background:#fefce8; }
.interest-green{ background:#f0fdf4; }

/* лента сообщений — независимый скролл между header и inputbar */
.messages{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding:16px;
  padding-top:10px;
  padding-bottom:12px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--panel);
}
.msg{max-width:75%;padding:10px 12px;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--border)}
.msg .meta{font-size:11px;color:var(--muted);margin-bottom:6px}
.msg .txt{white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-color:transparent}
.msg.user .meta{color:rgba(255,255,255,.9)}
.msg.assistant{align-self:flex-start;background:#dcfce7;border-color:#bbf7d0}
.msg.assistant .meta{color:#047857}

/* панель ввода — всегда снизу контента */
.inputbar{
  flex:0 0 auto;
  padding:10px 16px;
  border-top:1px solid var(--border);
  background:var(--panel);
  display:flex;gap:10px;align-items:flex-end;
}
.inputbar textarea{
  flex:1;min-height:44px;max-height:140px;resize:vertical;
  background:#fff;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px
}
.inputbar button{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--accent);color:#fff;cursor:pointer}

/* ===== misc ===== */
.grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px 0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left;color:var(--text)}
.small{font-size:12px;color:var(--muted)}
.hidden{display:none !important}

/* скрыть кнопки "Новый диалог" */
#newConvBtn, #newConvBtnTop { display: none !important; }

/* настройки — тоже со своим скроллом */
#viewSettings{
  height:calc(100vh - var(--topbar-h));
  overflow:hidden;
}
#viewSettings .grid{
  max-height:100%;
  overflow:auto;
  padding-bottom:12px;
}

#viewWarehouse{
  height:calc(100vh - var(--topbar-h));
  overflow:hidden;
}
#viewWarehouse .grid{
  max-height:100%;
  overflow:auto;
  padding-bottom:12px;
}

#viewInfo{
  height:calc(100vh - var(--topbar-h));
  overflow:hidden;
}
#viewInfo .grid{
  max-height:100%;
  overflow:auto;
  padding-bottom:12px;
}
.info-textarea{
  width:100%;
  min-height:220px;
  max-height:min(55vh, 480px);
  resize:vertical;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font:inherit;
  line-height:1.5;
}

@media (max-width: 1200px){
  .insights{grid-template-columns:1fr}
}