/* ============================================================
   chat.css — экран чата с моделью (chat.html)
   Только недостающие стили; базовые — в styles.css
   ============================================================ */

/* --- Модель в шапке --- */
.chat-model {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  margin: 0 -4px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  transition: background .15s;
}
.chat-model:active { background: rgba(255, 255, 255, .1); }
.chat-model-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-model-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-model-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-model-sub {
  font-size: 11.5px;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-model > svg { flex: none; color: var(--text-4); }

/* --- Лента сообщений --- */
.chat-log {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: none;
}
.chat-log::-webkit-scrollbar { display: none; }

.msg { display: flex; }
.msg--user { justify-content: flex-end; }
.msg--assistant { justify-content: flex-start; }

.bubble {
  max-width: 84%;
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.45;
  animation: pop .22s cubic-bezier(.2, .8, .3, 1.1);
}
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.bubble--assistant {
  background: var(--surface);
  border-bottom-left-radius: 6px;
}
.bubble--user {
  white-space: pre-wrap;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bubble--typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 16px 18px;
}
.bubble--typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-2);
  animation: blink 1.2s infinite;
}
.bubble--typing span:nth-child(2) { animation-delay: .2s; }
.bubble--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --- Подсказки в начале чата --- */
.chat-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
}
.chat-chips::-webkit-scrollbar { display: none; }

/* --- Реакции под ответом --- */
.answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 84%;
}
.reactions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
}
.reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--text-2);
  transition: background .15s, color .15s, transform .12s;
}
.reaction:active { transform: scale(.9); }
.reaction[data-active="true"] { color: var(--blue); background: rgba(47, 167, 233, .12); }
.reactions-label { margin-left: 6px; font-size: 12.5px; color: var(--text-4); }

/* --- Дата-разделитель --- */
.chat-day {
  align-self: center;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-4);
}

/* --- System-строка («Модель сменена на X») --- */
.chat-system {
  align-self: center;
  max-width: 86%;
  padding: 2px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-4);
  text-align: center;
}

/* ============================================================
   Стриминг ответа (п.1): пузырь с мигающим курсором ▍
   ============================================================ */
.bubble--streaming {
  min-height: 1.45em;
  white-space: pre-wrap;
  word-break: break-word;
}
.stream-text { white-space: pre-wrap; word-break: break-word; }
.stream-cursor {
  display: inline-block;
  margin-left: 1px;
  color: var(--blue);
  font-weight: 700;
  animation: stream-blink 1s steps(1, end) infinite;
}
@keyframes stream-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* ============================================================
   Markdown в ответах (п.3): .md внутри пузыря ассистента
   ============================================================ */
.bubble.md { word-break: break-word; }
.md p { margin: 0 0 8px; }
.md p:last-child { margin-bottom: 0; }
.md h3 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.2px;
  margin: 10px 0 6px;
}
.md h3:first-child { margin-top: 0; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md ul:last-child, .md ol:last-child { margin-bottom: 0; }
.md li { margin: 2px 0; }
.md a { color: var(--blue); text-decoration: none; word-break: break-word; }
.md a:active { opacity: .7; }
.md pre.code {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .32);
  border-radius: 12px;
  overflow-x: auto;
  white-space: pre;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: #E8E8ED;
  scrollbar-width: none;
}
.md pre.code::-webkit-scrollbar { display: none; }
.md pre.code:last-child { margin-bottom: 0; }
.md code.code-inline {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .32);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* ============================================================
   Правая шторка выбора модели (п.2): .msheet
   Своя пара классов (аналог левой .sheet из styles.css,
   но панель справа и без правки styles.css)
   ============================================================ */
.msheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  animation: msheet-fade .2s;
}
.msheet-backdrop.hidden { display: none; }
@keyframes msheet-fade { from { opacity: 0; } }
.msheet {
  width: 88%;
  max-width: 400px;
  height: 100%;
  background: #1B1B1E;
  border-radius: 28px 0 0 28px;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  animation: msheet-in-right .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes msheet-in-right { from { transform: translateX(70%); } }
.msheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 12px;
}
.msheet-head h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.msheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-2);
  transition: background .15s;
}
.msheet-close:active { background: rgba(255, 255, 255, .1); }

.msheet-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  margin-bottom: 10px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--text-3);
}
.msheet-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.msheet-search-input::placeholder { color: var(--text-3); }

.msheet-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: none;
}
.msheet-list::-webkit-scrollbar { display: none; }

