/* Experimental UI, adapted from the supplied chat kit. Shared tokens first;
   conversation-specific geometry stays scoped so canvas controls remain compact. */
:root {
  --cu-primary: #316bf2;
  --cu-outgoing: #edf1fc;
  --cu-incoming: #f2f2f2;
  --cu-background: #fafafa;
  --cu-surface: #ffffff;
  --cu-text: #3d3d3e;
  --cu-muted: #626872;
  --cu-border: #e6e6e6;
  --cu-on-primary: #ffffff;
  --cu-radius: 28px;
  --cu-space: 18px;
  --cu-font-size: 13px;
  --cu-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kk-brand: var(--cu-primary);
  --kk-brand-soft: var(--cu-outgoing);
  --ink: var(--cu-text);
  --muted: var(--cu-muted);
  --line: var(--cu-border);
  --panel: var(--cu-surface);
  --surface: var(--cu-surface);
  --surface-muted: var(--cu-incoming);
  --radius-bubble: var(--cu-radius);
  font-family: var(--cu-font-family);
  background: var(--cu-background);
}
.review, #preview-load-state, #comment-list { background: var(--cu-background); }
.primary:hover, #thread-dialog .primary:hover { background: var(--cu-primary); filter: brightness(.94); }
.preview-card.active { border-color: var(--cu-primary); }
.pin { box-shadow: 0 3px 12px #316bf233; }
.area:not(.fixed) { background: #316bf214; }
.area:not(.fixed):hover, .area.active:not(.fixed) { background: #316bf221; box-shadow: 0 0 0 3px #316bf221; }
input:focus, select:focus, textarea:focus { border-color: var(--cu-primary); }
.message-bubble { border-color: transparent; border-radius: 16px; background: var(--cu-incoming); margin-bottom: 8px; }
.message-bubble.own { background: var(--cu-outgoing); }
.message-bubble:hover { background: var(--cu-incoming); border-color: var(--cu-border); }
.message-bubble.own:hover { background: var(--cu-outgoing); }
.message-bubble.active:not(.fixed) { background: var(--cu-outgoing); border-color: var(--cu-primary); box-shadow: none; }

#thread-dialog {
  width: 520px;
  border: 1px solid var(--cu-border);
  border-radius: calc(var(--cu-radius) + 4px);
  background: var(--cu-background);
  color: var(--cu-text);
  font: var(--cu-font-size)/1.55 var(--cu-font-family);
  box-shadow: 0 20px 80px #22223324;
}
#thread-dialog .thread-header { padding: 10px 14px; background: var(--cu-surface); gap: 8px; }
#thread-dialog .thread-header h2 { font-size: 16px; font-weight: 500; letter-spacing: -.3px; }
#thread-dialog .thread-header p { color: var(--cu-muted); }
#thread-preview-toggle { border-radius: 12px; background: var(--cu-incoming); border-color: var(--cu-border); }
#thread-preview-toggle[aria-expanded=true] { outline-color: var(--cu-primary); }
#thread-cover { background: var(--cu-incoming); border-color: var(--cu-border); }
#thread-messages { padding: 16px var(--cu-space); gap: 18px; background: var(--cu-background); }
.thread-day { background: transparent; color: var(--cu-muted); font-size: 11px; padding: 3px 0; margin: 0; }
#thread-dialog .chat-message {
  min-width: 0;
  max-width: 88%;
  padding: 0;
  border: 0;
  border-radius: var(--cu-radius);
  background: transparent;
  box-shadow: none;
}
#thread-dialog .chat-message.mine { background: transparent; }
#thread-dialog .chat-author { color: var(--cu-muted); font-size: 11px; font-weight: 500; }
#thread-dialog .chat-text { color: var(--cu-text); font-size: var(--cu-font-size); line-height: 1.55; margin: 0; }
#thread-dialog .chat-time { color: var(--cu-muted); font-size: 11px; margin-top: 0; }
#thread-dialog .chat-menu > summary { color: var(--cu-muted); border-radius: 50%; }
#thread-dialog .chat-menu > summary:hover { background: var(--cu-surface); }
#thread-dialog .chat-menu-panel { border-radius: 14px; box-shadow: 0 8px 24px #00000012; }
#thread-dialog .chat-image-preview { border-radius: 18px; background: var(--cu-surface); }
#thread-dialog .chat-image-preview:focus-visible { outline-color: var(--cu-primary); }
#thread-dialog .voice-message { gap: 10px; min-width: 0; width: 244px; max-width: 100%; }
#thread-dialog .voice-play { background: var(--cu-surface); color: var(--cu-primary); }
#thread-dialog .voice-play:hover { background: var(--cu-surface); filter: brightness(.97); }
#thread-dialog .voice-wave i { background: var(--cu-primary); opacity: .3; }
#thread-dialog .voice-wave i.played { background: var(--cu-primary); opacity: .85; }
#thread-dialog .voice-time { color: var(--cu-muted); }
#thread-dialog #editor { padding: 8px var(--cu-space) 14px; background: var(--cu-background); border-top: 0; }
.message-input-row, #thread-dialog .message-input-row {
  border: 1px solid var(--cu-border);
  border-radius: calc(var(--cu-radius) + 8px);
  padding: 5px;
  gap: 3px;
  background: var(--cu-surface);
  align-items: center;
}
.message-input-row:focus-within { border-color: var(--cu-primary); }
#thread-dialog #comment-text { font-size: var(--cu-font-size); color: var(--cu-text); padding: 11px 3px; }
#comment-text::placeholder { color: var(--cu-muted); }
#record, #save-comment, #attach { border-radius: 50%; }
#record, #save-comment { background: var(--cu-primary); color: var(--cu-on-primary); }
#record svg, #save-comment svg { width: 20px; height: 20px; stroke-width: 2; }
#stop-recording { color: var(--cu-primary); }
#stop-recording svg rect { fill: currentColor; stroke: none; }
#thread-dialog #thread-notice { background: var(--cu-background); color: var(--cu-muted); padding: 3px var(--cu-space); }
#thread-new { color: var(--cu-primary); border: 1px solid var(--cu-border); border-radius: 99px; box-shadow: none; }

