[hidden]{display:none!important}button,input,textarea,select{font:inherit}button{min-height:40px;padding:var(--u2) var(--u4);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer}button:hover{background:var(--surface-hover)}button:disabled{opacity:.6;cursor:wait}.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.primary:hover{background:var(--accent);filter:brightness(.94)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,select,textarea{width:100%;min-width:0;padding:var(--u3);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text)}textarea{resize:vertical;max-height:30dvh}label{display:block;margin:var(--u3) 0 var(--u2);font-weight:600}.inline{display:flex;gap:var(--u2);align-items:center;font-weight:400}.inline input{width:auto}.topbar{max-width:var(--content-max);margin:auto;padding:var(--u4) var(--u5);display:flex;align-items:center;justify-content:space-between;gap:var(--u3)}.topbar strong{font-size:1.25rem}.topbar p{margin:var(--u1) 0 0;color:var(--text-2);font-size:.85rem}.english{font-size:.75rem;letter-spacing:.12em;color:var(--text-2)}.notice{padding:var(--u2) var(--u4);text-align:center;background:var(--accent-bg);color:var(--accent-text);font-size:.85rem}main{max-width:1000px;margin:var(--u5) auto;padding:0 var(--u4)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card)}.login-panel{max-width:480px;margin:var(--u6) auto;padding:var(--u5)}h1{font-size:1.25rem;margin:0 0 var(--u2)}h2{font-size:1.15rem}h3{font-size:1rem}.login-panel .primary{width:100%;margin-top:var(--u3)}p{line-height:1.6}.muted,.draft-note{color:var(--text-2);font-size:.85rem}.chat-toolbar{padding:var(--u4);display:flex;justify-content:space-between;align-items:center;gap:var(--u3)}.chat-toolbar p{margin:0;color:var(--text-2);font-size:.85rem}#timeline{height:clamp(220px,42dvh,560px);overflow:auto;padding:var(--u4);overscroll-behavior:contain}#history{display:block;margin:0 auto var(--u4)}#empty{text-align:center;color:var(--text-2)}.message{max-width:82%;width:fit-content;margin:var(--u3) auto var(--u3) 0}.message.mine{margin-left:auto;margin-right:0}.bubble{padding:var(--u3) var(--u4);border-radius:var(--radius-card);border:1px solid var(--border);background:var(--surface-2);white-space:pre-wrap;overflow-wrap:anywhere}.mine .bubble{background:var(--accent-bg)}.meta{font-size:.8rem;color:var(--text-2);margin-top:var(--u1);overflow-wrap:anywhere}.mine .meta{text-align:right}.date-divider{text-align:center;color:var(--text-2);font-size:.8rem;margin:var(--u5) 0 var(--u3)}a{color:var(--accent-text);text-underline-offset:3px}#compose{padding:var(--u3) var(--u4);border-top:1px solid var(--border)}#compose label{margin-top:0}.compose-meta,.compose-actions,.actions{display:flex;justify-content:space-between;gap:var(--u2);flex-wrap:wrap;margin-top:var(--u2)}.compose-meta{color:var(--text-2);font-size:.8rem}.compose-actions{justify-content:flex-end}.draft-note{padding:0 var(--u4);margin:0 0 var(--u3)}#status{min-height:1.5em;overflow-wrap:anywhere;color:var(--text-2)}dialog{max-width:480px;width:calc(100% - 32px);max-height:90dvh;overflow:auto;border:1px solid var(--border-strong);border-radius:var(--radius-card);padding:var(--u5);background:var(--surface);color:var(--text)}dialog::backdrop{background:var(--border-strong)}#settings-status{color:var(--text-2)}@media(max-width:480px){main{padding:0 var(--u2);margin:var(--u3) auto}.topbar{padding:var(--u3)}.english{display:none}.chat-toolbar{padding:var(--u3)}.message{max-width:92%}.login-panel{padding:var(--u4);margin:var(--u4) auto}#timeline{padding:var(--u3)}button{min-height:44px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
[data-theme] textarea::placeholder{color:var(--text-2);opacity:1}
@media(pointer:coarse){button{min-height:44px;min-width:44px}}
#tools{max-width:760px}details{border:1px solid var(--border);border-radius:var(--radius);padding:var(--u3);margin-block:var(--u3)}summary{cursor:pointer;font-weight:600;padding:var(--u2)}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--u3)}.device-row{display:flex;align-items:center;justify-content:space-between;gap:var(--u3);padding:var(--u3) 0;border-bottom:1px solid var(--border)}pre{font-family:var(--font-mono);font-size:.85rem;white-space:pre-wrap;overflow-wrap:anywhere}#search-results p{white-space:pre-wrap;overflow-wrap:anywhere;border-bottom:1px solid var(--border);padding:var(--u2)}#tools button{margin-block:var(--u1)}#tools-status{color:var(--text-2)}@media(max-width:480px){.topbar{align-items:flex-start}.topbar>.actions{flex-direction:column;align-items:stretch;max-width:45%;margin:0}.device-row{flex-direction:column;align-items:stretch}.two-columns{grid-template-columns:1fr}#tools{padding:var(--u3)}}
@media(max-width:480px){.chat-toolbar{align-items:stretch;flex-direction:column}.chat-toolbar h1{white-space:nowrap}.chat-toolbar>button{align-self:flex-end}.topbar>div{min-width:0}.topbar>button{flex-shrink:0}}

