:root {
  --service-dock-ink: #17231b;
  --service-dock-green: #0b5b3c;
  --service-dock-green-deep: #123126;
  --service-dock-green-soft: #e5f0e9;
  --service-dock-red: #ee533f;
  --service-dock-red-deep: #c93e2e;
  --service-dock-yellow: #f6bd24;
  --service-dock-paper: #f6f2e8;
  --service-dock-surface: #fffdf7;
  --service-dock-muted: #667067;
  --service-dock-faint: #8a928b;
  --service-dock-border: #d9d5ca;
  --service-dock-soft-border: #e9e4d9;
  --service-dock-line: rgba(23, 35, 27, .09);
  --service-dock-danger: #a13c30;
  --service-dock-danger-soft: #fff0eb;
  --service-dock-shadow: 0 18px 44px rgba(23, 35, 27, .16);
  --service-widget-shadow: 0 24px 70px rgba(22, 35, 27, .22), 0 4px 18px rgba(22, 35, 27, .10);
}

.service-dock,
.service-dock *,
.service-widget,
.service-widget *,
.service-widget-backdrop { box-sizing: border-box; }

.service-dock {
  position: fixed;
  z-index: 88;
  top: 50vh;
  top: 50dvh;
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateY(-50%) scale(var(--service-dock-scale, 1));
  transform-origin: right center;
  color: var(--service-dock-ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.service-dock-panel {
  display: grid;
  gap: 2px;
  margin: 0;
  border: 1px solid var(--service-dock-line);
  border-radius: 28px;
  padding: 8px 5px;
  background: #fff;
  box-shadow: var(--service-dock-shadow);
}

.service-dock-item,
.service-dock-brand,
.service-dock-toggle {
  position: relative;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--service-dock-ink);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.service-dock-item > i,
.service-dock-toggle > i { font-size: 22px; line-height: 1; }

.service-dock-item:hover,
.service-dock-item:focus-visible,
.service-dock-item[aria-current="page"] {
  background: #edf4ef;
  color: var(--service-dock-green);
}

.service-dock-item:focus-visible,
.service-dock-brand:focus-visible,
.service-dock-toggle:focus-visible {
  outline: 3px solid var(--service-dock-red);
  outline-offset: 3px;
}

.service-dock-item::after,
.service-dock-brand::after {
  position: absolute;
  top: 50%;
  right: calc(100% + 11px);
  width: max-content;
  max-width: 150px;
  transform: translate(6px, -50%);
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--service-dock-ink);
  color: #fff;
  content: attr(data-label);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  white-space: nowrap;
}

.service-dock-item:hover::after,
.service-dock-item:focus-visible::after,
.service-dock-brand:hover::after,
.service-dock-brand:focus-visible::after { transform: translate(0, -50%); opacity: 1; }

.service-dock-badge {
  position: absolute;
  top: 6px;
  right: 5px;
  min-width: 10px;
  height: 10px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--service-dock-red);
  color: transparent;
  font-size: 0;
}

.service-dock-brand {
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
.service-dock-brand img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 7px 14px rgba(23, 35, 27, .18));
}

.service-dock-toggle {
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 35, 27, .12);
  transition: color .16s ease, transform .16s ease;
}
.service-dock-toggle:hover { color: var(--service-dock-green); }
.service-dock-toggle i { transition: transform .2s ease; }
.service-dock.is-collapsed .service-dock-panel,
.service-dock.is-collapsed .service-dock-brand { display: none; }
.service-dock.is-collapsed .service-dock-toggle { width: 48px; height: 48px; color: #fff; background: var(--service-dock-green); }
.service-dock.is-collapsed .service-dock-toggle i { transform: none; }

.service-dock-sr-only,
.service-widget .support-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body.community-comment-sheet-open .service-dock,
body.service-widget-open .service-dock {
  visibility: hidden;
  transform: translate(14px, -50%);
  opacity: 0;
  pointer-events: none;
}

/* Compact support workspace */
.service-widget-backdrop {
  position: fixed;
  z-index: 109;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.service-widget-backdrop[hidden],
.service-widget[hidden],
.service-widget [hidden] { display: none !important; }

.service-widget {
  position: fixed;
  z-index: 110;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 40px));
  height: min(680px, calc(100dvh - 40px));
  min-height: min(560px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--service-dock-border);
  border-radius: 22px;
  background: var(--service-dock-surface);
  color: var(--service-dock-ink);
  box-shadow: var(--service-widget-shadow);
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  isolation: isolate;
  animation: service-widget-enter .18s ease-out both;
}

.service-widget :where(button, input, select, textarea) { font: inherit; }
.service-widget :where(button, a, summary) { touch-action: manipulation; }
.service-widget button { cursor: pointer; }
.service-widget a { color: inherit; }
.service-widget img { display: block; max-width: 100%; }
.service-widget :where(h1, h2, h3, p, ul, ol, dl, dd) { margin-block-start: 0; }
.service-widget :where(section, article, aside, header, form, nav, div, span) { min-width: 0; }

