:root{
  --ink:#182b44; --muted:#4f6278; --line:rgba(255,255,255,.68); --bg:#d7e4f4; --card:rgba(255,255,255,.36);
  --accent:#173d68; --accent-2:#239b82; --bubble-user:rgba(232,241,251,.62); --bubble-bot:rgba(244,247,251,.56);
  font-family:"Segoe UI",Inter,sans-serif; color:var(--ink);
}
*{box-sizing:border-box}
html,body{
  width:100%;
  min-height:100%;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)),
    url("assets/backgrounds/worldcloud9-glass-bg.jpg") center center / cover no-repeat fixed,
    linear-gradient(135deg, #f6b35f 0%, #df73d4 33%, #8e22e0 68%, #3500a4 100%);
  position:relative;
  overflow:hidden;
}
.app{
  display:grid;
  grid-template-columns:minmax(250px,24%) minmax(360px,.9fr) minmax(440px,1.22fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "avatar brand brand"
    "avatar chat whiteboard";
  gap:16px; width:min(96vw,1480px); height:min(94dvh,920px); max-height:920px; margin:3dvh auto; padding:18px; min-height:0;
}
.pane{
  background:rgba(255,255,255,.26);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 22px 70px rgba(20,43,69,.20), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(255,255,255,.24);
  backdrop-filter:blur(28px) saturate(1.55) brightness(1.04);
  -webkit-backdrop-filter:blur(28px) saturate(1.55) brightness(1.04);
  display:flex; flex-direction:column; min-height:0;
  position:relative; overflow:hidden;
  isolation:isolate;
}
.pane::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.14) 36%, rgba(255,255,255,.03) 64%),
    radial-gradient(420px 180px at 18% 0%, rgba(255,255,255,.36), transparent 70%);
  border-radius:inherit;
}
.pane > *{
  position:relative;
  z-index:1;
}
.avatar-pane{
  grid-area:avatar;
  align-items:center; padding:18px 16px 20px; text-align:center;
  background:rgba(255,255,255,.20);
}
.avatar-canvas{
  width:100%; height:min(47vh,410px); border-radius:14px; overflow:hidden; cursor:ew-resize; position:relative; touch-action:none;
  background:linear-gradient(180deg, rgba(186,208,230,.22), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
}
.avatar-canvas canvas{display:block; width:100%; height:100%; opacity:0; transition:opacity .45s ease; position:relative; z-index:1}
.avatar-canvas.ready canvas{opacity:1}
.avatar-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  opacity:1;
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
  z-index:2;
}
.avatar-canvas.ready .avatar-poster{
  opacity:0;
  z-index:0;
  transform:scale(1.015);
}
.avatar-name{margin:14px 0 4px; font-size:22px; font-weight:700; letter-spacing:-.3px}
.model-status{margin:0 0 12px; font-size:12px; color:var(--muted)}
.audio-toggle{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; cursor:pointer}
.audio-toggle input{width:16px; height:16px; accent-color:var(--accent-2)}