.mmodel-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 18px;
  text-align: left;
  transition: transform .12s, background .15s;
}
.mmodel-row:active { background: var(--surface-2); transform: scale(.985); }
.mmodel-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mmodel-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mmodel-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mmodel-sub {
  font-size: 12px;
  color: var(--text-4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mmodel-free {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(50, 215, 75, .14);
  color: #5BD676;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.mmodel-check {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.mmodel-empty {
  padding: 26px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-4);
}

.chat-tools,.attachment-tools { display:flex; flex-wrap:wrap; gap:8px; padding:8px 16px; }
.attachment-tools { font-size:12px; padding:4px 0; align-items:center; }
.attachment-tools input { display:block; max-width:220px; font:inherit; }
#sendStatus { font-size:13px; color:var(--text-2); margin:4px 0; }
.chat-attachment { display:block; max-width:220px; max-height:220px; object-fit:contain; border-radius:12px; }
.wallet-dialog { color:var(--text); background:var(--surface); border:none; border-radius:28px; padding:24px; max-width:min(440px,90vw); }
.wallet-dialog::backdrop { background:rgba(0,0,0,.55); }
.wallet-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
button:disabled { opacity:.5; cursor:wait; }

/* Кнопки тулбаров и диалогов — чипсы эталона (surface, pill 19, без бордеров).
   Внутри диалогов (фон --surface) — тон поверхностью --surface-2. */
.chat-tools button,.attachment-tools button,#retryBtn,.wallet-dialog button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 14px;
  color:inherit; background:var(--surface);
  border:none; border-radius:19px;
  font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:background .15s, transform .12s;
}
.chat-tools button:active,.attachment-tools button:active,#retryBtn:active,.wallet-dialog button:active { background:var(--surface-2); transform:scale(.97); }
.wallet-dialog button { background:var(--surface-2); }
.wallet-dialog button:active { background:var(--surface); }

.attachment-tools label { position:relative; display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:19px; background:var(--surface); cursor:pointer; overflow:hidden; }
.attachment-tools input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.chat-tools button:focus-visible,.attachment-tools label:focus-within { outline:2px solid var(--blue); outline-offset:2px; }
.wallet-dialog input { color:inherit; background:var(--surface-2); padding:12px 16px; border:none; border-radius:22px; max-width:100%; box-sizing:border-box; font:inherit; }

#exportText { width:100%; box-sizing:border-box; color:inherit; background:var(--surface-2); border:none; border-radius:12px; padding:12px; resize:vertical; font:inherit; }

/* Named answer actions and attachment picker. */
.reactions{flex-wrap:wrap;gap:6px}
.reaction span{display:none} /* круглые иконки-кнопки 34px; подпись — .reactions-label, для скринридеров — aria-label */
.reaction svg{flex-shrink:0}
.reactions-label{flex-basis:100%;margin:0 0 0 10px}
.attachment-tools[hidden],.attachment-choice[hidden]{display:none}
.attach-btn{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;color:var(--text-2)}.attach-btn:hover{background:var(--surface-2)}.attach-btn:disabled{opacity:.4}.input-pill .input{min-width:0}
.attach-btn:focus-visible,.reaction:focus-visible,.attachment-dialog button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.attachment-dialog{margin:auto;box-sizing:border-box;width:min(420px,calc(100% - 32px));max-height:80dvh;overflow:auto;padding:20px;border:none;border-radius:28px;background:var(--surface);color:var(--text);font:inherit}
.attachment-dialog::backdrop{background:rgba(0,0,0,.55)}.attachment-heading{display:flex;align-items:center;gap:12px;justify-content:space-between}.attachment-heading h2{font-size:19px;line-height:1.3}.attachment-heading button{flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface-2);font-size:28px}.attachment-dialog p{font-size:14px;line-height:1.5;margin:12px 0;color:var(--text-2)}
.attachment-choice{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:16px 12px;margin:16px 0;border-radius:14px;background:var(--surface-2);font:inherit}.attachment-choice small{display:block;font-size:12px;line-height:1.5;margin-top:4px;color:var(--text-2)}
.chat-price{font-size:12px;color:var(--text-4);margin:4px 10px 8px;line-height:1.4}.document-preview{max-width:100%;padding:10px 14px;border-radius:12px;background:var(--surface-2);overflow-wrap:anywhere}.document-preview summary{cursor:pointer}.document-preview pre{white-space:pre-wrap;max-height:240px;overflow:auto;font:inherit;font-size:13px}.attachment-tools span{min-width:0;overflow-wrap:anywhere}
#chatCostDialog button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;margin:6px;border-radius:22px;background:var(--surface-2);color:var(--text);font-size:15px;font-weight:500;border:0}
#chatCostDialog #confirmChatCost{background:var(--blue);color:#fff}
.msg--user{flex-direction:column;align-items:flex-end;gap:8px}.msg--user .document-preview{box-sizing:border-box;width:min(100%,360px)}.message-cost{font-size:11px;color:var(--text-4)}
.reactions{flex-wrap:wrap}.answer-actions{display:flex;gap:8px;flex-wrap:wrap;flex-basis:100%;margin-top:8px}.answer-actions .chip{font-size:12px;padding:8px 10px;min-height:36px}.reactions select{max-width:100%;background:var(--surface);color:inherit;border-radius:8px;padding:8px}.attachment-row{display:flex;gap:8px;align-items:center;justify-content:space-between}.attachment-row span{overflow-wrap:anywhere;min-width:0}.attachment-row button{flex:none;min-width:36px;min-height:36px;color:inherit;background:transparent;border:0;font-size:22px}#attachmentStatus{display:block;min-width:0}#attachmentSummary{max-height:150px;overflow:auto}

