/* YoMinds workspace components.
 * Card composition adapted from shadcn/ui Card (MIT, Copyright 2023 shadcn):
 * flex column, deliberate spacing, bordered surface, separate header/action/footer.
 * Source: https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/card.tsx
 * Full upstream notice: assets/licenses/shadcn-ui.txt.
 */
:root {
  --workspace-gap:20px;
  --workspace-control:40px;
  --workspace-card-padding:20px;
  --warning-tint:color-mix(in srgb,var(--warning) 12%,var(--panel));
}
button { line-height:1.4; }
button > span:not([data-icon]),label > span { min-width:0; }
:is(h1,h2,h3,h4,p,label,button,small,strong,summary) { overflow-wrap:anywhere; }
:is(input,select,textarea,button):disabled { opacity:.6; }
:is(.mechanics-shell,.party-shell,.mechanics-card,.room-card-copy,.friend-card-copy,.music-now,.chat-heading,.template-copy) { min-width:0; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select { min-height:var(--workspace-control); }
input[type=radio] { width:17px; min-width:17px; height:17px; min-height:17px; padding:0; margin:0; accent-color:var(--primary); }
.badge { max-width:100%; white-space:normal; line-height:1.45; }
.badge [data-icon],.badge > .icon { flex-shrink:0; }
/* Authentication labels are complete words, including on touch devices. */
.auth-card .tabs { display:grid; grid-template-columns:minmax(0,.65fr) repeat(2,minmax(0,1fr)); align-items:stretch; gap:4px; padding:4px; }
.auth-card .tab { min-width:0; min-height:44px; padding:8px 4px; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.topbar { gap:16px; height:64px; }
.top-actions .language { white-space:nowrap; overflow-wrap:normal; padding-inline:4px; }
.workspace { height:calc(100dvh - 64px); min-height:0; grid-template-columns:240px minmax(0,1fr); }
.brand-inline { width:200px; }
.sidebar { gap:22px; padding:20px 14px 16px; }
.home-button,.hub-button { font-size:13px; min-height:42px; }
.sidebar-start > .primary { min-height:44px; margin-bottom:14px; }
.sidebar .eyebrow { font-size:10px; }
.sidebar-tip p,.sidebar-help-link { font-size:12px; }
.sidebar-legal-links { flex-wrap:wrap; }
.sidebar-legal-links a { font-size:10px; }
.chat-panel,html:not(.water-disabled) .chat-panel { margin:16px; background:var(--panel); box-shadow:var(--shadow-sm); }
.chat { min-height:0; }
.chat-header { align-items:flex-start; gap:12px; padding:18px 22px; flex:none; }
.chat-header h2 { font-size:19px; line-height:1.4; }
.chat-title-line { gap:8px; }
.chat-actions { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.chat-actions button { font-size:12px; min-height:36px; }
.room-details { margin-top:5px; font-size:12px; }
.room-details > summary { width:fit-content; min-height:26px; color:var(--muted); cursor:pointer; }
.room-details > summary:hover { color:var(--accent); }
.room-details[open] { padding-bottom:4px; }
.room-details[open] { max-height:180px; overflow:auto; }
.room-details #chatMeta { font-size:12px; line-height:1.5; }
.room-agents { max-height:120px; overflow:auto; }
.room-agent-chip { min-width:0; max-width:100%; font-size:12px; }
.room-agent-chip > span:not([class]) { overflow-wrap:anywhere; }
.room-mode-tabs { min-height:44px; gap:4px; margin:12px 20px 8px; padding:4px; max-width:calc(100% - 40px); overflow:auto; }
.room-mode-tab { flex:none; min-height:36px; padding:8px 14px; font-size:13px; }
.room-control-bar { padding:8px 20px 12px; gap:10px; flex:none; flex-wrap:wrap; }
.room-tool-buttons { flex-wrap:wrap; gap:6px; margin-left:0; }
.room-tool-button { min-height:36px; padding:8px 12px; font-size:12px; border:1px solid var(--line); background:var(--panel); }
.room-tool-button.active { border-color:var(--accent); background:var(--tint); }
.room-tool-button.is-live { position:relative; border-color:color-mix(in srgb,var(--success) 42%,var(--line)); }
.room-tool-button.is-live::after { content:""; position:absolute; top:6px; right:6px; width:6px; height:6px; border:1px solid var(--panel); border-radius:50%; background:var(--success); }
.room-character-summary { min-width:0; flex-wrap:wrap; }
.character-summary-button { max-width:100%; font-size:12px; }
.character-summary-button span { max-width:240px; }
.turn-summary { white-space:normal; font-size:12px; }
.room-music-player[data-empty="true"] { display:none; }
.room-music-player { flex:none; margin:0 20px 10px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--sidebar); padding:10px 12px; flex-wrap:wrap; }
.music-now { min-width:90px; }
.music-now strong { white-space:normal; overflow-wrap:anywhere; }
.music-timeline { flex:1 1 160px; min-width:100px; }
.music-player-status { flex-basis:100%; }
.room-content { display:flex; flex:1; min-height:0; min-width:0; overflow:hidden; background:var(--bg); }
.room-content > .message-list { flex:1; min-width:0; min-height:0; padding:24px; }
.room-side-panels { width:clamp(360px,52%,680px); min-width:0; min-height:0; background:var(--sidebar); border-left:1px solid var(--line); overflow:auto; scrollbar-gutter:stable; }
.has-youtube-video:not(.has-tool-drawer) .room-side-panels { width:min(320px,100%); max-width:320px; }
.room-side-panels .music-video-panel { width:100%; max-width:320px; align-self:center; }
.room-side-panels .music-youtube-host { max-width:100%; }
.room-side-panels .room-tools-drawer { position:static; width:100%; height:auto; min-height:100%; max-width:none; max-height:none; border:0; border-radius:0; margin:0; overflow:visible; background:transparent; }
.room-tool-header { position:sticky; top:0; z-index:2; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--sidebar); }
.room-tool-header h3 { font-size:16px; margin:0; }
.room-side-panels .room-tools-drawer .hub-mechanics-panel { padding:20px; overflow:visible; background:transparent; }
.room-tools-drawer .mechanics-shell { gap:16px; }
.mechanics-heading { gap:16px; }
.mechanics-heading h3 { font-size:19px; }
.mechanics-heading p { font-size:13px; }
.mechanics-grid,.room-tools-drawer .mechanics-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.mechanics-card,.room-tools-drawer .mechanics-card { display:flex; flex-direction:column; gap:14px; padding:var(--workspace-card-padding); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.mechanics-card h4 { margin:0; font-size:16px; line-height:1.4; }
.mechanics-card p { margin:0; font-size:13px; line-height:1.65; }
.mechanics-card label { color:var(--text); font-size:13px; gap:7px; }
.mechanics-card input,.mechanics-card textarea,.mechanics-card select { padding:10px 12px; font-size:14px; }
.mechanics-card form,.mechanics-card > form,.room-tools-drawer .mechanics-card > form,.room-tools-drawer form.mechanics-card { display:grid; gap:14px; }
.mechanics-shell > form,.hub-mechanics-panel > form { display:grid; gap:14px; padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.mechanics-shell > form > button { justify-self:start; min-height:40px; }
.mechanics-shell > form > label { font-size:13px; }
.tool-settings { border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); overflow:hidden; }
.tool-settings > summary { padding:14px 16px; font-size:14px; cursor:pointer; color:var(--muted); }
.tool-settings > summary:hover { background:var(--hover); color:var(--text); }
.tool-settings[open] > summary { border-bottom:1px solid var(--line); }
.tool-settings > form { display:grid; gap:14px; padding:16px; }
.tool-settings label { font-size:13px; }
.tool-context { padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.tool-context h4 { margin:0 0 8px; font-size:15px; }
.tool-context p { margin:0; line-height:1.65; font-size:13px; white-space:pre-wrap; }
.mechanics-card form > button,.mechanics-actions button { min-height:40px; font-size:13px; }
.mechanics-actions { gap:8px; }
.mechanics-status { font-size:13px; line-height:1.6; padding:12px 14px; }
.hub-events { gap:10px; }
.character-row,.wiki-entry,.hub-event { padding:13px; font-size:13px; min-width:0; }
.character-row > div,.hub-event > div { min-width:0; }
.character-row { flex-wrap:wrap; }
.hub-event p,.wiki-entry p { font-size:13px; }
.hub-event small,.character-row small { font-size:12px; }
.poll-create { padding:16px; }
.poll-create summary { font-size:14px; }
.poll-options { gap:10px; }
.vote-choice { padding:14px; min-height:76px; }
.vote-choice-label { font-size:14px; line-height:1.55; }
.vote-choice-main { min-width:0; }
.vote-choice-label { min-width:0; }
.vote-selected-label,.vote-summary { font-size:12px; }
.reading-progress-heading { font-size:14px; }
.party-shell { gap:16px; }
.party-heading { padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.party-heading strong { font-size:20px; }
.party-heading > span { font-size:12px; }
.party-shell .hint,.party-shell label,.party-shell > p { font-size:13px; line-height:1.65; }
.party-shell > button { min-height:40px; justify-self:start; font-size:13px; }
.party-settings,.party-history { padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.party-settings > summary,.party-history > summary { font-size:14px; cursor:pointer; }
.party-settings form { margin-top:16px; gap:14px; }
.party-settings form > div { display:grid; gap:14px; }
.party-shell form { gap:14px; }
.party-question { padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); }
.party-question > strong { font-size:18px; line-height:1.6; }
.party-choices { gap:10px; margin-top:16px; }
.party-choice { min-height:64px; padding:14px; font-size:14px; }
.party-choice-key { flex:none; }
.party-choice-copy { min-width:0; }
.party-choice-copy small { font-size:12px; }
.party-roster { gap:10px; }
.party-roster li { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px; min-width:0; font-size:13px; }
.party-roster li > :first-child { min-width:0; flex:1 1 150px; }
.party-person { min-width:0; max-width:100%; }
.party-person > span:last-child { min-width:0; overflow-wrap:anywhere; }
.party-member-status { font-size:12px; }
.party-role { font-size:14px; padding:16px; }
.party-results li { padding:13px; font-size:13px; }
.party-results li > span:last-child { min-width:0; }
.room-composer { margin:12px 20px 16px !important; }
.room-composer textarea { min-height:54px; max-height:160px; font-size:14px; }
.composer-toolbar { gap:10px; flex-wrap:wrap; padding:8px 12px; }
.composer-context { flex:1; min-width:0; font-size:11px; }
.composer-toolbar .primary { min-height:36px; font-size:12px; }
.room-composer-input { min-width:0; }
.message,.message-content,.message-body { min-width:0; overflow-wrap:anywhere; }
.message-list { overscroll-behavior:contain; }
.assistant-table-wrap,pre { max-width:100%; overflow:auto; }
.conversation-empty { padding:24px 16px; }
.conversation-empty p { font-size:13px; }
.landing-inner { padding:40px; }
.landing-hub-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr)); gap:16px; }
.landing-hub-grid button { min-height:205px; padding:22px; gap:12px; }
.landing-hub-grid strong { font-size:16px; line-height:1.5; }
.landing-hub-grid small { font-size:13px; line-height:1.7; }
.landing-action strong { font-size:15px; }
.landing-action small { font-size:13px; }
.landing-action { padding:20px; }
.discovery-view { padding:32px; }
.discovery-header { align-items:flex-start; }
.discovery-header h1 { font-size:30px; }
.discovery-header p { font-size:14px; }
.discovery-controls { gap:12px; flex-wrap:wrap; }
.discovery-controls .room-search { min-width:0; flex:1 1 220px; }
.discovery-controls .room-search input { font-size:14px; padding-block:10px !important; }
.discovery-controls #roomFilter { flex:0 1 160px; font-size:13px; }
.discovery-controls #roomCount { min-width:unset; width:auto; height:auto; padding:8px; white-space:normal; }
.discovery-room-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,275px),1fr)); gap:16px; }
.discovery-room-grid .room-card { padding:18px; min-height:150px; border-radius:var(--radius-md); }
.discovery-room-grid .room-card h3 { white-space:normal; font-size:16px; line-height:1.55; }
.room-card-head,.room-card-foot { flex-wrap:wrap; }
.room-card-foot { gap:8px; font-size:12px; }
.empty-rooms { padding:32px 20px; }
.empty-rooms strong { font-size:16px; }
.empty-rooms p { font-size:13px; }
.empty-rooms-action { min-height:40px; font-size:13px; }
.friends-content { max-width:1000px; margin:auto; }
.friend-search { gap:12px; }
.friend-card { gap:12px; padding:16px; }
.friend-card-name,.friend-card strong { overflow-wrap:anywhere; }
.friend-card-name,.friend-card-bio { white-space:normal; }
.friend-card-bio { font-size:12px; }
.friend-card-actions button { font-size:12px; min-height:36px; }
.friend-card-actions { flex-wrap:wrap; }
.friend-tabs { overflow:auto; max-width:100%; gap:6px; }
.friend-tabs button { flex:none; min-height:40px; font-size:13px; }
.friend-list p { font-size:13px; }
.profile-modal,.create-modal { padding:28px; border-radius:var(--radius-lg); }
.modal-header h2 { line-height:1.35; }
.form-section { gap:16px; }
.form-section > legend { margin-bottom:12px; font-size:14px; }
.choice-chips { gap:8px; }
.choice-chip { max-width:100%; }
.choice-chip > input[type=radio] { width:100%; height:100%; }
.choice-chip span { font-size:13px; line-height:1.5; }
.select-menu { max-height:min(320px,42dvh); overflow:auto; overscroll-behavior:contain; z-index:15; }
.select-option { font-size:14px; min-height:42px; }
.model-tier-option { min-width:0; }
.model-tier-option strong { font-size:14px; line-height:1.5; }
.model-tier-option small,.tier-caption { font-size:12px; }
.privacy-option { gap:12px; }
.privacy-option > span { min-width:0; }
.privacy-option strong { font-size:14px; }
.privacy-option small { font-size:12px; line-height:1.6; }
.profile-avatar-editor,.profile-style-grid { min-width:0; }
.avatar-file-label { min-width:0; }
.avatar-file-label small { overflow-wrap:anywhere; }
.plan-card { min-width:0; }
.plan-card h3 { line-height:1.45; }
.auth-card .tab { font-size:13px; }
.welcome-action strong { font-size:15px; line-height:1.5; }
.welcome-action small { font-size:12px; line-height:1.65; }
.template-top { font-size:11px; }
.welcome-action { min-height:110px; }
.auth-error,.toast { overflow-wrap:anywhere; }

