:root { --folio-dock-height:90px; --folio-viewport-height:100dvh; --folio-keyboard-offset:0px; }
.assistant-shell { position:fixed; inset:auto 0 var(--folio-keyboard-offset); z-index:20; display:flex; flex-direction:column; align-items:center; padding:0 16px; pointer-events:none; }
.assistant-panel { width:min(900px,100%); height:min(520px,calc(var(--folio-viewport-height) - var(--folio-dock-height) - 20px)); min-height:0; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:22px 22px 0 0; box-shadow:0 -12px 48px #25221d18; pointer-events:auto; }
.assistant-header { display:flex; align-items:center; padding:14px 18px 10px; gap:4px; flex-shrink:0; }
.assistant-tabs { display:flex; margin:0 18px 8px; background:var(--soft); border-radius:9px; padding:3px; flex-shrink:0; }
.discussion { display:flex; flex-direction:column; min-height:0; flex:1; }
.messages { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px 22px; overflow-wrap:anywhere; }
.chat-welcome { margin:24px auto; }
.capabilities { min-height:0; flex:1; overscroll-behavior:contain; }
.assistant-dock { position:relative; width:min(940px,100%); padding:10px 14px max(12px,env(safe-area-inset-bottom)); background:var(--paper); border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; box-shadow:0 -4px 24px #25221d0a; pointer-events:auto; }
.assistant-shell.expanded .assistant-dock { border-radius:0; width:min(900px,100%); }
.dock-row { display:flex; align-items:center; gap:10px; }
.collection-control { position:relative; flex-shrink:0; }
.collection-toggle { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px 12px; border-radius:14px; font-size:.875rem; font-weight:550; }
.collection-toggle:hover,.collection-toggle[aria-expanded=true] { background:var(--soft); }
.collection-menu { position:absolute; bottom:calc(100% + 18px); left:0; width:260px; max-width:calc(100vw - 40px); max-height:calc(var(--folio-viewport-height) - var(--folio-dock-height) - 24px); overflow:auto; padding:8px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 8px 40px #25221d20; }
.collection-menu>p { padding:8px 12px 10px; color:var(--muted); font-size:.75rem; }
.collection-menu a { display:block; padding:12px; border-radius:12px; text-decoration:none; }
.collection-menu a:hover,.collection-menu a[aria-current=page] { background:var(--soft); }
.collection-menu strong { display:flex; align-items:center; justify-content:space-between; font-size:.95rem; font-weight:600; }
.collection-menu a>span,.collection-menu small { display:block; font-size:.75rem; line-height:1.5; color:var(--muted); margin-top:3px; }
.collection-menu small { font-size:.7rem; }
.assistant-toggle { flex-shrink:0; width:48px; height:48px; padding:3px; border-radius:50%; border:1px solid var(--line); }
.assistant-toggle img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.assistant-toggle[aria-expanded=true] { border-color:var(--accent); }
.composer { display:flex; align-items:center; gap:4px; min-width:0; flex:1; border:1px solid var(--line); border-radius:26px; padding:4px 6px 4px 14px; background:var(--surface); }
.composer textarea { resize:none; flex:1; width:0; min-width:0; min-height:34px; max-height:100px; padding:5px 2px; border:0; background:none; line-height:24px; font-size:16px; outline-offset:2px; }
.composer textarea::placeholder { color:#85817b; }
.composer textarea[readonly] { cursor:pointer; }
.composer .icon-button { width:44px; height:44px; }
.send-button { flex-shrink:0; width:44px; height:44px; }
.microphone-monitor { display:flex; align-items:center; gap:12px; margin:0 4px 6px; color:var(--muted); font-size:.75rem; }
.microphone-monitor span { min-width:0; overflow-wrap:anywhere; }
.microphone-monitor meter { flex-shrink:0; width:80px; height:14px; }
.chat-status { color:var(--muted); font-size:.8rem; line-height:1.4; margin:0 4px 8px; max-height:5.6em; overflow:auto; white-space:pre-line; overflow-wrap:anywhere; }
.chat-status:empty { display:none; }
.chat-activity { display:flex; align-items:center; gap:4px; }
.chat-activity .chat-status { flex:1; }
.chat-activity button { flex-shrink:0; }
#conversation-select { max-width:210px; min-width:0; font-size:.8rem; }
@media(max-width:560px) { .assistant-header { flex-wrap:wrap; } #conversation-select { order:2; flex:1 0 100%; max-width:100%; } }
@media(max-width:900px) { .topbar { padding:0 22px; height:76px; } .workspace { grid-template-columns:180px minmax(0,1fr); } .practice { padding:30px 24px 20px; } .catalogue { padding:28px 10px; } .catalogue-note { display:none; } }
@media(max-width:560px) {
  .workspace { display:block; }
  .catalogue { padding:18px 0 10px; }
  .topbar { height:72px; padding-inline:16px; }
  .assistant-shell { padding-inline:0; }
  .assistant-dock { padding:8px 8px max(8px,env(safe-area-inset-bottom)); border-left:0; border-right:0; border-radius:0; }
  .dock-row { gap:5px; }
  .collection-toggle { width:44px; min-height:44px; padding:10px; }
  .collection-toggle>span { display:none; }
  .collection-menu { left:0; bottom:calc(100% + 14px); }
  .assistant-toggle { width:44px; height:44px; padding:2px; }
  .composer { padding-left:10px; }
  .assistant-header { padding:10px 12px 8px; }
  .personas { gap:4px; }
  .personas strong { font-size:.9rem; margin-left:2px; }
  .persona { width:42px; height:42px; }
  .assistant-tabs { margin-inline:12px; }
  .messages { padding:12px 16px; }
  .chat-welcome { margin:14px auto; }
  .chat-welcome>img { width:52px; height:52px; }
  .chat-welcome h2 { margin-top:10px; }
}
@media(max-height:540px) { .assistant-panel { height:calc(var(--folio-viewport-height) - var(--folio-dock-height) - 8px); } .assistant-header { padding-block:4px; } .assistant-tabs { margin-bottom:4px; } }
@media(max-width:360px) { .tempo-number { gap:0; } .tempo-number input { width:170px; } .account-button { font-size:.8rem; } }