@media (max-width:900px), (max-width:1100px) and (pointer:coarse) {
  #thread-dialog { width: 100%; border: 0; border-radius: 0; }
  #thread-dialog .thread-header { padding: max(8px, env(safe-area-inset-top)) 12px 8px; gap: 4px; }
  #thread-messages { padding: 16px 14px; gap: 12px; }
  #thread-dialog .chat-message { max-width: 94%; }
  #thread-dialog #editor { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
  #thread-dialog #comment-text { font-size: 16px; }
}
@media (pointer:coarse) {
  #thread-dialog .voice-play { width: 44px; height: 44px; min-width: 44px; }
}

/* Reference layout: only message content is tinted; metadata lives below it. */
.thread-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cu-outgoing); color: var(--cu-primary); display: grid; place-items: center; flex: none; font-size: 11px; font-weight: 500; }
.thread-heading { order: 1; }
#thread-preview-toggle { order: 2; width: 32px; height: 36px; padding: 6px; background: transparent; border: 0; }
#thread-header-thumbnail { display: none; }
#thread-status { order: 3; }
.thread-header #feedback-details { order: 4; }
#close-thread { order: 5; }
#thread-dialog .thread-header h2 { font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
#thread-dialog .thread-header p { font-size: 11px; line-height: 1.45; }
#thread-collection { font-weight: 500; }
#thread-dialog .chat-bubble { border-radius: var(--cu-radius); background: var(--cu-incoming); padding: 10px 14px; min-width: 0; }
#thread-dialog .mine .chat-bubble { background: var(--cu-outgoing); }
#thread-dialog .chat-bubble:has(.voice-message) { padding: 11px; }
#thread-dialog .chat-meta { display: flex; align-items: center; justify-content: flex-start; gap: 5px; margin: 5px 3px 0; min-height: 18px; }
#thread-dialog .mine .chat-meta { justify-content: flex-end; }
#thread-dialog .chat-message-head { order: -1; gap: 4px; }
#thread-dialog .chat-menu > summary { min-height: 18px; line-height: 14px; padding: 0 4px; }
#thread-dialog .chat-menu > summary::before { inset: -3px 0; min-height: 24px; }
#thread-dialog .chat-menu { opacity: 0; }
#thread-dialog .chat-message:hover .chat-menu, #thread-dialog .chat-message:focus-within .chat-menu, #thread-dialog .chat-menu[open] { opacity: 1; }
.chat-receipt { display: inline-flex; color: var(--cu-muted); }
.chat-receipt svg { width: 14px; height: 14px; }
.chat-receipt[data-state=seen] { color: var(--cu-primary); }
#thread-dialog .voice-play { width: 32px; height: 32px; min-width: 32px; padding: 6px; }
#thread-dialog #attach, #thread-dialog .composer-action { width: 36px; height: 36px; min-width: 36px; }
#thread-dialog #comment-text { min-height: 36px; padding: 7px 3px; }
@media (pointer: coarse) {
  #thread-dialog #attach, #thread-dialog .composer-action, #thread-dialog .voice-play { width: 44px; height: 44px; min-width: 44px; }
  #thread-dialog #comment-text { min-height: 44px; padding: 11px 3px; }
  #thread-dialog .chat-menu { opacity: 1; }
  #thread-dialog .chat-menu > summary { padding: 4px 8px; }
  #thread-preview-toggle { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
  #thread-dialog .thread-header { gap: 2px; padding-left: 8px; padding-right: 8px; }
  .thread-avatar { width: 28px; height: 28px; }
  #thread-dialog .chat-message { max-width: 94%; }
  #thread-dialog .voice-message { width: 222px; }
}

/* Mobile review: manual preview browsing and a contextual conversation sheet. */
#resume-draft{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:40;background:var(--cu-primary);color:white;box-shadow:0 4px 18px #0002;border-radius:24px;padding:12px 20px}
@media(max-width:900px),(max-width:1100px) and (pointer:coarse){
 #preview-list{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;align-items:stretch;padding:2px 2px 8px;scrollbar-width:thin;touch-action:pan-x pan-y}
 #preview-list .preview-card{flex:0 0 86%;scroll-snap-align:start;display:flex;flex-direction:column}
 #preview-list .preview-select{display:flex;flex-direction:column;height:100%;width:100%;min-height:0}
 #preview-list .preview-thumbnail{flex:1;width:100%;height:auto;min-height:80px}
 #preview-list .preview-thumbnail img{width:100%;height:100%;object-fit:contain}
 #preview-list .preview-label{flex:none;width:100%;min-height:40px}
 #carousel-position{justify-content:center;color:var(--cu-muted);font-size:12px;margin:0;min-height:16px;flex:none}
 #thread-dialog{top:auto;bottom:max(0px,calc(100dvh - var(--visual-top,0px) - var(--visual-height,100dvh)));height:min(42dvh,360px);max-height:calc(var(--visual-height,100dvh) - 100px);border:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:0 -6px 28px #0002;z-index:60}
 #thread-dialog.new-conversation:not(.expanded){height:auto}
 #thread-dialog.new-conversation:not(.expanded) #thread-messages{display:none}
 #thread-dialog.expanded{height:var(--visual-height,100dvh);max-height:var(--visual-height,100dvh);border-radius:0}
 #thread-dialog #editor{max-height:55%;min-height:72px;overflow:auto}
 #thread-dialog.new-conversation #editor{max-height:calc(var(--visual-height,100dvh) - 180px)}
 #thread-dialog .thread-header{flex-shrink:0}
 #thread-dialog:not(.expanded) #thread-avatar,#thread-dialog:not(.expanded) #thread-preview-toggle{display:none}
 #thread-dialog:not(.expanded) #thread-cover{display:none}
 .thread-open #stage{padding-top:35vh;padding-bottom:calc(var(--thread-height,180px) + var(--dock-offset) + 40vh)}
 #resume-draft{bottom:calc(var(--review-bar) + var(--mode-toolbar) + env(safe-area-inset-bottom) + 12px)}
 .previews-open #resume-draft{display:none}
}

