/* Chat screen base styles.
   Class and variable names match Lingo-style themes, so a theme pasted into 美化 → 自定义 CSS
   (loaded after this file) restyles everything. Keep these names stable. */
:root {
  --header-card-height: 64px;
  --list-bottom-clearance: 96px;
  --bubble-font-size: 16px;
  --bubble-padding: 8px 14px;
  --bubble-gap-same: 2px;
  --bubble-gap-diff: 12px;
  --chat-bg-color: #f7f7f8;
  --chat-bg-image: none;
  --bubble-me-bg: #007aff;
  --bubble-me-color: #ffffff;
  --bubble-them-bg: #e9e9eb;
  --bubble-them-color: #000000;
  --text-main: #111111;
  --text-sub: #8e8e93;
  /* Default chat chrome uses the liquid glass tokens from base.css; themes can override. */
  --ios-glass-bg: var(--lg-highlight), var(--lg-tint);
  --ios-glass-blur: var(--lg-blur);
  --ios-glass-border: none;
  --ios-glass-shadow: var(--lg-rim), var(--lg-edge), var(--lg-shadow);
  --btn-back-bg: rgba(120, 120, 128, 0.12);
  --typing-dot-color: #8e8e93;
  --more-options-bg: rgba(255, 255, 255, 0.92);
  --more-options-color: #111111;
  --more-options-divider: rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --chat-bg-color: #000000;
    --bubble-me-bg: #0a84ff;
    --bubble-them-bg: #262629;
    --bubble-them-color: #f5f5f7;
    --text-main: #f5f5f7;
    --text-sub: #98989d;
    --btn-back-bg: rgba(120, 120, 128, 0.24);
    --more-options-bg: rgba(44, 44, 46, 0.92);
    --more-options-color: #f5f5f7;
    --more-options-divider: rgba(255, 255, 255, 0.08);
  }
}

.chat-detail-screen {
  position: absolute; inset: 0; display: block;
  background-color: var(--chat-bg-color);
  background-image: var(--chat-bg-image);
  background-size: cover; background-position: center;
  color: var(--text-main);
}

/* ---------- header (floating card) ---------- */
.chat-header-custom {
  position: absolute; z-index: 100;
  top: calc(var(--safe-top) + 6px); left: 10px; right: 10px; height: var(--header-card-height);
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: var(--ios-glass-bg); backdrop-filter: var(--ios-glass-blur); -webkit-backdrop-filter: var(--ios-glass-blur);
  border: var(--ios-glass-border); box-shadow: var(--ios-glass-shadow); border-radius: 22px;
}
.chat-header-custom .header-btn-back {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn-back-bg); color: var(--bubble-me-bg);
}
.chat-header-custom .header-profile-section {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; cursor: pointer;
}
/* The avatar sits inside the title line (themes position it next to the title text). */
.chat-header-custom .chat-header-title {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 16px; font-weight: 600; line-height: 1.2;
}
.chat-header-custom .chat-header-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-custom .header-avatar-container { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; }
.chat-header-custom .chat-header-avatar { width: 100%; height: 100%; font-size: 12px; }
.chat-header-custom .chat-header-subtitle { margin-top: 2px; font-size: 12px; color: var(--text-sub); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-custom .header-actions { flex: none; display: flex; gap: 6px; }
.chat-header-custom .header-btn-info {
  min-width: 40px; height: 40px; border-radius: 99px; display: flex; align-items: center; justify-content: center;
  color: var(--bubble-me-bg); background: var(--btn-back-bg); white-space: nowrap;
}

/* ---------- message list ---------- */
.chat-messages-area {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(var(--safe-top) + var(--header-card-height) + 18px) 0 var(--list-bottom-clearance);
  display: flex; flex-direction: column;
}
.load-more {
  align-self: center; margin: 4px 0 12px; padding: 6px 14px; border-radius: 99px;
  background: var(--btn-back-bg); color: var(--text-sub); font-size: 13px;
}
.chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-sub); }
.timestamp-custom { align-self: center; color: var(--text-sub); font-size: 11.5px; margin: 14px 0 8px; }