@keyframes service-widget-enter {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.service-widget-header {
  min-height: 64px;
  display: flex;
  flex: 0 0 64px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--service-dock-soft-border);
  padding: 8px 8px 8px 12px;
  background: var(--service-dock-surface);
}
.service-widget.is-draggable .service-widget-header { cursor: grab; user-select: none; }
.service-widget.is-draggable.is-dragging .service-widget-header { cursor: grabbing; }
.service-widget.is-draggable.is-dragging { transition: none; }
.service-widget-identity {
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  color: var(--service-dock-ink);
  text-align: left;
}
.service-widget-identity img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.service-widget-identity > span { display: grid; gap: 1px; overflow: hidden; }
.service-widget-identity strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-widget-identity small {
  overflow: hidden;
  color: var(--service-dock-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-widget-window-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.service-widget-drag-handle {
  color: var(--service-dock-faint);
  cursor: move;
  font-size: 18px;
}
.service-widget-drag-handle:hover { background: var(--service-dock-green-soft); color: var(--service-dock-green); }
.service-widget-window-actions button,
.service-widget .service-widget-drag-handle,
.service-widget .support-icon-action,
.service-widget .support-icon-button,
.service-widget .support-attachment-button,
.service-widget .support-send-button,
.service-widget .support-dialog-close {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-grid;
  flex: 0 0 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--service-dock-ink);
  font-size: 20px;
}
.service-widget-window-actions button:hover,
.service-widget .support-icon-button:hover,
.service-widget .support-dialog-close:hover { background: var(--service-dock-green-soft); color: var(--service-dock-green); }

.service-widget-recruitment-status-link {
  min-height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 9px;
  padding: 8px 9px;
  background: transparent;
  color: var(--service-dock-green);
  font-size: 11px;
  font-weight: 850;
}
.service-widget-recruitment-status-link:hover { background: var(--service-dock-green-soft); }
.service-widget[data-support-widget-context="recruitment"] {
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - 32px));
  min-height: min(500px, calc(100dvh - 32px));
}
.service-widget[data-support-widget-context="recruitment"]:not([data-recruitment-conversation="started"]) {
  height: min(540px, calc(100dvh - 32px));
}
.service-widget[data-support-widget-context="recruitment"] .service-widget-drag-handle,
.service-widget[data-support-widget-context="recruitment"] [data-support-widget-minimize] { display: none !important; }
.service-widget[data-support-widget-context="recruitment"] .service-widget-header {
  min-height: 60px;
  flex-basis: 60px;
  padding-block: 6px;
}
.service-widget[data-support-widget-context="recruitment"] .service-widget-main { overflow: hidden; }

.service-widget-main {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--service-dock-paper);
}
.service-widget[data-support-widget-view="help"] .support-loading-shell,
.service-widget[data-support-widget-view="help"] .support-login-shell,
.service-widget[data-support-widget-view="help"] .support-app { display: none !important; }
.service-widget[data-support-widget-view="recruitment"] .support-widget-help,
.service-widget[data-support-widget-view="recruitment"] .support-loading-shell,
.service-widget[data-support-widget-view="recruitment"] .support-login-shell,
.service-widget[data-support-widget-view="recruitment"] .support-app { display: none !important; }
.service-widget:not([data-support-widget-view="recruitment"]) .support-recruitment-shell { display: none; }
.service-widget:not([data-support-widget-view="help"]) .support-widget-help { display: none; }
.service-widget .support-quick-start { display: none; }
.service-widget[data-support-widget-view="consult"] .support-workspace-intro,
.service-widget[data-support-widget-view="consult"] .support-workspace,
.service-widget[data-support-widget-view="feedback"] .support-workspace-intro,
.service-widget[data-support-widget-view="feedback"] .support-workspace { display: none; }
.service-widget[data-support-widget-view="consult"] .support-quick-start,
.service-widget[data-support-widget-view="feedback"] .support-quick-start { display: flex; }