/* 既存utility意味色を使い、見出し・枠・フォーカスでも失敗を伝える。 */
.login-error{margin-block:var(--u4);padding:var(--u3) var(--u4);border:1px solid var(--danger);border-inline-start-width:var(--u1);border-radius:var(--radius);background:var(--danger-bg);color:var(--danger);overflow-wrap:anywhere}.login-error strong{display:block}.login-error p{margin:var(--u2) 0 0}

/* Studio準備版：既存utilityの骨格とSHIROYORIのブランド面。 */
body{min-height:100dvh;font-size:var(--fs-body);line-height:var(--lh)}
.skip-link{position:absolute;inset-block-start:var(--u2);inset-inline-start:var(--u2);z-index:var(--z-overlay);background:var(--surface);padding:var(--u3);transform:translateY(-200%)}.skip-link:focus{transform:none}
.topbar{max-width:none;padding:var(--u2) var(--u5);border-bottom:1px solid var(--border);background:var(--surface)}
.studio-brand{display:flex;align-items:center;gap:var(--u5);min-width:0}.studio-logo{display:inline-flex;background:var(--studio-logo-surface);border-radius:var(--radius);padding:var(--u1) var(--u2)}.studio-logo img{width:96px;height:auto;display:block}.workspace-caption,.eyebrow{font-size:var(--fs-label);letter-spacing:.12em;color:var(--text-2)}
.notice{font-size:var(--fs-label);background:var(--surface-2);border-bottom:1px solid var(--border);color:var(--text-2)}.environment-label{font-weight:700;color:var(--accent-text);margin-right:var(--u2)}
.workspace-layout{display:flex;max-width:var(--app-max);margin:auto;min-height:calc(100dvh - 180px)}
.workspace-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--u7);width:100%;padding:var(--u6) var(--u7)}
.welcome-panel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--u5);max-width:480px;justify-self:center;padding:var(--u5)}.welcome-icon{border-radius:var(--radius-card);width:144px;aspect-ratio:1}.welcome-panel h1{font-size:clamp(24px,2.3vw,36px);line-height:1.5;letter-spacing:.06em;color:var(--accent-text);font-weight:600}.welcome-panel p{color:var(--text-2)}.privacy-label{display:inline-block;background:var(--accent-bg);color:var(--accent-text);padding:var(--u2) var(--u3);border-radius:var(--radius);font-size:var(--fs-label)}
.workspace-content main{max-width:100%;width:100%;padding:0;margin:0;min-width:0}.login-panel{width:100%;padding:var(--u6);margin:var(--u5) auto;box-shadow:var(--shadow)}.login-panel h1{font-weight:600;margin-block-end:var(--u4)}
.workspace-nav{flex:0 0 232px;display:flex;flex-direction:column;background:var(--studio-nav);color:var(--studio-nav-text);padding:var(--u6) var(--u4);gap:var(--u5)}.product-brand{display:flex;gap:var(--u3);align-items:center;padding:0 var(--u2)}.product-brand img,.conversation-heading img{border-radius:var(--radius-card);width:48px;height:48px;flex-shrink:0}.product-brand strong{display:block;font-size:var(--fs-h1)}.product-brand span{display:block;font-size:var(--fs-label);letter-spacing:.1em}.nav-caption{font-size:var(--fs-label);padding:0 var(--u2);margin:0}.workspace-nav nav{display:grid;gap:var(--u2)}.workspace-nav nav button{display:flex;gap:var(--u3);align-items:center;background:var(--studio-nav);color:var(--studio-nav-text);border-color:var(--studio-nav);text-align:left;min-height:44px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}.workspace-nav nav button span{font-family:var(--font-mono);font-size:var(--fs-label)}.workspace-nav nav button:hover,.workspace-nav nav button[aria-current="page"]{background:var(--studio-nav-selected);color:var(--studio-nav-selected-text)}.workspace-nav nav button:focus-visible{outline-color:var(--studio-nav-selected)}
.workspace-account{margin-top:auto;padding:var(--u4) var(--u2) 0;border-top:1px solid var(--brand-blue);overflow-wrap:anywhere}.account-role{font-size:var(--fs-label);display:block}.workspace-account strong{display:block}.workspace-account p{font-size:var(--fs-label);margin-bottom:0}
.signed-in .workspace-content{display:block;padding:var(--u5);min-width:0}.signed-in main{max-width:1120px;margin:auto}.chat-panel{overflow:hidden;box-shadow:var(--shadow)}.chat-toolbar{padding:var(--u5);background:var(--surface)}.conversation-heading{display:flex;gap:var(--u4);align-items:center;min-width:0}.conversation-heading h1{font-weight:600}.conversation-heading .eyebrow{font-size:var(--fs-label);margin-bottom:var(--u1)}.conversation-heading #identity{margin-top:var(--u1);overflow-wrap:anywhere}#timeline{height:clamp(240px,46dvh,760px);padding:var(--u5);background:var(--surface-2)}.bubble{background:var(--surface);padding:var(--u3) var(--u4)}.mine .bubble{background:var(--accent-bg);color:var(--accent-text);border-color:var(--accent-bg)}.date-divider{font-variant-numeric:var(--num)}#compose{padding:var(--u4) var(--u5);background:var(--surface)}.compose-help{border:0;border-top:1px solid var(--border);border-radius:0;margin:0;padding:var(--u2) var(--u4);font-size:var(--fs-label)}.compose-help summary{font-weight:400;color:var(--text-2)}
.workspace-footer{display:flex;justify-content:space-between;gap:var(--u3);padding:var(--u4) var(--u5);border-top:1px solid var(--border);font-size:var(--fs-label);color:var(--text-2)}
#tools>.chat-toolbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface);padding:var(--u3) 0;border-bottom:1px solid var(--border)}
@media(max-width:640px){.topbar #tools-open{display:none}#tools>.chat-toolbar{top:0}}
dialog{box-shadow:var(--shadow-pop)}dialog h2{font-weight:600}dialog details[open]>summary{color:var(--accent-text);margin-bottom:var(--u3)}#notification-form h3{padding:var(--u3);border-left:var(--u1) solid var(--accent);background:var(--surface-2);margin:var(--u5) 0 var(--u3)}.device-row{border:1px solid var(--border);padding:var(--u4);border-radius:var(--radius);margin:var(--u3) 0}.device-row span{min-width:0;overflow-wrap:anywhere}#admin-state{font-family:var(--font-sans);line-height:1.8;padding:var(--u4);border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius)}
@media(max-width:1280px){.workspace-content{padding:var(--u5);gap:var(--u5)}.workspace-nav{flex-basis:208px}.welcome-panel{padding:var(--u3)}.workspace-caption{display:none}}
@media(max-width:900px){.workspace-layout{flex-direction:column}.workspace-nav{flex-basis:auto;padding:var(--u3) var(--u4);gap:var(--u3)}.workspace-nav .product-brand,.nav-caption,.workspace-account{display:none}.workspace-nav nav{display:flex;flex-wrap:wrap;gap:var(--u2)}.workspace-nav nav button{flex:1 1 auto;justify-content:center;padding:var(--u2)}.workspace-nav nav button span{display:none}.workspace-content{gap:var(--u4)}.welcome-panel h1{font-size:24px}.welcome-icon{width:96px}.signed-in .workspace-content{padding:var(--u4)}}
@media(max-width:640px){.workspace-content{display:block;padding:var(--u4)}.welcome-panel{display:flex;flex-direction:row;gap:var(--u4);padding:var(--u2);margin:0 0 var(--u4);max-width:none}.welcome-icon{width:64px;flex-shrink:0}.welcome-panel h1{font-size:20px}.welcome-panel h1 br{display:none}.welcome-panel p:not(.eyebrow),.privacy-label{display:none}.welcome-panel .eyebrow{font-size:10px;margin:0 0 var(--u1)}.login-panel{padding:var(--u4);margin:var(--u3) 0}.topbar{padding:var(--u2) var(--u3);align-items:center}.topbar>.actions{flex-direction:row;max-width:none}.studio-logo img{width:88px}.topbar button{font-size:var(--fs-label);padding:var(--u2)}.signed-in .workspace-content{padding:var(--u2)}.chat-toolbar{padding:var(--u4);flex-direction:row;align-items:center}.conversation-heading{gap:var(--u2)}.conversation-heading img{width:32px;height:32px}.conversation-heading h1{font-size:var(--fs-h2);white-space:normal}.chat-toolbar>button{align-self:center;padding:var(--u2);font-size:var(--fs-label);flex-shrink:0}.conversation-heading .eyebrow{display:none}#timeline{padding:var(--u3);height:42dvh}#compose{padding:var(--u3)}.workspace-footer{padding:var(--u3);flex-direction:column;gap:var(--u1)}.workspace-nav{padding:var(--u2)}.workspace-nav nav button{font-size:var(--fs-label)}.two-columns{grid-template-columns:1fr}}

/* 接続状態とアプリ追加ダイアログ。既存トークンだけで表示する。 */
.network-state{max-width:var(--app-max);margin:var(--u2) auto;padding:var(--u2) var(--u5);color:var(--text-2);font-size:var(--fs-label);overflow-wrap:anywhere}.network-state.offline{color:var(--warning);background:var(--warning-bg);border-inline-start:var(--u1) solid var(--warning)}#app-support{width:min(640px,94vw);max-height:88dvh;overflow:auto}#app-support>.chat-toolbar{position:sticky;top:0;background:var(--surface);z-index:var(--z-sticky);padding:var(--u2) 0;border-bottom:1px solid var(--border)}#app-support h3{font-size:var(--fs-h2);margin-block-start:var(--u5)}#app-support-status{padding:var(--u3);background:var(--surface-2);border-radius:var(--radius);overflow-wrap:anywhere}@media(max-width:640px){.network-state{padding:var(--u2) var(--u3)}#app-support{padding:var(--u3)}}
/* 入力・履歴の操作支援。色・余白は既存のutilityトークンを使う。 */
#timeline{overflow-anchor:none}.history-status{padding:var(--u2) var(--u4);color:var(--text-2);font-size:var(--fs-label)}.history-status:empty{display:none}#body{min-height:calc(var(--u7)*2);max-height:calc(var(--u7)*4);resize:vertical;scroll-margin-block:var(--u4)}.compose-error{margin:var(--u2) 0;padding:var(--u2) var(--u3);border-inline-start:var(--u1) solid var(--danger);border-radius:var(--radius);color:var(--danger);background:var(--danger-bg)}#body[aria-invalid="true"]{border-color:var(--danger)}dialog,#app-support{max-height:min(88dvh,calc(var(--visible-viewport-height,100dvh) - var(--u6)))}#tools>.chat-toolbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface)}
/* 履歴の移動ボタンと表示範囲の案内を、カード端に付けず履歴状態と同じ余白に揃える。 */
/* 履歴欄と入力欄の境目に、接続・表示範囲・操作結果と履歴の操作をまとめる。 */
.chat-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--u2) var(--u3);padding:var(--u2) var(--u4);background:var(--surface-2);border-block:1px solid var(--border);font-size:var(--fs-label);font-variant-numeric:var(--num)}.chat-state{display:flex;flex-wrap:wrap;align-items:center;gap:var(--u1) var(--u2);min-width:0;overflow-wrap:anywhere}.chat-state>p{margin:0;padding:0}.chat-state>*+*::before{content:"·";margin-inline-end:var(--u2);color:var(--text-2)}.chat-bar>.actions{margin:0;justify-content:flex-end}.chat-state>#status{min-height:0}.chat-state>#status:empty{display:none}#window-state{color:var(--text-2)}#window-state:empty{display:none}@media(max-width:900px){.chat-state{flex-direction:column;align-items:flex-start}.chat-state>*+*::before{content:none}}
.compose-meta{align-items:center}.compose-meta #keyboard-hint{margin-inline-start:auto}.compose-meta .compose-help{border:0;margin:0;padding:0}.compose-meta .compose-help[open]{flex-basis:100%}.compose-meta .compose-help summary{padding:var(--u1) 0}.compose-meta .draft-note{padding:0;margin:var(--u1) 0 0}

