/* Shared chat layout: give conversation space before navigation and controls. */
:root {
  --blue: #3c5ce7;
  --ink: #1f1f1f;
  --muted: #969696;
  --line: #e6e6e6;
  --faint: #f1f1f1;
  --surface: #f5f5f5;
  --conversation-width: 1120px;
  --conversation-gutter: 20px;
  --sidebar-width: 220px;
  --ui-radius: 12px;
  --chat-font-size: 14px;
  --chat-line-height: 22px;
  --chat-message-gap: 18px;
  --chat-avatar-size: 36px;
  --chat-avatar-gap: 10px;
  --chat-author-width: calc(var(--chat-avatar-size) + var(--chat-avatar-gap));
  --chat-bubble-padding: 9px 12px;
}
body { background: var(--surface); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
button { border-radius: var(--ui-radius); transition: background .16s, color .16s, border-color .16s; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #bfcaff; outline-offset: 3px; }
button.primary, .primary { background: var(--ink); border-color: var(--ink); }
button.primary:hover { background: #41434b; border-color: #41434b; }
.frame.chat-focused { grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
.frame.chat-focused.work-open { grid-template-columns: var(--sidebar-width) minmax(0,1fr) 300px; }
.chat-focused .left { border: 0; padding: 24px 10px 14px; background: var(--surface); }
.brand { margin: 0 12px 24px; font-size: 22px; font-weight: 650; letter-spacing: -1px; line-height: 1.2; }
.brand small { color: #90919a; font-size: 11px; margin-top: 8px; letter-spacing: .5px; }
.nav-work { margin: 0 4px; padding: 12px 14px; min-height: 46px; gap: 11px; font-size: 14px; font-weight: 600; color: var(--ink); background: #e9e9e8; border-radius: 12px; }
.nav-work:hover { background: #e3e3e2; }
.left-label { padding: 22px 14px 8px; font-size: 11px; font-weight: 600; letter-spacing: .5px; color: #93949b; }
.left-label button { padding: 3px 5px; border: 0; border-radius: 7px; background: transparent; color: #8c8e97; font-size: 11px; }
.left-label button:hover { background: #e7e8eb; color: var(--ink); }
.left #employee-list { min-height: 0; overflow-y: auto; padding: 2px 4px 10px; }
.left .employee { gap: 10px; padding: 10px; margin-bottom: 2px; min-height: 60px; border: 1px solid transparent; border-radius: 6px; color: #4f5662; }
.left .employee:not(.selected) { background: transparent; }
.left .employee:hover { background: #ececea; }
.left .employee.selected { background: #e5e5e5; color: var(--ink); border-color: transparent; box-shadow: none; }
.left .employee b { font-size: 14px; font-weight: 600; }
.left .employee small { font-size: 12px; line-height: 18px; margin-top: 2px; max-width: 154px; color: #727985; }
.left .employee.selected small { color: #7c7f89; }
.avatar, .message-avatar { position: relative; overflow: hidden; }
.avatar img, .message-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; border-radius: inherit; }
.left .employee .avatar { width: 36px; height: 36px; border-radius: 50%; background: #e9eaf0; font-size: 14px; }
.left .bottom { flex-shrink: 0; gap: 2px; margin-inline: 4px; padding-top: 14px; border-color: #e2e3e4; }
.left .bottom button { padding: 8px 10px; display: flex; align-items: center; gap: 10px; border-radius: 10px; color: #777a84; font-size: 13px; }
.left .bottom button:hover { background: #e9e9e7; color: var(--ink); }
.left .bottom > span { display: flex; align-items: center; gap: 7px; padding: 10px 11px 0; color: #9b9da5; font-size: 10px; }
#left-status.connected::before { content: ''; width: 5px; height: 5px; flex: none; border-radius: 50%; background: #719680; }
.chat-focused .right { margin: 0; background: var(--surface); border: 0; border-left: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.chat-focused .header { height: 60px; min-height: 60px; flex-shrink: 0; flex-wrap: nowrap; padding: 8px var(--conversation-gutter); border: 0; gap: 10px; }
.header > .avatar { width: 36px; height: 36px; border-radius: 50%; background: #f0f1f4; }
.header h1 { font-size: 18px; letter-spacing: 0; font-weight: 600; line-height: 25px; }
.header > div:not(.head-actions) { min-width: 0; flex: 1; }
.header h1, .header p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.header p { margin-top: 2px; font-size: 11px; line-height: 16px; color: #747c88; }
.head-actions { gap: 6px; flex-shrink: 0; }
.head-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; min-height: 34px; border-color: transparent; border-radius: 8px; background: transparent; font-size: 12px; color: #555; }
.head-actions > button:hover { background: #e9e9e9; color: var(--ink); }
.head-actions > button { white-space: nowrap; }
.head-actions > button[data-action='new-task'] { background: transparent; color: var(--ink); padding-inline: 14px; }
.header-menu > summary { display: flex; align-items: center; justify-content: center; width: 36px; height: 38px; padding: 8px; font-size: 0; color: #8b8d96; border-radius: 10px; }
.header-menu > summary:hover { background: #f3f4f6; }
.header-menu > div { top: 44px; right: 0; width: 208px; padding: 8px; border-radius: 14px; border-color: var(--line); box-shadow: 0 12px 40px #22283612; }
.header-menu button { padding: 9px 10px; border-radius: 8px; color: #555964; font-size: 12px; }
.agent-controls { padding: 0 var(--conversation-gutter) 5px; gap: 8px; min-height: 32px; flex-shrink: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 11px; }
#executor-context { color: #727b87; font-size: 11px; }
.agent-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 9px; min-height: 26px; border: 0; border-radius: 6px; background: #f5f6f8; color: #596270; font-size: 11px; }
.agent-controls #executor-control { min-width: 0; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-controls .memory-button { margin-left: auto; background: transparent; color: #92959f; }
.agent-controls button:hover { background: #eff1f6; color: #464b59; }
.chat-focused .chat { padding: 12px max(var(--conversation-gutter),calc((100% - var(--conversation-width))/2)); gap: var(--chat-message-gap); background: var(--surface); scrollbar-width: thin; scrollbar-color: #d2d2d2 transparent; scroll-padding-block: 12px; }
.chat-focused .msg { gap: var(--chat-avatar-gap); max-width: 100%; flex-shrink: 0; }
.chat-focused .message-avatar { width: var(--chat-avatar-size); height: var(--chat-avatar-size); border-radius: 5px; background: #e8e8e8; font-size: 11px; flex: none; margin-top: 2px; }
.chat-focused .msg .message-body > small:not(.message-receipt) { min-height: 16px; margin-bottom: 4px; font-size: 11px; color: #969696; line-height: 16px; }
.chat-focused .msg:not(.me) .message-body > small:not(.message-receipt) { padding-top: 0; }
.chat-focused .msg:not(.me) > .message-body > .bubble { width: fit-content; max-width: 100%; min-height: 40px; padding: var(--chat-bubble-padding); border: 0; border-radius: 6px; background: #fff; font-size: var(--chat-font-size); line-height: var(--chat-line-height); color: var(--ink); }
.chat-focused .markdown p { margin: 6px 0; }
.chat-focused .markdown ul, .chat-focused .markdown ol { margin: 4px 0; padding-left: 20px; }
.chat-focused .markdown li { margin: 2px 0; }
.chat-focused .markdown li > p { margin: 3px 0; }
.chat-focused .markdown ul ul, .chat-focused .markdown ol ul, .chat-focused .markdown ul ol, .chat-focused .markdown ol ol { margin: 3px 0; }
.chat-focused .markdown > :first-child { margin-top: 0; }
.chat-focused .markdown > :last-child { margin-bottom: 0; }
.chat-focused .private-message-text > :first-child, .chat-focused .group-message-text > :first-child { margin-top: 0; }
.chat-focused .private-message-text > :last-child, .chat-focused .group-message-text > :last-child { margin-bottom: 0; }
.chat-focused .markdown h1, .chat-focused .markdown h2, .chat-focused .markdown h3, .chat-focused .markdown h4 { margin: 12px 0 5px; line-height: 1.4; }
.chat-focused .markdown blockquote { margin: 9px 0; padding: 3px 12px; }
.chat-focused .markdown pre, .chat-focused .markdown .table-scroll { margin: 9px 0; max-width: 100%; overflow: auto; }
.chat-focused .markdown pre { padding: 10px 12px; font-size: 12px; line-height: 1.6; }
.chat-focused .markdown th, .chat-focused .markdown td { padding: 6px 9px; }
.markdown strong { font-weight: 600; color: #282b34; }
.markdown h1 { font-size: 20px; }
.markdown h2 { font-size: 18px; }
.markdown h3 { font-size: 16px; }
.executor-badge { padding: 1px 5px; border-radius: 4px; border-color: #e6e8ed; color: #979da8; background: #fafbfc; font-size: 9px; }
.chat-focused .msg.me { max-width: 82%; }
.chat-focused .msg.me { flex-direction: row-reverse; }
.chat-focused .msg.me .message-avatar { display: grid; place-items: center; font-size: 0; }
.chat-focused .msg.me .message-avatar::before { content: ''; display: block; width: 24px; height: 24px; mask: url('/honghub/assets/vendor/tabler/profile.svg') center/contain no-repeat; background: currentColor; }
.chat-focused .msg.me .message-body > small:not(.message-receipt) { margin-bottom: 2px; text-align: right; font-size: 11px; }
.chat-focused .msg.me .bubble { min-height: 40px; padding: var(--chat-bubble-padding); border: 0; border-radius: 6px; background: #dcecfb; color: var(--ink); font-size: var(--chat-font-size); line-height: var(--chat-line-height); }
.chat-focused .composer { flex: none; padding: 8px var(--conversation-gutter) 8px; border: 0; border-top: 1px solid var(--line); background: var(--surface); }
.composer-inner { width: 100%; max-width: var(--conversation-width); margin-inline: auto; }
.composer-box { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.composer-box:focus-within { box-shadow: none; }
.composer .composer-box form { display: block; grid-column: 1; grid-row: 2; min-width: 0; max-width: none; margin: 0; padding: 0; }
.composer .composer-box #chat-input { display: block; width: 100%; min-height: 36px; max-height: min(180px,28dvh); margin: 0; padding: 6px 2px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; line-height: 22px; outline: none; box-shadow: none; resize: none; }
.composer textarea::placeholder { color: #a0a3ad; }
.composer .composer-box #send-button { position: static; grid-column: 2; grid-row: 2; align-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 64px; margin: 0 0 2px; padding: 5px 12px; border: 0; border-radius: 6px; background: #07b75e; color: #fff; font-size: 12px; }
.composer .composer-box #send-button:hover { background: #06a653; }
.composer-box .hh-attachments { grid-column: 1/-1; grid-row: 1; min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.composer-box .hh-attachment-toolbar { padding-right: 0; min-height: 28px; gap: 6px; }
.composer-box .hh-attachment-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: #333; font-size: 12px; white-space: nowrap; }
.composer-box .hh-attachment-toolbar .hh-attachment-add, .composer-box .hh-attachment-toolbar .hh-attachment-record:not(.is-recording) { width: 34px; font-size: 0; }
.composer-box .hh-attachment-toolbar button::before { width: 20px; height: 20px; }
.composer-box .hh-attachment-toolbar button:hover { background: #e8e8e8; color: #111; }
.composer-box .hh-attachment-toolbar button.is-recording { background: #fff0ee; color: #b44338; }
.composer-box .hh-attachment-drafts { margin: 0; max-height: min(128px,20dvh); overflow-y: auto; }
.composer-box .hh-attachment-drafts:empty { display: none; }
.composer-box .hh-attachment-hint { flex: 1 1 130px; min-width: 0; margin: 0; font-size: 10px; }
.hh-attachment-draft { background: #fff; border-color: #e8ebf1; border-radius: 12px; }
.composer-inner .composer-footer { max-width: none; margin: 0; padding: 4px 2px 0; gap: 10px; }
.composer-footer .quiet { min-width: 0; margin: 0; font-size: 10px; color: #a3a6b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-footer > button { flex-shrink: 0; }
.chat-focused .composer .quiet { margin-top: 0; }
/* Keep message actions in the metadata row instead of overlapping the next bubble. */
.chat-focused .msg .message-body { position: relative; flex: 0 1 auto; width: fit-content; max-width: 100%; }
.chat-focused .msg:not(.me) > .message-body { max-width: min(920px,calc(100% - var(--chat-author-width))); }
.chat-focused .hh-message-attachments:empty { display: none; }
.chat-focused .chat .msg .message-body > small.message-stamp { color: #929292; }
.chat-focused .chat .msg .message-stamp time { font-size: 11px; color: #a2a2a2; }
.chat-focused .msg[data-message-key] .message-stamp, .chat-focused .msg.me .message-stamp { display: none; }
.group-frame .msg .message-stamp time { display: none; }
.chat-focused .chat-time-divider { margin: 4px 0; padding: 2px 12px; background: transparent; font-size: 11px; line-height: 16px; color: #9b9b9b; }
.chat-focused .msg .chat-message-actions { position: absolute; right: 0; top: 0; width: max-content; height: 18px; min-height: 0; padding: 0; margin: 0; gap: 10px; align-items: center; border-radius: 3px; background: var(--chat-surface,var(--surface)); z-index: 1; }
.chat-focused .msg:not(.me) .chat-message-actions { left: 0; right: auto; }
.chat-focused .msg .chat-message-actions button { min-height: 18px; padding: 0 3px; font-size: 11px; line-height: 18px; color: #687383; }
.chat-focused .msg[data-message-key] .chat-message-actions, .chat-focused .msg.me .chat-message-actions { top: -18px; }
.chat-focused .msg.me .message-receipt { display: flex; justify-content: flex-end; text-align: right; }
.chat-focused .composer-reply { padding: 6px 10px; margin-bottom: 6px; gap: 8px; min-width: 0; }
.chat-focused .composer-reply .quote-source { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0; line-height: 18px; }
.chat-focused .composer-reply .quote-source b { flex: none; margin: 0; }
.chat-focused .composer-reply .quote-source span { flex: 1; min-width: 0; line-height: 18px; }
.chat-focused .composer-reply .quote-close { min-height: 20px; padding: 1px 5px; line-height: 18px; font-size: 11px; }
.chat-focused .message-quote { padding: 5px 10px; border-left-color: #c4c4c4; border-radius: 0; background: transparent; color: #777; }
.chat-focused .message-quote b { color: #777; }
.chat-focused .message-quote:hover { background: #f7f7f7; }
.chat-focused .composer-reply { background: #ededed; border-left-color: #c4c4c4; color: #777; }
#dispatch-button { border: 0; border-radius: 7px; background: transparent; padding: 3px 7px; font-size: 11px; color: #858c9b; }
#dispatch-button:hover:not(:disabled) { background: #edf0f7; color: #4b5e8b; }
#dispatch-button:disabled { opacity: .5; }
.conversation-empty { max-width: 520px; padding: 30px 16px; }
.conversation-empty .avatar { width: 62px; height: 62px; margin: 0 auto 26px; border-radius: 50%; background: #f0f1f5; }
.conversation-empty h2 { margin: 0 0 13px; color: #313440; font-size: 26px; letter-spacing: -.6px; font-weight: 600; }
.conversation-empty p { margin: 0 0 26px; color: #9a9da7; font-size: 13px; line-height: 1.8; }
.conversation-empty > button { border-color: #e1e4eb; border-radius: 10px; padding: 9px 16px; font-size: 12px; color: #656b7a; }
.conversation-empty .actions { gap: 8px; }
.conversation-empty .actions button { font-size: 12px; }
.chat-focused .delivery-pin { margin: 0 var(--conversation-gutter); padding: 8px 0; border-color: var(--line); background: #fff; gap: 10px; }
.chat-focused .delivery-pin .pin-copy b { font-weight: 600; font-size: 12px; }
.chat-delivery, .ask-card, .revision-card { border-color: #e7eaf0; border-radius: 14px; background: #fafbfd; }
.chat-delivery { padding: 17px; }
.ask-card { max-width: 760px; margin: 6px 0 0; padding: 8px 10px; }
.ask-card h3 { margin: 0; font-size: 13px; font-weight: 500; line-height: 20px; }
.ask-card header { gap: 6px; min-height: 22px; }
.ask-symbol { width: 20px; height: 20px; border-radius: 5px; font-size: 13px; }
.ask-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.ask-heading .ask-state { flex: none; font-size: 10px; }
.ask-form fieldset { margin: 6px 0; }
.ask-form legend { margin-bottom: 4px; line-height: 22px; font-weight: 500; }
.ask-form .ask-progress { margin: 4px 0; font-size: 10px; }
.ask-text-label { margin: 4px 0; }
.ask-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ask-resolved-head { display: flex; align-items: center; gap: 6px; min-height: 22px; list-style: none; }
.ask-resolved-head::-webkit-details-marker { display: none; }
.ask-resolved-head .ask-heading { flex: 1; }
.ask-history-toggle { flex: none; font-size: 10px; font-weight: 400; white-space: nowrap; }
.ask-history-toggle::before { content: '▸ '; }
.ask-history[open] .ask-history-toggle::before { content: '▾ '; }
.ask-resolved .ask-history { margin: 0; }
.ask-note, .ask-text-label { font-size: 12px; }
.ask-form legend { font-size: 13px; }
.ask-option { padding: 8px 10px; margin: 5px 0; border-radius: 7px; font-size: 13px; border-color: #e4e7ee; }
.ask-option > span { min-width: 0; overflow-wrap: anywhere; }
.ask-option:has(input:checked) { background: #f1f4fc; border-color: #bac6e8; }
.ask-form textarea { display: block; padding: 8px 9px; border-radius: 6px; min-height: 40px; max-height: min(140px,22dvh); resize: none; border-color: #e3e6ec; font-size: 13px; line-height: 22px; }
.ask-actions { margin-top: 6px; gap: 6px; }
.ask-actions button { min-height: 28px; padding: 4px 8px; font-size: 11px; border-radius: 6px; }
.chat-round-head { color: #5b6170; }
.chat-delivery .artifact { padding: 12px; border-radius: 10px; border-color: #e6e9ee; background: #fff; }
.round-footer button { border-radius: 8px; }
.state-text { font-size: 11px; }
.chat-focused #jump-latest { position: relative; inset: auto; transform: none; align-self: center; flex: none; width: fit-content; height: 32px; margin: -40px 0 8px; padding: 5px 12px; z-index: 5; border-radius: 999px; border-color: #e2e6ef; color: #606c86; box-shadow: 0 4px 18px #2228360d; }
.delivery-item { border-radius: 10px; }
.delivery-item.selected { background: #f0f3fa; }
.delivery-item.selected::before { display: none; }
.directory-group > summary { font-size: 12px; }
.daily-row { border-radius: 10px; background: #f6f7f9; }
.daily-row.on { background: #edf1fa; color: #60769e; }
.work-panel { margin: 12px 12px 12px 0; border: 0; border-radius: 18px; background: #f9fafb; overflow: hidden; }
.work-panel > header { height: 64px; border-color: #edf0f4; font-size: 14px; }
.work-panel .panel { border-radius: 13px; border-color: #e6e9ef; }
.chat-focused .background-work { background: #f8f9fc; border-color: #edf0f4; }
.chat-focused .ask-attention { margin: 0 var(--conversation-gutter); padding: 4px 10px; min-height: 26px; border-radius: 7px; }
.employee-update { background: #f4f6fc; }
.dialog-head { padding: 22px 25px; }
.dialog-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.dialog-head > button { border: 0; background: #f3f4f7; font-size: 12px; padding: 7px 12px; }
.dialog-body { padding: 22px 25px; }
dialog { border-color: #e4e6eb; border-radius: 20px; box-shadow: 0 24px 100px #11182724; }
dialog::backdrop { background: #242b3940; backdrop-filter: blur(3px); }
.panel { border-radius: 13px; border-color: #e7eaf0; }
#execution-settings-form select { border-radius: 10px; border-color: #e0e4ec; background: #fafbfd; font-size: 13px; }
#execution-settings-form label { font-size: 12px; color: #687182; }
/* Tabler Icons v3.46.0 (MIT); bundled locally, no icon network requests. */
.workspace-icon, .daily-icon, .left .bottom button::before, .head-actions > button::before, .header-menu > summary::before, .memory-button::before, .hh-attachment-toolbar button::before, #send-button::before, .delivery-icon::before {
  content: ''; display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  mask: var(--icon) center/contain no-repeat; -webkit-mask: var(--icon) center/contain no-repeat;
}
.workspace-icon { --icon: url('/honghub/assets/vendor/tabler/workspace.svg'); }
.daily-icon { --icon: url('/honghub/assets/vendor/tabler/chat.svg'); }
.left .bottom [data-action='skill-library'] { --icon: url('/honghub/assets/vendor/tabler/books.svg'); }
.left .bottom [data-action='profile'] { --icon: url('/honghub/assets/vendor/tabler/profile.svg'); }
.left .bottom [data-action='employee-resume'] { --icon: url('/honghub/assets/vendor/tabler/resume.svg'); }
#work-toggle { --icon: url('/honghub/assets/vendor/tabler/work.svg'); }
.head-actions > [data-action='new-task'] { --icon: url('/honghub/assets/vendor/tabler/plus.svg'); }
.header-menu > summary { --icon: url('/honghub/assets/vendor/tabler/more.svg'); }
.memory-button { --icon: url('/honghub/assets/vendor/tabler/memory.svg'); }
.hh-attachment-add { --icon: url('/honghub/assets/vendor/tabler/paperclip.svg'); }
.hh-attachment-record { --icon: url('/honghub/assets/vendor/tabler/microphone.svg'); }
.hh-attachment-toolbar .hh-record-cancel::before { display: none; }
#send-button { --icon: url('/honghub/assets/vendor/tabler/send.svg'); }
.delivery-icon { font-size: 0; --icon: url('/honghub/assets/vendor/tabler/file.svg'); }
.chat-focused .msg .message-body > small { color: #7d818c; }
.header p, .left .employee small { color: #7d818b; }
#executor-context { color: #838894; }
.left-label, .brand small { color: #80838c; }
.composer-footer .quiet { color: #8b909d; }
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --sidebar-width: 196px; --conversation-gutter: 20px; }
  .frame.chat-focused { grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
  .frame.chat-focused.work-open { grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
  .chat-focused .left { padding-inline: 10px; }
  .brand { font-size: 21px; margin-inline: 12px; }
  .left .employee { gap: 10px; padding: 10px; }
  .left .employee .avatar { width: 35px; height: 35px; }
  .left .employee small { max-width: 124px; font-size: 10px; }
  .work-panel { inset: 12px 12px 12px auto; width: 330px; margin: 0; box-shadow: -12px 0 50px #22283612; }
}
@media (max-width: 760px) {
  :root { --chat-font-size: 14px; --chat-line-height: 22px; --chat-message-gap: 16px; --chat-avatar-size: 34px; --chat-avatar-gap: 10px; --chat-bubble-padding: 9px 11px; }
  body { background: #fff; }
  .frame.chat-focused, .frame.chat-focused.work-open { display: block; }
  .chat-focused .right { height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  :root { --conversation-gutter: 16px; }
  .chat-focused .header { height: 60px; min-height: 60px; padding: 10px 16px 6px; gap: 9px; }
  .chat-focused .header > .avatar { display: grid; width: 33px; height: 33px; }
  .header h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header p { font-size: 10px; max-width: 135px; margin-top: 2px; }
  .chat-focused .head-actions { gap: 1px; }
  .chat-focused .head-actions > button { min-height: 35px; padding: 7px 8px; font-size: 11px; }
  .chat-focused .head-actions > button[data-action='new-task'] { display: none; }
  .head-actions > button::before { display: none; }
  .header-menu > summary { width: 30px; height: 35px; padding: 6px; }
  .agent-controls { min-height: 36px; padding: 0 16px 6px; gap: 6px; }
  .agent-controls #executor-context { flex-shrink: 0; font-size: 10px; }
  .agent-controls #executor-control { flex: 0 1 auto; max-width: calc(100% - 88px); font-size: 11px; }
  .agent-controls .memory-button { flex-shrink: 0; width: 32px; padding: 6px; font-size: 0; }
  .agent-controls .memory-button::before { width: 17px; height: 17px; }
  .chat-focused .chat { padding: 12px 16px; gap: var(--chat-message-gap); }
  .chat-focused .msg { gap: var(--chat-avatar-gap); }
  .chat-focused .message-avatar { width: var(--chat-avatar-size); height: var(--chat-avatar-size); }
  .chat-focused .msg:not(.me) > .message-body { max-width: calc(100% - var(--chat-author-width)); }
  .chat-focused .msg:not(.me) > .message-body > .bubble { padding: var(--chat-bubble-padding); font-size: var(--chat-font-size); line-height: var(--chat-line-height); }
  .chat-focused .msg .message-body > small:not(.message-receipt) { font-size: 10px; min-height: 15px; margin-bottom: 2px; }
  .chat-focused .msg.me { max-width: 86%; }
  .chat-focused .msg.me .bubble { font-size: var(--chat-font-size); line-height: var(--chat-line-height); padding: var(--chat-bubble-padding); }
  .chat-focused .composer { padding: 6px 12px max(8px,env(safe-area-inset-bottom)); }
  .composer .composer-box #chat-input { font-size: 16px; line-height: 24px; min-height: 46px; padding: 8px 2px; }
  .composer-box .hh-attachments { padding: 0 0 4px; }
  .composer-box .hh-attachment-toolbar { min-height: 36px; gap: 8px; }
  .composer-box .hh-attachment-toolbar button { min-height: 36px; padding: 7px; gap: 4px; }
  .composer .composer-box #send-button { right: 0; bottom: 0; width: 36px; min-width: 36px; height: 32px; padding: 7px; font-size: 0; border-radius: 6px; }
  .composer .composer-box #send-button::before { width: 19px; height: 19px; }
  .composer-inner .composer-footer { flex-wrap: nowrap; padding-top: 3px; gap: 4px; }
  .composer-footer .quiet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
  #dispatch-button { font-size: 10px; }
  .conversation-empty h2 { font-size: 23px; }
  .conversation-empty p { font-size: 12px; }
  .conversation-empty .avatar { width: 54px; height: 54px; }
  .chat-focused .delivery-pin { margin: 0 16px; padding: 8px 0; gap: 8px; }
  .chat-focused .delivery-pin .pin-copy b { font-size: 11px; }
  .chat-focused .ask-attention { margin: 0 12px; }
  .work-panel { inset: 12px 12px 12px auto; width: min(360px,94vw); margin: 0; box-shadow: -12px 0 60px #19223824; }
  .work-panel > header { height: 68px; }
  .chat-delivery { padding: 12px; }
  .ask-card { padding: 8px 10px; }
  .ask-card h3 { font-size: 13px; }
  .ask-form textarea { font-size: 16px; }
  .chat-delivery .artifact { padding: 10px; }
  dialog { width: calc(100vw - 24px); border-radius: 18px; }
  .dialog-head { padding: 18px 20px; }
  .dialog-head h2 { font-size: 18px; }
  .dialog-body { padding: 18px 20px; }
}
@media (hover: none), (max-width: 760px) {
  .chat-focused .msg .chat-message-actions { position: static; width: auto; height: 26px; min-height: 26px; gap: 16px; padding-top: 2px; background: transparent; opacity: 1; }
  .chat-focused .msg .chat-message-actions button { min-height: 24px; line-height: 20px; padding: 2px 3px; }
  .chat-focused .msg:hover .message-stamp, .chat-focused .msg:focus-within .message-stamp { visibility: visible; }
}
/* Keep the message viewport usable when the window is short or a keyboard is open. */
@media (max-height: 520px) {
  .chat-focused .header { height: 52px; min-height: 52px; padding-block: 8px 6px; }
  .chat-focused .header p { display: none; }
  .chat-focused .agent-controls { min-height: 34px; padding-bottom: 4px; }
  .chat-focused .chat { padding-block: 12px; }
  .composer .composer-box form { padding-bottom: 0; }
  .composer .composer-box #send-button { top: 2px; bottom: auto; }
  .composer-box .hh-attachment-toolbar { padding-right: 0; }
  .composer .composer-box #chat-input { max-height: max(46px,min(80px,16dvh)); }
  .composer-box:has(.hh-attachment-drafts:not(:empty)) #chat-input { max-height: max(46px,min(80px,16dvh,calc(100dvh - 320px))); }
  .composer-box .hh-attachment-drafts { max-height: min(64px,16dvh); }
  .composer-box .hh-attachment-draft { padding: 5px 6px; gap: 6px; }
  .composer-box .hh-draft-body { gap: 1px; line-height: 1.4; }
  .composer-box .hh-draft-thumbnail, .composer-box .hh-draft-kind { width: 32px; height: 32px; flex-basis: 32px; }
  .composer-box .hh-attachment-hint { font-size: 10px; line-height: 1.2; }
}
@media (prefers-reduced-motion: reduce) {
  button, .composer-box { transition: none; }
  dialog::backdrop { backdrop-filter: none; }
}
/* An embedded pane follows its desktop host, even when the iframe is narrow. */
.embedded-chat:not(.host-mobile) {
  --chat-font-size: 14px;
  --chat-line-height: 22px;
  --chat-message-gap: 18px;
  --chat-avatar-size: 36px;
  --chat-avatar-gap: 10px;
  --chat-bubble-padding: 9px 12px;
}
@media (hover: hover) {
  .embedded-chat:not(.host-mobile) .chat-focused .msg .chat-message-actions { position: absolute; width: max-content; height: 18px; min-height: 0; padding: 0; gap: 10px; background: var(--chat-surface,var(--surface)); opacity: 0; }
  .embedded-chat:not(.host-mobile) .chat-focused .msg .chat-message-actions button { min-height: 18px; padding: 0 3px; font-size: 11px; line-height: 18px; }
  .embedded-chat:not(.host-mobile) .chat-focused .msg:hover .chat-message-actions, .embedded-chat:not(.host-mobile) .chat-focused .msg:focus-within .chat-message-actions { opacity: 1; }
}

/* ---- 0.6.3 聊天顶部工具行：身份与操作分层 ---- */
.chat-focused .head-actions{gap:7px}
.chat-focused .head-actions > button{background:var(--surface);border:1px solid var(--line);border-radius:9px;min-height:32px;padding:6px 12px;font-size:12px;font-weight:500;color:var(--ink);box-shadow:0 1px 2px #22283608;transition:border-color .15s,background .15s}
.chat-focused .head-actions > button:hover{background:#f6f7f6;border-color:#d8ddd9;color:var(--ink)}
.chat-focused .head-actions > button:active{transform:translateY(.5px)}
.chat-focused .head-actions > button[data-action='new-task']{border-color:transparent;background:transparent;color:var(--ink);padding-inline:12px}
.chat-focused .head-actions > button[data-action='new-task']:hover{background:#f6f7f6}
.chat-focused .head-actions .header-menu > summary{width:auto;min-height:32px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:12px;font-weight:500;letter-spacing:1px;color:var(--ink);box-shadow:0 1px 2px #22283608}
.chat-focused .head-actions .header-menu > summary:hover{background:#f6f7f6;border-color:#d8ddd9}
.chat-focused .header > div:not(.head-actions) h1{font-size:16px}
.chat-focused .header > div:not(.head-actions) p{font-size:11.5px;color:#8a9189}
.chat-focused .head-actions .count-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4.5px;border-radius:999px;background:#07c160;color:#fff;font-size:10px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.chat-focused .head-actions > button::before{width:15px;height:15px}

/* ---- 0.6.3 群标题与工作环境拆分：环境做成可点击的「环境芯片」 ---- */
/* V1 深墨绿芯片：渐变底 + 呼吸状态灯 + 拉开箭头，点按打开环境配置 */
.group-title-env{position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:500;line-height:1;color:#8df0bd;background:linear-gradient(135deg,#0d2b20 0%,#123a2b 55%,#0f4530 100%);border:1px solid #1d5c42;border-radius:999px;padding:5px 11px 5px 10px;margin-left:9px;cursor:pointer;box-shadow:0 2px 10px #0d2b2033,inset 0 1px 0 #ffffff14;transition:transform .16s,box-shadow .16s,border-color .16s;-webkit-user-select:none;user-select:none}
.group-title-env::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:#2fe389;box-shadow:0 0 0 0 #2fe38966;animation:wepre-env-pulse 2.4s ease-out infinite}
.group-title-env::after{content:'';width:11px;height:11px;flex:none;background:#5fd9a4;mask:url('/honghub/assets/vendor/tabler/chevron.svg') center/contain no-repeat;-webkit-mask:url('/honghub/assets/vendor/tabler/chevron.svg') center/contain no-repeat;transition:transform .16s}
.group-title-env:hover{transform:translateY(-1px);border-color:#2f8f66;box-shadow:0 4px 16px #0d2b2040,inset 0 1px 0 #ffffff1c;color:#b8f7d8}
.group-title-env:hover::after{transform:translateX(1.5px)}
.group-title-env:active{transform:translateY(0);box-shadow:0 1px 6px #0d2b2040}
@keyframes wepre-env-pulse{0%{box-shadow:0 0 0 0 #2fe38959}70%{box-shadow:0 0 0 6px #2fe38900}100%{box-shadow:0 0 0 0 #2fe38900}}
/* V2 浅绿渐变芯片：同结构，亮底轻快，配浅色主题 */
.group-title-env--light{color:#0c7a4d;background:linear-gradient(135deg,#e4f8ee 0%,#d2f2e2 100%);border:1px solid #b8e6cf;box-shadow:0 2px 8px #0c7a4d14,inset 0 1px 0 #ffffff80}
.group-title-env--light::before{background:#0dbf6a;box-shadow:0 0 0 0 #0dbf6a55;animation:wepre-env-pulse-light 2.4s ease-out infinite}
.group-title-env--light::after{background:#0c7a4d}
.group-title-env--light:hover{border-color:#7fd4ab;box-shadow:0 4px 14px #0c7a4d20,inset 0 1px 0 #fff}
@keyframes wepre-env-pulse-light{0%{box-shadow:0 0 0 0 #0dbf6a4d}70%{box-shadow:0 0 0 6px #0dbf6a00}100%{box-shadow:0 0 0 0 #0dbf6a00}}
.chat-focused .header h1{display:flex;align-items:center;min-width:0;overflow:visible}
/* 深色主题：head-actions 按钮 hover 用深底浅字，避免浅底+近白字不可读（BUG-K3） */
html[data-theme=dark] .chat-focused .head-actions > button:hover,
html[data-theme=dark] .chat-focused .head-actions > button[data-action='new-task']:hover,
html[data-theme=dark] .chat-focused .head-actions .header-menu > summary:hover{background:var(--row-hover,#2c2f36);border-color:var(--focus-ring,#3a4a42);color:var(--ink,#e3eae9)}