.jdh-ch { position:relative; display:grid; grid-template-columns:240px minmax(0,1fr); height:min(720px, calc(100vh - 140px)); min-height:520px;
  background:#fff; border-radius:24px; border:1px solid rgba(24,27,41,.06); text-align:left; overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(24,27,41,.45), 0 2px 8px rgba(24,27,41,.04); }
/* ChatSkeleton (Suspense fallback + loading.tsx): the same box, shimmer lines for the list and the composer */
.jdh-ch-list-skel { padding:10px 12px; }
.jdh-ch-open-skel { max-width:640px; margin:24px auto; padding:0 20px; }
.jdh-ch-list-skel i { height:14px; }
.jdh-ch-skel-side { padding:20px 18px; border-right:1px solid rgba(24,27,41,.06); background:#FAFBFC; }
.jdh-ch-skel-main { align-self:end; padding:28px; }
.jdh-ch-skel-hero { max-width:720px; margin:0 auto; align-items:center; gap:18px; }
.jdh-ch-skel-hero i { height:20px; width:40%; }
.jdh-ch-skel-hero i:nth-child(2) { height:56px; width:100%; } .jdh-ch-skel-hero i:nth-child(3) { height:28px; width:80%; }
.jdh-ch.is-empty { display:flex; align-items:center; justify-content:center; min-height:260px; height:auto; }
.jdh-ch-unavailable { color:var(--jd-muted); font-size:16px; }

/* ---- sidebar ---- */
.jdh-ch-side { display:flex; flex-direction:column; min-height:0; padding:16px 12px; background:#F7F9FB; border-right:1px solid var(--jd-line); }
.jdh-ch-new { display:flex; align-items:center; justify-content:center; gap:6px; height:40px; border:1px solid var(--jd-line); border-radius:12px;
  background:#fff; color:var(--jd-ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.jdh-ch-new:hover:not(:disabled) { border-color:rgba(46,116,131,.5); }
.jdh-ch-side-h { margin:16px 6px 6px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--jd-muted); }
.jdh-ch-list { flex:1; min-height:0; overflow:auto; margin:0; padding:0; list-style:none; }
.jdh-ch-list li { display:flex; align-items:center; border-radius:10px; }
.jdh-ch-list li.is-on, .jdh-ch-list li:hover { background:rgba(46,116,131,.08); }
.jdh-ch-list-item { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:8px; border:0; background:none; font:inherit;
  font-size:14px; color:var(--jd-ink); text-align:left; cursor:pointer; }
.jdh-ch-list-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jdh-ch-list-del { flex:none; width:28px; height:28px; display:none; align-items:center; justify-content:center; border:0; border-radius:8px;
  background:none; color:var(--jd-muted); cursor:pointer; }
.jdh-ch-list li:hover .jdh-ch-list-del, .jdh-ch-list li.is-on .jdh-ch-list-del, .jdh-ch-list li:focus-within .jdh-ch-list-del { display:inline-flex; }
.jdh-ch-list-del:hover { color:var(--jd-ai-red); }
.jdh-ch-list-empty { padding:8px; font-size:13px; color:var(--jd-muted); }
.jdh-ch-side-foot { display:flex; flex-direction:column; gap:6px; padding:10px 6px 0; border-top:1px solid var(--jd-line); font-size:12px; color:var(--jd-muted); }
.jdh-ch-clear { align-self:flex-start; padding:0; border:0; background:none; font:inherit; font-size:12px; color:var(--jd-ai-red); cursor:pointer; text-decoration:underline; }

/* ---- main ---- */
.jdh-ch-main { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
.jdh-ch-top { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--jd-line); }
.jdh-ch-histbtn { display:none; align-items:center; gap:6px; height:34px; padding:0 10px; border:1px solid var(--jd-line); border-radius:10px;
  background:#fff; font:inherit; font-size:13px; color:var(--jd-ink); cursor:pointer; }
.jdh-ch-cost { margin-left:auto; font-size:13px; color:var(--jd-muted); white-space:nowrap; }
.jdh-ch-demo { margin:0; padding:8px 18px; background:#FFF7E6; color:#92400E; font-size:13px; border-bottom:1px solid #FDE7C2; }
.jdh-ch-store-note { margin:0; padding:6px 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#FEF2F2; color:#991B1B; font-size:13px; border-bottom:1px solid #FECACA; }

.jdh-ch-picker { position:relative; }
.jdh-ch-picker-btn { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--jd-line); border-radius:10px;
  background:#fff; font:inherit; font-size:15px; font-weight:600; color:var(--jd-ink); cursor:pointer; }
.jdh-ch-picker-btn:disabled { opacity:.6; cursor:default; }
.jdh-ch-menu { position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:320px; max-width:calc(100vw - 40px); margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--jd-line); border-radius:14px; box-shadow:0 24px 60px -24px rgba(24,27,41,.35); }
.jdh-ch-menu-item { width:100%; display:flex; flex-direction:column; gap:2px; padding:9px 10px; border:0; border-radius:10px; background:none;
  font:inherit; text-align:left; cursor:pointer; }
.jdh-ch-menu-item:hover, .jdh-ch-menu-item.is-on { background:rgba(46,116,131,.08); }
.jdh-ch-menu-top { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--jd-ink); }
.jdh-ch-menu-top .jdh-ch-tag:last-child { margin-left:auto; }
.jdh-ch-menu-sub { font-size:12px; color:var(--jd-muted); }
.jdh-ch-tag { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:100px; background:#EEF3F5; font-size:11px; font-weight:600; color:var(--jd-teal-ink, var(--jd-teal)); }
.jdh-ch-tag.is-demo { background:#FFF1D6; color:#92400E; }

.jdh-ch-scroll { flex:1; min-height:0; overflow:auto; padding:20px 22px 8px; display:flex; flex-direction:column; gap:18px; }
.jdh-ch-empty { margin:auto; max-width:520px; text-align:center; }
.jdh-ch-empty-t { font-family:var(--jd-serif); font-size:26px; line-height:32px; color:var(--jd-ink); }
.jdh-ch-empty-b { margin-top:8px; font-size:15px; color:var(--jd-muted); }
.jdh-ch-sugg { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.jdh-ch-sugg button { padding:10px 14px; border:1px solid var(--jd-line); border-radius:12px; background:#FBFCFE; font:inherit; font-size:14px;
  color:var(--jd-ink); text-align:left; cursor:pointer; }
.jdh-ch-sugg button:hover:not(:disabled) { border-color:rgba(46,116,131,.5); background:#fff; }

.jdh-ch-msg { display:flex; flex-direction:column; gap:6px; max-width:100%; }
.jdh-ch-msg.is-user { align-items:flex-end; }
.jdh-ch-bubble { max-width:min(80%, 640px); padding:10px 14px; border-radius:16px 16px 4px 16px; background:#EAF3F5; color:var(--jd-ink);
  font-size:15px; line-height:23px; white-space:pre-wrap; overflow-wrap:anywhere; }
.jdh-ch-who { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--jd-muted); }
.jdh-ch-answer { font-size:15px; line-height:25px; color:var(--jd-ink); overflow-wrap:anywhere; }
.jdh-ch-answer .jdh-md pre { overflow:auto; }
.jdh-ch-dots { display:flex; padding:10px 0; } /* the pulsing dots themselves: .jdh-dots (../tool/tool-css) */
.jdh-ch-dots .jdh-dots i { width:7px; height:7px; }
.jdh-ch-sources { margin-top:4px; padding:10px 12px; border:1px solid var(--jd-line); border-radius:12px; background:#FBFCFE; }
.jdh-ch-sources p { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--jd-muted); }
.jdh-ch-sources ol { margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.jdh-ch-sources li { display:flex; align-items:baseline; gap:8px; font-size:14px; min-width:0; }
.jdh-ch-sources a { color:var(--jd-teal); text-decoration:underline; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jdh-ch-src-n { flex:none; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px;
  background:#EEF3F5; font-size:12px; font-weight:600; color:var(--jd-ink); }
.jdh-ch-src-host { flex:none; font-size:12px; color:var(--jd-muted); }
.jdh-ch-note { font-size:13px; color:var(--jd-muted); }
.jdh-ch-error { font-size:14px; color:var(--jd-ai-red); }
.jdh-ch-actions { display:flex; gap:6px; }
.jdh-ch-act { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border:1px solid var(--jd-line); border-radius:100px;
  background:#fff; font:inherit; font-size:13px; color:var(--jd-ink); cursor:pointer; }
.jdh-ch-act:hover { border-color:rgba(46,116,131,.5); }
.jdh-ch-lock { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:#F3F7F8; border:1px solid var(--jd-line); }
.jdh-ch-lock > div { flex:1; }
.jdh-ch-lock .jdh-tt-go { margin-left:0; }
.jdh-ch-lock-t { font-weight:600; color:var(--jd-ink); }
.jdh-ch-lock-b { font-size:14px; color:var(--jd-muted); }

/* ---- composer ---- */
.jdh-ch-composer { position:relative; margin:8px 18px 16px; padding:10px 12px; border:1px solid var(--jd-line); border-radius:18px; background:#FBFCFE;
  transition:border-color .15s ease, box-shadow .15s ease; }
.jdh-ch-composer:focus-within { border-color:rgba(46,116,131,.6); box-shadow:0 0 0 3px rgba(46,116,131,.12); background:#fff; }
.jdh-ch-composer.is-over { border-style:dashed; border-color:var(--jd-teal); }
.jdh-ch-drop { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; border-radius:18px;
  background:rgba(255,255,255,.92); font-weight:600; color:var(--jd-teal); pointer-events:none; }
.jdh-ch-input { width:100%; min-height:26px; max-height:220px; padding:4px 2px; border:0; outline:0; resize:none; background:transparent;
  font:inherit; font-size:15px; line-height:23px; color:var(--jd-ink); }
.jdh-ch-tools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; }
.jdh-ch-tool { display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 10px; border:1px solid var(--jd-line); border-radius:100px;
  background:#fff; font:inherit; font-size:13px; color:var(--jd-ink); cursor:pointer; }
.jdh-ch-tool:hover:not(:disabled) { border-color:rgba(46,116,131,.5); }
.jdh-ch-tool:disabled { opacity:.45; cursor:not-allowed; }
.jdh-ch-tool.is-on { background:rgba(46,116,131,.1); border-color:rgba(46,116,131,.55); color:var(--jd-teal); }
.jdh-ch-send { margin-left:auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%;
  background:var(--jd-teal); color:#fff; cursor:pointer; }
.jdh-ch-send:hover:not(:disabled) { background:var(--jd-teal-deep); }
.jdh-ch-send:disabled { opacity:.4; cursor:not-allowed; }
.jdh-ch-send.is-stop { background:var(--jd-ink); }
/* message length: only near the limit; takes over the send button's push to the right */
.jdh-ch-count { margin-left:auto; font-size:12px; color:var(--jd-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.jdh-ch-count.is-full { color:var(--jd-ai-red-text); font-weight:600; }
.jdh-ch-count + .jdh-ch-send { margin-left:0; }
.jdh-ch-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.jdh-ch-msg.is-user .jdh-ch-chips { justify-content:flex-end; margin:0; }
.jdh-ch-chip { display:inline-flex; align-items:center; gap:6px; max-width:280px; padding:4px 8px; border:1px solid var(--jd-line); border-radius:10px;
  background:#fff; font-size:13px; color:var(--jd-ink); }
.jdh-ch-chip.is-error { max-width:none; border-color:#F5C2C0; background:#FFF5F5; color:var(--jd-ai-red); }
.jdh-ch-chip.is-warn { max-width:none; border-color:#FDE7C2; background:#FFF7E6; color:#92400E; }
.jdh-ch-chip em { font-style:normal; font-size:12px; color:#B45309; white-space:nowrap; }
.jdh-ch-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.jdh-ch-chip-name { color:var(--jd-teal); text-decoration:none; }
a.jdh-ch-chip-name:hover { text-decoration:underline; }
.jdh-ch-chip.is-suggest { max-width:none; border-color:rgba(46,116,131,.45); background:rgba(46,116,131,.06); }
.jdh-ch-linkform { display:flex; align-items:center; gap:6px; margin-bottom:8px; padding:4px 4px 4px 10px; border:1px solid var(--jd-line);
  border-radius:12px; background:#fff; color:var(--jd-muted); }
.jdh-ch-linkform input { flex:1; min-width:0; height:30px; border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:var(--jd-ink); }
.jdh-ch-linkbtn { flex:none; height:28px; padding:0 10px; border:1px solid var(--jd-line); border-radius:100px; background:#fff;
  font:inherit; font-size:12.5px; color:var(--jd-ink); cursor:pointer; }
.jdh-ch-linkbtn.is-primary { border-color:var(--jd-teal); background:var(--jd-teal); color:#fff; }
.jdh-ch-linkbtn:disabled { opacity:.45; cursor:not-allowed; }
.jdh-ch-chip-x { display:inline-flex; padding:0; border:0; background:none; color:var(--jd-muted); cursor:pointer; }
.jdh-ch-thumb { width:28px; height:28px; object-fit:cover; border-radius:6px; }


@media (max-width: 819px) {
  .jdh-ch { grid-template-columns:minmax(0,1fr); height:min(680px, calc(100vh - 110px)); border-radius:18px; }
  .jdh-ch-skel-side { display:none; }
  /* closed drawer: visibility:hidden takes it out of the tab order / a11y tree (after the slide-out) */
  .jdh-ch-side { position:absolute; z-index:30; inset:0 30% 0 0; min-width:220px; transform:translateX(-102%); visibility:hidden;
    transition:transform .2s ease, visibility 0s linear .2s; box-shadow:20px 0 50px -30px rgba(24,27,41,.45); }
  .jdh-ch.show-history .jdh-ch-side { transform:none; visibility:visible; transition:transform .2s ease; }
  .jdh-ch-side:focus { outline:none; }
  .jdh-ch-histbtn { display:inline-flex; }
  .jdh-ch-top { padding:10px 12px; flex-wrap:wrap; }
  .jdh-ch-scroll { padding:14px 12px 6px; }
  .jdh-ch-composer { margin:6px 10px 10px; }
  .jdh-ch-tool span { display:none; }
  .jdh-ch-linkbtn { height:40px; padding:0 12px; }
  .jdh-ch-linkform input { height:40px; font-size:16px; }
  .jdh-ch-list-del { display:inline-flex; }
  /* touch targets ≥ 40px */
  .jdh-ch-histbtn, .jdh-ch-picker-btn { height:40px; }
  .jdh-ch-tool { height:40px; min-width:40px; justify-content:center; }
  .jdh-ch-send { width:40px; height:40px; }
  .jdh-ch-list-item { min-height:40px; }
  .jdh-ch-list-del { width:40px; height:40px; }
  .jdh-ch-clear { min-height:40px; }
}