@media(pointer:coarse){#app-support button,#app-support-open{min-height:44px}}
.bubble{font-family:var(--font-chat)}

/* デスクトップのログイン後は表示領域の高さに収め、スクロールを履歴欄だけにする。会話の見出しと入力欄の見出しは読み上げ用にだけ残す。高さが足りない窓では入力欄を切らず、内容部分だけをスクロールする。 */
@media(min-width:901px){body.signed-in{display:flex;flex-direction:column;height:100dvh}.signed-in .topbar,.signed-in .notice,.signed-in .network-state{flex:none;width:100%}.signed-in .notice{padding-block:var(--u1)}.signed-in .network-state{margin-block:0;padding-block:var(--u1)}.signed-in .workspace-layout{flex:1 1 auto;min-height:0;width:100%}.signed-in .workspace-nav{overflow-y:auto}.signed-in .workspace-content{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:var(--u3) var(--u5)}.signed-in main{display:flex;flex-direction:column;flex:1 1 auto;width:100%;margin:0 auto}.signed-in .chat-panel{display:flex;flex-direction:column;flex:1 1 auto;overflow:clip}.signed-in .chat-panel>*{flex:none}.signed-in #timeline{flex:1 1 0;height:auto;min-height:160px}.signed-in .workspace-footer{display:none}
.signed-in .chat-panel>.chat-toolbar,.signed-in #compose>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.signed-in .chat-bar{padding-inline:var(--u5)}.signed-in #compose{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--u3);align-items:center;padding:var(--u3) var(--u5)}.signed-in #compose>label,.signed-in #body,.signed-in #compose-error{grid-column:1/-1}.signed-in .compose-actions{align-self:start}
.signed-in .topbar,.signed-in .network-state:not(.offline){display:none}.signed-in .workspace-layout,.signed-in main{max-width:none}.signed-in .message{max-width:min(82%,60em)}.signed-in #body{min-height:calc(var(--u7) + var(--u4))}}
/* Studioロゴはログイン後のメニュー下端に小さく置く。900px以下は従来の上部ヘッダーを使う。 */
.workspace-studio{padding:var(--u4) var(--u2) 0}@media(max-width:900px){.workspace-studio,#nav-app{display:none}}
/* ログイン中はお知らせ（#status）を操作行へ移す（shell.js）。利用者表示の近くにログアウトを置く。 */
.workspace-account button{width:100%;margin-top:var(--u3);background:var(--studio-nav);color:var(--studio-nav-text);border-color:var(--brand-blue);font-size:var(--fs-label)}.workspace-account button:hover{background:var(--studio-nav-selected);color:var(--studio-nav-selected-text)}.workspace-account button:focus-visible{outline-color:var(--studio-nav-selected)}
/* デスクトップの画面（設定・通知・アプリ等）は右側のパネルとして開き、後ろの画面を薄く見せる。900px以下は従来の中央表示。 */
@media(min-width:901px){dialog,dialog#app-support{margin:0 0 0 auto;width:min(520px,100%);max-width:none;height:100dvh;max-height:none;border-radius:0;border-block:0;border-inline-end:0}dialog::backdrop{background:var(--studio-nav);opacity:.55}}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){dialog[open]{animation:panel-in var(--dur) var(--ease)}}@keyframes panel-in{from{transform:translateX(var(--u5));opacity:0}}