.brand-panel{
  grid-area:brand;
  align-self:stretch;
  padding:12px 4px 6px;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 18px rgba(28,34,64,.28);
}
.brand-kicker{
  margin:0 0 4px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.brand-panel h1{
  margin:0;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.brand-panel p:last-child{
  margin:8px 0 0;
  max-width:620px;
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,.82);
}
.demo-link{
  display:inline-flex;
  width:max-content;
  margin-top:10px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.46);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.demo-link:hover{background:rgba(255,255,255,.28)}

.pane-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 18px 10px; border-bottom:1px solid rgba(255,255,255,.35);
}
.pane-header h1{margin:0; font-size:16px; font-weight:700}
.chip{
  font-size:12px; color:#3d5a74; background:rgba(232,238,246,.7);
  border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:4px 10px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.chat-pane{grid-area:chat; min-height:0; overflow:hidden}
.whiteboard-pane{grid-area:whiteboard; min-height:0; overflow:hidden}
.chat-log{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px 18px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; scrollbar-color:rgba(35,155,130,.72) rgba(255,255,255,.14)}
.chat-log::-webkit-scrollbar,.whiteboard-content::-webkit-scrollbar{width:10px}
.chat-log::-webkit-scrollbar-track,.whiteboard-content::-webkit-scrollbar-track{background:rgba(255,255,255,.12); border-radius:999px}
.chat-log::-webkit-scrollbar-thumb,.whiteboard-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(35,155,130,.82), rgba(23,61,104,.68)); border:2px solid rgba(255,255,255,.22); border-radius:999px}
.chat-log::-webkit-scrollbar-thumb:hover,.whiteboard-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, rgba(35,155,130,.98), rgba(23,61,104,.82))}
.msg{
  max-width:92%; padding:10px 12px; border-radius:14px; line-height:1.45; font-size:15px;
  white-space:pre-wrap; overflow-wrap:anywhere;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.4);
}
.msg.user{align-self:flex-end; background:var(--bubble-user)}
.msg.assistant{align-self:flex-start; background:var(--bubble-bot)}
.msg .who{display:block; font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--muted); margin-bottom:4px; text-transform:uppercase}
.msg.typing::after{content:'▋'; animation:blink 1s step-end infinite; margin-left:2px}
@keyframes blink{50%{opacity:0}}
.composer{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:12px 18px 8px;
  border-top:1px solid rgba(255,255,255,.35);
}
.composer textarea{
  resize:none; min-height:54px; max-height:140px;
  border:1px solid rgba(255,255,255,.55); border-radius:12px; padding:10px 12px; font:inherit;
  background:rgba(255,255,255,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
button{
  font:600 14px inherit; border:1px solid rgba(255,255,255,.5); border-radius:10px;
  padding:12px 16px; background:rgba(255,255,255,.5); color:#344962; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
button.primary{background:rgba(23,61,104,.92); color:#fff; border-color:rgba(23,61,104,.8)}
button:disabled{opacity:.45; cursor:default}
.hint{margin:0 18px 14px; font-size:12px; color:var(--muted); line-height:1.5}

.icon-button{
  width:48px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.mic-button{
  background:#2f2f2f;
  color:#fff;
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.mic-button:hover{background:#262626}
.mic-icon{
  width:23px;
  height:23px;
  display:block;
  fill:currentColor;
  overflow:visible;
}
.icon-button.listening{
  background:#239b82;
  color:#fff;
  box-shadow:0 0 0 4px rgba(35,155,130,.18), 0 0 18px rgba(35,155,130,.35);
}
.whiteboard-content{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 18px 18px;
  scrollbar-width:thin;
  scrollbar-color:rgba(35,155,130,.72) rgba(255,255,255,.14);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.board-intro{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.30);
  border:1px solid rgba(255,255,255,.42);
}
.eyebrow{
  margin:0 0 6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
}
.board-intro h2{margin:0 0 8px; font-size:24px; line-height:1.05; letter-spacing:-.04em}
.board-intro p:last-child{margin:0; color:var(--muted); font-size:13px; line-height:1.45}
.mini-calendar,.slot-list button{
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.46);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
}
.mini-calendar{padding:14px}
.calendar-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.calendar-top span{font-size:12px; color:#fff; background:rgba(23,61,104,.82); border-radius:999px; padding:4px 9px}
.calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.calendar-grid span{font-size:10px; color:var(--muted); text-align:center; font-weight:700}
.calendar-grid button{
  min-width:0;
  aspect-ratio:1;
  padding:0;
  border-radius:10px;
  font-size:12px;
  background:rgba(255,255,255,.38);
}
.calendar-grid button.selected{background:rgba(35,155,130,.92); color:#fff; border-color:rgba(35,155,130,.7)}
.slot-list{display:flex; flex-direction:column; gap:10px}
.slot-list button{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:12px 14px;
}
.slot-list button span{color:var(--muted)}
.slot-list button strong{color:var(--ink)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.sr-footer{display:none}



/* Desktop demo frame layout: shared composer below avatar and conversation. */
html,body{margin:0}
.app > *{min-width:0}
.composer-panel{flex-shrink:0}
.composer textarea{min-width:0;width:100%}
body[data-demo-mode="desktop"] .app{
  width:100%;height:100dvh;max-width:none;max-height:none;margin:0;
  padding:clamp(16px,4vh,44px) clamp(18px,4.2vw,70px);
  gap:clamp(12px,1.4vw,24px);
  grid-template-columns:minmax(0,18fr) minmax(0,33fr) minmax(0,47fr);
  grid-template-rows:minmax(120px,22fr) minmax(0,51fr) minmax(108px,21fr);
  grid-template-areas:"avatar chat brand" "avatar chat whiteboard" "compose compose whiteboard";
}
body[data-demo-mode="desktop"] .avatar-pane{
  align-self:stretch;padding:clamp(12px,1.4vw,24px);border-radius:24px;
}
body[data-demo-mode="desktop"] .avatar-canvas{
  flex:1;min-height:0;height:auto;border-radius:18px;
}
body[data-demo-mode="desktop"] .avatar-name{margin:14px 0 4px;font-size:clamp(18px,2vw,32px)}
body[data-demo-mode="desktop"] .model-status{font-size:clamp(10px,1vw,16px);margin:0 0 10px}
body[data-demo-mode="desktop"] .audio-toggle{font-size:clamp(13px,1.3vw,20px)}
body[data-demo-mode="desktop"] .brand-panel{align-self:start;min-height:0;padding:10px 4px 0;display:block}
body[data-demo-mode="desktop"] .brand-kicker{font-size:clamp(10px,1.1vw,17px);letter-spacing:.22em}
body[data-demo-mode="desktop"] .brand-panel h1{font-size:clamp(23px,2.9vw,46px);line-height:1.08;max-width:none}
body[data-demo-mode="desktop"] .brand-panel > p:not(.brand-kicker){font-size:clamp(12px,1.35vw,21px);line-height:1.4;margin:16px 0 0}
body[data-demo-mode="desktop"] .demo-link{display:inline-flex!important;margin-top:clamp(12px,3vh,30px);font-size:clamp(11px,1.1vw,16px);padding:9px 16px}
body[data-demo-mode="desktop"] .chat-pane,
body[data-demo-mode="desktop"] .whiteboard-pane{border-radius:24px;min-height:0}
body[data-demo-mode="desktop"] .whiteboard-pane{display:flex!important}
body[data-demo-mode="desktop"] .audio-toggle{display:inline-flex!important}
body[data-demo-mode="desktop"] .pane-header{padding:16px 18px;flex-shrink:0}
body[data-demo-mode="desktop"] .pane-header h1{font-size:clamp(16px,1.5vw,24px)}
body[data-demo-mode="desktop"] .chat-log{padding:14px 18px}
body[data-demo-mode="desktop"] .composer-panel{grid-area:compose;justify-content:center;border-radius:24px}
body[data-demo-mode="desktop"] .composer{grid-template-columns:minmax(0,1fr) minmax(56px,.27fr) minmax(76px,.37fr);gap:clamp(10px,1.5vw,24px);padding:14px clamp(16px,2.6vw,44px) 8px;border:0}
body[data-demo-mode="desktop"] .composer textarea{min-height:54px;height:clamp(54px,8vh,84px);padding:10px 16px;font-size:clamp(15px,1.65vw,24px);border-radius:18px}
body[data-demo-mode="desktop"] .icon-button{width:100%;border-radius:18px}
body[data-demo-mode="desktop"] button.primary{border-radius:18px;font-size:clamp(15px,1.5vw,22px)}
body[data-demo-mode="desktop"] .hint{margin:0 clamp(16px,2.6vw,44px) 12px;font-size:clamp(10px,1.1vw,15px);line-height:1.4}
body[data-demo-mode="desktop"] .whiteboard-content{padding:16px 18px;gap:16px}
body[data-demo-mode="desktop"] .whiteboard-content > *{flex-shrink:0}
body[data-demo-mode="desktop"] .board-intro,
body[data-demo-mode="desktop"] .mini-calendar{padding:clamp(12px,1.3vw,22px);border-radius:20px}
body[data-demo-mode="desktop"] .board-intro h2{font-size:clamp(21px,2vw,32px)}
body[data-demo-mode="desktop"] .board-intro p:last-child{font-size:clamp(12px,1.2vw,18px)}
/* Reference revision: top-aligned conversation and brand over the whiteboard. */
body[data-demo-mode="desktop"] .app{padding:clamp(14px,2vh,24px);gap:14px}
body[data-demo-mode="desktop"] .avatar-pane{align-self:start;height:80%;min-height:260px;padding:14px}
body[data-demo-mode="desktop"] .brand-panel{padding:4px 2px}
body[data-demo-mode="desktop"] .brand-panel h1{font-size:clamp(22px,2.35vw,40px);line-height:1.12}
body[data-demo-mode="desktop"] .brand-panel > p:not(.brand-kicker){font-size:clamp(12px,1.15vw,18px);margin-top:12px}
body[data-demo-mode="desktop"] .demo-link{display:none!important}
body[data-demo-mode="desktop"] .pane,
body[data-demo-mode="desktop"] .composer-panel{border-radius:12px}
body[data-demo-mode="desktop"] .avatar-canvas,
body[data-demo-mode="desktop"] .board-intro,
body[data-demo-mode="desktop"] .mini-calendar,
body[data-demo-mode="desktop"] .slot-list button,
body[data-demo-mode="desktop"] .msg{border-radius:9px}
body[data-demo-mode="desktop"] .composer textarea,
body[data-demo-mode="desktop"] .icon-button,
body[data-demo-mode="desktop"] button.primary,
body[data-demo-mode="desktop"] .calendar-grid button{border-radius:8px}
body[data-demo-mode="desktop"] .composer textarea{font-size:15px}
body[data-demo-mode="desktop"] .hint{font-size:11px}
body[data-demo-mode="desktop"] .avatar-name{font-size:clamp(17px,1.6vw,26px)}
/* End desktop demo frame layout */

body[data-demo-mode="mobile"] .whiteboard-pane,
body[data-demo-mode="popup"] .whiteboard-pane,
body[data-demo-mode="mobile"] .demo-link,
body[data-demo-mode="popup"] .demo-link,
body[data-demo-mode="mobile"] .audio-toggle,
body[data-demo-mode="popup"] .audio-toggle{
  display:none !important;
}
body[data-demo-mode="mobile"] .app,
body[data-demo-mode="popup"] .app{
  grid-template-columns:140px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "avatar brand"
    "chat chat";
}
body[data-demo-mode="popup"] .app{
  width:100%;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:10px;
  gap:10px;
}
body[data-demo-mode="popup"] .brand-panel h1{font-size:clamp(20px, 6vw, 30px)}
body[data-demo-mode="popup"] .brand-panel p:last-child{display:none}
body[data-demo-mode="popup"] .avatar-canvas{height:112px}
body[data-demo-mode="popup"] .avatar-name{font-size:13px; margin:7px 0 2px}
body[data-demo-mode="popup"] .model-status{font-size:9px; margin:0}
@media (max-width:980px){
  html,body{height:100%; overflow:hidden}
  body{min-height:100dvh}
  .app{
    grid-template-columns:140px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:
      "avatar brand"
      "chat chat";
    gap:10px;
    width:100%;
    max-width:none;
    height:100dvh;
    max-height:none;
    margin:0;
    min-height:0;
    padding:10px;
  }
  .whiteboard-pane,
  .demo-link,
  .audio-toggle{display:none !important}
  .avatar-pane{
    align-self:start;
    min-height:0;
    padding:8px;
    border-radius:14px;
  }
  .avatar-canvas{
    height:118px;
    border-radius:10px;
  }
  .avatar-name{
    margin:7px 0 2px;
    font-size:13px;
    line-height:1.1;
    letter-spacing:0;
  }
  .model-status{
    margin:0;
    font-size:9px;
    line-height:1.2;
  }
  .brand-panel{
    align-self:stretch;
    min-height:118px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:10px 4px 10px 2px;
  }
  .brand-kicker{font-size:10px; letter-spacing:.18em}
  .brand-panel h1{font-size:clamp(22px, 7vw, 32px); line-height:1.02}
  .brand-panel p:last-child{font-size:12px; line-height:1.35; margin-top:6px}
  .chat-pane{min-height:0}
  .pane-header{padding:11px 12px 8px}
  .pane-header h1{font-size:15px}
  .chip{font-size:11px; padding:3px 8px}
  .chat-log{padding:12px; gap:9px}
  .msg{max-width:96%; padding:9px 10px; border-radius:12px; font-size:14px; line-height:1.4}
  .composer{grid-template-columns:1fr 44px 58px; gap:8px; padding:10px 12px 7px}
  .composer textarea{min-height:48px; max-height:96px; padding:9px 10px; font-size:14px}
  button{padding:10px 8px; border-radius:10px; font-size:13px}
  .icon-button{width:44px; font-size:16px}.mic-icon{width:21px;height:21px}
  .hint{margin:0 12px 10px; font-size:10px; line-height:1.35}
}
@media (max-width:380px){
  .app{
    grid-template-columns:112px minmax(0,1fr);
    gap:8px;
    padding:8px;
  }
  .avatar-canvas{height:102px}
  .brand-panel{min-height:102px}
  .brand-panel h1{font-size:20px}
  .brand-panel p:last-child{display:none}  .avatar-name{font-size:12px}
  .model-status{font-size:8px}
  .audio-toggle{font-size:10px}
  .composer{grid-template-columns:1fr 40px 52px}
  .whiteboard-content{display:flex}
  .board-intro h2{font-size:20px}
}










/* Equal dimensions keep the voice toggle circular in every layout. */
.composer .mic-button,
body[data-demo-mode="desktop"] .composer .mic-button{
  width:54px;height:54px;min-width:54px;padding:0;
  border-radius:50%;align-self:center;justify-self:center;
}
.stop-icon{display:none;width:23px;height:23px;fill:currentColor}
.mic-button.listening .mic-icon{display:none}
.mic-button.listening .stop-icon{display:block}
@media(max-width:980px){
  body:not([data-demo-mode="desktop"]) .composer .mic-button{width:40px;height:40px;min-width:40px}
}
.calendar-top .calendar-picker{padding:6px;display:grid;place-items:center;background:transparent;border:0}
.calendar-picker svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.calendar-top strong{flex:1}
#schedule-today{padding:6px 12px;border-radius:20px;background:var(--accent);color:white}
.calendar-grid .has-bookings{box-shadow:inset 0 -4px 0 var(--accent-2)}
.schedule-day{font-size:15px;margin:0 0 6px}
.schedule-notice{font-size:12px;line-height:1.4;margin:0 0 12px;color:var(--muted)}
.schedule-slot{display:flex;align-items:center;gap:16px;padding:13px 15px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.45);border-radius:8px;font-size:14px}
.schedule-slot strong{min-width:78px}
.schedule-slot span{overflow-wrap:anywhere}
.schedule-slot.booked{background:rgba(35,155,130,.25);border-color:rgba(35,155,130,.6)}
#schedule-dialog{border:1px solid #fff;border-radius:14px;padding:24px;max-width:calc(100vw - 32px);color:var(--ink);background:#edf3fc;box-shadow:0 20px 80px #17263d66}
#schedule-dialog::backdrop{background:#182b4466;backdrop-filter:blur(6px)}
#schedule-choose{display:grid;gap:16px}
#schedule-choose h2{margin:0;font-size:22px}
#schedule-date{font:inherit;padding:12px;border:1px solid #b5c4d8;border-radius:8px}
.schedule-dialog-actions{display:flex;justify-content:flex-end;gap:10px}
/* Voice or typed submission. */
.composer{grid-template-columns:minmax(0,1fr) 54px auto auto;align-items:center}
.composer-or{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted);text-align:center}
body[data-demo-mode="desktop"] .composer{grid-template-columns:minmax(0,1fr) 54px auto minmax(76px,.37fr);column-gap:clamp(8px,1vw,16px)}
@media(max-width:980px){
  body:not([data-demo-mode="desktop"]) .composer{grid-template-columns:minmax(0,1fr) 40px auto 58px;column-gap:6px}
  body:not([data-demo-mode="desktop"]) .composer-or{font-size:10px}
}
@media(max-width:380px){
  body:not([data-demo-mode="desktop"]) .composer{grid-template-columns:minmax(0,1fr) 40px auto 52px;column-gap:4px}
}
.whiteboard-tabs{display:flex;gap:8px;padding:8px 18px;border-bottom:1px solid #ffffff55;flex-shrink:0}
.whiteboard-tabs button{padding:6px 12px;font-size:12px;border-radius:8px}
.whiteboard-tabs button[aria-pressed="true"]{background:var(--accent);color:white}
.schedule-view{display:flex;flex-direction:column;gap:16px}
.schedule-view[hidden],.visual-board[hidden]{display:none!important}
.visual-board{padding:16px;background:rgba(255,255,255,.86);border-radius:10px;color:var(--ink)}
.visual-board h2{font-size:22px;line-height:1.2;margin:0 0 18px;overflow-wrap:anywhere}
.visual-board svg{display:block;width:100%;height:auto;font-family:Segoe UI,sans-serif}
.visual-board li{margin-bottom:14px;line-height:1.5;overflow-wrap:anywhere}
.visual-board details{font-size:12px;margin-top:12px}
.whiteboard-header-actions{display:flex;align-items:center;gap:10px}
#whiteboard-expand{display:grid;place-items:center;width:32px;height:32px;padding:5px;border-radius:7px;background:rgba(255,255,255,.35)}
#whiteboard-expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#whiteboard-expand .restore-icon{display:none}
#whiteboard-expand[aria-expanded="true"] .expand-icon{display:none}
#whiteboard-expand[aria-expanded="true"] .restore-icon{display:block}
body .app .whiteboard-pane.whiteboard-maximized{
  position:fixed;inset:12px;z-index:100;width:auto;height:auto;margin:0;
  background:rgba(229,238,250,.93);border-radius:14px;
  box-shadow:0 15px 70px rgba(20,43,69,.3);
}
.whiteboard-maximized .visual-board{max-width:1100px;width:100%;margin-inline:auto}
.whiteboard-maximized .visual-board svg{max-width:850px;margin-inline:auto}
.whiteboard-maximized .schedule-view{max-width:900px;width:100%;margin-inline:auto}
/* Fit the complete drawing into the maximized viewport without distortion. */
.whiteboard-maximized:has(.visual-board:not([hidden])) .whiteboard-content{
  display:flex;overflow:hidden;min-height:0;
}
.whiteboard-maximized .visual-board:not([hidden]){
  display:flex;flex-direction:column;flex:1;min-height:0;height:100%;max-width:none;
}
.whiteboard-maximized .visual-board h2{flex-shrink:0;margin-bottom:10px}
.whiteboard-maximized .visual-board svg{
  flex:1;min-height:0;width:100%;height:100%;max-width:none;object-fit:contain;
}
.whiteboard-maximized .visual-board details{flex-shrink:0;max-height:25%;overflow:auto}
.whiteboard-maximized .visual-board ul{overflow:auto}
.generated-picture{display:block;max-width:100%;width:100%;height:auto;object-fit:contain;border-radius:8px}
.image-caption{font-size:12px;color:var(--muted);flex-shrink:0;margin:0 0 12px}
.whiteboard-maximized .generated-picture{flex:1;min-height:0;height:100%;object-fit:contain}
.generated-picture[hidden]{display:none}
#article-view[hidden]{display:none!important}
.article-search{display:flex;gap:8px;margin-bottom:10px}
.article-search input{min-width:0;flex:1;padding:10px;border:1px solid #b6c7d8;border-radius:8px;font:inherit;background:#ffffffdd}
.article-status{font-size:12px;line-height:1.4}
.article-results{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.article-results button{font-size:12px;padding:6px 10px}
.article-content:not(:empty){background:#fff;color:#202122;padding:24px;border-radius:10px;line-height:1.65;font-size:15px;overflow-wrap:anywhere}
.article-content h1,.article-content h2{font-family:Georgia,serif;line-height:1.25;border-bottom:1px solid #a2a9b1;padding-bottom:8px}
.article-content h1{font-size:28px}.article-content h2{font-size:23px;margin-top:28px}
.article-content a{color:#2456a6}.article-attribution{font-size:12px;color:#54595d}
.article-content img{max-width:100%;height:auto}.article-content figure{margin:16px 0}
.article-content table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;font-size:13px;margin:16px 0}
.article-content th,.article-content td{padding:6px;border:1px solid #c8ccd1;vertical-align:top}
.article-content th{background:#eaecf0}.article-content .infobox{background:#f8f9fa}
.article-content figcaption,.article-content .thumbcaption{font-size:12px;color:#54595d}
.article-content pre{white-space:pre-wrap}.article-content .references{font-size:12px}
.whiteboard-maximized.showing-article .whiteboard-content{display:block;overflow-y:auto}
.whiteboard-maximized #article-view{max-width:1000px;margin-inline:auto}
.article-content .infobox{display:table;width:280px;max-width:100%;margin:0 0 18px}
.article-content::after{content:'';display:block;clear:both}
.whiteboard-maximized .article-content .infobox{float:right;margin:0 0 20px 24px}