.sample-photo{width:100%;height:100%;object-fit:cover;display:block}
.evidence-image{cursor:zoom-in}
.context-art{background:linear-gradient(145deg,#e8edf0,#d6e0e2)}
.context-symbol{width:42px;height:42px;border:1px solid #9bb0b3;border-radius:13px;display:grid;place-items:center;color:#55707a;font-size:20px;font-weight:600;transform:rotate(-6deg)}
.context-stamp{position:absolute;right:13px;bottom:12px;text-align:right;color:#9ca8aa;font-size:7px;line-height:1.45;letter-spacing:.1em}

/* Visual refinement: readable workbench hierarchy without changing the product direction. */
:root {
  --muted: #6e7b82;
  --muted-light: #879399;
  --line: #dce3e4;
  --line-soft: #e8edee;
  --accent: #2d5c6c;
  --accent-dark: #224957;
  --accent-pale: #e9f1f3;
  --shadow-soft: 0 14px 36px rgba(33,47,55,.10);
}
body { font-size: 15px; }
.app-header { height: 66px; flex-basis: 66px; padding-inline: 24px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.brand-copy strong { font-size: 15px; }
.brand-copy span, .integration-hint, .text-action, .user-name { font-size: 11px; }
.app-body { grid-template-columns: 64px 268px minmax(0,1fr); }
.side-rail { top: 66px; height: calc(100dvh - 66px); }
.queue-heading h1 { font-size: 18px; }
.section-label, .ticket-number, .ticket-time, .ticket-product, .priority-mark,
.search-box input, .order-cell span, .message-meta, .attachment-copy small,
.attachment-copy em, .assistant-heading span, .clue-copy small, .check-row,
.reply-topline strong, .composer-bottom>span, .subtle-button, .text-action,
.panel-footnote, .policy-note p { font-size: 11px; }
.queue-tab { font-size: 12px; }
.ticket-card>strong, .order-cell strong, .message-meta strong,
.attachment-copy strong, .clue-copy strong, .conversation-head>strong,
.policy-note strong { font-size: 13px; }
.queue-empty strong, .conversation-head>span, .status-chip, .inline-system-note,
.modal>p, .toast p { font-size: 12px; }
.queue-empty small, .queue-footer, .attachment-kind, .state-label,
.sample-badge, .block-heading>span, .policy-icon, .panel-footnote,
.modal-kicker, .modal-content { font-size: 10px; }
.work-area { grid-template-columns: minmax(430px,1fr) minmax(345px,390px); }
.case-title-line h2 { font-size: 17px; }
.case-breadcrumb { font-size: 11px; }
.order-strip { padding: 14px 15px; border-radius: 11px; background: #fbfcfc; }
.conversation-head { min-height: 48px; }
.message-bubble { font-size: 14px; line-height: 1.75; }
.attachment-card { min-height: 78px; padding: 9px; }
.attachment-card img { width: 62px; height: 64px; flex-basis: 62px; }
.inline-system-note { line-height: 1.65; }
.reply-composer { padding: 14px 18px 16px; }
.reply-composer textarea { min-height: 82px; padding: 11px 12px; font-size: 13px; }
.suggestion-chip { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.button { min-height: 42px; border-radius: 8px; padding-inline: 14px; font-size: 13px; }
.text-action, .subtle-button { min-height: 32px; }
.square-action { width: 36px; height: 36px; }
.assistant-panel { padding: 21px 20px 15px; background: #fbfcfc; }
.assistant-heading h2 { font-size: 16px; }
.assistant-intro { font-size: 12px; line-height: 1.7; }
.assistant-state { padding: 12px; border-radius: 9px; }
.clue-row { min-height: 58px; padding-inline: 9px; }
.check-row { min-height: 36px; }
.policy-note { padding: 12px; border-radius: 9px; }
.policy-note strong { font-size: 12px; }
.policy-note p { font-size: 11px; line-height: 1.7; }
.assistant-actions { gap: 9px; }
.assistant-actions .button { padding-inline: 10px; }
.record-action { margin-top: 9px; }
.modal { width: min(460px,100%); padding: 27px; border-radius: 15px; }
.modal h2 { font-size: 19px; }
.modal>p, .modal-content { font-size: 13px; }

@media (max-width: 1120px) and (min-width: 1006px) {
  .app-body { grid-template-columns: 56px 230px minmax(0,1fr); }
  .work-area { grid-template-columns: minmax(390px,1fr) minmax(330px,360px); }
  .assistant-panel { padding: 18px 15px 13px; }
}

/* Tablet and phone: remove the full-height desktop rail so it cannot create a blank first screen. */
@media (max-width: 1005px) {
  .app-header { gap: 12px; }
  .header-context { display: none; }
  .app-body { display: flex; flex-direction: column; min-height: calc(100dvh - 66px); }
  .side-rail { display: none; }
  .queue-panel { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(260px,1.2fr); grid-template-rows: auto auto; align-items: center; gap: 10px 18px; min-height: 0; height: auto; padding: 13px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .queue-heading { grid-column: 1; grid-row: 1; min-height: 40px; padding: 0; }
  .queue-heading .section-label { display: block; }
  .queue-heading h1 { margin-top: 2px; font-size: 17px; }
  .queue-tabs { position: static; grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 20px; margin: 0; border-bottom: 0; }
  .queue-tab { padding-bottom: 6px; font-size: 12px; }
  .search-box { display: flex; grid-column: 1; grid-row: 2; height: 38px; margin: 0; }
  .ticket-list { grid-column: 2; grid-row: 2; padding: 0; }
  .ticket-card { padding: 9px 11px; }
  .ticket-card>strong { margin-top: 5px; }
  .ticket-product { display: block; }
  .ticket-bottom { display: flex; margin-top: 7px; }
  .queue-footer { display: none; }
  .work-area { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.85fr); min-height: calc(100dvh - 190px); }
  .conversation, .assistant-panel { min-height: 0; }
  .message-stream { max-height: none; }
}
@media (max-width: 640px) {
  .app-header { height: 58px; flex-basis: 58px; gap: 8px; padding-inline: 12px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand-copy strong { font-size: 14px; }
  .integration-hint { max-width: 140px; font-size: 10px; }
  .app-body { min-height: calc(100dvh - 58px); }
  .queue-panel { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; gap: 10px; padding: 12px; }
  .queue-heading { grid-column: 1; grid-row: 1; }
  .queue-heading .section-label { display: none; }
  .queue-heading h1 { font-size: 17px; }
  .queue-tabs { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: 22px; border-bottom: 1px solid var(--line); }
  .queue-tab { padding-bottom: 9px; font-size: 12px; }
  .search-box { grid-column: 1; grid-row: 3; height: 40px; }
  .ticket-list { grid-column: 1; grid-row: 4; }
  .ticket-card { padding: 11px; }
  .ticket-number, .ticket-time, .ticket-product, .priority-mark { font-size: 11px; }
  .ticket-card>strong { font-size: 14px; }
  .work-area { display: flex; flex-direction: column; min-height: 0; }
  .conversation { order: 1; min-height: 0; border-right: 0; }
  .assistant-panel { order: 2; min-height: 0; padding: 18px 15px; border-top: 6px solid var(--canvas); }
  .case-toolbar { min-height: 70px; padding: 11px 14px; }
  .case-title-line h2 { font-size: 16px; }
  .case-breadcrumb, .status-chip { font-size: 10px; }
  .order-strip { grid-template-columns: 1fr 1fr; row-gap: 11px; margin: 10px 10px 3px; padding: 11px; }
  .order-cell span { font-size: 10px; }
  .order-cell strong { font-size: 11px; }
  .conversation-head { min-height: 46px; margin-inline: 14px; }
  .conversation-head>strong { font-size: 12px; }
  .conversation-head>span { font-size: 10px; }
  .subtle-button { font-size: 11px; }
  .message-stream { min-height: 220px; padding: 14px; }
  .message-body { max-width: 91%; }
  .message-bubble { font-size: 14px; }
  .attachment-card { width: min(340px,100%); }
  .attachment-copy strong { font-size: 12px; }
  .attachment-copy small, .attachment-copy em { font-size: 10px; }
  .reply-composer { padding: 13px 12px 15px; }
  .reply-composer textarea { min-height: 76px; }
  .assistant-heading h2 { font-size: 16px; }
  .clue-copy strong { font-size: 12px; }
  .clue-copy small, .check-row { font-size: 11px; }
  .assistant-actions { margin-top: 6px; }
  .queue-tabs { gap: 16px; overflow-x: auto; }
  .queue-tab { flex: 0 0 auto; font-size: 11px; }
}

/* Practical service-workbench details: explicit public/private composer and handoff state. */
.composer-mode { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line-soft); border-radius: 8px; background: #f7f9f9; }
.composer-mode-button { min-height: 30px; border: 0; border-radius: 6px; padding: 0 10px; background: transparent; color: #718087; font-size: 11px; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.composer-mode-button:hover { color: var(--accent-dark); }
.composer-mode-button.active { background: #fff; color: var(--accent-dark); box-shadow: 0 1px 3px rgba(35,53,60,.10); font-weight: 620; }
.internal-message .message-bubble { border-color: #eadfbe; background: #fbf6e9; color: #62583f; }
.internal-message .agent-avatar { background: #efe7d4; color: #786846; }
.handoff-form { display: grid; gap: 13px; margin-top: 14px; }
.handoff-form label { display: grid; gap: 6px; color: #637078; font-size: 12px; font-weight: 570; }
.handoff-form select, .handoff-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.55; }
.handoff-form textarea { resize: vertical; }
.followup-action { width: 100%; margin-top: 9px; }
.queue-tab { min-height: 36px; }
@media (max-width: 640px) {
  .composer-mode-button { min-height: 32px; padding-inline: 8px; font-size: 10px; }
  .reply-topline { gap: 8px; }
  .reply-topline .subtle-button { white-space: nowrap; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Neutral, low-chroma workbench canvas; keep teal as the single product accent. */
:root {
  --canvas: #f4f5f6;
  --paper: #ffffff;
  --line: #e1e5e8;
  --line-soft: #edf0f2;
  --accent: #315f72;
  --accent-dark: #254a5b;
  --accent-pale: #eaf1f3;
  --shadow-soft: 0 10px 26px rgba(39, 51, 59, .065);
}
body { background: var(--canvas); }
.app-header { background: #fff; border-bottom-color: var(--line); }
.brand-mark { position: relative; background: #26353b; font-size: 0; overflow: hidden; }
.brand-mark::before { content: ""; width: 14px; height: 14px; border: 1.6px solid #f7f5f2; border-radius: 50%; }
.brand-mark::after { content: ""; position: absolute; width: 7px; height: 1.6px; right: 6px; bottom: 8px; border-radius: 2px; background: #f7f5f2; transform: rotate(45deg); transform-origin: left center; }
.integration-hint { color: #6e7b82; background: #f1f3f4; }
.side-rail { background: #f8f9fa; border-right: 1px solid var(--line); }
.rail-item { color: #718087; }
.rail-item:hover { background: #eef1f2; color: #35464d; }
.rail-item { width: 48px; height: 43px; border-radius: 9px; }
.rail-item span { width: auto; height: auto; border: 0; border-radius: 0; font-size: 11px; letter-spacing: .04em; }
.rail-item.active { position: relative; background: #e8eff1; color: var(--accent-dark); }
.rail-item.active::before { content: ""; position: absolute; left: -8px; width: 2px; height: 21px; border-radius: 2px; background: var(--accent); }
.rail-item.active span { border: 0; color: var(--accent-dark); }
.rail-profile { background: #e8ecee; color: #4b626b; }
.queue-panel, .assistant-panel { background: #fafbfc; }
.queue-heading h1, .case-title-line h2, .assistant-heading h2 { color: #263238; }
.case-toolbar { background: #fff; }
.order-strip { background: #fbfcfc; border-color: #edf0f2; }
.conversation-head>strong { color: #35434a; }
.assistant-mark { position: relative; width: 29px; height: 29px; border: 0; border-radius: 50%; background: #e9efef; }
.assistant-mark::before { content: ""; width: 11px; height: 11px; border: 1.5px solid #416776; border-radius: 50%; }
.assistant-mark::after { content: ""; position: absolute; width: 6px; height: 1.5px; right: 6px; bottom: 7px; border-radius: 2px; background: #416776; transform: rotate(45deg); }
.assistant-state { background: #f5f7f7; border-color: #e8edef; }
.assistant-state strong { color: #53636a; }
.sample-badge { display: none !important; }
.clue-row { border-radius: 8px; }
.clue-icon { position: relative; width: 24px; height: 24px; flex-basis: 24px; border-radius: 50%; background: transparent; }
.photo-icon::before { content: ""; width: 13px; height: 10px; border: 1.4px solid #8b7655; border-radius: 2px; }
.photo-icon::after { content: ""; position: absolute; top: 6px; right: 6px; width: 3px; height: 3px; border-radius: 50%; background: #8b7655; box-shadow: -5px 5px 0 -1px #8b7655; }
.context-icon::before { content: ""; width: 11px; height: 13px; border: 1.4px solid #607782; border-radius: 2px; }
.context-icon::after { content: ""; position: absolute; width: 5px; height: 1px; background: #607782; box-shadow: 0 3px 0 #607782; }
.decision-icon::before { content: ""; width: 12px; height: 12px; border: 1.4px solid #5d7c67; border-radius: 50%; }
.decision-icon::after { content: ""; position: absolute; bottom: 3px; width: 15px; height: 7px; border: 1.4px solid #5d7c67; border-bottom: 0; border-radius: 10px 10px 0 0; background: #fafbfc; }
.message-bubble { background: #f7f8f8; border-color: #edf0f1; }
.attachment-card { border-color: #e8edef; }
.suggestion-chip { border-color: #e1e8e9; background: #fbfcfc; }
.button-secondary, .button-outline { border-color: #dfe5e6; }
.button-secondary:hover, .button-outline:hover { border-color: #c4d1d3; background: #f7f9f9; }
.reply-composer { background: #fff; }
.modal-mark { position: relative; border-radius: 50%; font-size: 0; }
.modal-mark::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 50%; }
.modal-mark::after { content: ""; position: absolute; width: 6px; height: 1.5px; right: 6px; bottom: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
@media (max-width: 640px) {
  .rail-item { width: 32px; height: 34px; }
  .rail-item span { font-size: 9px; }
  .rail-item.active::before { left: -5px; }
}

/* Type hierarchy: readable support details, restrained micro-labels. */
body { font-size: 15px; line-height: 1.55; }
.brand-copy strong { font-size: 16px; letter-spacing: -.015em; }
.brand-copy span, .integration-hint, .text-action, .user-name { font-size: 12px; }
.queue-heading h1 { font-size: 20px; letter-spacing: -.02em; }
.case-title-line h2 { font-size: 19px; letter-spacing: -.02em; line-height: 1.35; }
.assistant-heading h2 { font-size: 17px; letter-spacing: -.015em; }
.section-label, .ticket-number, .ticket-time, .ticket-product, .priority-mark,
.search-box input, .order-cell span, .message-meta, .attachment-copy small,
.attachment-copy em, .assistant-heading span, .clue-copy small, .check-row,
.reply-topline strong, .composer-bottom>span, .subtle-button, .panel-footnote,
.policy-note p { font-size: 12px; }
.ticket-card>strong, .order-cell strong, .message-meta strong,
.attachment-copy strong, .clue-copy strong, .conversation-head>strong,
.policy-note strong { font-size: 14px; }
.queue-empty strong, .conversation-head>span, .status-chip, .inline-system-note,
.modal>p, .toast p, .assistant-intro { font-size: 13px; }
.queue-empty small, .queue-footer, .attachment-kind, .state-label,
.block-heading>span, .policy-icon, .modal-kicker, .modal-content { font-size: 11px; }
.case-breadcrumb { font-size: 12px; }
.message-bubble { font-size: 15px; line-height: 1.7; }
.reply-composer textarea { font-size: 14px; }
.suggestion-chip, .button { font-size: 13px; }
.assistant-intro, .policy-note p, .clue-copy small, .inline-system-note,
.attachment-copy small { line-height: 1.65; }

@media (max-width: 1005px) {
  .queue-heading h1 { font-size: 19px; }
}
@media (max-width: 640px) {
  .brand-copy strong { font-size: 15px; }
  .integration-hint { font-size: 11px; }
  .queue-heading h1 { font-size: 19px; }
  .queue-tab { font-size: 12px; }
  .ticket-number, .ticket-time, .ticket-product, .priority-mark,
  .case-breadcrumb, .status-chip, .order-cell span,
  .conversation-head>span, .attachment-copy small, .attachment-copy em,
  .clue-copy small, .composer-bottom>span, .panel-footnote { font-size: 11px; }
  .ticket-card>strong, .order-cell strong, .attachment-copy strong,
  .clue-copy strong, .check-row, .conversation-head>strong { font-size: 13px; }
  .case-title-line h2 { font-size: 18px; }
  .message-bubble { font-size: 15px; }
  .assistant-heading h2 { font-size: 17px; }
  .assistant-intro, .policy-note p, .inline-system-note { font-size: 12px; }
  .composer-mode-button { font-size: 11px; }
  .order-cell strong { overflow-wrap: anywhere; }
}