.msg-bubble-wrapper {
  position: relative; display: flex; flex-direction: column; margin-bottom: var(--bubble-gap-same);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.msg-bubble-wrapper.is-last, .msg-bubble-wrapper.is-single { margin-bottom: var(--bubble-gap-diff); }
.msg-me { align-items: flex-end; padding: 0 12px 0 48px; }
.msg-them { align-items: flex-start; padding: 0 48px 0 12px; }
.msg-avatar-them-container, .msg-avatar-me-container { display: none; }
.msg-content-stack { display: flex; flex-direction: column; max-width: min(78vw, 340px); min-width: 0; }
.msg-me .msg-content-stack { align-items: flex-end; }
.msg-them .msg-content-stack { align-items: flex-start; }
.msg-bubble-container { position: relative; max-width: 100%; }
.msg-bubble-wrapper.is-sending { opacity: 0.6; }

.bubble-me-custom, .bubble-them-custom {
  position: relative; max-width: 100%; border-radius: 18px; padding: var(--bubble-padding);
  font-size: var(--bubble-font-size); line-height: 1.4; overflow-wrap: anywhere; word-break: break-word;
}
.bubble-me-custom { background: var(--bubble-me-bg); color: var(--bubble-me-color); }
.bubble-them-custom { background: var(--bubble-them-bg); color: var(--bubble-them-color); }
.bubble-me-custom.first, .bubble-me-custom.mid { border-bottom-right-radius: 6px; }
.bubble-me-custom.mid, .bubble-me-custom.last { border-top-right-radius: 6px; }
.bubble-them-custom.first, .bubble-them-custom.mid { border-bottom-left-radius: 6px; }
.bubble-them-custom.mid, .bubble-them-custom.last { border-top-left-radius: 6px; }

.msg-text p { margin: 0; }
.msg-text p + p { margin-top: 0.5em; }
.msg-text code { font: 0.88em/1.4 ui-monospace, Menlo, monospace; background: rgba(127, 127, 127, 0.18); padding: 1px 5px; border-radius: 5px; }
.msg-text pre { margin: 6px 0; padding: 10px; border-radius: 10px; background: rgba(127, 127, 127, 0.14); overflow-x: auto; white-space: pre; }
.msg-text pre code { background: none; padding: 0; }
.msg-text a { color: inherit; text-decoration: underline; }

/* images: the bubble itself becomes transparent */
.bubble-me-custom:has(.msg-image-wrapper), .bubble-them-custom:has(.msg-image-wrapper) { background: transparent; padding: 0; }
.msg-image-wrapper { display: flex; flex-wrap: wrap; gap: 4px; }
.msg-me .msg-image-wrapper { justify-content: flex-end; }
.msg-image-wrapper img { display: block; max-width: 220px; max-height: 280px; border-radius: 16px; object-fit: cover; cursor: zoom-in; }

/* thinking */
.nuo-thinking-wrap { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 4px; max-width: 100%; }
.nuo-thinking-btn {
  font-size: 12px; color: var(--text-sub); padding: 3px 10px; border-radius: 99px; background: var(--btn-back-bg);
}
.nuo-thinking-panel {
  margin-top: 6px; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--text-sub);
  background: var(--btn-back-bg); white-space: pre-wrap; max-height: 40vh; overflow-y: auto; -webkit-user-select: text; user-select: text;
}

