/* ========================================================
   草纸素描主题  (sketch_theme.css)
   通过 body.sketch 类名激活，不影响默认主题
   ======================================================== */

body.sketch {
  --sk-paper:       #f6f2eb;
  --sk-side:        #eee9df;
  --sk-pill:        #e7dfd2;
  --sk-card:        rgba(255,252,246,0.76);
  --sk-card-strong: rgba(255,252,246,0.90);
  --sk-text:        #26231f;
  --sk-text-mute:   rgba(55,49,41,0.56);
  --sk-border:      rgba(61,54,45,0.15);
  --sk-line:        rgba(51,46,39,0.30);
  --sk-line-soft:   rgba(51,46,39,0.13);
  --sk-accent:      #a06a52;
  --sk-sage:        #8ca66f;
  --sk-blue:        #82a9b8;
  --sk-rose:        #d99ba6;
  --sk-smudge:      rgba(77,67,54,0.055);
  background: #f6f2eb;
  color: var(--sk-text);
}

.sketch-texture-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* 只做页面底层的纸纹叠加，绝不能盖住设置面板/弹窗等真实 UI（它们的 z-index 多在 10~500 之间） */
  z-index: 1;
  opacity: 0.72;
  mix-blend-mode: multiply;
  background:
    linear-gradient(105deg, rgba(70,62,50,0.022) 0 1px, transparent 1px 4px),
    linear-gradient(15deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 6px),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.04' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.32'/></svg>");
}

body.sketch .chakra-button,
body.sketch button[class*="radix"],
body.sketch .lian-composer-send-btn,
body.sketch .lian-composer-plus-btn,
body.sketch .lian-composer-color-btn {
  border-radius: 50% 46% 52% 48% !important;
  border: 1px solid rgba(51,46,39,0.13) !important;
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 5px 14px rgba(72,61,45,0.055) !important;
}

body.sketch textarea,
body.sketch input[type="text"],
body.sketch .lian-rich-editor,
body.sketch .lian-composer-bar {
  border-radius: 22px 19px 24px 20px !important;
  border: 1px solid rgba(51,46,39,0.13) !important;
  background: rgba(255,255,255,0.54) !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 6px 18px rgba(72,61,45,0.06) !important;
}

/* ---------- 草纸模式：消息气泡纸质化（轻纸片版 A）---------- */
body.sketch [data-bubble-role] {
  color: var(--sk-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 12px 26px rgba(72,61,45,0.060),
    0 2px 5px rgba(72,61,45,0.035) !important;
  outline: inherit;
  filter: none !important;
  isolation: isolate;
}

body.sketch .lian-main-chat-shell,
body.sketch .lian-main-chat-bg,
body.sketch #lian-chat-area,
body.sketch #lian-chat-scroll {
  background-color: var(--sk-paper) !important;
  background-image:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.42), transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(218,205,180,0.16), transparent 28%),
    linear-gradient(180deg, #f8f5ef 0%, var(--sk-paper) 48%, #f3eee5 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.sketch .lian-main-chat-frosted-bg {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.sketch [data-bubble-role] > *:not(.lian-bubble-inner-frame),
body.sketch .lian-doc-card > * {
  position: relative;
  z-index: 1;
}

/* 内圈虚线装饰框必须保持绝对定位悬浮，否则会掉进文档流：
   气泡被撑臃肿、四边虚线塌成底部一条线 */
body.sketch [data-bubble-role] > .lian-bubble-inner-frame {
  position: absolute !important;
  z-index: 1;
}

/* 草纸模式：气泡底色走 --lian-bubble-bg（来自设置页/State），纸质纹理由 ::before/::after 叠加 */
body.sketch [data-bubble-role]:not(.lian-droplet) {
  background: var(--lian-bubble-bg) !important;
}

/* 淡手绘纸纹，不影响正文阅读 */
body.sketch [data-bubble-role]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.26;
  mix-blend-mode: multiply;
  background:
    linear-gradient(102deg, rgba(70,62,50,0.035) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 18% 24%, rgba(77,67,54,0.045), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(77,67,54,0.035), transparent 20%);
}