.service-widget .support-section-kicker {
  margin: 0;
  color: var(--service-dock-red-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.45;
}
.service-widget .support-widget-welcome h2,
.service-widget .support-workspace-intro h2,
.service-widget .support-empty-state h2,
.service-widget .support-login-card h2,
.service-widget .support-dialog-header h2 {
  margin: 6px 0 7px;
  color: var(--service-dock-ink);
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.05em;
  line-height: 1.18;
}
.service-widget .support-widget-welcome > p:last-child,
.service-widget .support-workspace-intro > div > p:last-child,
.service-widget .support-empty-state > p:not(.support-section-kicker),
.service-widget .support-dialog-lead,
.service-widget .support-login-card > p:not(.support-section-kicker) {
  margin-bottom: 0;
  color: var(--service-dock-muted);
  font-size: 12px;
  line-height: 1.6;
}

.service-widget .support-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.service-widget .support-button:disabled { opacity: .55; cursor: not-allowed; }
.service-widget .support-button-primary { background: var(--service-dock-red); color: #fff; }
.service-widget .support-button-primary:hover:not(:disabled) { background: var(--service-dock-red-deep); }
.service-widget .support-button-outline { border-color: #9ca59d; background: var(--service-dock-surface); color: var(--service-dock-ink); }
.service-widget .support-button-outline:hover:not(:disabled) { border-color: var(--service-dock-green); color: var(--service-dock-green); }
.service-widget .support-text-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 4px 7px;
  background: transparent;
  color: var(--service-dock-green);
  font-size: 11px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-widget .support-recruitment-shell {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  background: var(--service-dock-paper);
  overscroll-behavior: contain;
}
.service-widget .support-recruitment-context {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  border: 0;
  border-radius: 14px;
  padding: 11px 12px;
  background: #eaf2ed;
}
.service-widget .support-recruitment-context small {
  display: block;
  margin-bottom: 3px;
  color: var(--service-dock-red-deep);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .02em;
}
.service-widget .support-recruitment-context h2 {
  margin: 0;
  color: var(--service-dock-ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.3;
}
.service-widget .support-recruitment-context p {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 3px 7px;
  margin: 0;
  color: var(--service-dock-green);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}
.service-widget .support-recruitment-context p span + span {
  border-left: 1px solid rgba(11, 91, 60, .22);
  padding-left: 7px;
}
.service-widget .support-recruitment-prompts {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.service-widget .support-recruitment-prompts > span {
  grid-column: 1 / -1;
  color: var(--service-dock-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}
.service-widget .support-recruitment-prompts button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #dcded7;
  border-radius: 11px;
  padding: 8px 10px;
  background: rgba(255, 253, 247, .82);
  color: var(--service-dock-ink);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  line-height: 1.35;
  white-space: normal;
}
.service-widget .support-recruitment-prompts button:last-child { grid-column: 1 / -1; }
.service-widget .support-recruitment-prompts button:hover:not(:disabled) { border-color: var(--service-dock-green); background: var(--service-dock-green-soft); color: var(--service-dock-green); }
.service-widget .support-recruitment-prompts button:disabled { opacity: .55; cursor: wait; }
.service-widget .support-recruitment-messages {
  min-height: 112px;
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  gap: 9px;
  overflow-y: auto;
  border: 0;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 253, 247, .78);
  box-shadow: inset 0 0 0 1px rgba(23, 35, 27, .045);
  overscroll-behavior: contain;
}
.service-widget[data-recruitment-conversation="started"] .support-recruitment-messages {
  min-height: 150px;
  flex: 1 1 auto;
}
.service-widget .support-recruitment-message { width: fit-content; max-width: 90%; }
.service-widget .support-recruitment-message > span { display: block; margin-bottom: 4px; color: var(--service-dock-faint); font-size: 10px; font-weight: 850; }
.service-widget .support-recruitment-message p { margin: 0; border-radius: 4px 14px 14px; padding: 10px 12px; background: var(--service-dock-green-soft); color: var(--service-dock-ink); font-size: 13px; line-height: 1.55; }
.service-widget .support-recruitment-message small { display: block; margin-top: 5px; color: var(--service-dock-faint); font-size: 10px; line-height: 1.4; }
.service-widget .support-recruitment-message.is-user { justify-self: end; }
.service-widget .support-recruitment-message.is-user > span { text-align: right; }
.service-widget .support-recruitment-message.is-user p { border-radius: 14px 4px 14px 14px; background: var(--service-dock-green); color: #fff; }
.service-widget .support-recruitment-composer {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  min-height: 58px;
  border: 1px solid rgba(11, 91, 60, .34);
  border-radius: 16px;
  padding: 6px;
  background: var(--service-dock-surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.service-widget .support-recruitment-composer:focus-within { border-color: var(--service-dock-green); box-shadow: 0 0 0 3px rgba(11, 91, 60, .12); }
.service-widget .support-recruitment-composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 96px;
  display: block;
  resize: none;
  border: 0;
  border-radius: 10px;
  padding: 11px 9px;
  background: transparent;
  color: var(--service-dock-ink);
  font-size: 13px;
  line-height: 1.5;
  outline: 0;
}
.service-widget .support-recruitment-composer textarea:focus,
.service-widget .support-recruitment-composer textarea:focus-visible,
.service-widget .support-recruitment-composer textarea:invalid {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.service-widget .support-recruitment-composer .support-send-button {
  align-self: end;
  background: var(--service-dock-green);
  color: #fff;
}
.service-widget .support-recruitment-composer .support-send-button:hover:not(:disabled) { background: var(--service-dock-green-deep); }
.service-widget .support-recruitment-privacy {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin: -1px 2px 0;
  color: var(--service-dock-muted);
  font-size: 10px;
  line-height: 1.45;
}
.service-widget .support-recruitment-privacy i { flex: 0 0 auto; color: var(--service-dock-green); font-size: 13px; }
.service-widget .support-recruitment-state { margin: -3px 2px 0; color: var(--service-dock-muted); font-size: 10px; line-height: 1.45; }
.service-widget .support-recruitment-state[data-state="loading"] { color: #82661e; }
.service-widget .support-recruitment-state[data-state="success"] { color: var(--service-dock-green); }
.service-widget .support-recruitment-state[data-state="error"] { color: var(--service-dock-danger); font-weight: 750; }
.service-widget .support-recruitment-retry { align-self: flex-start; margin-top: -7px; }
.service-widget .support-recruitment-actions { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.service-widget .support-recruitment-actions .support-button { min-width: 0; min-height: 46px; }
.service-widget .support-recruitment-actions > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--service-dock-green);
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
.service-widget .support-recruitment-actions > a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Help view */
.service-widget .support-widget-help {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 20px;
  background: var(--service-dock-paper);
}
.service-widget[data-support-widget-view="help"] .service-widget-main { overflow: hidden; }
.service-widget #supportTopicsTitle:focus { outline: none; }
.service-widget #supportTopicsTitle:focus-visible { outline: 2px solid var(--service-dock-green); outline-offset: 6px; border-radius: 4px; }
.service-widget .support-widget-welcome { padding: 2px 2px 16px; }
.service-widget .support-help-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  margin: 0;
}
.service-widget .support-help-search > div { position: relative; min-width: 0; }
.service-widget .support-help-search > div > i {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--service-dock-green);
  font-size: 18px;
  pointer-events: none;
}
.service-widget .support-help-search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--service-dock-border);
  border-radius: 12px;
  padding: 8px 42px 8px 40px;
  background: var(--service-dock-surface);
  color: var(--service-dock-ink);
  font-size: 13px;
  outline: 0;
}
.service-widget .support-help-search input::placeholder { color: var(--service-dock-faint); }
.service-widget .support-help-search > div > button {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  display: grid;
  transform: translateY(-50%);
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--service-dock-muted);
}
.service-widget .support-help-search > div > button:hover { background: var(--service-dock-green-soft); color: var(--service-dock-green); }
.service-widget .support-help-search > .support-icon-action { background: var(--service-dock-green); color: #fff; font-size: 19px; }
.service-widget .support-help-search > .support-icon-action:hover { background: var(--service-dock-green-deep); }
.service-widget .support-search-state {
  min-height: 18px;
  margin: 8px 2px 12px;
  color: var(--service-dock-muted);
  font-size: 11px;
}
.service-widget .support-search-state[data-state="empty"] { color: var(--service-dock-danger); font-weight: 750; }

.service-widget .support-topic-grid { display: grid; gap: 8px; }
.service-widget .support-topic-card {
  overflow: hidden;
  border: 1px solid var(--service-dock-border);
  border-radius: 14px;
  background: var(--service-dock-surface);
}
.service-widget .support-topic-card[open] { border-color: #91ad9a; box-shadow: 0 8px 20px rgba(22, 35, 27, .06); }
.service-widget .support-topic-card summary {
  min-height: 62px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.service-widget .support-topic-card summary::-webkit-details-marker { display: none; }
.service-widget .support-topic-card summary > span:nth-child(2) { display: grid; gap: 2px; }
.service-widget .support-topic-card summary small { color: var(--service-dock-red-deep); font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.service-widget .support-topic-card summary strong {
  overflow: hidden;
  color: var(--service-dock-ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.42;
  text-overflow: ellipsis;
}
.service-widget .support-topic-card summary > i { color: var(--service-dock-green); font-size: 18px; transition: transform .16s ease; }
.service-widget .support-topic-card[open] summary > i { transform: rotate(45deg); }
.service-widget .support-topic-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--service-dock-green-soft);
  color: var(--service-dock-green);
  font-size: 18px;
}
.service-widget .support-topic-card > div {
  margin: 0 12px;
  border-top: 1px solid var(--service-dock-soft-border);
  padding: 11px 2px 13px 46px;
}
.service-widget .support-topic-card > div p { margin: 0 0 9px; color: var(--service-dock-muted); font-size: 11px; line-height: 1.62; }
.service-widget .support-topic-card > div :is(a, button),
.service-widget .support-inline-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--service-dock-green);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}
.service-widget .support-topic-card > div :is(a, button):hover,
.service-widget .support-inline-link:hover { color: var(--service-dock-red-deep); text-decoration: underline; text-underline-offset: 3px; }
.service-widget .support-topic-empty {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
  border: 1px dashed #9da69f;
  border-radius: 14px;
  padding: 14px;
  background: var(--service-dock-surface);
}
.service-widget .support-topic-empty > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--service-dock-green-soft);
  color: var(--service-dock-green);
  font-size: 19px;
}
.service-widget .support-topic-empty strong { font-size: 13px; }
.service-widget .support-topic-empty p { margin: 3px 0 0; color: var(--service-dock-muted); font-size: 11px; }
.service-widget .support-topic-empty .support-button { grid-column: 1 / -1; }
.service-widget .support-widget-help-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 2px;
}

/* Session loading and login */
.service-widget .support-loading-shell,
.service-widget .support-login-shell,
.service-widget .support-app { height: 100%; }
.service-widget .support-loading-shell {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  color: var(--service-dock-muted);
  text-align: center;
}
.service-widget .support-loading-shell p { margin: 0; font-size: 12px; }
.service-widget .support-loading-mark,
.service-widget .support-login-icon,
.service-widget .support-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #b8d1c0;
  border-radius: 50%;
  background: var(--service-dock-green-soft);
  color: var(--service-dock-green);
  font-size: 23px;
}
.service-widget .support-loading-mark i { animation: service-widget-spin 1s linear infinite; }
@keyframes service-widget-spin { to { transform: rotate(360deg); } }
.service-widget .support-login-shell {
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
}
.service-widget .support-login-card {
  width: 100%;
  display: grid;
  justify-items: start;
  border: 1px solid var(--service-dock-border);
  border-top: 4px solid var(--service-dock-red);
  border-radius: 18px;
  padding: 24px;
  background: var(--service-dock-surface);
  box-shadow: 0 12px 30px rgba(22, 35, 27, .08);
}
.service-widget .support-login-icon { margin-bottom: 16px; }
.service-widget .support-login-card .support-button { width: 100%; margin-top: 18px; }
.service-widget .support-login-card .support-inline-link { margin-top: 9px; }
.service-widget .support-service-anchor { display: none; }

/* Direct consultation: one question box, no ticket-style setup form */
.service-widget .support-quick-start {
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 18px;
  background: var(--service-dock-paper);
}
.service-widget .support-quick-start-welcome {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border-bottom: 1px solid var(--service-dock-soft-border);
  padding: 2px 0 17px;
}
.service-widget .support-quick-start-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #b8d1c0;
  border-radius: 15px;
  background: var(--service-dock-green-soft);
  color: var(--service-dock-green);
  font-size: 23px;
}
.service-widget .support-quick-start-welcome h2 {
  margin: 5px 0 6px;
  color: var(--service-dock-ink);
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1.18;
}
.service-widget .support-quick-start-welcome p:last-child {
  margin: 0;
  color: var(--service-dock-muted);
  font-size: 12px;
  line-height: 1.65;
}
.service-widget .support-quick-prompts { display: flex; flex-wrap: wrap; gap: 7px; }
.service-widget .support-quick-prompts button {
  min-height: 36px;
  border: 1px solid #cdd8cf;
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--service-dock-surface);
  color: #445149;
  font-size: 11px;
  font-weight: 800;
}
.service-widget .support-quick-prompts button:hover:not(:disabled) {
  border-color: var(--service-dock-green);
  background: var(--service-dock-green-soft);
  color: var(--service-dock-green);
}
.service-widget .support-quick-prompts button:last-child {
  border-color: #e4b2aa;
  color: var(--service-dock-red-deep);
}
.service-widget .support-quick-prompts button:disabled { opacity: .5; cursor: not-allowed; }
.service-widget .support-quick-composer {
  margin-top: auto;
  border: 1px solid #b9c3bb;
  border-radius: 16px;
  padding: 12px;
  background: var(--service-dock-surface);
  box-shadow: 0 12px 28px rgba(22, 35, 27, .08);
}
.service-widget .support-quick-composer:focus-within {
  border-color: var(--service-dock-green);
  box-shadow: 0 0 0 3px rgba(11, 91, 60, .10), 0 12px 28px rgba(22, 35, 27, .08);
}
.service-widget .support-quick-composer textarea {
  width: 100%;
  min-height: 132px;
  max-height: 220px;
  display: block;
  resize: vertical;
  border: 0;
  padding: 2px 2px 10px;
  background: transparent;
  color: var(--service-dock-ink);
  font-size: 14px;
  line-height: 1.65;
  outline: 0;
}
.service-widget .support-quick-composer textarea::placeholder { color: var(--service-dock-faint); }
.service-widget .support-quick-composer textarea:disabled { cursor: not-allowed; }
.service-widget .support-quick-composer-footer {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--service-dock-soft-border);
  padding-top: 9px;
}
.service-widget .support-quick-composer-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--service-dock-muted);
  font-size: 10px;
}
.service-widget .support-quick-composer-footer > span i { color: var(--service-dock-green); font-size: 14px; }
.service-widget .support-quick-composer .support-send-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  flex-basis: 42px;
}
.service-widget .support-quick-composer .support-composer-state { margin: 7px 1px 0; }
.service-widget .support-quick-privacy {
  display: flex;
  align-items: start;
  gap: 6px;
  margin: -5px 2px 0;
  color: var(--service-dock-faint);
  font-size: 9px;
  line-height: 1.55;
}