/* typing indicator */
.typing-dots { display: inline-flex; gap: 4px; padding: 6px 2px; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--typing-dot-color); animation: typing-blink 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* tool calls & notices (BB机 additions) */
.msg-tool-row { display: flex; justify-content: center; padding: 0 24px; margin: 6px 0; }
.msg-tool-chip {
  max-width: 100%; padding: 5px 12px; border-radius: 99px; text-align: left;
  background: var(--btn-back-bg); color: var(--text-sub); font-size: 12.5px;
}
.msg-tool-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-tool-chip.is-open { border-radius: 14px; }
.msg-tool-chip.is-failed { color: #ff3b30; }
.msg-tool-detail { margin: 6px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; font: 12px/1.45 ui-monospace, Menlo, monospace; }
.msg-meta-caption {
  align-self: flex-start; display: flex; align-items: center; gap: 8px; margin: -6px 48px 10px 16px;
  font-size: 11px; color: var(--text-sub); -webkit-user-select: none; user-select: none;
}
.msg-usage { opacity: 0.8; cursor: pointer; padding: 2px 0; }
.msg-versions { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.msg-versions button { width: 24px; height: 24px; border-radius: 50%; color: var(--bubble-me-bg); font-size: 18px; line-height: 1; }
.msg-versions button:disabled { opacity: 0.25; }

/* quote above a bubble */
.msg-reply-block-detached {
  display: flex; align-items: center; gap: 5px; max-width: 85%; margin: 2px 4px 4px; font-size: 12.5px; line-height: 1.3;
  color: var(--text-sub);
}
.msg-reply-detached-name { flex: none; font-weight: 600; }
.msg-reply-detached-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-reply-detached-me { align-self: flex-end; }
.msg-reply-detached-them { align-self: flex-start; }

/* inner thoughts (潜台词) */
.msg-subtext-chip { display: flex; align-items: center; gap: 6px; margin: 4px 6px 6px; max-width: calc(100% - 24px); }
.msg-subtext-chip.is-me { align-self: flex-end; flex-direction: row-reverse; }
.msg-subtext-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; flex: none;
  font-size: 12px; color: var(--bubble-me-bg); background: var(--btn-back-bg);
}
.msg-subtext-toggle::after { content: "心声"; }
.msg-subtext-chip.is-open .msg-subtext-toggle { color: var(--text-sub); }
.msg-subtext-chip.is-open .msg-subtext-toggle::after { content: "收起"; }
.msg-subtext-body {
  padding: 6px 12px; border-radius: 16px; font-size: 13px; line-height: 1.4; color: var(--text-main);
  background: var(--lg-highlight), var(--lg-tint); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-rim), var(--lg-edge); animation: pop-in 0.42s var(--spring);
}

/* translation under a foreign-language bubble */
.msg-translation-detached { max-width: min(78vw, 340px); margin: 3px 6px 4px; }
.msg-translation-detached-them { align-self: flex-start; }
.msg-translation-detached-me { align-self: flex-end; text-align: right; }
.msg-translation-detached-content { font-size: 13px; line-height: 1.4; color: var(--text-sub); }

/* reactions */
.msg-bubble-wrapper.has-reactions { margin-bottom: calc(var(--bubble-gap-same) + 14px); }
.msg-bubble-wrapper.has-reactions.is-last, .msg-bubble-wrapper.has-reactions.is-single { margin-bottom: calc(var(--bubble-gap-diff) + 12px); }
.msg-reaction-badge {
  position: absolute; bottom: -14px; z-index: 5; padding: 2px 6px; border-radius: 99px; font-size: 13px; line-height: 1.3;
  background: var(--lg-highlight), var(--lg-tint); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-rim), var(--lg-edge), 0 2px 6px rgba(0, 0, 0, 0.12); animation: pop-in 0.42s var(--spring);
}
.msg-them .msg-reaction-badge { right: -8px; }
.msg-me .msg-reaction-badge { left: -8px; }