/* Screen sharing is a workspace with a preview and distinct local controls. */
.screen-workspace { display:grid; gap:18px; min-width:0; }
.screen-workspace-header { display:flex; align-items:flex-start; gap:12px; }
.screen-workspace-header > [data-icon],.screen-workspace-header > .icon,.screen-workspace-icon { flex:none; display:grid; place-items:center; width:42px; height:42px; padding:10px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--tint); color:var(--accent); }
.screen-workspace-header > div { min-width:0; }
.screen-workspace-header h3 { margin:0 0 6px; font-size:20px; line-height:1.4; }
.screen-workspace-header p { margin:0; font-size:13px; line-height:1.65; color:var(--muted); }
.screen-viewer { overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--panel); box-shadow:var(--shadow-sm); }
.screen-viewer-bar { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--panel); font-size:12px; }
.screen-viewer-bar > span:first-child { display:inline-flex; align-items:center; gap:7px; }
.screen-share-status { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:99px; color:var(--muted); background:var(--hover); font-size:11px; }
.screen-share-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.screen-share-status[data-active="true"],.screen-share-status.is-live { background:var(--learning-tint); color:var(--success); }
.screen-viewer-stage { position:relative; display:grid; align-items:center; min-height:180px; aspect-ratio:16/9; background:#101722; color:#eaf0fa; }
.screen-workspace .screen-preview { display:block; width:100%; max-width:100%; height:100%; max-height:420px; aspect-ratio:16/9; margin:0; border:0; border-radius:0; background:#101722; object-fit:contain; }
.screen-workspace .screen-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; min-height:180px; padding:28px 20px; border:0; border-radius:0; background:radial-gradient(ellipse at 50% 15%,#32344a,#101722 75%); color:#eaf0fa; text-align:center; }
.screen-workspace .screen-empty > .icon { width:40px; height:40px; margin:0 0 6px; color:#b3baff; }
.screen-workspace .screen-empty strong { font-size:18px; line-height:1.45; }
.screen-workspace .screen-empty p { max-width:290px; margin:0; color:#a4aec3; font-size:12px; line-height:1.7; }
.screen-viewer-stage > .screen-empty { height:100%; }
.screen-controls { display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; }
.screen-controls button { min-height:42px; font-size:13px; }
.screen-controls > .hint { flex-basis:100%; }
.screen-workspace .screen-analysis-card { padding:20px; gap:14px; }
.screen-analysis-card h4 { font-size:16px; margin:0; }
.screen-analysis-card label { font-size:13px; }
.screen-analysis-card > button { justify-self:start; min-height:40px; font-size:13px; }
.screen-analysis-answer:empty { display:none; }
.screen-analysis-answer { font-size:13px; line-height:1.65; padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--sidebar); white-space:pre-wrap; overflow-wrap:anywhere; }
.screen-preview-caption { margin:0; font-size:12px; color:var(--muted); }
.screen-viewer-note { margin:0; padding:10px 14px; border-top:1px solid var(--line); font-size:12px; line-height:1.6; color:var(--muted); }
.screen-feedback { margin:0; padding:12px 14px; border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line)); border-radius:var(--radius-sm); background:var(--danger-tint); color:var(--danger); font-size:13px; line-height:1.6; }
.screen-viewer:fullscreen { display:flex; flex-direction:column; width:100%; height:100%; border:0; border-radius:0; }
.screen-viewer:fullscreen .screen-viewer-stage { flex:1; min-height:0; aspect-ratio:auto; }
.screen-viewer:fullscreen .screen-preview { max-height:none; height:100%; aspect-ratio:auto; }
.screen-viewer:fullscreen .screen-viewer-bar { flex:none; }
#chatView .room-content:has(.room-tools-drawer[data-tool="screen"]:not(.hidden)) > .message-list { display:none; }
#chatView .room-content:has(.room-tools-drawer[data-tool="screen"]:not(.hidden)) > .room-side-panels { width:100%; max-width:none; border:0; }
#chatView:has(.room-tools-drawer[data-tool="screen"]:not(.hidden)) > .room-composer { display:none; }
.room-tool-close-label { font-size:13px; }
.room-tools-drawer[data-tool="screen"] #closeRoomTool { width:auto; min-height:40px; padding:8px 12px; gap:7px; border:1px solid var(--line-strong); color:var(--text); background:var(--panel); }
.room-tools-drawer[data-tool="screen"] .screen-workspace { max-width:1120px; margin-inline:auto; }
@media (min-width:1101px) {
  .screen-workspace { grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr); align-items:start; }
  .screen-workspace-header { grid-column:1; }
  .screen-controls { grid-column:2; justify-content:flex-end; align-self:center; }
  .screen-workspace > .screen-feedback { grid-column:1 / -1; }
  .screen-viewer { grid-column:1; }
  .screen-analysis-card { grid-column:2; }
}

/* The board uses the same flexible room frame as every other tool. The former
 * implicit grid rows collided with the room tabs, notices and voice controls. */
#chatView:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) { display:flex; flex-direction:column; }
#chatView:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > .room-content { display:flex; }
#chatView .room-content:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > .room-side-panels { width:62%; order:0; border-right:1px solid var(--line); border-left:0; }
#chatView .room-content:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > .message-list { order:1; padding:20px; }
#chatView:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > .room-voice-panel { margin:0 20px 10px; }
#chatView:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > .room-music-player { padding:10px 12px; }
.room-tools-drawer[data-tool="board"] > .room-tool-header { position:sticky; top:0; right:auto; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--sidebar); }
.room-tools-drawer[data-tool="board"] > .room-tool-header h3 { display:block; }
.room-tools-drawer[data-tool="board"] .learning-board-header { flex-wrap:wrap; padding-right:0; }
.room-tools-drawer[data-tool="board"] .board-access { max-width:100%; font-size:12px; }
.room-tools-drawer[data-tool="board"] .learning-board-guidance { font-size:12px; }
.board-session-footer { flex-wrap:wrap; }
.board-session-footer > p { flex-basis:200px; }
.board-session-footer .learning-board-actions { margin-left:auto; }
.room-tools-drawer[data-tool="board"] .whiteboard-toolbar { gap:6px; width:100%; flex-wrap:wrap; }
.room-tools-drawer[data-tool="board"] .whiteboard-toolbar button { width:36px; min-height:36px; height:36px; }
.board-tool-group,.board-color-group { flex-wrap:wrap; }
#chatView.board-focused .room-content:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > .room-side-panels { width:100%; }
#chatView.board-focused:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > :is(.room-voice-panel,.room-music-player) { display:none; }