body.sketch [data-bubble-role]::after {
  content: "";
  position: absolute;
  inset: -1px 1px 1px -1px;
  pointer-events: none;
  border: 1.35px solid rgba(51,46,39,0.105);
  border-radius: inherit;
  transform: rotate(-0.25deg);
  box-shadow:
    1px 0 0 rgba(51,46,39,0.035),
    -1px 1px 0 rgba(255,255,255,0.30);
  opacity: 0.86;
}

body.sketch [data-bubble-role="user"]::after {
  border-color: rgba(94,82,66,0.13);
  transform: rotate(0.28deg);
}

/* hover：像纸被轻轻压了一下 */
body.sketch [data-bubble-role]:hover {
  filter: none !important;
  transform: translateY(-0.5px);
}

/* 关掉水珠/玻璃伪元素，避免和纸纹冲突 */
body.sketch .lian-droplet::before,
body.sketch .lian-droplet::after {
  display: none !important;
}

/* 草纸模式：完全隐藏内层装饰框，不要和纸纹冲突 */
body.sketch [data-bubble-role] > div[style*="border"] {
  display: block;
}

/* 气泡内按钮：复制、朗读、love 等（不含代码块工具栏，见下方 .lian-code-block-toolbar） */
body.sketch .lian-bubble-actions button,
body.sketch [data-bubble-role] button {
  background: rgba(255,255,255,0.48) !important;
  border: 1px solid rgba(51,46,39,0.12) !important;
  color: rgba(51,46,39,0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 3px 8px rgba(72,61,45,0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.sketch .lian-bubble-actions button:hover,
body.sketch [data-bubble-role] button:hover {
  background: rgba(255,252,246,0.82) !important;
  color: var(--sk-text) !important;
  filter: none;
}

/* 语音转写、联网来源、Mermaid 等嵌套内容 */
body.sketch [data-bubble-role] .lian-voice-transcript,
body.sketch [data-bubble-role] .lian-doc-content,
body.sketch [data-bubble-role] .lian-mermaid-msg {
  background: rgba(255,255,255,0.34) !important;
  border: 1px solid rgba(51,46,39,0.10) !important;
  border-radius: 12px 10px 13px 11px !important;
}

/* ---------- 草纸模式：文档卡片纸质化（底色/磨砂走 --lian-bubble-*，与 AI 气泡设置同步） ---------- */
body.sketch .lian-doc-card {
  color: var(--sk-text) !important;
  background: var(--lian-bubble-bg) !important;
  border: 1px solid rgba(51,46,39,0.14) !important;
  border-left: 3px solid rgba(160,106,82,0.24) !important;
  border-radius: 12px 17px 19px 15px !important;
  backdrop-filter: var(--lian-bubble-backdrop, none);
  -webkit-backdrop-filter: var(--lian-bubble-backdrop, none);
  box-shadow:
    var(--lian-bubble-shadow, none),
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 12px 26px rgba(72,61,45,0.060) !important;
  outline: none !important;
  filter: none !important;
}

body.sketch .lian-doc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.30;
  mix-blend-mode: multiply;
  background:
    linear-gradient(102deg, rgba(70,62,50,0.03) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 14% 20%, rgba(77,67,54,0.04), transparent 20%),
    radial-gradient(circle at 86% 78%, rgba(77,67,54,0.03), transparent 22%);
}

body.sketch .lian-doc-card:hover {
  filter: none !important;
  transform: translateY(-0.5px);
}

/* 正文区直接铺在卡片纸上，不要再套一层框 */
body.sketch .lian-doc-card .lian-doc-content {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--sk-text) !important;
  margin-top: 2px;
}

body.sketch .lian-doc-card .lian-process-group + .lian-doc-content {
  margin-top: 4px;
}

body.sketch .lian-doc-card .lian-doc-content h1,
body.sketch .lian-doc-card .lian-doc-content h2,
body.sketch .lian-doc-card .lian-doc-content h3,
body.sketch .lian-doc-card .lian-doc-content .rt-Heading {
  color: rgba(51,46,39,0.88) !important;
}

body.sketch .lian-doc-card .lian-doc-content a {
  color: var(--sk-accent) !important;
}

body.sketch .lian-doc-card .lian-doc-content code,
body.sketch .lian-doc-card .lian-doc-content .rt-Code {
  background: rgba(235,227,215,0.55) !important;
  color: rgba(51,46,39,0.88) !important;
  border: 1px solid rgba(51,46,39,0.10) !important;
}

body.sketch .lian-doc-card .lian-mermaid-msg {
  background: rgba(251,248,241,0.64) !important;
  border: 1px solid rgba(51,46,39,0.14) !important;
  border-radius: 10px 9px 12px 10px !important;
}

/* 联网来源折叠卡（气泡 / 文档卡片通用） */
body.sketch .lian-web-sources-panel {
  background: rgba(251,248,241,0.72) !important;
  border: 1px solid rgba(51,46,39,0.14) !important;
  border-radius: 10px 9px 12px 10px !important;
}

body.sketch .lian-doc-card .lian-doc-toolbar button,
body.sketch .lian-doc-card .lian-bubble-actions button {
  background: rgba(255,255,255,0.48) !important;
  border: 1px solid rgba(51,46,39,0.12) !important;
  color: rgba(51,46,39,0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 3px 8px rgba(72,61,45,0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 9px 7px 11px 8px !important;
}

body.sketch .lian-doc-card .lian-doc-toolbar button:hover,
body.sketch .lian-doc-card .lian-bubble-actions button:hover {
  background: rgba(235,227,215,0.86) !important;
  color: var(--sk-text) !important;
  filter: none;
}

body.sketch .lian-conv-row.is-current {
  background: var(--sk-pill) !important;
  border-radius: 9px 7px 11px 8px !important;
  box-shadow: inset 0 0 0 1px rgba(51,46,39,0.04) !important;
}

body.sketch .lian-glass-card,
body.sketch .lian-glass-panel-deep,
body.sketch #lian-sidebar-panel,
body.sketch #lian-settings-panel {
  background: rgba(255,252,246,0.66) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 18px 16px 20px 17px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 8px 22px rgba(72,61,45,0.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.sketch .rt-Heading,
body.sketch h1,
body.sketch h2,
body.sketch h3 {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

body.sketch .hljs-comment,
body.sketch .hljs-quote        { color: rgba(51,46,39,0.42); font-style: italic; }
body.sketch .hljs-keyword,
body.sketch .hljs-selector-tag { color: #4a4236; }
body.sketch .hljs-string,
body.sketch .hljs-attr         { color: #6a7b5e; }
body.sketch .hljs-number,
body.sketch .hljs-literal      { color: #9a7b4a; }
body.sketch .hljs-title,
body.sketch .hljs-function     { color: #5a6b7a; }

@keyframes sketch-pencil-drift {
  0%,100% { transform: rotate(-1.5deg) translateY(0px); }
  30%      { transform: rotate(1.2deg)  translateY(-2px); }
  60%      { transform: rotate(-0.8deg) translateY(1px); }
}
@keyframes sketch-text-flicker {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* 草纸模式也保留小章鱼思考动画（不受气泡 filter:none 影响） */
body.sketch .lian-octo-walk {
  filter: drop-shadow(0 3px 8px rgba(217, 119, 87, 0.35));
  animation: lian-octo-walk 18s linear infinite;
}
body.sketch .lian-octo-flip {
  animation: lian-octo-flip 18s step-end infinite;
}
body.sketch .lian-octo-svg .octo-body {
  animation: lian-octo-bob 0.6s ease-in-out infinite;
}
body.sketch .lian-octo-svg .octo-leg {
  animation: lian-octo-step 0.6s ease-in-out infinite;
}
body.sketch .lian-octo-svg .octo-leg.alt {
  animation-delay: 0.3s;
}

body.sketch .thinking-sketch-text {
  animation: sketch-text-flicker 2.8s steps(2, end) infinite;
  font-family: "American Typewriter", "Courier New", monospace;
  font-size: 0.95rem;
  color: rgba(51,46,39,0.72);
}

body.sketch .session-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 6px 10px; align-self: stretch;
}
body.sketch .session-divider::before,
body.sketch .session-divider::after {
  content: ''; flex: 1; height: 1px;
}
body.sketch .session-divider::before {
  background: linear-gradient(90deg, transparent, rgba(77,67,54,0.16));
}
body.sketch .session-divider::after {
  background: linear-gradient(90deg, rgba(77,67,54,0.16), transparent);
}
body.sketch .session-divider-label {
  font-size: 0.72rem; letter-spacing: 0.02em;
  color: rgba(77,67,54,0.6);
  padding: 3px 11px; border-radius: 999px;
  background: rgba(77,67,54,0.055);
  border: 1px solid rgba(77,67,54,0.1);
}

/* ── 聊天主区域 ─────────────────────────────────────────── */
body.sketch #lian-chat-area,
body.sketch #lian-chat-scroll {
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.42), transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(218,205,180,0.16), transparent 28%),
    linear-gradient(180deg, #f8f5ef 0%, var(--sk-paper) 48%, #f3eee5 100%) !important;
}

body.sketch .lian-chat-welcome-card {
  background: rgba(255,252,246,0.66) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 18px 16px 20px 17px !important;
  box-shadow: 0 8px 22px rgba(72,61,45,0.045) !important;
  backdrop-filter: none !important;
}

/* ── 侧栏 ───────────────────────────────────────────────── */
body.sketch #lian-sidebar-panel {
  background: var(--sk-side) !important;
}

body.sketch .lian-conv-row {
  border-radius: 9px 7px 11px 8px !important;
}

body.sketch .lian-conv-row:hover {
  background: rgba(77,67,54,0.045) !important;
}

/* ── 输入区 / 上传预览 ───────────────────────────────────── */
body.sketch .lian-composer-shell,
body.sketch .lian-composer-bar,
body.sketch .lian-plus-menu-panel,
body.sketch .lian-pending-images-panel {
  background: rgba(255,255,255,0.56) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 24px 21px 26px 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 7px 20px rgba(72,61,45,0.060) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.sketch .lian-pending-images-panel img {
  border: 1.5px solid var(--sk-line-soft) !important;
  border-radius: 9px 7px 11px 8px !important;
}

/* ── 文字按钮（非圆形图标按钮）──────────────────────────── */
body.sketch .rt-Button:not(.lian-composer-send-btn):not(.lian-composer-plus-btn):not(.lian-composer-color-btn),
body.sketch .chakra-button:not(.lian-composer-send-btn):not(.lian-composer-plus-btn):not(.lian-composer-color-btn) {
  border-radius: 12px 10px 13px 11px !important;
}

body.sketch .rt-Button:hover,
body.sketch .chakra-button:hover,
body.sketch button[class*="radix"]:hover {
  box-shadow: none !important;
  filter: brightness(0.97);
}

/* 文档模式卡片下方工具栏 */
body.sketch .lian-doc-content + * button,
body.sketch .lian-bubble-actions button {
  border-radius: 9px 7px 11px 8px !important;
}

/* ── 代码块（草纸浅底 + earth-tone 高亮）────────────────── */
body.sketch .lian-code-block {
  background: rgba(255,252,246,0.78) !important;
  border: 1px solid var(--sk-line-soft) !important;
  border-radius: 13px 15px 14px 16px !important;
}

body.sketch .lian-code-block .rt-CodeBlock,
body.sketch .lian-code-block pre,
body.sketch .lian-code-block code,
body.sketch .lian-code-block .rt-ScrollAreaViewport {
  background: transparent !important;
  color: var(--sk-text) !important;
}

body.sketch .lian-code-block-toolbar button {
  border-radius: 50% 46% 52% 48% !important;
  border: 1px solid var(--sk-line-soft) !important;
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 3px 8px rgba(72,61,45,0.045) !important;
  color: var(--sk-text) !important;
}

body.sketch .lian-code-block-toolbar button:hover {
  background: rgba(235,227,215,0.95) !important;
  filter: none;
}

body.sketch .lian-composer-bar,
body.sketch .lian-chat-welcome-card,
body.sketch .lian-glass-card,
body.sketch .lian-doc-card,
body.sketch .lian-code-block,
body.sketch .lian-plus-menu-panel,
body.sketch .lian-pending-images-panel {
  position: relative;
  isolation: isolate;
}

body.sketch .lian-composer-bar::after,
body.sketch .lian-chat-welcome-card::after,
body.sketch .lian-glass-card::after,
body.sketch .lian-doc-card::after,
body.sketch .lian-code-block::after,
body.sketch .lian-plus-menu-panel::after,
body.sketch .lian-pending-images-panel::after {
  content: "";
  position: absolute;
  inset: -1px 1px 1px -1px;
  border: 1.25px solid rgba(51,46,39,0.10);
  border-radius: inherit;
  pointer-events: none;
  transform: rotate(0.22deg);
  box-shadow: -1px 1px 0 rgba(255,255,255,0.26);
}

body.sketch .lian-composer-send-btn,
body.sketch .lian-composer-plus-btn,
body.sketch .lian-composer-color-btn,
body.sketch .lian-bubble-actions button,
body.sketch .lian-code-block-toolbar button {
  position: relative;
}

body.sketch .lian-composer-send-btn::after,
body.sketch .lian-composer-plus-btn::after,
body.sketch .lian-composer-color-btn::after,
body.sketch .lian-bubble-actions button::after,
body.sketch .lian-code-block-toolbar button::after {
  content: "";
  position: absolute;
  inset: 1px -1px -1px 1px;
  border: 1px solid rgba(51,46,39,0.09);
  border-radius: inherit;
  pointer-events: none;
  transform: rotate(-0.7deg);
}

/* ── 代码全屏弹层（草纸模式）────────────────────────────── */
body.sketch .lian-code-overlay-panel {
  background: var(--sk-paper) !important;
  border-top: 1.5px solid var(--sk-line-soft) !important;
}

body.sketch .lian-code-overlay-panel .rt-CodeBlock,
body.sketch .lian-code-overlay-panel pre,
body.sketch .lian-code-overlay-panel code {
  background: transparent !important;
  color: var(--sk-text) !important;
}

/* ── 移动端防溢出 ───────────────────────────────────────── */
@media (max-width: 480px) {
  body.sketch .lian-code-block-toolbar {
    top: 4px !important;
    right: 4px !important;
    gap: 2px !important;
  }
  body.sketch .lian-pending-images-panel {
    padding: 8px !important;
  }
}

/* ============================================================
   草纸模式 · 方案 A：便签 vs 原稿纸
   瘦身 + 去四角 emoji + 无边框 + 分角色纸质底色/纸纹
   （只在 body.sketch 下生效，普通模式不受影响）
   ============================================================ */

/* 瘦身：气泡贴文字宽度 */
body.sketch [data-bubble-role] {
  width: fit-content !important;
  max-width: 100% !important;
}

/* 隐藏四个角的装饰 emoji / 贴纸 */
body.sketch .lian-bubble-corner-deco {
  display: none !important;
}

body.sketch [data-bubble-role]::after {
  display: block;
}

/* ── 老婆：便签纸阴影（底色仍由 --lian-bubble-bg 控制）── */
body.sketch [data-bubble-role="user"] {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.72) inset,
    0 8px 20px rgba(72,61,45,0.07),
    0 2px 5px rgba(160,106,82,0.05) !important;
}

/* 便签横线纸纹 */
body.sketch [data-bubble-role="user"]::before {
  opacity: 0.24 !important;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 22px,
      rgba(94,82,66,0.055) 22px,
      rgba(94,82,66,0.055) 23px
    ),
    radial-gradient(circle at 14% 16%, rgba(160,106,82,0.045), transparent 24%) !important;
}

/* ── 老公：左侧铅笔色带（底色仍由 --lian-bubble-bg 控制）── */
body.sketch [data-bubble-role="assistant"] {
  box-shadow:
    inset 2px 0 0 rgba(160,106,82,0.12),
    0 1px 0 rgba(255,255,255,0.42) inset,
    0 4px 14px rgba(72,61,45,0.03) !important;
}

/* 素描纸斜向纤维 + 左缘石墨晕染 */
body.sketch [data-bubble-role="assistant"]::before {
  opacity: 0.20 !important;
  background:
    linear-gradient(102deg, rgba(70,62,50,0.030) 0 1px, transparent 1px 6px),
    linear-gradient(168deg, rgba(70,62,50,0.022) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(77,67,54,0.048) 0%, transparent 32%),
    radial-gradient(circle at 6% 48%, rgba(77,67,54,0.038), transparent 38%) !important;
}