/* ── Страница чата (вынесено из chat/index.html) ───────────────────────── */

/* Chat turns the shared content area into a full-height flex column. */
.cl-content { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; }

/* Sidebar extras (conversation list) */
.cl-newchat {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; cursor: pointer; background: var(--cl-accent); color: #fff;
  border-radius: 10px; padding: 10px 12px; font-size: .92rem; font-weight: 500;
  margin: 6px 0 4px; transition: background .15s;
}
.cl-newchat:hover { background: var(--cl-accent-2); }
.cl-conv-head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cl-text-soft); padding: 12px 8px 6px;
}
.cl-conv-list { flex: 1 1 auto; overflow-y: auto; margin: 0 -4px; }
.cl-conv {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  text-decoration: none; color: var(--cl-text); border-radius: 8px;
  padding: 8px 10px; margin: 1px 0; font-size: .9rem; cursor: pointer;
}
.cl-conv:hover { background: var(--cl-panel-2); }
.cl-conv.active { background: var(--cl-panel-2); font-weight: 500; }
.cl-conv .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-conv .del {
  visibility: hidden; color: var(--cl-text-soft); border: none; background: none;
  cursor: pointer; padding: 0 2px; font-size: .95rem; line-height: 1;
}
.cl-conv:hover .del { visibility: visible; }
.cl-conv .del:hover { color: #c0392b; }

/* Message thread */
.cl-messages { flex: 1 1 auto; overflow-y: auto; scroll-behavior: smooth; }
.cl-thread { max-width: 740px; margin: 0 auto; padding: 28px 20px 8px; }
.cl-turn { margin-bottom: 26px; }
.cl-user { display: flex; justify-content: flex-end; }
.cl-user .b {
  background: var(--cl-panel); border: 1px solid var(--cl-border); border-radius: 16px;
  padding: 10px 16px; max-width: 80%; white-space: pre-wrap; word-break: break-word; font-size: .98rem;
}
.cl-bot { display: flex; gap: 12px; }
.cl-avatar {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px;
  background: var(--cl-accent); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: .85rem; margin-top: 2px;
}
.cl-bot .body { min-width: 0; flex: 1 1 auto; }
.cl-bot-text { word-break: break-word; font-size: 1rem; line-height: 1.62; }
.cl-bot-text > :first-child { margin-top: 0; }
.cl-bot-text > :last-child { margin-bottom: 0; }
.cl-bot-text p { margin: 0 0 .7em; }
.cl-bot-text ul, .cl-bot-text ol { margin: .5em 0 .8em; padding-left: 1.4em; }
.cl-bot-text li { margin: .25em 0; }
.cl-bot-text li::marker { color: var(--cl-text-soft); }
.cl-bot-text strong { font-weight: 600; }
.cl-bot-text h1, .cl-bot-text h2, .cl-bot-text h3 { font-size: 1.05rem; font-weight: 600; margin: .8em 0 .4em; }
.cl-bot-text code { background: var(--cl-panel); border-radius: 5px; padding: 1px 5px; font-size: .9em; }
.cl-bot-text table { border-collapse: collapse; margin: .6em 0; font-size: .92rem; }
.cl-bot-text th, .cl-bot-text td { border: 1px solid var(--cl-border); padding: 4px 9px; }
.cl-bot-text.clarify, .cl-bot-text.noinfo { border-radius: 12px; padding: 12px 14px; }
.cl-bot-text.clarify { background: #eef4ff; }
.cl-bot-text.noinfo  { background: #fff7e6; }
.typing::after { content: '▍'; animation: blink 1s infinite; color: var(--cl-text-soft); }
@keyframes blink { 50% { opacity: 0; } }
.cl-status { color: var(--cl-text-soft); font-style: italic; }

.cl-meta { margin-top: 10px; }
.cl-sources { font-size: .82rem; color: var(--cl-text-soft); margin-bottom: 6px; }
.cl-sources .lbl { margin-right: 4px; }
.cl-src {
  display: inline-flex; align-items: center; gap: 4px; background: var(--cl-panel);
  border: 1px solid var(--cl-border); border-radius: 6px; padding: 2px 8px;
  margin: 0 4px 4px 0; text-decoration: none; color: var(--cl-text);
}
.cl-src:hover { background: var(--cl-panel-2); }
.cl-frag-toggle {
  display: inline-flex; align-items: center; gap: 3px; border: none; background: none;
  color: var(--cl-text-soft); cursor: pointer; font-size: .8rem; padding: 2px 4px;
}
.cl-frag-toggle:hover { color: var(--cl-text); }
.cl-frags {
  border: 1px solid var(--cl-border); border-radius: 10px; background: var(--cl-panel);
  padding: 10px 12px; margin: 4px 0 8px; font-size: .82rem; max-height: 340px; overflow-y: auto;
}
.cl-frag { margin-bottom: 10px; }
.cl-frag:last-child { margin-bottom: 0; }
.cl-frag .fname {
  font-weight: 600; color: var(--cl-text-soft); font-size: .78rem; margin-bottom: 2px;
  display: flex; align-items: center; gap: 4px;
}
.cl-frag .ftext { color: var(--cl-text); white-space: pre-wrap; word-break: break-word; }
.cl-frag mark.cl-hl {
  background: #fff3bf; color: inherit; border-radius: 3px; padding: 0 1px;
}
.cl-product {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding: 8px 10px; border: 1px solid var(--cl-border); border-radius: 10px;
  background: var(--cl-panel); text-decoration: none; color: var(--cl-text);
  max-width: 420px;
}
.cl-product:hover { background: var(--cl-panel-2); }
.cl-product img {
  width: 44px; height: 44px; object-fit: contain; border-radius: 6px;
  background: #fff; flex: 0 0 auto;
}
.cl-product-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cl-product-name {
  font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.cl-product-price { font-size: .82rem; color: var(--cl-text-soft); }
.cl-product-buy { font-size: .85rem; color: var(--cl-accent); white-space: nowrap; }
.cl-actions { display: flex; align-items: center; gap: 4px; }
.cl-iconbtn {
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--cl-text-soft); border-radius: 7px; padding: 3px 7px; font-size: .95rem;
}
.cl-iconbtn:hover { background: var(--cl-panel); color: var(--cl-text); }
.cl-badge {
  font-size: .72rem; color: var(--cl-text-soft); background: var(--cl-panel);
  border: 1px solid var(--cl-border); border-radius: 6px; padding: 2px 7px; margin-left: 6px;
}

/* Empty state */
.cl-empty { text-align: center; padding-top: 14vh; max-width: 640px; margin: 0 auto; }
.cl-empty h2 { font-weight: 500; font-size: 1.5rem; }
.cl-empty .sub { color: var(--cl-text-soft); margin-bottom: 22px; }
.cl-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cl-chip {
  border: 1px solid var(--cl-border); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 8px 14px; font-size: .88rem; color: var(--cl-text);
}
.cl-chip:hover { background: var(--cl-panel); }

/* Composer */
.cl-composer { padding: 8px 20px 18px; }
.cl-composer-inner { max-width: 740px; margin: 0 auto; }
.cl-inputbox {
  display: flex; align-items: flex-end; gap: 8px; background: #fff;
  border: 1px solid var(--cl-border); border-radius: 18px; padding: 8px 8px 8px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.cl-inputbox:focus-within { border-color: var(--cl-accent); }
.cl-inputbox textarea {
  flex: 1 1 auto; border: none; outline: none; resize: none; background: transparent;
  font-size: 1rem; line-height: 1.5; max-height: 200px; padding: 6px 0; font-family: inherit;
}
.cl-send {
  flex: 0 0 auto; border: none; cursor: pointer; background: var(--cl-accent); color: #fff;
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.cl-send:hover { background: var(--cl-accent-2); }
.cl-send:disabled { opacity: .5; cursor: default; }
.cl-hint { text-align: center; color: var(--cl-text-soft); font-size: .74rem; margin-top: 8px; }

@media (max-width: 768px) {
  .cl-thread { padding-top: 56px; }
  /* Меньше воздуха сверху, чтобы подсказки и композер помещались на первом
     экране телефона без прокрутки. */
  .cl-empty { padding-top: 5vh; }
}