/* Shared flat-room surface, using Tidal tokens. No scene engine is needed. */
:root { --wb-gap:16px; --wb-radius:18px; --wb-content-width:1000px; }
.wb-panel { position:fixed; z-index:240; inset:0 0 0 var(--ys-nav-offset); display:flex; flex-direction:column; background:var(--bg,#f1f5f8); color:var(--text,#334252); font-family:var(--font-cn,serif); }
.wb-panel[hidden] { display:none; }
.wb-header { display:flex; align-items:center; gap:18px; padding:calc(14px + env(safe-area-inset-top)) 24px 12px; border-bottom:1px solid var(--hairline,#d4dce4); }
.wb-header>div { flex:1; } .wb-header h2 { margin:3px 0; font-size:21px; font-weight:500; }
.wb-header small { color:var(--text-soft,#667789); letter-spacing:.16em; font-size:10px; }
.wb-panel button,.wb-panel input,.wb-panel select,.wb-panel textarea { font:inherit; color:inherit; }
.wb-panel button { min-height:44px; padding:9px 14px; border:1px solid var(--card-line,#cbd5de); border-radius:12px; background:var(--card-bg,#ffffffb0); cursor:pointer; }
.wb-panel button:hover { background:var(--row-press,#e2e9f2); }
.wb-panel button:disabled { opacity:.5; cursor:default; }
.wb-panel :focus-visible { outline:2px solid #687f99; outline-offset:3px; }
.wb-context { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:10px 24px 0; flex-wrap:wrap; }
.wb-context select { padding:7px; border-radius:8px; background:var(--card-bg); border:1px solid var(--card-line); }
.wb-badge { display:inline-block; color:var(--text-soft,#61758b); font-size:12px; padding:5px 8px; border:1px solid var(--hairline,#d0dae3); border-radius:20px; }
#wbFeedback { margin:8px 24px 0; min-height:20px; font-size:13px; color:var(--text-soft,#52677e); }
.wb-content { overflow:auto; flex:1; min-height:0; padding:16px 24px 40px; overscroll-behavior:contain; }
.wb-content> * { max-width:var(--wb-content-width); margin-left:auto; margin-right:auto; }
.wb-card { padding:20px; margin-bottom:var(--wb-gap); border:1px solid var(--card-line,#d5dce4); border-radius:var(--wb-radius); background:var(--card-bg,#ffffff94); overflow-wrap:anywhere; }
.wb-card h3,.wb-card h4 { margin:0 0 12px; font-weight:500; } .wb-card p { line-height:1.75; }
.wb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:var(--wb-gap); margin-bottom:var(--wb-gap); }
.wb-grid .wb-card { margin-bottom:0; } .wb-grid button { text-align:left; }
.wb-row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--hairline,#d5dce4); }
.wb-row>div { flex:1; min-width:160px; } .wb-row small { display:block; color:var(--text-soft); }
.wb-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.wb-capability-mark { margin-left:auto; min-width:18px; text-align:center; color:var(--muted,#73808e); font-size:14px; }
.ys-capability-missing,.ys-capability-partial { position:relative; }
.ys-capability-missing::after,.ys-capability-partial::after { content:"◌"; position:absolute; top:4px; right:6px; font-size:10px; line-height:1; color:var(--muted,#73808e); pointer-events:none; }
.ys-capability-partial::after { content:"◐"; }
.wb-form { display:grid; gap:14px; } .wb-form label { display:grid; gap:6px; font-size:14px; }
.wb-form input,.wb-form textarea,.wb-form select { width:100%; min-height:44px; border-radius:10px; border:1px solid var(--card-line,#ccd7e2); padding:10px; background:var(--input-bg,#ffffff98); box-sizing:border-box; }
.wb-form input[type=checkbox] { width:20px; min-height:20px; }
.wb-form textarea { min-height:110px; resize:vertical; }
.wb-note,.wb-empty { color:var(--text-soft,#61748a); font-size:13px; line-height:1.8; }
.wb-empty { padding:24px; text-align:center; } .wb-list { display:grid; gap:12px; }
.wb-content pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; background:var(--row-press,#e8edf5); border-radius:12px; }
.wb-content img { max-width:100%; height:auto; } .wb-content audio { max-width:100%; }
.wb-content table { width:100%; border-collapse:collapse; } .wb-content td,.wb-content th { padding:9px; border-bottom:1px solid var(--hairline); text-align:left; }
.wb-content [aria-pressed=true],.wb-content .is-active { background:var(--seg-thumb,#dde7f1); }
.wb-home-links { padding:20px 0; } .wb-home-links h2 { font-size:17px; font-weight:500; }
.wb-home-links .wb-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.wb-home-links button,.wb-entry { font:inherit; color:var(--text); border:1px solid var(--card-line); background:var(--card-bg); border-radius:14px; padding:14px; min-height:48px; cursor:pointer; }
.wb-room-objects button { transition:transform .18s,background .18s; }
.wb-room-objects button:hover,.wb-room-objects button:focus-visible { transform:scale(1.025); background:var(--seg-thumb,#dbe7f3); }
.wb-open .composer { visibility:hidden; }
.wb-home-links button small { display:block; margin-top:8px; color:var(--text-soft); font-size:12px; line-height:1.6; }
.ys-window-panel { max-height:calc(100dvh - var(--ys-chat-header-bottom,64px) - 84px); overflow-y:auto; }
.wb-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.wb-calendar-weekday { text-align:center; font-size:12px; padding:8px 0; color:var(--text-soft); }
.wb-calendar-day { min-width:0; padding:6px!important; overflow:hidden; text-align:center; }
.wb-calendar-day.is-today { box-shadow:inset 0 0 0 2px var(--text-soft); }
.wb-message-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.wb-panel details { border-bottom:1px solid var(--hairline); padding:12px 0; }
.wb-panel summary { min-height:44px; padding:10px 0; cursor:pointer; }
.wb-panel fieldset { border:1px solid var(--card-line); border-radius:12px; min-width:0; }
.wb-panel progress { max-width:100%; }
@media(max-width:999px) { .wb-panel {left:0; bottom:calc(66px + env(safe-area-inset-bottom));} .wb-header {padding-inline:16px;gap:10px;} .wb-content {padding:12px 16px 24px;} .wb-context {padding-inline:16px;} #wbFeedback {margin-inline:16px;} .wb-card {padding:16px;} }
@media(max-width:400px) { .wb-calendar-grid {gap:2px; margin-inline:-14px;} }
@media(prefers-reduced-motion:reduce) { .wb-room-objects button {transition:none;} }