/* The corner panel (js/dock.js): Ask Kainar AI + Comments. Same look as the homepage: dark, light lines,
   small corners, Barlow, sentence case. */
html body #chat-panel.dock {
  --dk-bg: #0b0e15; --dk-line: rgba(255,255,255,0.12); --dk-fg: #f5f5f3; --dk-soft: #c9cbcf; --dk-mute: #9a9ea6; --dk-sun: #f5c518;
  --dk-font: 'Barlow', 'Montserrat', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  position: fixed; z-index: 2100; right: 24px; bottom: 84px; left: auto; top: auto;
  width: min(420px, calc(100vw - 48px)); height: min(620px, calc(100dvh - 120px)); max-height: none;
  flex-direction: column; padding: 0 !important; overflow: hidden;
  background: var(--dk-bg) !important; border: 1px solid var(--dk-line) !important; border-radius: 10px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-family: var(--dk-font); color: var(--dk-fg); animation: dkIn .22s ease;
}
@keyframes dkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dock .dk-head { flex: none; display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--dk-line); }
.dock .dk-head[hidden], .dock .dk-menu[hidden] { display: none !important; }
.dock .dk-title { flex: 1; min-width: 0; padding: 0 4px; font: 600 15px/1.2 var(--dk-font); color: var(--dk-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock.one .dk-title { padding-left: 20px; }
.dock .dk-back, .dock .dk-x { flex: none; width: 48px; height: 52px; border: 0; background: none; color: var(--dk-mute); cursor: pointer; display: grid; place-items: center; }
.dock .dk-back[hidden] { display: none; }
.dock .dk-back svg, .dock .dk-x svg { width: 15px; height: 15px; }
.dock .dk-back:hover, .dock .dk-x:hover { color: var(--dk-fg); }
.dock .chat-count { font: 400 13px/1 var(--dk-font) !important; padding: 0 !important; margin-left: 6px; background: none !important; color: var(--dk-mute) !important; }
.dock :focus-visible { outline: 2px solid var(--dk-fg); outline-offset: -2px; }

/* the first view: two choices, a small card above the button */
html body #chat-panel.dock[data-view="menu"] { width: min(340px, calc(100vw - 24px)); height: auto; }
.dock .dk-menu { display: flex; flex-direction: column; padding: 6px; }
.dock .dk-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px; border: 0; border-radius: 8px !important; background: none; color: var(--dk-fg); text-align: left; cursor: pointer; }
.dock .dk-opt + .dk-opt { margin-top: 2px; }
.dock .dk-opt:hover { background: rgba(255,255,255,0.06); }
.dock .dk-ic { flex: none; width: 40px; height: 40px; border-radius: 8px !important; display: grid; place-items: center; background: rgba(255,255,255,0.07); color: var(--dk-fg); }
.dock .dk-opt[data-go="ai"] .dk-ic { color: var(--dk-sun); }
.dock .dk-ic svg { width: 22px; height: 22px; }
.dock .dk-ot { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dock .dk-ot b { font: 600 16px/1.3 var(--dk-font); }
.dock .dk-ot small { font: 400 13.5px/1.45 var(--dk-font); color: var(--dk-mute); }

.dock .dk-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dock .dk-pane[hidden] { display: none !important; }

/* AI pane: the homepage chat, laid out for a narrow panel */
.dock .dk-ai .comms { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
.dock .dk-ai .comms .ai-messages { flex: 1 1 auto; max-height: none !important; min-height: 0 !important; padding: 18px 20px 8px !important; margin: 0 !important; }
.dock .dk-ai .comms .ask-line { margin: 4px 20px 0 !important; }
.dock .dk-ai #ai-input { min-height: 48px !important; font-size: 16px !important; }
.dock .dk-ai #ai-voice, .dock .dk-ai #ai-send { width: 44px !important; height: 44px !important; }
.dock .dk-ai .comms .ask-sugg { padding: 12px 20px 16px !important; display: block !important; }
.dock .dk-ai .chips-label { display: none !important; }
.dock .dk-ai .ai-chips { flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; padding-bottom: 4px; scrollbar-width: none; }
.dock .dk-ai .ai-chips::-webkit-scrollbar { display: none; }
body .dock .dk-ai .comms .ai-chip { flex: none; white-space: nowrap; font-size: 13.5px !important; padding: 6px 10px !important; }

/* Comments pane */
.dock #chat-comments { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 !important; padding: 4px 20px !important; }
.dock .chat-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 14px 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--dk-line) !important; border-radius: 0 !important; }
.dock .chat-item:last-child { border-bottom: 0 !important; }
.dock .chat-name { grid-column: 1; grid-row: 1; font: 600 14px/1.4 var(--dk-font) !important; color: var(--dk-fg) !important; margin: 0 0 4px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock .chat-time { grid-column: 2; grid-row: 1; font: 400 13px/1.4 var(--dk-font) !important; color: var(--dk-mute) !important; margin: 0 !important; }
.dock .chat-text { grid-column: 1 / -1; font: 400 15px/1.6 var(--dk-font) !important; color: var(--dk-soft) !important; overflow-wrap: anywhere; }
.dock .chat-item > :not(.chat-name):not(.chat-time):not(.chat-text) { grid-column: 1 / -1; }
.dock .chat-empty { font: 400 14px/1.6 var(--dk-font) !important; color: var(--dk-mute) !important; text-align: left !important; padding: 18px 0 !important; }

.dock .dk-form { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 12px; border-top: 1px solid var(--dk-line); }
.dock .dk-form input, .dock .dk-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--dk-line); border-radius: 6px; background: #05070b; color: var(--dk-fg);
  font: 400 16px/1.5 var(--dk-font); resize: none; }