@media(max-width:900px),(max-width:1100px) and (pointer:coarse){#thread-dialog .thread-heading{touch-action:none}}

/* Keep the original two-row mobile dock inside the visible browser viewport.
   Use one coordinate system rather than subtracting visual height from dvh. */
@media(max-width:900px),(max-width:1100px) and (pointer:coarse){
 :root{--mobile-dock-height:calc(var(--review-bar) + var(--mode-toolbar) + env(safe-area-inset-bottom));--visual-bottom:calc(var(--visual-top,0px) + var(--visual-height,100dvh))}
 .workspace,.comments-hidden .workspace{position:relative;height:calc(var(--visual-height,100dvh) - var(--header-height) - var(--mobile-dock-height));min-height:0}
 #mobile-nav{top:calc(var(--visual-bottom) - var(--review-bar) - env(safe-area-inset-bottom));bottom:auto}
 #mobile-toolbar{top:calc(var(--visual-bottom) - var(--mobile-dock-height));bottom:auto}
 .comments{top:calc(var(--visual-bottom) - var(--mobile-dock-height));bottom:auto;transform:translateY(-100%)}
 .previews{position:absolute;inset:0;width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;padding:12px 16px;overflow:hidden}
 .previews-open .review{visibility:hidden}
 .previews-open #sheet-backdrop{display:none}
 .previews .sheet-heading{min-height:32px}
 .previews .local-note{margin:0;font-size:11px;flex:none}
 .previews #preview-list{min-height:0;flex:1 1 0}
 .previews .preview-thumbnail{min-height:0}
 #thread-dialog{top:var(--visual-bottom);bottom:auto;transform:translateY(-100%)}
}

/* Revision options share the same light surface and blue selection as chat. */
#thread-dialog #feedback-details .composer-options{width:232px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--cu-surface);box-shadow:0 8px 28px #00000012}
.revision-label{display:block;padding:8px 10px;color:var(--cu-muted);font-size:12px}
.revision-menu{display:flex;flex-direction:column;gap:3px}
#thread-dialog .revision-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:9px;font-size:14px;background:transparent;color:var(--cu-text);text-align:left}
#thread-dialog .revision-menu button svg{width:18px;height:18px;visibility:hidden;flex:none}
#thread-dialog .revision-menu button[aria-checked=true]{color:var(--cu-primary);background:var(--cu-outgoing)}
#thread-dialog .revision-menu button[aria-checked=true] svg{visibility:visible}
#thread-dialog .revision-menu button[aria-checked=false]:hover:not(:disabled){background:var(--cu-surface)}
#thread-dialog .revision-menu button:focus-visible{outline:2px solid var(--cu-primary);outline-offset:-2px}
#thread-dialog .revision-menu button:disabled{opacity:.55;cursor:default}
#copy-conversation{border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
@media(max-width:900px),(max-width:1100px) and (pointer:coarse){
 .pin{width:26px;height:26px;font-size:11px;box-shadow:0 2px 6px #0002}
 .marker.pin::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:transparent}
 .pin:hover,.pin.active{transform:translate(-50%,-50%)}
 #pending-region.pin{font-size:14px;outline:2px solid var(--kk-brand-soft)}
}

#thread-dialog #feedback-details .composer-options[popover]{position:fixed;inset:auto;top:var(--revision-top,0px);left:var(--revision-left,0px);margin:0;overflow:auto}