/* Conversation list and single-column thread */
.service-widget .support-app {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.service-widget .support-guest-notice {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--service-dock-soft-border);
  background: var(--service-dock-green-soft);
  color: var(--service-dock-muted);
  font-size: 11px;
  line-height: 1.6;
}
.service-widget .support-guest-notice[hidden] { display: none; }
.service-widget .support-guest-notice p { flex: 1; min-width: 0; margin: 0; }
.service-widget .support-guest-notice a,
.service-widget .support-guest-notice button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  color: var(--service-dock-green);
  font-weight: 800;
}
.service-widget .support-guest-notice button { border: 0; background: transparent; padding: 0; cursor: pointer; }
.service-widget .support-guest-notice [hidden] { display: none; }
.service-widget .support-workspace-intro {
  min-height: 70px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--service-dock-soft-border);
  padding: 11px 14px;
  background: var(--service-dock-surface);
}
.service-widget .support-workspace-intro h2 { margin: 2px 0; font-size: 18px; }
.service-widget .support-workspace-intro > div > p:last-child {
  max-width: 300px;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-widget .support-workspace-intro > .support-icon-action { background: var(--service-dock-green); color: #fff; font-size: 20px; }
.service-widget .support-workspace-intro > .support-icon-action:hover { background: var(--service-dock-green-deep); }
.service-widget .support-network-status {
  flex: 0 0 auto;
  margin: 8px 12px 0;
  border: 1px solid var(--service-dock-border);
  border-radius: 9px;
  padding: 8px 10px;
  background: var(--service-dock-surface);
  color: var(--service-dock-muted);
  font-size: 11px;
}
.service-widget .support-network-status[data-state="offline"] { border-color: #d99184; background: var(--service-dock-danger-soft); color: var(--service-dock-danger); }
.service-widget .support-network-status[data-state="online"] { border-color: #8db49d; background: var(--service-dock-green-soft); color: var(--service-dock-green); }

.service-widget .support-workspace {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: var(--service-dock-paper);
}
.service-widget .support-conversation-rail,
.service-widget .support-thread-shell { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.service-widget .support-conversation-rail { display: flex; flex-direction: column; background: var(--service-dock-surface); }
.service-widget .support-thread-shell { display: none; background: var(--service-dock-surface); }
.service-widget .support-workspace.has-active-conversation:not(.is-list-view) .support-conversation-rail { display: none; }
.service-widget .support-workspace.has-active-conversation:not(.is-list-view) .support-thread-shell,
.service-widget .support-workspace.is-empty .support-thread-shell { display: flex; }
.service-widget .support-workspace.is-list-view .support-conversation-rail { display: flex; }
.service-widget .support-workspace.is-list-view .support-thread-shell,
.service-widget .support-workspace.is-list-view .support-activity-rail,
.service-widget .support-workspace.is-empty .support-conversation-rail,
.service-widget .support-workspace.is-empty .support-activity-rail { display: none; }

.service-widget .support-rail-heading {
  min-height: 53px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--service-dock-soft-border);
  padding: 9px 14px;
}
.service-widget .support-rail-heading h2 { margin: 1px 0 0; font-size: 16px; line-height: 1.25; }
.service-widget .support-rail-state { min-height: 32px; margin: 0; padding: 8px 14px; color: var(--service-dock-muted); font-size: 10px; }
.service-widget .support-rail-state[data-state="error"] { color: var(--service-dock-danger); font-weight: 750; }
.service-widget .support-rail-state[data-state="success"] { color: var(--service-dock-green); }
.service-widget .support-conversation-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-widget .support-conversation-list-item { margin: 0; padding: 0; }
.service-widget .support-conversation-card {
  position: relative;
  width: 100%;
  min-height: 82px;
  display: grid;
  gap: 4px;
  border: 0;
  border-bottom: 1px solid var(--service-dock-soft-border);
  padding: 12px 14px;
  background: transparent;
  color: var(--service-dock-ink);
  text-align: left;
}
.service-widget .support-conversation-card:hover { background: #faf7f0; }
.service-widget .support-conversation-card.is-active { background: var(--service-dock-green-soft); }
.service-widget .support-conversation-card.is-active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--service-dock-red);
  content: "";
}
.service-widget .support-conversation-card-top,
.service-widget .support-conversation-card-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.service-widget .support-conversation-card-title { overflow: hidden; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.service-widget .support-conversation-card-time,
.service-widget .support-conversation-card-meta { color: var(--service-dock-faint); font-size: 9px; }
.service-widget .support-conversation-card-copy {
  display: -webkit-box;
  overflow: hidden;
  color: var(--service-dock-muted);
  font-size: 11px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.service-widget .support-conversation-card-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-widget .support-unread-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--service-dock-red); }
.service-widget .support-empty-rail {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 20px;
  color: var(--service-dock-muted);
  font-size: 12px;
  text-align: center;
}
.service-widget .support-empty-rail i { color: var(--service-dock-green); font-size: 26px; }
.service-widget .support-empty-rail p { margin: 0; }

.service-widget .support-empty-state {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 28px;
  text-align: center;
}
.service-widget .support-empty-state .support-empty-icon { margin-bottom: 12px; }
.service-widget .support-empty-state .support-button { margin-top: 18px; }

.service-widget .support-thread {
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.service-widget .support-thread-header {
  min-height: 73px;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--service-dock-soft-border);
  padding: 9px 10px;
  background: var(--service-dock-surface);
}
.service-widget .support-thread-header .support-icon-button { font-size: 18px; }
.service-widget .support-thread-heading { overflow: hidden; }
.service-widget .support-thread-heading h2 { overflow: hidden; margin: 1px 0; font-size: 15px; font-weight: 900; line-height: 1.3; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.service-widget .support-thread-heading > p:last-child { overflow: hidden; margin: 0; color: var(--service-dock-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.service-widget .support-thread-actions { display: flex; align-items: center; gap: 3px; }
.service-widget .support-status-pill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--service-dock-border);
  border-radius: 999px;
  padding: 3px 8px;
  color: #4f5a52;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.service-widget .support-status-pill[data-status="resolved"],
.service-widget .support-status-pill[data-status="closed"] { border-color: #b9c1ba; background: #eff0ec; color: #566057; }
.service-widget .support-status-pill[data-status="in_progress"],
.service-widget .support-status-pill[data-status="human_pending"],
.service-widget .support-status-pill[data-status="human_assigned"],
.service-widget .support-status-pill[data-status="waiting_human"],
.service-widget .support-status-pill[data-status="assigned"] { border-color: #8fb9a0; background: var(--service-dock-green-soft); color: var(--service-dock-green); }
.service-widget .support-status-pill[data-status="risk"],
.service-widget .support-status-pill[data-status="urgent"] { border-color: #de978b; background: var(--service-dock-danger-soft); color: var(--service-dock-danger); }

.service-widget .support-handoff-panel,
.service-widget .support-thread-error {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 10px 0;
  border: 1px solid #c5d9cb;
  border-left: 3px solid var(--service-dock-green);
  border-radius: 8px;
  padding: 8px 10px;
  background: #f3f8f4;
  color: var(--service-dock-muted);
  font-size: 10px;
}
.service-widget .support-handoff-panel p { margin: 0; }
.service-widget .support-handoff-panel .support-text-button { flex: 0 0 auto; }
.service-widget .support-thread-error { border-color: #df9c91; border-left-color: var(--service-dock-red); background: var(--service-dock-danger-soft); color: var(--service-dock-danger); }

.service-widget .support-message-stream {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: var(--service-dock-surface);
  scroll-behavior: smooth;
}
.service-widget .support-message-stream[aria-busy="true"]::before {
  align-self: center;
  margin: auto;
  color: var(--service-dock-muted);
  content: "正在同步会话消息…";
  font-size: 11px;
}
.service-widget .support-message-empty {
  min-height: 170px;
  display: grid;
  place-content: center;
  justify-items: center;
  margin: auto;
  color: var(--service-dock-muted);
  font-size: 11px;
  text-align: center;
}
.service-widget .support-message-empty i { margin-bottom: 7px; color: var(--service-dock-green); font-size: 24px; }
.service-widget .support-message-empty p { max-width: 260px; margin: 0; }
.service-widget .support-message {
  max-width: 90%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.service-widget .support-message.is-user { align-self: end; grid-template-columns: minmax(0, 1fr) 30px; }
.service-widget .support-message.is-user .support-message-avatar { grid-column: 2; }
.service-widget .support-message.is-user .support-message-main { grid-column: 1; grid-row: 1; align-items: end; }
.service-widget .support-message-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--service-dock-border);
  border-radius: 50%;
  background: #eee9de;
  color: var(--service-dock-green);
  font-size: 15px;
}
.service-widget .support-message.is-ai .support-message-avatar { border-color: #d8bb6e; background: #fff6d7; color: #76530d; }
.service-widget .support-message.is-agent .support-message-avatar { border-color: #a9c9b4; background: var(--service-dock-green-soft); }
.service-widget .support-message.is-user .support-message-avatar { border-color: var(--service-dock-green); background: var(--service-dock-green); color: #fff; }
.service-widget .support-message-main { display: flex; flex-direction: column; align-items: start; gap: 3px; }
.service-widget .support-message-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--service-dock-faint); font-size: 9px; }
.service-widget .support-message.is-user .support-message-meta { justify-content: end; }
.service-widget .support-message-sender { color: #4d594f; font-weight: 850; }
.service-widget .support-message.is-ai .support-message-sender { color: #77530c; }
.service-widget .support-ai-badge,
.service-widget .support-ai-disclosure { border-radius: 999px; color: #76530d; font-size: 9px; }
.service-widget .support-ai-badge { border: 1px solid #ead8a5; padding: 1px 6px; background: #fff8df; font-weight: 850; }
.service-widget .support-ai-disclosure { margin: 2px 0 0; color: var(--service-dock-faint); }
.service-widget .support-message-bubble {
  max-width: 100%;
  border: 1px solid var(--service-dock-soft-border);
  border-radius: 3px 13px 13px 13px;
  padding: 9px 11px;
  background: #fbfaf5;
  color: var(--service-dock-ink);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.service-widget .support-message.is-ai .support-message-bubble { border-color: #e5d6a6; background: #fffaf0; }
.service-widget .support-message.is-agent .support-message-bubble { border-color: #c5dacb; background: #f5faf5; }
.service-widget .support-message.is-user .support-message-bubble { border-color: var(--service-dock-green); border-radius: 13px 3px 13px 13px; background: var(--service-dock-green); color: #fff; }
.service-widget .support-message-citations,
.service-widget .support-message-attachments { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.service-widget .support-citation,
.service-widget .support-message-attachment {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--service-dock-soft-border);
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--service-dock-surface);
  color: #5b675e;
  font-size: 9px;
  overflow-wrap: anywhere;
}

.service-widget .support-composer {
  position: relative;
  flex: 0 0 auto;
  border-top: 1px solid var(--service-dock-soft-border);
  padding: 10px 13px 8px;
  background: #fcfbf6;
}
.service-widget .support-composer textarea {
  width: 100%;
  min-height: 82px;
  max-height: 116px;
  display: block;
  resize: none;
  border: 1px solid var(--service-dock-border);
  border-radius: 12px;
  padding: 10px 54px 48px;
  background: var(--service-dock-surface);
  color: var(--service-dock-ink);
  font-size: 12px;
  line-height: 1.5;
}
.service-widget .support-composer textarea::placeholder { color: var(--service-dock-faint); }
.service-widget .support-composer textarea:disabled { background: #f0ede4; color: var(--service-dock-muted); cursor: not-allowed; }
.service-widget .support-composer-footer {
  position: absolute;
  top: 45px;
  right: 19px;
  left: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.service-widget .support-composer-footer button { pointer-events: auto; }
.service-widget .support-attachment-button,
.service-widget .support-send-button {
  background: #f1eee5;
  color: var(--service-dock-green);
  font-size: 17px;
}
.service-widget .support-send-button { background: var(--service-dock-green); color: #fff; }
.service-widget .support-send-button:hover:not(:disabled) { background: var(--service-dock-green-deep); }
.service-widget .support-attachment-button:hover:not(:disabled) { background: var(--service-dock-green-soft); }
.service-widget .support-attachment-button:disabled,
.service-widget .support-send-button:disabled { opacity: .44; cursor: not-allowed; }
.service-widget .support-composer-state { min-height: 16px; margin: 4px 1px 0; color: var(--service-dock-faint); font-size: 9px; line-height: 1.4; }
.service-widget .support-composer-state[data-state="error"] { color: var(--service-dock-danger); font-weight: 750; }
.service-widget .support-composer-state[data-state="success"] { color: var(--service-dock-green); font-weight: 750; }
.service-widget .support-attachment-list { display: grid; gap: 5px; margin-top: 7px; }
.service-widget .support-pending-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border: 1px solid var(--service-dock-border);
  border-radius: 8px;
  padding: 6px 7px 6px 9px;
  background: var(--service-dock-surface);
  color: var(--service-dock-muted);
  font-size: 9px;
}
.service-widget .support-pending-attachment-info { min-width: 0; display: flex; align-items: center; gap: 6px; }
.service-widget .support-pending-attachment-info > i { flex: 0 0 auto; color: var(--service-dock-green); font-size: 14px; }
.service-widget .support-pending-attachment-copy { min-width: 0; display: grid; }
.service-widget .support-pending-attachment-copy strong,
.service-widget .support-pending-attachment-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-widget .support-pending-attachment-copy strong { color: var(--service-dock-ink); }
.service-widget .support-attachment-remove {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--service-dock-muted);
}
.service-widget .support-attachment-remove:hover { background: var(--service-dock-danger-soft); color: var(--service-dock-danger); }
.service-widget .support-pending-attachment.is-uploading { border-left: 3px solid var(--service-dock-yellow); }
.service-widget .support-pending-attachment.is-ready { border-left: 3px solid var(--service-dock-green); }
.service-widget .support-pending-attachment.is-error { border-left: 3px solid var(--service-dock-red); background: var(--service-dock-danger-soft); }

.service-widget .support-activity-rail {
  display: none;
  flex: 0 0 auto;
  border: 0;
  border-top: 1px solid var(--service-dock-soft-border);
  background: #faf7f0;
}
.service-widget .support-workspace.has-active-conversation:not(.is-list-view) .support-activity-rail { display: block; }
.service-widget .support-activity-heading {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 13px;
  cursor: pointer;
  list-style: none;
}
.service-widget .support-activity-heading::-webkit-details-marker { display: none; }
.service-widget .support-activity-heading > span { display: grid; }
.service-widget .support-activity-heading strong { font-size: 11px; }
.service-widget .support-activity-heading > i { color: var(--service-dock-green); transition: transform .16s ease; }
.service-widget .support-activity-rail[open] .support-activity-heading > i { transform: rotate(180deg); }
.service-widget .support-activity-body {
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid var(--service-dock-soft-border);
  padding: 12px 14px 14px;
}
.service-widget .support-activity-state { margin: 0 0 8px; color: var(--service-dock-muted); font-size: 10px; }
.service-widget .support-event-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.service-widget .support-event-item {
  position: relative;
  display: grid;
  gap: 2px;
  border-left: 1px solid var(--service-dock-border);
  padding: 0 0 13px 13px;
  color: var(--service-dock-muted);
  font-size: 10px;
}
.service-widget .support-event-item::before {
  position: absolute;
  top: 4px;
  left: -5px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--service-dock-surface);
  border-radius: 50%;
  background: var(--service-dock-green);
  content: "";
}
.service-widget .support-event-item.is-risk::before { background: var(--service-dock-red); }
.service-widget .support-event-title { color: var(--service-dock-ink); font-size: 11px; }
.service-widget .support-event-copy { margin: 0; }
.service-widget .support-event-time { color: var(--service-dock-faint); font-size: 9px; }
.service-widget .support-activity-empty { display: grid; gap: 5px; padding: 6px 0 12px; color: var(--service-dock-muted); font-size: 10px; }
.service-widget .support-activity-empty i { color: var(--service-dock-green); font-size: 18px; }
.service-widget .support-safety-note {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 7px;
  margin-top: 8px;
  border-top: 1px solid var(--service-dock-soft-border);
  padding-top: 10px;
  color: var(--service-dock-muted);
  font-size: 9px;
}
.service-widget .support-safety-note i { color: var(--service-dock-red); font-size: 14px; }
.service-widget .support-safety-note p { margin: 0; }

/* Inline consultation and handoff forms */
.service-widget .support-dialog {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--service-dock-paper);
  color: var(--service-dock-ink);
}
.service-widget .support-dialog::backdrop { display: none; }
.service-widget .support-dialog form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
}
.service-widget .support-dialog-header { display: flex; flex: 0 0 auto; align-items: start; justify-content: space-between; gap: 12px; }
.service-widget .support-dialog-header h2 { margin-bottom: 0; font-size: 21px; }
.service-widget .support-dialog-close { margin: -6px -6px 0 0; }
.service-widget .support-dialog-lead { flex: 0 0 auto; }
.service-widget .support-field { display: grid; gap: 6px; color: var(--service-dock-ink); font-size: 11px; font-weight: 850; }
.service-widget .support-field :is(input, select, textarea) {
  width: 100%;
  border: 1px solid var(--service-dock-border);
  border-radius: 10px;
  padding: 10px 11px;
  background: var(--service-dock-surface);
  color: var(--service-dock-ink);
  font-size: 13px;
  font-weight: 500;
}
.service-widget .support-field :is(input, select) { min-height: 44px; }
.service-widget .support-field textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.service-widget .support-dialog-state { min-height: 18px; margin: -2px 0 0; color: var(--service-dock-muted); font-size: 10px; }
.service-widget .support-dialog-state[data-state="error"] { color: var(--service-dock-danger); font-weight: 750; }
.service-widget .support-dialog-state[data-state="success"] { color: var(--service-dock-green); font-weight: 750; }
.service-widget .support-dialog-actions {
  position: sticky;
  bottom: -18px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid var(--service-dock-soft-border);
  padding: 12px 0 18px;
  background: var(--service-dock-paper);
}

.service-widget .support-notice {
  position: absolute;
  z-index: 12;
  right: 14px;
  bottom: 14px;
  left: 14px;
  transform: translateY(10px);
  border: 1px solid var(--service-dock-green);
  border-left: 4px solid var(--service-dock-green);
  border-radius: 10px;
  padding: 10px 11px;
  background: var(--service-dock-surface);
  color: var(--service-dock-ink);
  box-shadow: 0 12px 30px rgba(22, 35, 27, .14);
  font-size: 11px;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.service-widget .support-notice.is-visible { transform: translateY(0); opacity: 1; }
.service-widget .support-notice[data-state="error"] { border-color: #da9184; border-left-color: var(--service-dock-red); color: var(--service-dock-danger); }

.service-widget :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--service-dock-red);
  outline-offset: 2px;
}
.service-widget .support-recruitment-composer textarea:focus-visible {
  outline: 0;
  outline-offset: 0;
}

@media (max-width: 1100px) {
  .service-dock { right: max(10px, env(safe-area-inset-right)); }
}

@media (max-width: 1024px) and (min-width: 761px) {
  .service-widget {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(392px, calc(100vw - 24px));
    height: min(640px, calc(100dvh - 24px));
    min-height: min(520px, calc(100dvh - 24px));
  }
}

@media (max-height: 680px) and (min-width: 761px) {
  .service-dock { top: 50vh; top: 50dvh; }
  .service-widget {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    height: calc(100dvh - 16px);
    min-height: 0;
  }
  .service-widget-header { min-height: 58px; flex-basis: 58px; }
  .service-widget .support-widget-help { padding-block: 16px; }
}

@media (max-width: 760px) {
  .service-dock {
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
    transform: none;
  }
  body.service-widget-open .service-dock { transform: translateY(12px); }
  .service-dock-panel { border-radius: 24px; padding: 6px 4px; }
  .service-dock-brand { display: none; }
  .service-dock-item::after,
  .service-dock-brand::after { display: none; }
  .service-dock.is-collapsed .service-dock-toggle {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    background: var(--service-dock-green);
    color: #fff;
    box-shadow: 0 12px 28px rgba(11, 91, 60, .26);
  }
  .service-dock:not(.is-collapsed) .service-dock-toggle i { transform: rotate(90deg); }
  body:has(#routeDock:not([hidden])) .service-dock { display: none; }

  body.service-widget-open { overflow: hidden; }
  .service-widget-backdrop {
    background: rgba(18, 31, 24, .36);
    pointer-events: auto;
  }
  .service-widget {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    height: 78vh;
    height: min(78dvh, 640px);
    min-height: min(500px, calc(100dvh - 16px));
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(18, 31, 24, .28);
  }
  .service-widget[data-support-widget-context="recruitment"] {
    width: auto;
    height: min(78dvh, 620px);
    min-height: min(500px, calc(100dvh - 16px));
  }
  .service-widget[data-support-widget-context="recruitment"]:not([data-recruitment-conversation="started"]) {
    height: min(74dvh, 560px);
  }
  .service-widget-header { min-height: 60px; flex-basis: 60px; }
  .service-widget .service-widget-drag-handle,
  .service-widget [data-support-widget-minimize] { display: none; }
  .service-widget-identity img { width: 36px; height: 36px; flex-basis: 36px; }
  .service-widget-window-actions button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; flex-basis: 42px; }
  .service-widget .support-widget-help { padding: 16px; }
  .service-widget .support-topic-card > div { padding-left: 0; }
  .service-widget .support-login-shell { padding: 18px; }
  .service-widget .support-login-card { padding: 20px; }
  .service-widget .support-message-stream { padding: 12px; }
  .service-widget .support-dialog form { padding: 16px; }
  .service-widget .support-dialog-actions { bottom: -16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .service-widget {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 82vh;
    height: 82dvh;
    min-height: 0;
    max-height: calc(100dvh - 8px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
  }
  .service-widget[data-support-widget-context="recruitment"] {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 82dvh;
    min-height: 0;
    max-height: calc(100dvh - 8px);
  }
  .service-widget[data-support-widget-context="recruitment"]:not([data-recruitment-conversation="started"]) { height: min(74dvh, 560px); }
  .service-widget .support-recruitment-shell { gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .service-widget .support-recruitment-context { gap: 5px; padding: 10px 11px; }
  .service-widget .support-recruitment-messages { min-height: 104px; padding: 11px; }
  .service-widget[data-recruitment-conversation="started"] .support-recruitment-messages { min-height: 120px; }
  .service-widget .support-recruitment-message { max-width: 92%; }
  .service-widget .support-recruitment-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .service-widget-header { padding-left: 9px; }
  .service-widget-identity { gap: 7px; padding-right: 3px; }
  .service-widget-identity strong { font-size: 14px; }
  .service-widget-identity small { font-size: 10px; }
  .service-widget .support-widget-welcome h2,
  .service-widget .support-login-card h2,
  .service-widget .support-empty-state h2 { font-size: 21px; }
  .service-widget .support-quick-start { gap: 13px; padding: 17px 14px 14px; }
  .service-widget .support-quick-start-welcome { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
  .service-widget .support-quick-start-avatar { width: 42px; height: 42px; border-radius: 13px; font-size: 21px; }
  .service-widget .support-quick-start-welcome h2 { font-size: 21px; }
  .service-widget .support-quick-composer textarea { min-height: 112px; }
  .service-widget .support-quick-composer-footer > span { max-width: 210px; }
  .service-widget .support-widget-help-actions { grid-template-columns: 1fr; }
  .service-widget .support-thread-header { grid-template-columns: 44px minmax(0, 1fr) auto; padding-inline: 7px; }
  .service-widget .support-status-pill { max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
  .service-widget .support-dialog-actions { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .service-widget-identity small { display: none; }
  .service-widget .support-widget-help { padding-inline: 12px; }
  .service-widget .support-topic-card summary { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 8px; padding-inline: 9px; }
  .service-widget .support-topic-icon { width: 34px; height: 34px; }
  .service-widget .support-workspace-intro { padding-inline: 10px; }
}

@media (max-height: 620px) and (min-width: 761px) {
  .service-dock-brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .service-dock,
  .service-dock-item::after,
  .service-dock-brand::after,
  .service-dock-toggle,
  .service-dock-toggle i,
  .service-widget,
  .service-widget .support-topic-card summary > i,
  .service-widget .support-activity-heading > i,
  .service-widget .support-notice { animation: none; transition: none; scroll-behavior: auto; }
  .service-widget .support-loading-mark i { animation-duration: 1.8s; }
}

@media print {
  .service-dock,
  .service-widget,
  .service-widget-backdrop { display: none !important; }
}