@media (min-width:1500px) {
  .room-tools-drawer .mechanics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1100px) and (min-width:721px) {
  .workspace { grid-template-columns:210px minmax(0,1fr); }
  .brand-inline { width:175px; }
  .workspace-location > span:first-child { display:none; }
  .room-side-panels { width:55%; }
  .room-side-panels .room-tools-drawer .hub-mechanics-panel { padding:14px; }
  :root { --workspace-card-padding:16px; }
  .chat-actions { flex-basis:auto; margin-left:0; }
  .chat-header { flex-wrap:wrap; }
  .chat-heading { flex:1 1 calc(100% - 60px); }
  .chat-actions { width:100%; }
  .landing-inner { padding:28px; }
}
@media (max-width:950px) and (min-width:721px) {
  #chatView .room-content:has(.room-tools-drawer:not(.hidden)) > .message-list { display:none; }
  #chatView .room-content:has(.room-tools-drawer:not(.hidden)) > .room-side-panels { width:100%; border:0; }
}
@media (max-width:720px) {
  :root { --workspace-gap:12px; --workspace-card-padding:16px; }
  .topbar { height:58px; padding:0 10px; gap:4px; }
  .brand-inline { width:auto; }
  .workspace { height:calc(100dvh - 58px); padding:8px; }
  .chat-panel,html:not(.water-disabled) .chat-panel { margin:0; }
  .chat-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:14px; }
  .chat-hub-icon { display:none; }
  .chat-header .chat-heading { grid-column:1 / -1; }
  .chat-header h2 { font-size:17px; }
  .chat-actions { grid-column:1 / -1; justify-content:flex-start; margin:0; width:auto; flex-basis:auto; }
  .chat-actions button { min-height:34px; font-size:12px; }
  .room-details { margin-top:3px; }
  .room-details[open] { max-height:180px; overflow:auto; }
  .room-mode-tabs { max-width:calc(100% - 24px); margin:8px 12px; padding:4px; min-height:42px; }
  .room-mode-tab { min-height:34px; padding:7px 12px; font-size:12px; }
  .room-control-bar { padding:4px 12px 10px; gap:6px; }
  .room-tool-button { min-height:34px; padding:7px 10px; font-size:12px; }
  .room-tool-buttons { flex:1 1 100%; width:100%; gap:5px; margin-left:0; }
  .room-character-summary { gap:6px; }
  #chatView:has(.room-tools-drawer[data-tool="characters"]:not(.hidden)) .room-character-summary { display:none; }
  .character-summary-button span { max-width:170px; }
  .room-music-player { margin:0 12px 8px; padding:8px; gap:8px; }
  .music-local-volume input { width:65px; }
  .music-timeline { order:3; flex-basis:100%; }
  .music-queue-toggle { padding:7px; }
  .music-queue-toggle #musicQueueLabel { display:none; }
  #chatView .room-content:has(.room-side-panels > :not(.hidden)) { display:flex; flex-direction:column; overflow:auto; }
  #chatView .room-content:has(.room-tools-drawer:not(.hidden)) > .message-list { display:none; }
  #chatView .room-content:has(.room-tools-drawer:not(.hidden)) > .room-side-panels { order:0; width:100%; flex:1; border:0; min-height:0; overflow:visible; }
  .room-side-panels { width:100%; border:0; overflow:visible; scrollbar-gutter:auto; }
  .room-side-panels .room-tools-drawer,.room-side-panels .room-tools-drawer[data-tool="characters"] { position:static; width:100%; height:auto; min-height:100%; max-height:none; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; overflow:visible; }
  .room-side-panels .room-tools-drawer .hub-mechanics-panel { padding:14px; }
  .room-tool-header { padding:12px 14px; }
  .room-tool-header h3 { font-size:15px; }
  .room-content > .message-list { padding:18px 14px; }
  .room-composer { margin:8px 12px 12px !important; }
  .room-composer textarea { min-height:44px; max-height:100px; font-size:16px; }
  #chatView .room-composer-input textarea,#chatView:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) .room-composer-input textarea { min-height:60px; height:60px; max-height:100px; }
  .room-composer .composer-context { display:none; }
  .room-composer .composer-toolbar { justify-content:flex-end; padding:6px 8px; }
  /* Keep controls usable on touch; the send button used to shrink to 34px. */
  .chat-actions button,.room-tool-button,.room-tool-header button,.room-composer .composer-toolbar .primary { min-width:44px; min-height:44px; }
  .room-composer-input .attachment-button { width:44px; min-width:44px; min-height:44px; margin-top:0; }
  .room-tool-buttons { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .room-tool-button { min-width:0; padding:8px 6px; gap:6px; }
  .room-tool-button .icon { flex-shrink:0; }
  .room-composer .composer-toolbar .primary > span:first-child { display:inline; }
  .composer-toolbar .primary { min-height:34px; }
  .composer-field textarea { font-size:16px; }
  .dnd-dice-tray { margin:0 12px 10px; }
  .mechanics-card,.room-tools-drawer .mechanics-card { gap:12px; }
  .mechanics-card h4 { font-size:15px; }
  .party-heading strong { font-size:18px; }
  .party-question { padding:16px; }
  .party-question > strong { font-size:16px; }
  .party-choice { min-height:58px; padding:12px; }
  .landing-inner,.discovery-view { padding:24px 18px; }
  .landing-hero h1 { font-size:36px; }
  .landing-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .landing-hub-grid button { min-height:205px; padding:16px; }
  .landing-hub-grid strong { font-size:14px; }
  .landing-hub-grid small { font-size:12px; }
  .landing-actions { gap:12px; }
  .landing-action { padding:16px; }
  .landing-action small { font-size:12px; }
  .discovery-header { flex-wrap:wrap; gap:16px; }
  .discovery-header h1 { font-size:26px; }
  .discovery-header p { font-size:13px; }
  .discovery-header .primary { min-height:40px; }
  .discovery-controls .room-search { flex-basis:100%; }
  .discovery-controls #roomFilter { flex:1; }
  .discovery-room-grid { grid-template-columns:1fr; }
  .friends-header { padding:24px 18px; }
  .friends-content { padding:18px; }
  .friend-search { flex-wrap:wrap; }
  .friend-search .search-field { min-width:0; flex:1 1 160px; }
  .friend-card { padding:14px; }
  .friend-card-actions { width:100%; justify-content:flex-end; }
  .profile-modal,.create-modal { width:calc(100vw - 24px); padding:20px; max-height:calc(100dvh - 24px); }
  .create-modal { padding-bottom:16px; }
  .modal-header h2 { font-size:22px; }
  .create-modal > .muted { padding-bottom:12px; margin-bottom:12px; }
  .model-tier-picker { grid-template-columns:1fr; }
  .model-tier-option { padding:14px; }
  .model-tier-option strong { font-size:14px; }
  .model-tier-option small,.tier-caption { font-size:12px; }
  .profile-style-grid,.plan-grid { grid-template-columns:1fr; }
  .confirm-actions { flex-wrap:wrap; }
  .select-menu { position:relative; top:auto; margin-top:8px; width:100%; }
  .auth-card { padding:22px; }
  .auth-card .tab { padding:8px 4px; font-size:12px; }
  #chatView .room-content:has(.room-tools-drawer[data-tool="board"]:not(.hidden)) > .room-side-panels { width:100%; border:0; }
  .room-tools-drawer[data-tool="board"] > .room-tool-header { padding:12px 14px; }
  .room-tools-drawer[data-tool="board"] .learning-board-header h4 { font-size:18px; }
  .room-tools-drawer[data-tool="board"] .board-access { font-size:11px; }
  .room-tools-drawer[data-tool="board"] .learning-board-guidance { font-size:12px; }
  .board-stage-caption { font-size:11px; }
  .screen-workspace { gap:14px; }
  .screen-workspace-header h3 { font-size:18px; }
  .screen-workspace-header > [data-icon],.screen-workspace-header > .icon,.screen-workspace-icon { width:36px; height:36px; padding:8px; }
  .screen-viewer-stage,.screen-workspace .screen-empty { min-height:160px; }
  .screen-workspace .screen-empty { padding:24px 16px; }
  .screen-workspace .screen-empty strong { font-size:16px; }
  .screen-controls button { flex:1 1 130px; }
  .screen-workspace .screen-analysis-card { padding:16px; }
  .room-tools-drawer[data-tool="board"] .whiteboard-toolbar { padding:6px; gap:5px; }
  .room-tools-drawer[data-tool="board"] .whiteboard-toolbar button { width:34px; height:36px; min-height:36px; }
}
@media (max-width:355px) {
  .auth-card .tab { font-size:11px; }
  .landing-hub-grid { grid-template-columns:1fr; }
  .landing-hub-grid button { min-height:170px; }
  .topbar { padding-inline:6px; }
  .brand-home strong { font-size:15px; }
  .top-actions { gap:0; }
  .chat-header { padding:12px; }
  .chat-actions { gap:5px; }
  .chat-actions button { padding:7px 9px; }
  .room-control-bar { align-items:flex-start; }
  .room-tool-button { flex:1 1 auto; justify-content:center; }
  .room-side-panels .room-tools-drawer .hub-mechanics-panel { padding:12px; }
  .profile-modal,.create-modal { padding:16px; }
  .modal-header h2 { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}