:root {
  color-scheme:light;
  --ink:#203a34;
  --muted:#73817b;
  --green:#2d6d57;
  --green-dark:#224f40;
  --green-soft:#e9f1eb;
  --paper:#f4f5f0;
  --line:#e1e6de;
  --white:#fff;
  --danger:#ad473d;
  --amber:#927331;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button,a,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
a {
  color:inherit;
  text-decoration:none
}
button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #87ae9a;
  outline-offset:3px
}
button[hidden],[hidden] {
  display:none!important
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icons {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.topbar {
  height:80px;
  display:flex;
  align-items:center;
  padding:0 36px;
  background:#fbfcf9;
  border-bottom:1px solid var(--line);
  gap:64px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  letter-spacing:-.5px;
  white-space:nowrap
}
.brand strong {
  font-weight:450;
  color:#78847e
}
.brand-mark {
  background:var(--ink);
  color:#fff;
  width:35px;
  height:35px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:29px;
  font-weight:650;
  padding-bottom:4px;
  letter-spacing:-4px
}
.brand-mark span {
  color:#b1d8a8;
  font-size:28px;
  margin-right:3px
}
.product-tabs {
  display:flex;
  align-self:stretch;
  align-items:center;
  gap:34px;
  color:#7a8680;
  font-size:13px
}
.product-tabs>a:hover {
  color:var(--green)
}
.active-tab {
  color:var(--green-dark);
  font-weight:600;
  height:100%;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:2px solid var(--green)
}
.beta {
  font-size:9px;
  letter-spacing:.5px;
  padding:3px 5px;
  border-radius:4px;
  background:var(--green-soft);
  color:#5e806c
}
.deployment-label {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:#7b8c80
}
.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#84a58c;
  flex-shrink:0
}
.workspace {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  min-height:calc(100vh - 80px)
}
.sidebar {
  background:#fafbf8;
  border-right:1px solid var(--line);
  padding:31px 24px 22px;
  display:flex;
  flex-direction:column;
  gap:27px
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  font-weight:650;
  color:#7a9484
}
.section-heading h1 {
  font-size:21px;
  font-weight:600;
  letter-spacing:-.4px;
  margin:10px 0
}
.section-heading p {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin:0
}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:17px
}
.section-title h2 {
  font-size:13px;
  font-weight:600;
  margin:0
}
.step-number {
  font-size:10px;
  color:#9ca99e;
  letter-spacing:1px
}
.field-label {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin:0 0 8px
}
select {
  background:var(--white);
  border:1px solid #dce3d9;
  border-radius:7px;
  width:100%;
  height:39px;
  padding:0 10px;
  font-size:12px;
  color:var(--ink)
}
select:disabled {
  color:var(--muted)
}
.avatar-detail {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:15px
}
.avatar-thumb {
  width:41px;
  height:47px;
  border:1px solid #dfe7dd;
  background:#eef2e9;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
  color:#879b89
}
.avatar-thumb img {
  height:100%;
  width:100%;
  object-fit:cover
}
.avatar-detail strong {
  display:block;
  font-size:12px;
  font-weight:600;
  line-height:1.6
}
.avatar-detail span {
  display:block;
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  margin-top:2px
}
.field-note {
  font-size:11px;
  line-height:1.75;
  color:#8a958d;
  margin:12px 0 0
}
.button {
  height:41px;
  border-radius:7px;
  border:1px solid transparent;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:550;
  transition:background .15s
}
.button svg {
  width:16px;
  height:16px
}
.button.primary {
  background:var(--green);
  color:#fff;
  box-shadow:0 3px 8px #1e4f3712
}
.button.primary:hover:enabled {
  background:var(--green-dark)
}
.button.secondary {
  color:var(--ink);
  background:#f0f3ed;
  border-color:var(--line)
}
.wide {
  width:100%
}
.session-reference {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:14px;
  margin-top:15px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:#8b958d;
  gap:8px
}
.session-reference code {
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:126px
}
.services-section .section-title {
  margin-bottom:5px
}
.service-list {
  list-style:none;
  padding:0;
  margin:0
}
.service-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid #e9ede4;
  font-size:11px;
  gap:6px
}
.service-list small {
  font-size:9px;
  color:#9ba59b;
  margin-left:4px
}
.service-result {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  font-size:10px;
  color:#9aa298
}
.service-result:before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}
.service-result[data-state="ok"] {
  color:#4c8a63
}
.service-result[data-state="error"] {
  color:#b96b4c
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:#718378;
  width:30px;
  height:30px;
  border-radius:6px;
  padding:5px
}
.icon-button:hover {
  background:#e8eee5
}
.icon-button svg {
  width:17px;
  height:17px
}
.sidebar-footer {
  margin-top:auto;
  padding-top:20px;
  display:flex;
  gap:9px;
  color:#8c9b8f;
  align-items:flex-start
}
.sidebar-footer svg {
  width:15px;
  height:15px;
  margin-top:2px
}
.sidebar-footer p {
  font-size:10px;
  line-height:1.8;
  margin:0
}
.conversation-workspace {
  padding:32px 34px 18px;
  min-width:0;
  max-width:1800px;
  width:100%;
  margin:0 auto
}
.workspace-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
  gap:12px
}
.workspace-heading h2 {
  font-size:24px;
  letter-spacing:-.6px;
  font-weight:550;
  margin:8px 0 0
}
.connection-badge {
  font-size:11px;
  color:#849086;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid #dfe5da;
  background:#f9faf6;
  border-radius:20px;
  white-space:nowrap
}
.connection-badge .dot {
  background:#a2afa3
}
.connection-badge[data-state="connected"] {
  color:var(--green);
  background:#e8f1e7;
  border-color:#d3e5d3
}
.connection-badge[data-state="connected"] .dot {
  background:#5d9970
}
.connection-badge[data-state="connecting"] {
  color:var(--amber)
}
.connection-badge[data-state="connecting"] .dot {
  background:var(--amber)
}
.connection-badge[data-state="error"] {
  color:var(--danger)
}
.connection-badge[data-state="error"] .dot {
  background:var(--danger)
}
.alert-box {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px 12px 15px;
  border:1px solid #eadab9;
  background:#fff9ed;
  color:#8c6c31;
  border-radius:9px;
  margin-bottom:18px
}
.alert-box>svg {
  width:17px;
  height:17px;
  margin-top:3px
}
.alert-box p {
  margin:0;
  flex:1;
  font-size:12px;
  line-height:1.8;
  overflow-wrap:anywhere
}
.alert-box .icon-button {
  width:24px;
  height:24px;
  color:inherit
}
.conversation-grid {
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(320px,1fr);
  gap:24px;
  align-items:stretch
}
.media-panel {
  min-width:0
}
.video-stage {
  height:clamp(350px,50vh,610px);
  position:relative;
  overflow:hidden;
  border-radius:13px;
  background:radial-gradient(ellipse at 45% 28%,#364e42 0,#253e33 44%,#1d3329 100%);
  isolation:isolate
}
.video-stage:before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,#ffffff03 1px,transparent 1px),linear-gradient(#ffffff03 1px,transparent 1px);
  background-size:36px 36px;
  z-index:-1
}
.video-stage:after {
  content:"";
  position:absolute;
  inset:55% 0 0;
  background:linear-gradient(transparent,#0a1a1380);
  z-index:1;
  pointer-events:none
}
#remoteVideo {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:0
}
.stage-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#e3ebdc;
  text-align:center;
  padding:65px 25px;
  z-index:1
}
.stage-symbol {
  height:64px;
  width:64px;
  border:1px solid #c6dac423;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:19px;
  color:#bacdb4;
  background:#bbd6b209;
  margin-bottom:24px;
  box-shadow:0 0 0 13px #c6dac403
}
.stage-symbol svg {
  height:27px;
  width:27px;
  stroke-width:1.2
}
.stage-eyebrow {
  color:#94ac94;
  font-size:8px;
  letter-spacing:2px
}
.stage-placeholder h3 {
  font-size:20px;
  font-weight:450;
  letter-spacing:.2px;
  margin:12px 0 10px
}
.stage-placeholder p {
  font-size:12px;
  line-height:1.9;
  color:#92a692;
  margin:0;
  max-width:300px
}
.stage-topline {
  position:absolute;
  top:19px;
  left:20px;
  right:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#acbda6;
  z-index:2
}
.stage-tag {
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:4px;
  background:#10291a40;
  padding:6px 8px;
  font-size:9px;
  backdrop-filter:blur(8px)
}
.stage-tag .dot {
  width:4px;
  height:4px;
  background:#8fa78a
}
.stage-watermark {
  font-size:9px;
  letter-spacing:2px;
  opacity:.65
}
.stage-bottomline {
  position:absolute;
  bottom:20px;
  left:22px;
  right:18px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  z-index:2
}
.stage-name {
  display:block;
  font-size:14px;
  color:#e2eadd;
  letter-spacing:.3px
}
.stage-subtitle {
  display:block;
  font-size:10px;
  color:#a0b09c;
  margin-top:6px
}
.icon-button.light {
  color:#c2cebb
}
.icon-button.light:hover {
  background:#ffffff15
}
.audio-enable {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#f2f5ed;
  color:var(--ink);
  z-index:5;
  box-shadow:0 4px 20px #0004;
  max-width:90%;
  white-space:nowrap;
  padding:0 18px
}
.media-statusbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 1px;
  gap:8px
}
.status-description {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#738477;
  min-width:0
}
.status-description>span:last-child {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.status-description .dot {
  width:5px;
  height:5px
}
.status-description .dot.busy {
  background:#bba15d;
  animation:pulse 1.2s ease-in-out infinite
}
.interrupt-button {
  background:transparent;
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid #d8e0d3;
  color:#75846f;
  border-radius:5px;
  font-size:10px;
  padding:5px 8px;
  white-space:nowrap
}
.interrupt-button svg {
  width:11px;
  height:11px
}
.interrupt-button:hover:enabled {
  background:#e8eee3
}
.metrics {
  background:#fafbf7;
  border:1px solid var(--line);
  border-radius:9px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:15px 0
}
.metrics>div {
  padding:0 20px;
  border-right:1px solid var(--line)
}
.metrics>div:last-child {
  border:0
}
.metrics span {
  display:block;
  font-size:10px;
  color:#8b9788;
  margin-bottom:8px
}
.metrics strong {
  display:block;
  font-weight:500;
  font-size:20px;
  letter-spacing:-.5px;
  line-height:1.1;
  font-variant-numeric:tabular-nums
}
.metrics small {
  color:#99a18f;
  font-size:9px;
  letter-spacing:0;
  font-weight:400
}
.metrics-note {
  font-size:9px;
  line-height:1.7;
  color:#9aa391;
  margin:9px 0 0
}
.chat-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  height:calc(clamp(350px,50vh,610px) + 153px);
  min-width:0
}
.chat-header {
  padding:20px 21px 17px;
  border-bottom:1px solid #eef1e9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.chat-header>div {
  display:flex;
  align-items:center;
  gap:8px
}
.chat-header svg {
  width:16px;
  height:16px;
  color:#6d8c75
}
.chat-header h3 {
  font-size:13px;
  font-weight:550;
  margin:0
}
.chat-header>span {
  font-size:9px;
  color:#a0a99a
}
.messages {
  flex:1;
  min-height:160px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:23px 20px;
  scrollbar-width:thin;
  scrollbar-color:#d7e0d1 transparent
}
.chat-empty {
  height:100%;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  color:#9aa78f;
  padding-bottom:20px
}
.chat-empty-mark {
  font-size:65px;
  font-family:Georgia,serif;
  line-height:1;
  color:#c8d6bc;
  height:54px
}
.chat-empty h4 {
  font-size:13px;
  font-weight:500;
  color:#829375;
  margin:12px 0
}
.chat-empty p {
  font-size:11px;
  line-height:1.9;
  margin:0;
  color:#a4af9a
}
.message {
  margin-bottom:20px
}
.message:last-child {
  margin-bottom:0
}
.message-meta {
  font-size:9px;
  letter-spacing:.2px;
  color:#8d9b83;
  margin-bottom:7px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.message-body {
  font-size:12px;
  line-height:1.85;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#465740;
  background:#f2f5ed;
  padding:10px 13px;
  border-radius:2px 9px 9px
}
.message.user .message-body {
  background:#f2f5f5;
  color:#556365;
  border-radius:9px 2px 9px 9px
}
.message.user {
  margin-left:22px
}
.message.assistant {
  margin-right:15px
}
.message.assistant.streaming .message-body:after {
  content:"";
  display:inline-block;
  width:4px;
  height:12px;
  margin-left:3px;
  background:#719c6e;
  vertical-align:middle;
  animation:pulse 1s infinite
}
.message.error .message-body {
  color:#a9674d;
  background:#fff5ed
}
.message-footnote {
  display:block;
  font-size:9px;
  color:#a18a73;
  margin-top:5px
}
.composer {
  margin:0 14px;
  background:#fafbf7;
  border:1px solid #dfe6d8;
  border-radius:8px;
  padding:10px 11px 9px;
  transition:border .15s
}
.composer:focus-within {
  border-color:#9cb697;
  box-shadow:0 0 0 2px #d3e1c933
}
.composer textarea {
  border:0;
  resize:none;
  outline:none!important;
  background:transparent;
  width:100%;
  color:var(--ink);
  font-size:12px;
  line-height:1.8;
  padding:0;
  min-height:58px;
  max-height:150px;
  display:block
}
.composer textarea::placeholder {
  color:#a7b19d;
  font-size:11px
}
.composer textarea:disabled {
  background:transparent
}
.composer-actions {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px
}
.record-button {
  display:flex;
  align-items:center;
  gap:5px;
  border:0;
  padding:3px 0;
  color:#6a8566;
  background:transparent;
  font-size:10px;
  white-space:nowrap
}
.record-button svg {
  width:15px;
  height:15px
}
.record-button[aria-pressed="true"] {
  color:#b75245
}
.record-button[aria-pressed="true"] svg {
  animation:pulse 1s infinite
}
.record-timer {
  color:#b75245;
  font-size:10px;
  font-variant-numeric:tabular-nums
}
.keyboard-hint {
  margin-left:auto;
  font-size:9px;
  color:#a6ae9f
}
.send-button {
  height:29px;
  width:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:white;
  border:0;
  border-radius:5px;
  margin-left:auto
}
.keyboard-hint+.send-button {
  margin-left:0
}
.send-button svg {
  width:15px;
  height:15px
}
.mic-notice {
  font-size:9px;
  color:#9ea894;
  line-height:1.7;
  padding:0 17px;
  margin:10px 0 14px
}
.mic-notice.warning {
  color:#a57b43
}
.transcription-status {
  font-size:10px;
  color:#7e8f70;
  padding:8px 20px;
  background:#f4f7ee;
  margin-bottom:10px
}
.workspace-footer {
  display:flex;
  justify-content:space-between;
  color:#9ba68f;
  gap:12px;
  font-size:9px;
  margin-top:20px;
  letter-spacing:.2px
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@keyframes pulse {
  50% {
    opacity:.35
  }
}
@media(min-width:1700px) {
  .conversation-workspace {
    padding:40px 46px 24px
  }
  .workspace-heading {
    margin-bottom:32px
  }
  .conversation-grid {
    gap:30px
  }
  .sidebar {
    padding-top:40px
  }
  .workspace {
    grid-template-columns:290px minmax(0,1fr)
  }
  .video-stage {
    height:clamp(450px,56vh,700px)
  }
  .chat-panel {
    height:calc(clamp(450px,56vh,700px) + 153px)
  }
}
@media(max-width:1180px) {
  .topbar {
    padding:0 24px;
    gap:36px
  }
  .workspace {
    grid-template-columns:230px minmax(0,1fr)
  }
  .sidebar {
    padding:27px 18px;
    gap:23px
  }
  .conversation-workspace {
    padding:28px 24px 18px
  }
  .conversation-grid {
    gap:18px;
    grid-template-columns:minmax(0,1.2fr) minmax(285px,1fr)
  }
  .video-stage {
    height:400px
  }
  .chat-panel {
    height:553px
  }
  .metrics>div {
    padding:0 12px
  }
  .workspace-heading h2 {
    font-size:22px
  }
  .stage-placeholder h3 {
    font-size:17px
  }
  .stage-placeholder p {
    font-size:11px
  }
}
@media(max-width:960px) {
  .conversation-grid {
    grid-template-columns:1fr
  }
  .video-stage {
    height:400px
  }
  .chat-panel {
    height:470px
  }
  .metrics-note {
    margin-bottom:2px
  }
  .sidebar {
    position:sticky;
    top:0;
    max-height:100vh;
    overflow:auto
  }
  .workspace-footer {
    flex-wrap:wrap
  }
  .deployment-label {
    display:none
  }
}
@media(max-width:680px) {
  .topbar {
    height:65px;
    padding:0 18px;
    gap:20px
  }
  .brand {
    font-size:17px;
    gap:7px
  }
  .brand-mark {
    width:30px;
    height:30px;
    font-size:25px;
    border-radius:8px
  }
  .brand-mark span {
    font-size:24px
  }
  .product-tabs {
    gap:17px;
    margin-left:auto;
    font-size:11px
  }
  .product-tabs>a {
    display:none
  }
  .beta {
    font-size:8px
  }
  .workspace {
    display:flex;
    flex-direction:column
  }
  .sidebar {
    position:static;
    max-height:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:20px;
    padding:22px 18px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .section-heading {
    grid-column:1/-1
  }
  .section-heading h1 {
    font-size:20px;
    margin:7px 0
  }
  .section-heading p {
    font-size:11px
  }
  .settings-card .section-title {
    margin-bottom:12px
  }
  .avatar-detail {
    margin-top:10px;
    gap:7px
  }
  .avatar-thumb {
    width:32px;
    height:37px
  }
  .avatar-detail strong {
    font-size:11px
  }
  .avatar-detail span {
    font-size:9px
  }
  .field-note {
    font-size:10px;
    margin-top:9px;
    line-height:1.7
  }
  .settings-card .field-note {
    max-height:54px;
    overflow:auto
  }
  .session-reference {
    font-size:9px;
    padding-top:9px;
    margin-top:9px;
    display:block
  }
  .session-reference code {
    display:block;
    margin-top:4px;
    max-width:none
  }
  .services-section {
    grid-column:1/-1
  }
  .services-section .section-title {
    margin-bottom:0
  }
  .service-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px
  }
  .service-list li {
    font-size:10px
  }
  .services-section .field-note {
    margin-top:7px
  }
  .sidebar-footer {
    display:none
  }
  .conversation-workspace {
    padding:23px 16px 18px
  }
  .workspace-heading {
    margin-bottom:18px
  }
  .workspace-heading h2 {
    font-size:21px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .conversation-grid {
    gap:16px
  }
  .video-stage {
    height:390px;
    border-radius:10px
  }
  .stage-topline {
    top:16px;
    left:16px;
    right:16px
  }
  .stage-bottomline {
    left:17px;
    bottom:18px
  }
  .stage-placeholder {
    padding:60px 20px
  }
  .stage-placeholder h3 {
    font-size:19px
  }
  .stage-placeholder p {
    font-size:12px
  }
  .metrics {
    padding:14px 0
  }
  .metrics>div {
    padding:0 17px
  }
  .metrics strong {
    font-size:19px
  }
  .chat-panel {
    height:460px
  }
  .chat-header {
    padding:17px 18px
  }
  .messages {
    padding:20px 18px
  }
  .message-body {
    font-size:13px
  }
  .composer textarea {
    font-size:14px
  }
  .composer textarea::placeholder {
    font-size:12px
  }
  .record-button {
    font-size:11px
  }
  .mic-notice {
    font-size:10px
  }
  .workspace-footer {
    font-size:9px;
    margin-top:16px
  }
  .alert-box p {
    font-size:11px
  }
  .workspace-footer span:last-child {
    margin-left:auto
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

.upload-button {
  margin-left: 2px;
}
.upload-button svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 1400px) {
  .keyboard-hint {
    display: none;
  }
  .composer-actions .send-button {
    margin-left: auto;
  }
}

/* The library manages prepared assets; only a connected session is live playback. */
.avatar-manager-button { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; background:#edf2e8; border:1px solid #dfe7d8; border-radius:7px; padding:10px; color:var(--green); margin-top:15px; font-size:11px; }
.avatar-manager-button span:last-child { font-size:9px; color:#809173; }
.avatar-manager-button:hover { background:#e4eddd; }
.avatar-manager-dialog { width:min(1100px,94vw); max-height:90vh; max-height:90dvh; border:1px solid #dfe6d8; border-radius:15px; background:#fbfcf8; color:var(--ink); padding:0; box-shadow:0 22px 90px #132c3460; overflow:auto; }
.avatar-manager-dialog::backdrop,.avatar-preview-dialog::backdrop { background:#10231bd1; backdrop-filter:blur(3px); }
.manager-heading { display:flex; align-items:flex-start; justify-content:space-between; padding:25px 28px 21px; border-bottom:1px solid var(--line); background:#fbfcf8; position:sticky; top:0; z-index:3; }
.manager-heading h2 { font-size:24px; margin:7px 0; letter-spacing:-.5px; font-weight:550; }
.manager-heading p { margin:0; color:var(--muted); font-size:12px; }
.manager-body { display:grid; grid-template-columns:minmax(0,1fr) 280px; }
.avatar-library-section { min-width:0; padding:22px 26px 25px; }
.library-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.library-filters { display:flex; gap:4px; border-radius:7px; background:#edf1e7; padding:3px; }
.library-filter { border:0; background:transparent; color:#86917e; padding:8px 11px; border-radius:5px; font-size:11px; }
.library-filter[aria-pressed="true"] { color:var(--green-dark); background:#fff; box-shadow:0 1px 4px #243c2012; }
.library-filter span { font-size:9px; margin-left:5px; opacity:.65; }
.library-notice,.library-error,.library-message { padding:10px 12px; border-radius:7px; line-height:1.7; font-size:11px; margin:0 0 14px; }
.library-notice { background:#f4efdf; color:#92773d; }
.library-error { background:#fff0e8; color:var(--danger); }
.library-message { background:#eaf2e5; color:var(--green); }
.library-loading { color:var(--muted); font-size:11px; margin:15px 0; }
.avatar-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.avatar-library-card { border:1px solid #dfe6d7; border-radius:9px; overflow:hidden; background:white; min-width:0; }
.avatar-library-card.is-selected { border-color:#7ca277; box-shadow:0 0 0 1px #7ca27755; }
.avatar-card-poster { display:flex; width:100%; height:145px; position:relative; align-items:center; justify-content:center; background:#e9eee3; color:#9ba88e; border:0; padding:0; overflow:hidden; }
.avatar-card-poster img { display:block; width:100%; height:100%; object-fit:contain; background:#dfe7d8; }
.avatar-card-poster span { font-size:11px; }
.avatar-card-poster.has-image:after { content:"预览"; position:absolute; right:8px; bottom:8px; padding:4px 7px; border-radius:4px; background:#173326b3; color:#fff; font-size:9px; }
.avatar-card-body { padding:12px; }
.avatar-card-body h3 { font-size:13px; margin:0 0 8px; font-weight:550; overflow-wrap:anywhere; line-height:1.5; }
.avatar-card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.avatar-card-tags span { font-size:9px; padding:3px 5px; border-radius:3px; color:#7e8c70; background:#f0f4ea; }
.avatar-card-tags .loaded-tag { background:#e5f1e1; color:#4e7951; }
.avatar-card-tags .unready-tag { background:#fff4e7; color:#9f7a48; }
.avatar-card-actions { display:flex; gap:5px; flex-wrap:wrap; }
.avatar-card-actions button,.avatar-rename-actions button { border:1px solid #e0e6da; background:#f8faf5; padding:6px 7px; border-radius:4px; font-size:10px; color:#67825d; }
.avatar-card-actions .choose-avatar { background:var(--green); color:white; border-color:var(--green); }
.avatar-card-actions .archive-avatar { color:#9a7b60; }
.avatar-card-actions button:hover:enabled,.avatar-rename-actions button:hover:enabled { filter:brightness(.96); }
.avatar-rename-form { margin-top:12px; border-top:1px solid #e6ebdf; padding-top:12px; }
.avatar-rename-form label { font-size:10px; display:block; color:var(--muted); margin-bottom:6px; }
.avatar-rename-form input { width:100%; height:32px; border:1px solid #d8e2ce; border-radius:5px; padding:0 7px; font-size:11px; background:#fff; color:var(--ink); }
.avatar-rename-actions { display:flex; gap:5px; margin-top:8px; }
.library-empty { padding:45px 20px; text-align:center; border:1px dashed #d5dfca; border-radius:9px; color:#8b9c7a; }
.library-empty svg { height:30px; width:30px; stroke-width:1.2; }
.library-empty h3 { font-size:14px; font-weight:500; margin:14px 0 8px; }
.library-empty p { margin:0; font-size:11px; line-height:1.8; }
.library-footnote { font-size:10px; color:#98a18d; line-height:1.8; margin:16px 0 0; }
.manager-upload { padding:25px 23px; border-left:1px solid var(--line); background:#f2f5ec; }
.upload-heading h3 { font-size:17px; font-weight:550; margin:9px 0; }
.upload-heading p { font-size:11px; line-height:1.7; color:#86967a; margin:0; }
.avatar-preview-dialog { width:min(800px,94vw); max-height:92vh; max-height:92dvh; border:0; border-radius:12px; background:#f8faf3; padding:20px; color:var(--ink); }
.preview-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; gap:12px; }
.preview-heading h2 { font-size:17px; margin:0; font-weight:550; overflow-wrap:anywhere; }
.avatar-preview-dialog img { display:block; width:100%; max-height:70vh; max-height:70dvh; object-fit:contain; border-radius:5px; background:#e4ebdc; }
@media(max-width:780px) {
  .avatar-manager-dialog { width:96vw; max-height:94vh; max-height:94dvh; border-radius:11px; }
  .manager-heading { padding:19px 18px; }
  .manager-heading h2 { font-size:21px; }
  .manager-body { grid-template-columns:1fr; }
  .avatar-library-section { padding:18px; }
  .manager-upload { border-left:0; border-top:1px solid var(--line); padding:22px 18px; }
  .avatar-library-grid { gap:10px; }
  .avatar-card-poster { height:145px; }
  .avatar-card-body { padding:10px; }
  .avatar-card-actions button { padding:6px; font-size:9px; }
}
@media(max-width:380px) {
  .avatar-library-grid { grid-template-columns:1fr; }
  .avatar-card-poster { height:190px; }
}
.avatar-create-form { margin-top: 15px; }
.avatar-name-input {
  width: 100%;
  height: 36px;
  border: 1px solid #dce3d9;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 0 9px;
  font-size: 11px;
  margin-bottom: 13px;
}
.avatar-video-input {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
}
.avatar-video-input::file-selector-button {
  padding: 6px 8px;
  margin-right: 6px;
  border: 1px solid #dce3d9;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.avatar-name-input:disabled, .avatar-video-input:disabled { opacity: .55; }
.avatar-create-form .button { margin-top: 12px; height: 35px; font-size: 11px; }
.avatar-create-form .field-note { max-height: none; }
.avatar-create-lock { color: var(--amber); }
.avatar-job-status {
  margin-top: 13px;
  padding: 11px;
  background: #eef3e9;
  border-radius: 7px;
}
.avatar-job-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.avatar-job-heading strong { font-size: 10px; font-weight: 550; }
.avatar-job-heading span { font-size: 10px; color: var(--green); font-variant-numeric: tabular-nums; }
.avatar-job-status progress {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 10px;
  accent-color: var(--green);
}
.avatar-job-status p, .avatar-create-error { font-size: 10px; line-height: 1.8; margin: 8px 0 0; overflow-wrap: anywhere; }
.avatar-job-status p { color: #7d8b73; }
.avatar-create-error { color: var(--danger); }