/* --- Кнопка «↓ в конец» --- */
.jump-btn {
  position: absolute;
  right: 16px;
  bottom: 132px;
  z-index: 8;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface, #232327);
  color: var(--text, #F5F5F7);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  cursor: pointer;
  transition: transform .12s, opacity .15s;
}
.jump-btn:active { transform: scale(.9); }
.jump-btn.hidden { opacity: 0; pointer-events: none; }
.jump-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--blue, #2FA7E9);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jump-badge.hidden { display: none; }

/* Author display rules must never reveal hidden recovery or attachment controls. */
.input-area [hidden] { display:none !important; }

/* Mobile reading and a growing composer without shrinking the action targets. */
.chat-page .input-pill{height:auto;min-height:58px;align-items:flex-end}
.chat-page textarea.input{display:block;resize:none;border:0;outline:none;line-height:1.45;padding:10px 0;min-height:44px;max-height:160px;overflow-y:auto;box-sizing:border-box}
.chat-page .input-pill .send-btn,.chat-page .input-pill .attach-btn{flex:0 0 44px;width:44px;height:44px;margin-bottom:3px}
.chat-page .msg,.chat-page .answer{min-width:0;max-width:100%}
.chat-page .answer>.bubble{max-width:100%}
.chat-page .bubble{overflow-wrap:anywhere}
.chat-page .bubble.md{font-size:16px;line-height:1.6}
.chat-page .md pre.code{max-width:100%;font-size:13px;scrollbar-width:thin;overscroll-behavior-x:contain}
.chat-page .md pre.code::-webkit-scrollbar{display:block;height:4px}
.chat-page .md a{text-decoration:underline;text-underline-offset:3px}
.chat-page .reaction,.chat-page .attachment-row button,.chat-page .msheet-close{min-width:44px;min-height:44px}
@media(max-width:380px){.chat-page .chat-log{padding-left:12px;padding-right:12px}.chat-page .bubble{padding:11px 13px}.chat-page .chat-model-avatar{width:34px;height:34px;font-size:15px}.chat-page .chat-model{gap:6px}.chat-page .chat-model-name{font-size:15px}}
@media(prefers-reduced-motion:reduce){.chat-page .bubble,.chat-page .bubble--typing span,.chat-page .stream-cursor{animation:none}}

.image-resize-dialog{width:min(420px,calc(100% - 32px));max-height:80dvh;overflow:auto;margin:auto;padding:22px;border:1px solid #45454f;border-radius:22px;background:#242428;color:#f4f4f6;line-height:1.5}.image-resize-dialog::backdrop{background:#0009}.image-resize-dialog button{min-height:44px;padding:10px 14px;margin:5px;border:0;border-radius:16px;background:#354659;color:#fff}.input-image-preview{width:100%;max-height:150px;object-fit:contain;border-radius:12px}.attachment-preview{width:52px;height:52px;object-fit:cover;border-radius:10px;flex:none}.quote-summary{max-height:28dvh;overflow:auto;padding:10px 0;margin:8px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20}.quote-summary p{font-size:13px;overflow-wrap:anywhere}

.chat-page .attachment-replace{padding:0;min-width:52px;min-height:52px;border:0;background:transparent}.attachment-replace .attachment-preview{display:block}

.chat-page .chat-welcome{display:flex;align-items:center;gap:16px;margin:20px 0 24px;min-width:0}
.chat-welcome img{flex:0 0 72px;object-fit:contain}
.chat-welcome>div{min-width:0;overflow-wrap:anywhere}
.chat-welcome h1{font-size:22px;line-height:1.25;margin:0 0 8px}
.chat-welcome p{font-size:15px;line-height:1.5;margin:0;color:#aaaab4}
.chat-page .chat-settings-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:44px;padding:8px;background:transparent;border:0;border-radius:50%;color:inherit}
.chat-page #chatSettingsDialog p{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:350px){.chat-welcome img{flex-basis:56px;width:56px}.chat-page .chat-welcome{gap:12px}.chat-welcome h1{font-size:20px}.chat-welcome p{font-size:14px}}
/* Starter prompts should remain readable without a hidden horizontal row. */
.chat-page .chat-chips{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;overflow:visible;padding:0;margin-top:16px}
.chat-page .chat-chips .chip{white-space:normal;text-align:left;width:100%;height:auto;min-height:44px;padding:12px 16px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}

/* Compact selected files expand only when the user asks for actions. */
.chat-page #attachmentStatus{display:flex;align-items:flex-start;gap:8px;overflow-x:auto;max-width:100%;padding:4px 0}
.chat-page .attachment-compact{display:block;flex:0 0 auto;max-width:220px;background:var(--surface,#242428);border-radius:16px}
.chat-page .attachment-compact summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:6px 10px;cursor:pointer;list-style:none}
.chat-page .attachment-compact summary::-webkit-details-marker{display:none}
.chat-page .attachment-compact summary span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.4}
.chat-page .attachment-compact .attachment-preview{width:36px;height:36px;border-radius:8px}
.chat-page .attachment-item-actions{display:flex;padding:0 6px 6px;gap:4px}
.chat-page .attachment-item-actions button{font-size:13px;min-height:44px}