.dock .dk-form input:focus, .dock .dk-form textarea:focus { outline: none; border-color: rgba(255,255,255,0.5); }
.dock .dk-form ::placeholder { color: rgba(255,255,255,0.35); }
.dock .dk-row { display: flex; align-items: center; gap: 12px; }
.dock .dk-status { flex: 1; min-width: 0; margin: 0; font: 400 13.5px/1.4 var(--dk-font); color: var(--dk-mute); }
.dock .dk-send { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--dk-fg); color: #0b0e15; font: 600 15px/1 var(--dk-font); cursor: pointer; }
.dock .dk-send:hover { background: #fff; }
.dock .dk-send:disabled { opacity: .55; cursor: default; }
.dock .dk-all { flex: none; padding: 0 20px 14px; font: 400 14px/1.4 var(--dk-font); color: var(--dk-mute); text-decoration: underline; text-underline-offset: 4px; background: none !important; text-align: left; }
.dock .dk-all:hover { color: var(--dk-fg); }

/* the corner button: same small square on every page */
#chat-btn[aria-expanded="true"] { border-color: #fff !important; }

/* phones: a sheet from the bottom */
@media (max-width: 640px) {
  html body #chat-panel.dock { left: 0; right: 0; bottom: 0; width: auto; height: min(86dvh, 680px); border-radius: 12px 12px 0 0 !important; border-bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; animation-name: dkUp; }
  @keyframes dkUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  #chat-btn[aria-expanded="true"]:not(.menu-open) { opacity: 0 !important; pointer-events: none; }
  html body #chat-panel.dock[data-view="menu"] { left: auto; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100vw - 24px)); height: auto; border-radius: 10px !important; border-bottom: 1px solid var(--dk-line) !important; padding-bottom: 0 !important; animation-name: dkIn; }
}
@media (prefers-reduced-motion: reduce) { html body #chat-panel.dock { animation: none; } }
html body #chat-panel.dock .dk-form input, html body #chat-panel.dock .dk-form textarea, html body #chat-panel.dock .dk-send { border-radius: 6px !important; }
html body #chat-panel.dock .dk-ai #ai-send, html body #chat-panel.dock .dk-ai .ai-chip { border-radius: 4px !important; }