.character-settings { --cs-ink:#292825; --cs-line:#dfddd5; color:var(--cs-ink); background:#f9f9f9; border:1px solid var(--cs-line); border-radius:24px; padding:24px; width:min(880px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; box-sizing:border-box; box-shadow:0 24px 90px #24232133; font:14px/1.5 Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
body:has(.character-settings[open]) { overflow:hidden; }
.character-settings::backdrop { background:#17171466; backdrop-filter:blur(5px); }
.character-settings * { box-sizing:border-box; }
.character-settings-header,.character-settings-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.character-settings h2 { font-size:22px; margin:4px 0 16px; color:var(--cs-ink); }
.character-eyebrow { font-size:10px; letter-spacing:.16em; color:#736e64; }
.character-settings-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:32px; }
.character-preview { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-width:0; }
.character-preview svg { width:min(100%,340px); height:auto; aspect-ratio:1; overflow:visible; }
#characterPanelCaption { min-height:40px; margin:0; }
.character-settings button,.character-settings select { min-height:44px; border:1px solid var(--cs-line); background:#fff; color:var(--cs-ink); border-radius:10px; padding:8px 12px; font:inherit; cursor:pointer; }
.character-settings button:hover { background:#eeede6; }
.character-settings :focus-visible,.workspace-character :focus-visible { outline:3px solid #66794d; outline-offset:3px; }
.character-settings fieldset { min-width:0; border:0; border-bottom:1px solid var(--cs-line); padding:0 0 18px; margin:0 0 18px; }
.character-settings legend { font-weight:650; margin-bottom:12px; }
.character-settings label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; }
.character-settings label select,.character-settings input[type=range] { width:100%; min-width:0; }
.character-settings input[type=range] { accent-color:#454e38; min-height:30px; }
.character-settings input[type=checkbox] { accent-color:#454e38; width:18px; height:18px; }
.character-settings .character-check { min-height:36px; }
.character-settings input[type=color] { width:52px; height:44px; padding:3px; border:1px solid var(--cs-line); background:transparent; border-radius:8px; cursor:pointer; }
.character-colors,.character-state-mapping { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.character-presets { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }
.character-presets button { width:32px; min-height:44px; padding:0; border:0; background:transparent; }
.character-presets button::before { content:""; display:block; background:var(--swatch); width:22px; height:22px; border-radius:50%; margin:auto; border:2px solid #faf9f6; }
.character-presets button[aria-pressed=true]::before { outline:2px solid #4d5141; }
.character-tricks { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.character-settings p,.character-settings-footer { color:#706b62; font-size:12px; }
.character-settings-footer { border-top:1px solid var(--cs-line); padding-top:16px; }
.character-settings output { margin-left:auto; color:#706b62; font-size:12px; }
.workspace-character { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; width:240px; height:52px; margin-inline:auto; padding:0; background:transparent; border:0; color:#514c44; }
.workspace-character[hidden] { display:none!important; }
.workspace-character[data-handoff-target=pending] { opacity:0!important; pointer-events:none; }
.character-handoff-layer { position:fixed; inset:0; width:100%; height:100%; z-index:11000; pointer-events:none; overflow:visible; shape-rendering:geometricPrecision; }
.character-handoff-layer svg { overflow:visible; }
.character-handoff-scene { z-index:10050; pointer-events:none; will-change:opacity; }
.character-avatar { position:relative; display:grid; place-items:center; border:0; background:transparent; padding:0; width:48px; height:48px; border-radius:50%; cursor:pointer; flex-shrink:0; }
.character-avatar svg { width:46px; height:46px; overflow:visible; pointer-events:none; }
.workspace-character[data-phase=error] .character-avatar::after { content:""; position:absolute; right:0; top:4px; width:6px; height:6px; background:#b54337; border:2px solid #fff; border-radius:50%; }
.character-feedback { min-width:0; width:180px; color:#514c44; font:12px/1.4 "PingFang SC","Microsoft YaHei",sans-serif; opacity:0; transition:opacity .18s ease; }
.workspace-character[data-speaking=true] .character-feedback { opacity:1; }
#workspaceCharacterStatus { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.character-feedback progress { display:block; width:100%; max-width:150px; height:5px; margin-top:6px; accent-color:#6d805a; }
.character-feedback progress[hidden] { display:none; }
.character-toolbar-fallback { display:flex; justify-content:center; background:#f9f9f9; height:56px; }
.character-toolbar:not(.single-page-topbar) { flex-wrap:wrap; }
@media(min-width:760px) {
  /* Keep the original SVG size and full motion inside a centered display area. */
  body.character-enabled { --character-toolbar-height:78px; }
  .character-toolbar .character-avatar { top:auto; }
  body.character-enabled .character-toolbar .workspace-character { transform:translateY(2px); }
  .character-toolbar:is(.ticket-topbar,.management-topbar,.character-toolbar-fallback) { min-height:var(--character-toolbar-height); height:var(--character-toolbar-height); align-items:center; }
  body.character-enabled .ticket-shell { grid-template-rows:var(--character-toolbar-height) minmax(0,1fr); }
  body.character-enabled.single-page-root { --single-page-topbar-height:var(--character-toolbar-height); }
  body.single-page-root.character-enabled[data-current-module="workbench"] .single-page-topbar { display:grid !important; }
  body.single-page-root.character-enabled[data-current-module="workbench"] .ticket-shell { grid-template-rows:var(--character-toolbar-height) minmax(0,1fr); }
  body.character-enabled .single-page-topbar { display:grid; grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr); align-items:center; height:var(--character-toolbar-height); min-height:var(--character-toolbar-height); padding:0 20px; position:sticky; top:0; z-index:40; background:#f9f9f9; border-bottom:1px solid #e3e5ea; }
  body.character-enabled .single-page-shell { grid-template-rows:auto minmax(0,1fr); }
  .single-page-topbar .workspace-character { grid-column:2; grid-row:1; }
  .single-page-topbar .ticket-profile { grid-column:3; grid-row:1; justify-self:end; }
  .single-page-topbar .ticket-freshness { grid-column:1; grid-row:1; min-width:0; }
  .single-page-topbar .ticket-mobile-brand { display:none; }
}
@media(max-width:759px) {
  .character-settings { width:100%; height:82dvh; max-height:calc(100dvh - 12px); margin:auto 0 0; padding:18px 18px max(24px,env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; }
  .character-settings-header { position:sticky; top:-18px; z-index:2; background:#f9f9f9; padding-top:8px; }
  .character-settings-layout { grid-template-columns:1fr; gap:24px; }
  .character-preview svg { width:min(280px,70vw); }
  .character-preview select { width:100%; }
  .character-navigation.mobile-module-nav, .character-navigation.mobile-bottom-nav { position:fixed; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) 52px repeat(6,minmax(0,1fr)); grid-template-rows:34px 52px; grid-auto-flow:row; gap:0; left:0; right:0; bottom:0; margin:0; padding:4px 0 calc(4px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; }
  .character-navigation > a { grid-row:2; min-width:44px; min-height:44px; align-self:center; font-size:10px; }
  .character-navigation > [data-module-target=workbench] { grid-column:1 / span 3; }
  .character-navigation > [data-module-target=tickets] { grid-column:4 / span 3; }
  .character-navigation > [data-module-target=performance] { grid-column:8 / span 3; }
  .character-navigation > [data-module-target=profile] { grid-column:11 / span 3; }
  .character-navigation:has([data-module-target=management]:not([hidden])) > [data-module-target=workbench] { grid-column:1 / span 2; }
  .character-navigation:has([data-module-target=management]:not([hidden])) > [data-module-target=tickets] { grid-column:3 / span 2; }
  .character-navigation:has([data-module-target=management]:not([hidden])) > [data-module-target=performance] { grid-column:5 / span 2; }
  .character-navigation > [data-module-target=management] { grid-column:8 / span 3; }
  .character-navigation .workspace-character { position:static; grid-column:7; grid-row:2; width:52px; height:56px; }
  .character-navigation .character-avatar { top:-14px; width:52px; height:54px; }
  .character-navigation .character-avatar svg { width:48px; height:48px; }
  .character-navigation .character-feedback { position:absolute; top:5px; left:50%; transform:translateX(-50%); text-align:center; width:min(240px,calc(100% - 20px)); height:24px; pointer-events:none; }
  .character-navigation .character-feedback progress { position:absolute; left:50%; transform:translateX(-50%); bottom:0; height:3px; max-width:80px; margin:0; }
  body.character-enabled.single-page-root { --mobile-nav-height:calc(94px + env(safe-area-inset-bottom)); padding-bottom:var(--mobile-nav-height); }
  body.character-enabled.module-remote-active > .character-navigation { position:fixed; margin:0; }
  body.auth-pending .character-navigation { visibility:hidden; }
}
@media(prefers-reduced-motion:reduce) { .character-feedback { transition:none; } }
@media print { .workspace-character,.character-settings { display:none!important; } }