/* jumped to from search */
.msg-bubble-wrapper.is-highlight .bubble-me-custom, .msg-bubble-wrapper.is-highlight .bubble-them-custom { animation: flash 1.2s ease 2; }
@keyframes flash { 50% { filter: brightness(1.25) saturate(1.3); transform: scale(1.03); } }
.msg-system-notice.is-info { color: var(--text-sub); font-size: 12px; }
.msg-system-notice { align-self: center; margin: 8px 24px; font-size: 13px; color: #ff3b30; text-align: center; }

/* ---------- input bar ---------- */
.input-area-custom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 100;
  padding: 8px 10px calc(var(--safe-bottom) + 10px); pointer-events: none;
}
.keyboard-open .input-area-custom { padding-bottom: 8px; }
.input-area-custom > * { pointer-events: auto; }
.input-row-wrapper {
  display: flex; align-items: flex-end; gap: 6px; padding: 5px;
  background: var(--ios-glass-bg); backdrop-filter: var(--ios-glass-blur); -webkit-backdrop-filter: var(--ios-glass-blur);
  border: var(--ios-glass-border); box-shadow: var(--ios-glass-shadow); border-radius: 24px;
}
.input-btn-plus, .input-btn-ai, .send-btn-custom, .stop-btn-custom {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
}
.input-btn-plus { color: var(--text-sub); background: var(--btn-back-bg); transition: transform 0.2s; }
.input-btn-plus.is-open { transform: rotate(45deg); }
.input-btn-ai { color: var(--bubble-me-bg); background: var(--btn-back-bg); }
.send-btn-custom { color: #fff; background: var(--bubble-me-bg); }
.stop-btn-custom { color: var(--text-sub); background: var(--btn-back-bg); }
.input-action-bar-custom { flex: 1; min-width: 0; display: flex; align-items: center; position: relative; }
.input-box-custom {
  width: 100%; border: 0; outline: none; resize: none; background: transparent; color: var(--text-main);
  font-size: 16px; line-height: 1.4; padding: 8px 4px; min-height: 38px; max-height: 140px; display: block;
}
.input-box-custom::placeholder { color: var(--text-sub); }

/* stickers */
.msg-image-wrapper img.msg-sticker { max-width: 120px; max-height: 120px; border-radius: 10px; object-fit: contain; cursor: default; }
.bb-sticker-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text-sub); }
.bb-sticker-btn.is-open { color: var(--bubble-me-bg); }
.sticker-panel {
  margin: 0 0 10px; max-height: 38vh; overflow-y: auto; border-radius: 24px; padding: 10px;
  background: var(--lg-highlight), var(--more-options-bg); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--lg-rim), var(--lg-edge), var(--lg-shadow); animation: pop-in 0.42s var(--spring);
}
.sticker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sticker-cell { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; transition: transform 0.3s var(--spring); }
.sticker-cell:active { transform: scale(0.88); background: var(--btn-back-bg); }
.sticker-cell img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sticker-empty { text-align: center; color: var(--text-sub); font-size: 13px; margin: 18px 0; }

.input-reply-preview-bar {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 8px 10px 8px 12px; border-radius: 18px;
  background: var(--ios-glass-bg); -webkit-backdrop-filter: var(--ios-glass-blur); backdrop-filter: var(--ios-glass-blur);
  box-shadow: var(--ios-glass-shadow); animation: pop-in 0.42s var(--spring);
}
.input-reply-preview-bar::before { content: ""; width: 3px; align-self: stretch; border-radius: 2px; background: var(--bubble-me-bg); flex: none; }
.input-reply-preview-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.input-reply-preview-name { font-size: 12px; font-weight: 600; color: var(--bubble-me-bg); }
.input-reply-preview-text { font-size: 13px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input-reply-preview-close { width: 26px; height: 26px; border-radius: 50%; flex: none; color: var(--text-sub); background: var(--btn-back-bg); font-size: 12px; }
.input-attachments { display: flex; gap: 8px; padding: 0 4px 8px; overflow-x: auto; }
.input-attachment { position: relative; flex: none; width: 64px; height: 64px; }
.input-attachment img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.input-attachment button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; line-height: 22px; text-align: center;
}
.input-attachment.is-loading { border-radius: 12px; background: var(--btn-back-bg); display: grid; place-items: center; }
.input-attachment.is-loading span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text-sub); border-top-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.more-options-popup {
  margin: 0 0 10px; width: 230px; border-radius: 26px; overflow: hidden;
  background: var(--lg-highlight), var(--more-options-bg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--lg-rim), var(--lg-edge), var(--lg-shadow);
  transform-origin: bottom left; animation: pop-in 0.42s var(--spring);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } }
.more-options-item-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: var(--more-options-color); cursor: pointer;
  border-bottom: 0.5px solid var(--more-options-divider);
}
.more-options-item-row:last-child { border-bottom: 0; }
.more-options-item-row:active { background: var(--btn-back-bg); }

/* several photos sent together: a stack; the top photo is flicked aside to show the next */
.photo-stack { position: relative; width: 220px; height: 270px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.msg-image-wrapper .photo-stack .photo-card { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 16px; -webkit-user-drag: none; user-drag: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s; will-change: transform; }
.msg-image-wrapper .photo-stack .photo-card.is-dragging { transition: none; }
.photo-stack-count { position: absolute; z-index: 20; right: 8px; top: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; pointer-events: none; }
.msg-usage.is-cold { color: #e8a33a; }