/* Workspace layer. Shared forms and markdown remain in ui.css. */
:root {
  --bg: #f3f7fc;
  --surface: #fff;
  --surface-soft: #f7faff;
  --ink: #0f1a2e;
  --soft: #5a6685;
  --line: #dbe6f5;
  --brand: #1c5cbb;
  --brand-strong: #174f9e;
  --brand-soft: #eaf2ff;
  --brand-ink: #fff;
  --radius: 12px;
  --shadow: 0 3px 12px -8px #0d1f3c20;
}
body { overflow-x: visible; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); }
.app-shell { width: 100%; max-width: none; margin: 0; grid-template-columns: 232px minmax(0, 1fr); gap: 0; }
.sidebar { width: 232px; padding: 32px 18px 22px; border: 0; background: #0d1f3c; color: #dbe8fa; }
.sidebar .brand { color: #fff; margin-left: 10px; font-size: 28px; letter-spacing: -.04em; }
.brand small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .04em; color: #9fb3d6; }
.mark { width: 28px; height: 32px; border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, #64b9fa 0 3px, transparent 3px 6px); clip-path: polygon(0 38%,21% 38%,21% 20%,43% 20%,43% 0,57% 0,57% 20%,79% 20%,79% 38%,100% 38%,100% 62%,79% 62%,79% 80%,57% 80%,57% 100%,43% 100%,43% 80%,21% 80%,21% 62%,0 62%); }
.portal-nav { margin-top: 42px; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 14px; border: 1px solid transparent; border-radius: 8px; color: #b8cbe5; font-size: 13px; font-weight: 500; }
.nav-item:hover { color: #fff; background: #ffffff0a; }
.nav-item.is-active { color: #fff; background: #214a7e; border-color: #4778b04d; }
.nav-item::before { content: ''; width: 17px; height: 17px; flex: none; background: currentColor; mask: var(--nav-icon) center / contain no-repeat; }
.nav-item[data-page-target=home] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m3 10 9-7 9 7v11h-7v-7h-4v7H3Z'/%3E%3C/svg%3E"); }
.nav-item[data-page-target=billing] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='2' y='5' width='20' height='15' rx='2'/%3E%3Cpath d='M2 10h20M6 16h4'/%3E%3C/svg%3E"); }
.nav-item[data-page-target=plans] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m2 7 10-5 10 5-10 5Zm0 5 10 5 10-5M2 17l10 5 10-5'/%3E%3C/svg%3E"); }
.nav-item[data-page-target=voices] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='8' y='2' width='8' height='13' rx='4'/%3E%3Cpath d='M4 10a8 8 0 0 0 16 0M12 18v4M8 22h8'/%3E%3C/svg%3E"); }
.nav-item[data-page-target=keys] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cpath d='m12 12 9 9m-5-5 3-3m-1 5 3-3'/%3E%3C/svg%3E"); }
.nav-item[data-page-target=usage] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 3v18h19M8 17v-5m5 5V7m5 10V3'/%3E%3C/svg%3E"); }
.nav-item[data-page-target=conversation] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 4h20v13H9l-6 4v-4H2ZM7 8v5m5-7v9m5-7v5'/%3E%3C/svg%3E"); }
.nav-item[data-page-target=docs] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 5C8 2 4 3 2 4v16c4-2 7-1 10 1 3-2 6-3 10-1V4c-2-1-6-2-10 1Zm0 0v16'/%3E%3C/svg%3E"); }
.account-details { margin-top: auto; padding: 20px 10px 0; border-top: 1px solid #ffffff20; }
.account-details summary { min-height: 32px; font-size: 12px; cursor: pointer; color: #b8cbe5; }
.sidebar-account { border: 0; padding: 12px 0 0; margin: 0; gap: 14px; }
.sidebar-account dt { color: #9fb3d6; font-weight: 500; }
.sidebar-account dd { font-size: 11px; }
.sidebar-account code { font-size: 10px; }
.portal-main { width: 100%; max-width: 1210px; padding: 0 44px 64px; margin-inline: auto; }
.workspace-bar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--soft); }
.workspace-bar a { text-decoration: none; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.workspace-bar a:hover { text-decoration: underline; }
.portal-main > .message:empty { display: none; }
.portal-main > .message:not(:empty) { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.page-heading { margin: 32px 0 26px; }
.page-heading h1 { font-size: 30px; letter-spacing: -.04em; }
.page-heading > p:last-child:not(.eyebrow) { color: var(--soft); margin-top: 10px; font-size: 13px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .12em; margin-bottom: 8px; color: var(--soft); }
.workspace-welcome { padding: 28px 32px; border: 1px solid #244570; border-radius: 14px; background: linear-gradient(115deg, #0d1f3c, #183c68); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; }
.workspace-welcome .eyebrow { color: #9fc6ee; font-size: 9px; }
.workspace-welcome h2 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 650; letter-spacing: -.035em; }
.workspace-welcome h2 + p { color: #b8cbe5; font-size: 12px; margin-top: 10px; }
.workspace-welcome .button { margin-top: 22px; color: #0d1f3c; background: #fff; padding-inline: 20px; }
.workspace-welcome .button:hover { background: #dbeefd; }
.workspace-welcome .button span { margin-left: 28px; }
.welcome-wave { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 0 0 180px; height: 150px; border-radius: 50%; background: radial-gradient(ellipse, #46b6e619, transparent 70%); }
.welcome-wave i { width: 6px; height: 25px; border-radius: 3px; background: #64b9fa; }
.welcome-wave i:nth-child(2), .welcome-wave i:nth-child(6) { height: 50px; background: #85ccff; }
.welcome-wave i:nth-child(3), .welcome-wave i:nth-child(5) { height: 80px; background: #b8ddfa; }
.welcome-wave i:nth-child(4) { height: 110px; background: #dbeefd; }
.dashboard-grid { gap: 14px; margin-top: 22px; }
.dashboard-card { padding: 20px; border-radius: 12px; box-shadow: none; }
.dashboard-card > p { font-size: 11px; font-weight: 500; }
.dashboard-card > strong { font-size: 26px; font-weight: 650; margin-top: 14px; font-variant-numeric: tabular-nums; }
#home-plan { font-size: 21px; }
.home-usage-values { margin-top: 14px; }
.home-usage-values dt { font-weight: 500; }
.home-usage-values dd { font-size: 16px; }
.panel { padding: 26px; box-shadow: none; }
.panel h2 { font-size: 18px; font-weight: 650; }
.getting-started { display: block; margin-top: 24px; border-left: 3px solid var(--brand); }
.getting-started-heading p:last-child { margin-top: 6px; color: var(--soft); font-size: 12px; }
.start-steps { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.start-step { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.start-step-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.start-step.is-done { background: var(--surface); }
.start-step.is-done .start-step-mark { background: var(--ok); color: #fff; font-size: 0; }
.start-step.is-done .start-step-mark::after { content: '✓'; font-size: 14px; }
.start-step-body { flex: 1; min-width: 0; }
.start-step-body strong { display: block; font-size: 14px; font-weight: 650; }
.start-step-body small { display: block; margin-top: 3px; color: var(--soft); font-size: 12px; }
.start-step-state { margin-left: 8px; color: var(--ok); font-size: 11px; font-weight: 700; }
.start-step .button { flex: none; min-height: 38px; padding: 9px 16px; }
.usage-table td strong { display: block; font-size: 13px; }
.usage-table td strong + code { color: var(--soft); }
.usage-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.key-table { min-width: 720px; }
.key-name { display: block; font-size: 13px; font-weight: 650; }
.key-meta { display: block; margin-top: 3px; color: var(--soft); font-size: 11px; }
.key-meta code { font-size: 11px; overflow-wrap: anywhere; }
.key-training-control { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; white-space: nowrap; }
.key-training-status.enabled { color: var(--ok); }
.training-action, .revoke { padding: 6px 10px; }
.key-status-control { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.voice-card-actions { gap: 8px; flex-wrap: wrap; }
.docs-contents { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.docs-contents .eyebrow { margin-bottom: 8px; }
.docs-contents-links { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.docs-contents-link { min-height: 32px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink); font-size: 12px; font-weight: 600; text-align: left; }
.docs-contents-link:hover { border-color: var(--brand); background: var(--brand-soft); }
.workspace-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.workspace-link { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); text-align: left; }
.workspace-link:hover { border-color: var(--brand); background: var(--surface-soft); }
.workspace-link strong { display: block; font-size: 14px; font-weight: 650; }
.workspace-link small { display: block; color: var(--soft); font-size: 11px; margin-top: 5px; }
.workspace-link > span:last-child { margin-left: auto; color: var(--brand); }
.shortcut-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 24px; }
.button, .text-button { border-radius: 8px; font-size: 13px; font-weight: 600; min-height: 42px; }
input, select, textarea { border-radius: 8px; background: var(--surface); }
label { font-weight: 600; }
select { max-width: 100%; }
.table-wrap { position: relative; border: 1px solid var(--line); border-radius: 10px; }
.table-wrap th { background: var(--surface-soft); font-weight: 600; }
.table-wrap th, .table-wrap td { padding: 15px 14px; }
.table-wrap tbody tr:hover { background: var(--surface-soft); }
.table-wrap .empty { padding: 22px 12px; margin: 0; font-size: 13px; }
.balance-card.total { padding: 24px 28px; border-color: #244570; background: #0d1f3c; color: #fff; }
.balance-card.total span { color: #b8cbe5; }
.balance-card strong { font-size: 34px; font-weight: 650; }
.charge-summary { gap: 32px; }
.rate-list { border-radius: 10px; }
.rate-list div { padding: 12px 16px; }
.current-plan-details div, .usage-totals div, .voice-card { border-radius: 10px; }
.voice-conversation-shell { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.voice-conversation-settings { padding: 26px; align-content: start; border-right: 1px solid var(--line); }
.voice-conversation-settings-heading { font-size: 15px !important; }
.voice-conversation-field select, .voice-conversation-field textarea, .voice-conversation-field .hint { font-weight: 500; }
.voice-conversation-locked { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--brand-soft); color: var(--ink); }
.voice-conversation-no-keys { padding: 16px; border: 1px dashed var(--brand); border-radius: 10px; background: var(--brand-soft); }
.voice-conversation-no-keys p { font-size: 13px; }
.voice-conversation-no-keys .button { margin-top: 12px; }
.voice-conversation-advanced { padding-top: 6px; border-top: 1px solid var(--line); }
.voice-conversation-advanced summary { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; list-style: none; user-select: none; }
.voice-conversation-advanced summary::-webkit-details-marker { display: none; }
.voice-conversation-advanced summary::before { content: ''; width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.voice-conversation-advanced[open] summary::before { transform: translateY(1px) rotate(225deg); }
.voice-conversation-advanced summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.voice-conversation-advanced-body { display: grid; gap: 18px; padding-top: 8px; }
.voice-conversation-hayabusa { display: grid; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.voice-reference-label { display: block; color: var(--soft); font-size: 12px; font-weight: 600; }
.voice-reference-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.voice-reference-actions .button { min-height: 38px; padding: 8px 14px; }
.file-button { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.file-button:has(input:disabled) { cursor: default; opacity: .58; }
.file-button:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.voice-conversation-field .file-button input { position: absolute; width: 1px; height: 1px; margin: 0; }
.voice-conversation-field select { display: block; width: 100%; min-height: 44px; }
.docs-page { max-width: 860px; }
.account-details summary:focus-visible { outline: 2px solid #85ccff; outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #101d30; --surface: #172941; --surface-soft: #14243a; --ink: #e2edfc; --soft: #a9bdd8; --line: #2b405e; --brand: #82baff; --brand-strong: #a6d0ff; --brand-ink: #0d1f3c; --brand-soft: #233f65; }
}
@media (max-width: 1150px) {
  .portal-main { padding-inline: 28px; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-links { gap: 12px; }
  .workspace-link { padding: 18px; gap: 12px; }
  .welcome-wave { flex-basis: 120px; }
}
@media (max-width: 900px) {
  .app-shell { width: 100%; display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 18px 24px 12px; }
  .sidebar .brand { margin-left: 0; font-size: 23px; }
  .portal-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 20px; border: 0; overflow: visible; }
  .nav-item { width: 100%; min-height: 44px; padding: 10px; border-radius: 7px; justify-content: center; font-size: 12px; gap: 8px; }
  .account-details { border: 0; margin-top: 10px; padding: 0; }
  .account-details summary { min-height: 28px; font-size: 11px; }
  .sidebar-account { padding-bottom: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-main { padding: 0 24px 48px; }
  .workspace-bar { min-height: 60px; }
  .page-heading { margin-top: 26px; }
}
@media (max-width: 620px) {
  .sidebar { padding: 18px 16px 10px; }
  .nav-item { flex-direction: column; gap: 5px; font-size: 10px; padding: 8px 2px; white-space: nowrap; }
  .portal-main { padding-inline: 16px; }
  .page-heading h1 { font-size: 26px; }
  .workspace-welcome { padding: 24px; }
  .welcome-wave { display: none; }
  .workspace-welcome h2 { font-size: 20px; }
  .workspace-welcome h2 + p { font-size: 11px; }
  .dashboard-grid { gap: 10px; }
  .dashboard-card { padding: 16px; }
  .dashboard-card > strong { font-size: 23px; }
  .dashboard-card > p { font-size: 10px; }
  .home-usage-values { gap: 4px; }
  .home-usage-values dd { font-size: 14px; white-space: normal; }
  #home-plan { font-size: 20px; }
  .workspace-links { grid-template-columns: 1fr; }
  .panel { padding: 22px 18px; border-radius: 12px; }
  .workspace-bar { font-size: 11px; gap: 12px; }
  .voice-conversation-shell { padding: 0; }
  .training-confirmation-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .voice-orb { animation: none !important; } }
@media (max-width: 760px) {
  .start-step { flex-wrap: wrap; }
  .start-step .button { width: 100%; margin: 0; }
  .voice-reference-actions .button { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 760px) {
  .usage-totals { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* 一覧の表は列ごとに折り返さず、1 件ずつ縦に並べる。 */
  .table-wrap .key-table, .table-wrap .usage-table, .table-wrap .billing-table { display: block; min-width: 0; }
  .key-table thead, .usage-table thead, .billing-table thead { display: none; }
  .key-table tbody, .usage-table tbody, .billing-table tbody { display: block; }
  .key-table tr, .usage-table tr, .billing-table tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .key-table tbody tr:last-child, .usage-table tbody tr:last-child, .billing-table tbody tr:last-child { border-bottom: 0; }
  .key-table td, .usage-table td, .billing-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 0; text-align: right; }
  .key-table td::before, .usage-table td::before, .billing-table td::before { content: attr(data-label); flex: none; color: var(--soft); font-size: 11px; font-weight: 700; text-align: left; }
  .key-table td:first-child, .usage-table td:first-child { display: block; text-align: left; }
  .key-table td:first-child::before, .usage-table td:first-child::before { display: none; }
  .key-training-control, .key-status-control { justify-content: flex-end; }
  .table-wrap tbody tr:hover { background: transparent; }
}
/* A pinned heading can cover every action in a narrow, scrolling plan table. */
@media (max-width: 640px) {
  #page-plans .plan-table th:first-child { position: static; white-space: normal; max-width: 140px; }
}

/* 声を作る。一言の入力と作るボタンを主役にし、説明とセリフは「詳細を編集」に畳む。 */
#page-voices [hidden] { display: none !important; }
.voice-studio { padding: 28px; border-color: #c9daf3; background: linear-gradient(160deg, var(--surface) 55%, var(--brand-soft)); }
.voice-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.voice-studio-label { margin: 0; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.voice-smart-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.voice-smart-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voice-smart-switch { position: relative; width: 40px; height: 22px; flex: none; border-radius: 999px; background: var(--line); transition: background .15s; }
.voice-smart-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .15s; }
.voice-smart-toggle input:checked + .voice-smart-switch { background: var(--brand); }
.voice-smart-toggle input:checked + .voice-smart-switch::after { transform: translateX(18px); }
.voice-smart-toggle input:focus-visible + .voice-smart-switch { outline: 3px solid var(--brand); outline-offset: 2px; }
#voice-smart-hint { margin-top: 4px; }
.voice-smart-fields, .voice-manual-fields { margin-top: 14px; }
.voice-studio textarea { background: var(--surface); }
#voice-description { min-height: 56px; padding: 14px 16px; border-width: 1.5px; border-radius: 12px; font-size: 16px; resize: none; field-sizing: content; max-height: 180px; }
.voice-studio textarea:focus { border-color: var(--brand); outline: 3px solid #1c5cbb26; outline-offset: 0; }
.voice-manual-fields { display: grid; gap: 6px; }
.voice-manual-fields label:not(:first-child) { margin-top: 8px; }
.voice-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.voice-examples .hint { margin: 0 4px 0 0; }
.voice-example { min-height: 32px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; }
.voice-example:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.voice-studio-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.voice-studio-footer .hint { margin: 0; line-height: 1.7; }
.voice-studio-submit { min-height: 48px; padding-inline: 26px; border-radius: 12px; font-size: 14px; }
.voice-description-tips { margin-top: 6px; }
.voice-description-tips summary { min-height: 32px; display: list-item; cursor: pointer; color: var(--soft); font-size: 12px; font-weight: 600; }
.voice-description-tips .hint p + p { margin-top: 6px; }

.voice-generating { margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--brand); border-radius: 12px; background: var(--brand-soft); }
.voice-generating-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.voice-generating-head strong { font-size: 14px; }
.voice-generating-head strong::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brand); vertical-align: 2px; animation: voice-pulse 1.2s ease-in-out infinite; }
.voice-generating-head .hint { margin: 0; font-variant-numeric: tabular-nums; }
.voice-generating-description { margin-top: 6px; color: var(--soft); font-size: 12px; overflow-wrap: anywhere; }
.voice-generating-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.voice-generating-cards span { height: 64px; border-radius: 10px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-soft) 50%, var(--surface) 100%); background-size: 200% 100%; animation: voice-shimmer 1.6s linear infinite; }
@keyframes voice-pulse { 50% { opacity: .3; } }
@keyframes voice-shimmer { to { background-position: -200% 0; } }

.voice-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.voice-toolbar:not(:has(> :not([hidden]))) { display: none; }
.voice-search { flex: 1 1 260px; max-width: 420px; margin: 0; }
.voice-search input { width: 100%; min-height: 40px; padding: 8px 12px; font-size: 14px; }
.voice-pagination { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.voice-page-button { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; }
.voice-page-button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.voice-page-button:disabled { opacity: .45; cursor: default; }
.voice-page-label { min-width: 64px; padding: 0 6px; color: var(--soft); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.voice-card-list { margin-top: 16px; }

.voice-generation { min-width: 0; }
.voice-generation-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.voice-generation-header h3 { font-size: 13px; color: var(--soft); font-weight: 600; }
.voice-generation-header .hint { margin: 0; }
.voice-generation-description { margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.6; }
.voice-generation-line { margin-top: 4px; color: var(--soft); font-size: 13px; overflow-wrap: anywhere; }
.voice-generation-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.voice-card { padding: 16px; background: var(--surface); }
.voice-generation-cards .voice-card-heading { align-items: center; }
.voice-card-heading h4 { margin: 0; font-size: 14px; font-weight: 650; }
.voice-delete { min-height: 28px; padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--soft); font-size: 12px; font-weight: 600; }
.voice-delete:hover { background: var(--danger-soft); color: var(--danger); }
.voice-audio { display: grid; gap: 4px; margin-top: 12px; }
.voice-audio-label { color: var(--soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.voice-audio audio, .voice-card-actions audio { display: block; width: 100%; height: 40px; }
.voice-audio-status { margin-top: 4px; }
.voice-register { margin-top: 14px; }
.voice-register-open { width: 100%; }
.voice-register-form { display: grid; gap: 8px; }
.voice-register-form input { margin-top: 5px; min-height: 42px; padding: 8px 12px; font-size: 14px; }
.voice-register-actions { display: flex; align-items: center; gap: 8px; }
.voice-register-actions .button { flex: 1; }

#registered-voice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.voice-card.registered { display: flex; flex-direction: column; }
.voice-card.registered h3 { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.voice-card.registered .voice-card-heading .hint { font-size: 11px; }
.voice-description-short { margin-top: 8px; color: var(--soft); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.voice-id-row { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.voice-id-row .voice-id { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; font-size: 11px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-id-copy { flex: none; min-height: 28px; padding: 2px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--brand); font-size: 12px; font-weight: 600; }
.voice-id-copy:hover { background: var(--brand-soft); }
.voice-card.registered .voice-card-actions { margin-top: auto; padding-top: 14px; justify-content: flex-start; }
.voice-card.registered .voice-card-actions .button { min-height: 38px; padding: 8px 14px; }
@media (max-width: 1150px) {
  #registered-voice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .voice-generation-cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .voice-studio { padding: 22px 18px; }
  .voice-studio-footer { flex-direction: column; align-items: stretch; }
  .voice-studio-submit { width: 100%; }
  #registered-voice-list { grid-template-columns: 1fr; }
  .voice-search { max-width: none; }
  .voice-pagination { width: 100%; justify-content: space-between; }
}
@media (prefers-color-scheme: dark) {
  .voice-studio { border-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-generating-head strong::before, .voice-generating-cards span { animation: none; }
}
/* 会話テストの舞台。紹介ページの体験通話と同じ紺の舞台に球を置き、字幕を主役にする。
 * 認識の記録は開発者向けとして畳む。 */
.voice-conversation-stage { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--surface-soft); }
.voice-stage-hero { position: relative; display: grid; justify-items: center; padding: 26px 20px 24px; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, #1f4f8a 0%, #0d1f3c 70%); color: #fff; overflow: hidden; }
.voice-stage-hero .voice-orb-wrap { min-height: 170px; }
.voice-stage-hero .voice-orb { width: 116px; height: 116px; background: radial-gradient(circle at 32% 28%, #fff, #a3d5fb 55%, #2f7fe0); box-shadow: 0 0 0 10px #64b9fa14, 0 0 0 22px #64b9fa0a, 0 18px 60px #2f7fe070; }
.voice-stage-hero .voice-conversation-status { color: #fff; font-size: 15px; }
.voice-stage-hero .voice-conversation-error { color: #ffb4a8; }
.voice-stage-hero .voice-conversation-error:empty { display: none; }
.voice-stage-hero .voice-conversation-actions { margin-top: 16px; }
.voice-stage-hero .voice-conversation-actions .button { min-height: 50px; padding-inline: 34px; border-radius: 999px; background: #fff; color: #0d1f3c; font-size: 15px; box-shadow: 0 8px 24px #0006; }
.voice-stage-hero .voice-conversation-actions .button:hover { background: #dbeefd; }
.voice-stage-hero .voice-conversation-actions .button[data-active="true"] { background: #e5484d; color: #fff; }
.voice-stage-hero .voice-conversation-actions .button[data-active="true"]:hover { background: #cf3a3f; }
.voice-stage-hero .voice-conversation-actions .button:disabled { opacity: .55; }
.voice-conversation-timer { position: absolute; top: 14px; right: 16px; padding: 3px 10px; border-radius: 999px; background: #ffffff14; color: #b8cbe5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.voice-transcript { display: grid; gap: 6px; }
#page-conversation .voice-conversation-messages { min-height: 220px; max-height: 420px; margin: 0; padding: 16px; gap: 10px; border-radius: 14px; background: var(--surface); }
#page-conversation .voice-conversation-messages .message { padding: 9px 13px; border-radius: 14px 14px 14px 4px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 14px; line-height: 1.6; }
#page-conversation .voice-conversation-messages .message.user { border-color: transparent; border-radius: 14px 14px 4px 14px; background: var(--brand); color: var(--brand-ink); }
#page-conversation .voice-conversation-messages .empty { margin: auto 0; align-self: center; font-size: 13px; }
.voice-conversation-partial { justify-self: end; max-width: 88%; margin: 0; padding: 7px 12px; border: 1px dashed var(--brand); border-radius: 14px; color: var(--soft); font-size: 13px; overflow-wrap: anywhere; }
.voice-conversation-partial:empty { display: none; }
.voice-conversation-partial::before { content: '聞き取り中… '; color: var(--brand); font-size: 11px; font-weight: 700; }
.voice-conversation-debug { border-top: 1px solid var(--line); }
.voice-conversation-debug summary { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; color: var(--soft); font-size: 12px; font-weight: 600; list-style: none; }
.voice-conversation-debug summary::-webkit-details-marker { display: none; }
.voice-conversation-debug summary::before { content: ''; width: 6px; height: 6px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.voice-conversation-debug[open] summary::before { transform: translateY(1px) rotate(225deg); }
.voice-conversation-debug-body { display: grid; gap: 6px; }
.voice-conversation-debug-body .hint { margin: 0; }
.voice-conversation-signal { font-size: 13px; }
.voice-conversation-events { max-height: 14rem; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-conversation-events:empty::before { content: 'まだ記録はありません。'; color: var(--soft); }
@media (max-width: 860px) {
  .voice-conversation-shell { grid-template-columns: 1fr; }
  .voice-conversation-settings { border-right: 0; border-top: 1px solid var(--line); }
  .voice-conversation-stage { order: -1; }
}
@media (max-width: 620px) {
  .voice-conversation-settings { padding: 22px 18px; }
  .voice-conversation-stage { padding: 12px; }
  .voice-stage-hero .voice-orb-wrap { min-height: 140px; }
  .voice-stage-hero .voice-orb { width: 92px; height: 92px; }
  #page-conversation .voice-conversation-messages { min-height: 160px; }
}

/* Receipt recipient settings use the same compact form as billing. */
.receipt-profile-form { display: grid; gap: 10px; margin: 20px 0; }
.receipt-profile-form input { width: 100%; max-width: 520px; }
.receipt-profile-form .button { justify-self: start; }

/* App creation: two columns on desktop, switchable panes on narrow screens. */
.nav-item[data-page-target=apps] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 8h18M12 11v7M8.5 14.5h7'/%3E%3C/svg%3E"); }
#page-apps { font-size: 1rem; }
#page-apps .hint { font-size: .875rem; line-height: 1.6; }
#page-apps label { font-size: .875rem; }
.app-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.app-toolbar select { flex: 1 1 200px; min-width: 0; }
#app-title { font-size: 1.25rem; overflow-wrap: anywhere; }
.app-tabs { display: none; }
.app-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 18px; margin: 18px 0; align-items: start; }
.app-chat-pane, .app-preview-pane { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.app-chat-pane { padding: 18px; }
.app-messages { min-height: 220px; max-height: 420px; overflow: auto; padding-bottom: 12px; }
.app-chat-message { padding: 12px 14px; margin: 10px 0; border-radius: 10px; background: var(--surface-soft); font-size: .9375rem; }
.app-chat-message.from-user { background: var(--brand-soft); }
.app-chat-message strong { font-size: .875rem; }
.app-chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; line-height: 1.7; }
#app-chat-form textarea { margin: 8px 0; min-height: 110px; }
#app-chat-form .button { display: block; margin-left: auto; }
.app-assets-panel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.app-assets-panel summary, .app-settings summary { min-height: 44px; cursor: pointer; font-weight: 600; font-size: .9375rem; }
#app-asset-count { font-weight: 400; color: var(--soft); font-size: .875rem; }
#app-files { width: 100%; font-size: .875rem; margin: 8px 0; }
.app-assets { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.app-asset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-size: .875rem; }
.app-asset span { flex: 1 1 140px; overflow-wrap: anywhere; }
.app-asset img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.app-preview-pane { overflow: hidden; }
.app-preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .875rem; }
#app-preview-empty { padding: 18px; margin: 0; }
#app-preview { display: block; width: 100%; height: 640px; background: white; border: 0; }
.app-settings { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.app-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.app-settings-grid label { display: grid; gap: 8px; }
.app-settings-grid select, .app-settings-grid input { width: 100%; min-width: 0; }
.app-sharing { margin-top: 20px; }
#app-public-url { display: block; overflow-wrap: anywhere; margin: 14px 0 20px; }
#app-embed-code { margin: 8px 0 12px; font-size: .875rem; }
@media (max-width: 760px) {
 .app-tabs { display: flex; gap: 8px; margin-top: 18px; }
 .app-tabs button { flex: 1; min-height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; color: var(--ink); font-size: 1rem; }
 .app-tabs [aria-selected=true] { background: var(--brand); color: white; border-color: var(--brand); }
 .app-workspace { display: block; }
 .app-workspace[data-tab=chat] .app-preview-pane, .app-workspace[data-tab=preview] .app-chat-pane { display: none; }
 .app-settings-grid { grid-template-columns: minmax(0,1fr); }
 .app-messages { max-height: 380px; }
}

/* Minor shared refinements; the existing navy and blue palette stays intact. */
:root { --font: Inter, "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif; }
.portal-main { max-width: 1360px; }
.workspace-bar { min-height: 64px; font-size: 11px; }
.page-heading h1 { font-weight: 600; }
.button { border-radius: 8px; box-shadow: none; }
.panel, .dashboard-card { border-color: var(--line); }
input, select, textarea, button { font-family: inherit; }
@media(max-width:900px) {
  .portal-nav { margin-top: 14px; gap: 4px; }
  .nav-item { min-height: 40px; padding-block: 8px; }
}

/* App editor: compact controls, spacious preview, and a contained conversation. */
#page-apps { font-size: 13px; }
#page-apps .app-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 18px 0 24px; }
#page-apps .app-heading h1 { font-size: 28px; font-weight: 600; letter-spacing: -.04em; display: flex; align-items: center; gap: 14px; }
#page-apps .app-heading > p { font-size: 12px; margin-bottom: 4px; }
#page-apps .eyebrow { font-size: 10px; color: #858a91; letter-spacing: .12em; margin-bottom: 6px; }
.app-beta { padding: 4px 8px; border: 1px solid #dce0e5; border-radius: 5px; font-size: 9px; font-weight: 500; letter-spacing: .02em; color: #647183; }
#app-availability { font-size: 11px; padding: 9px 12px; background: #eff1f3; border-radius: 7px; margin: -8px 0 16px; color: #7c8187; }
#app-availability:empty, #app-notice:empty { display: none; }
.app-toolbar { gap: 8px; margin: 0; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.app-toolbar select { flex: 0 1 250px; font-size: 12px; border: 0; background-color: transparent; padding-left: 0; font-weight: 600; }
#page-apps .button { border-radius: 7px; font-size: 12px; font-weight: 550; min-height: 38px; padding: 8px 16px; box-shadow: none; }
#app-new { background: #fff; border: 1px solid var(--line); color: #535860; }
#app-publish { margin-left: auto; min-width: 76px; }
#app-stop { font-size: 11px; }
.app-document { display: flex; gap: 9px; align-items: center; padding: 17px 2px 12px; }
.app-document-icon { font-size: 21px; color: #7a8491; }
#app-title { font-size: 13px; font-weight: 550; }
#app-publication { margin: 0 0 0 auto; font-size: 10px; color: #8a8e94; }
#app-notice { margin: 0 0 10px; font-size: 12px; color: #506077; }
.app-workspace { grid-template-columns: minmax(300px,.75fr) minmax(0,1.4fr); gap: 16px; margin: 0 0 16px; align-items: stretch; }
.app-chat-pane, .app-preview-pane { border-radius: 12px; box-shadow: 0 4px 20px #1c253205; height: clamp(580px, calc(100vh - 292px), 780px); }
.app-chat-pane { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.app-pane-heading { display: flex; align-items: center; gap: 9px; padding: 16px 18px 10px; }
.app-pane-heading strong { font-size: 12px; font-weight: 600; }
.app-pane-heading > span:last-child { margin-left: auto; font-size: 9px; color: #90959b; }
.app-assistant-mark { width: 24px; height: 24px; display: grid; place-items: center; color: #3f5778; font-size: 23px; }
#app-ai-disclosure { color: #96999d; font-size: 10px; line-height: 1.7; padding: 0 18px 12px; margin: 0; border-bottom: 1px solid #eff0f2; }
.app-messages { flex: 1; min-height: 140px; max-height: none; padding: 18px; overscroll-behavior: contain; }
.app-messages > .empty { font-size: 18px; color: #4c535c; font-weight: 500; padding: 32px 6px; line-height: 1.7; letter-spacing: -.025em; }
.app-messages > .empty small { display: block; font-size: 12px; font-weight: 400; color: #898e95; margin-top: 12px; line-height: 1.9; letter-spacing: 0; }
.app-chat-message { padding: 13px 14px; margin: 0 0 16px; border-radius: 9px; background: transparent; font-size: 12px; }
.app-chat-message.from-user { background: #eff1f4; }
.app-chat-message strong { font-size: 10px; color: #6c7685; font-weight: 550; }
.app-chat-message p { line-height: 1.9; margin-top: 7px; }
#app-chat-form { margin: 0 14px 12px; padding: 12px; border: 1px solid #dce0e5; border-radius: 10px; box-shadow: 0 3px 8px #21293404; }
#app-chat-form:focus-within { border-color: #9aa5b5; box-shadow: 0 0 0 3px #edf0f3; }
#app-chat-form textarea { background: transparent; border: 0; padding: 0; margin: 0; min-height: 68px; resize: none; font-size: 12px; line-height: 1.8; box-shadow: none; outline: 0; }
#app-chat-form textarea::placeholder { color: #a0a4aa; }
.app-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-composer-footer > span { font-size: 9px; color: #9ca0a6; }
#app-send { display: flex !important; align-items: center; gap: 12px; min-height: 32px !important; padding: 5px 12px !important; font-size: 11px !important; }
#app-send span { font-size: 19px; line-height: 1; }
.app-secret-hint { font-size: 9px; color: #a1a5aa; margin: 9px 0 0; }
.app-assets-panel { margin: 0; padding: 0 18px; border-color: #eff0f2; overflow: auto; max-height: 220px; flex-shrink: 0; }
.app-assets-panel summary { font-size: 11px; color: #797e85; padding: 12px 0; min-height: 42px; font-weight: 500; }
#app-asset-count { font-size: 9px; color: #a1a5aa; margin-left: 8px; }
#app-files { font-size: 11px; padding: 8px; }
#app-files::file-selector-button { border: 0; background: #edf0f3; padding: 6px 10px; border-radius: 5px; color: #495970; margin-right: 10px; }
#page-apps .app-assets-panel .hint { font-size: 10px; }
.app-preview-pane { display: flex; flex-direction: column; background: #f0f1f3; position: relative; }
.app-preview-toolbar { height: 48px; flex: 0 0 48px; background: #fff; padding: 0 16px; font-size: 11px; color: #737982; }
.app-preview-toolbar > span { display: flex; align-items: center; gap: 7px; }
.app-preview-dot { width: 6px; height: 6px; border-radius: 50%; background: #8896aa; }
#app-refresh-preview { font-size: 10px; color: #7c838d; }
#app-preview-empty { padding: 10px 16px; font-size: 10px; color: #898e95; background: #f4f5f7; }
.app-preview-pane:has(#app-preview[hidden]) { background: radial-gradient(ellipse at 50% 45%,#fff 0%,#f1f2f4 65%); }
.app-preview-pane:has(#app-preview[hidden]) #app-preview-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: transparent; font-size: 12px; letter-spacing: .04em; padding: 24px; text-align: center; }
.app-preview-pane:has(#app-preview[hidden]) #app-preview-empty::before { content: '✳'; display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid #dfe3e8; border-radius: 24px; background: #fff9; font-size: 45px; color: #77879d; box-shadow: 0 10px 40px #727e900c,0 0 0 18px #fff7,0 0 0 19px #e7eaed66; transform: rotate(-8deg); }
#app-preview { flex: 1; min-height: 0; height: auto; background: #fff; }
#app-preview[hidden] { display: none; }
.app-settings { background: transparent; padding: 0 4px; border: 0; border-radius: 0; }
.app-settings summary { font-size: 11px; font-weight: 500; color: #7e838b; padding: 10px 0; }
#page-apps .app-settings .hint { font-size: 11px; }
.app-settings-grid { padding-bottom: 20px; }
#page-apps .app-settings label { font-size: 12px; }
@media(max-width:1100px) and (min-width:761px) {
 .app-workspace { grid-template-columns: minmax(260px,.9fr) minmax(0,1fr); gap: 12px; }
 #page-apps .app-heading > p { display: none; }
}
@media(max-width:760px) {
 #page-apps .app-heading { margin: 12px 0 20px; }
 #page-apps .app-heading h1 { font-size: 24px; gap: 8px; }
 #page-apps .app-heading > p { display: none; }
 .app-toolbar { gap: 6px; padding-bottom: 12px; }
 .app-toolbar select { flex: 1 1 160px; width: 140px; }
 #app-new { padding-inline: 10px !important; }
 #app-publish { margin-left: 0; }
 .app-document { padding-block: 12px; }
 .app-tabs { margin: 0 0 12px; gap: 0; padding: 4px; background: #e9ecf0; border-radius: 9px; }
 .app-tabs button { border: 0; background: transparent; font-size: 12px; min-height: 36px; color: #818790; }
 .app-tabs [aria-selected=true] { background: white; color: #31425a; box-shadow: 0 1px 4px #1925360d; border-radius: 6px; }
 .app-workspace { display: block; }
 .app-chat-pane,.app-preview-pane { height: 630px; }
 .app-messages { max-height: none; }
 .app-workspace[data-tab=chat] .app-preview-pane,.app-workspace[data-tab=preview] .app-chat-pane { display: none; }
}

.app-message-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; margin-top: 7px; }
.from-assistant .app-message-body { white-space: normal; }
.app-message-body ul, .app-message-body ol { padding-left: 20px; margin: 8px 0; }
.app-message-body h1, .app-message-body h2, .app-message-body h3 { font-size: 13px; margin: 14px 0 6px; }
.app-message-body pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }