/* The Working page's lists, the floating dock, the gallery and the pop-out views. The room itself is
   in office.css; the intro and the full-screen home in home.css. */

.office-side { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.who li button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18); border: 1px solid var(--line); }
.who li button:hover { border-color: #8f7ae0; }
.who .who-t { min-width: 0; flex: 1; display: block; } .who .who-n { font-weight: 700; } .who .who-d { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 0 8px; background: rgba(255, 255, 255, .08); color: var(--muted); }
.st-pill.st-working { background: rgba(185, 168, 246, .2); color: #d4c9ff; } .st-pill.st-researching { background: rgba(142, 197, 242, .2); color: #b9dcff; }
.st-pill.st-success { background: rgba(47, 210, 124, .16); color: #8ff0bd; } .st-pill.st-error { background: rgba(255, 176, 32, .18); color: #ffd27a; }
.st-pill.st-waiting { background: rgba(243, 220, 143, .16); color: #f5e3a8; } .st-pill.st-paused { background: rgba(200, 200, 220, .12); color: #b8bdd6; }
.office-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.office-bar .spacer { flex: 1; }
.sim-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #fff3c4; color: #6b4b00; font-weight: 600; }

/* ---- the floating dock ---- */
.gem-dock { position: fixed; right: 16px; bottom: 16px; z-index: 45; width: max-content; max-width: min(560px, calc(100vw - 32px)); border-radius: 18px; background: rgba(250, 247, 255, .94); color: #2a2140; box-shadow: 0 16px 40px rgba(5, 4, 20, .45); backdrop-filter: blur(10px); }
.gem-dock[hidden] { display: none; }
.gem-dock.closed { background: none; box-shadow: none; }
.dock-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 0 14px; font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; color: #6d58c9; }
.dock-tools { display: flex; gap: 2px; }
.gem-dock.quiet .dock-bar { padding: 6px 6px 6px 8px; }
.dock-quiet { display: inline-flex; align-items: center; gap: 8px; }
.dock-tools button { min-width: 28px; padding: 3px 6px; border: 0; border-radius: 8px; background: transparent; color: #6d58c9; font-size: 12px; font-weight: 700; }
.dock-tools button:hover { background: #ece6ff; }
.dock-items { display: flex; gap: 4px; padding: 4px 10px 10px; overflow-x: auto; }
.dock-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border: 0; border-radius: 12px; background: transparent; color: inherit; }
.dock-item:hover { background: #f1ecff; }
.dock-name { font: 700 11px/1.2 ui-rounded, system-ui, sans-serif; }
.dock-st { font: 600 10px/1.2 ui-sans-serif, system-ui, sans-serif; color: #6b6a85; }
.dock-st.st-working, .dock-st.st-researching { color: #6d58c9; } .dock-st.st-success { color: #2f9a66; } .dock-st.st-error { color: #a26a00; }
.dock-note { margin: 4px 6px; font-size: 12px; color: #6b6a85; }
.dock-fab { position: relative; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: 0 10px 24px rgba(5, 4, 20, .45); }
.dock-fab b { position: absolute; right: -4px; top: -4px; min-width: 18px; padding: 0 5px; border-radius: 99px; background: #ff7fa8; color: #fff; font-size: 11px; line-height: 18px; }
.pip-body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f6f0ff, #ffeef4); font-family: ui-sans-serif, system-ui, sans-serif; }
.pip-dock .dock-items { flex-wrap: wrap; justify-content: center; padding: 10px; }
html.float-mode .side, html.float-mode .top, html.float-mode .gem-dock { display: none; }
html.float-mode .app { display: block; }
html.float-mode body { background: linear-gradient(180deg, #f6f0ff, #ffeef4); }
.float-view { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px; color: #2a2140; }

/* ---- the gallery ---- */
.gal-controls { display: flex; flex-direction: column; gap: 12px; }
.gal-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gal-label { font-size: 12px; color: var(--muted); }
.gal-row input[type="range"] { width: 200px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gal-card { padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.gal-card.concept { border-color: rgba(185, 168, 246, .45); }
.gal-stage { display: grid; place-items: center; min-height: 200px; border-radius: 12px; margin-bottom: 10px; background: radial-gradient(circle at 50% 35%, #fff 0, #f4efff 60%, #ebe3ff 100%); overflow: hidden; }
.gal-card h3 { margin: 0; font-size: 15px; }
.gal-text { color: #cfd8f3; font-size: 13px; margin: 6px 0; }
.gal-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gal-swatches i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.gal-matrix { border-collapse: collapse; }
.gal-matrix th { font-size: 12px; color: var(--muted); padding: 4px 8px; text-align: center; white-space: nowrap; }
.gal-matrix tbody th { text-align: right; }
.gal-matrix td { padding: 4px; text-align: center; background: radial-gradient(circle, #f6f2ff 0, #ebe3ff 100%); border: 2px solid var(--panel); border-radius: 10px; }

@media (max-width: 1180px) { .office-side { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .gal-stage { min-height: 150px; }
  .gem-dock { right: 8px; bottom: 8px; }
  .gem-dock .dock-items .gem { --gem-size: 40px !important; }
  .gem-dock .dock-name { display: none; }
  .office-bar .check { order: 3; }
}

/* ---- talk to the team ---- */
.voice-fab { position: fixed; z-index: 95; right: 18px; top: 14px; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #c9b8ff, #8b7bff 55%, #6a52e8); box-shadow: 0 8px 24px rgba(110, 80, 240, .5), inset 0 -3px 0 rgba(0, 0, 0, .15); transition: transform .2s; }
.voice-fab:hover { transform: scale(1.07); }
.voice-fab svg { width: 22px; height: 22px; fill: #fff; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; position: relative; z-index: 1; }
.voice-fab .vf-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(201, 184, 255, .8); opacity: 0; }
.voice.listening .voice-fab { background: radial-gradient(circle at 35% 30%, #ffc2d8, #ff7fa8 55%, #e8457c); }
.voice.listening .voice-fab .vf-ring { animation: vf-ring 1.4s ease-out infinite; }
.voice-panel { position: fixed; z-index: 95; right: 16px; top: 70px; width: min(420px, calc(100vw - 32px)); padding: 14px; border-radius: 18px; background: rgba(250, 247, 255, .97); color: #2a2140; box-shadow: 0 20px 60px rgba(10, 5, 40, .45); backdrop-filter: blur(12px); animation: vp-in .35s cubic-bezier(.3, 1.4, .5, 1); font: 500 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
.voice-panel[hidden] { display: none; }
.voice-panel header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.voice-panel header b { display: block; font: 800 15px/1.2 ui-rounded, system-ui, sans-serif; color: #4c3d8a; }
.vp-sub { display: block; font-size: 12px; color: #6b6a85; }
.vp-x { border: 0; background: transparent; color: #6b6a85; font-size: 16px; padding: 2px 6px; }
.vp-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; margin-bottom: 6px; }
.vp-wave i { width: 4px; height: 6px; border-radius: 99px; background: #c9b8ff; transition: height .2s; }
.voice.listening .vp-wave i { background: linear-gradient(#ff8fb8, #8b7bff); animation: vp-bar 1s ease-in-out infinite; }
.voice.listening .vp-wave i:nth-child(3n) { animation-delay: -.3s; } .voice.listening .vp-wave i:nth-child(3n+1) { animation-delay: -.6s; } .voice.listening .vp-wave i:nth-child(4n) { animation-duration: .8s; }
.vp-to { min-height: 22px; margin-bottom: 4px; }
.vp-chip { display: inline-block; padding: 2px 10px; border-radius: 99px; background: #ece6ff; color: #4c3d8a; font-weight: 700; font-size: 12px; animation: vp-in .3s ease-out; }
.vp-chip.page { background: #e3f6ec; color: #2f7a5c; }
.voice-panel textarea { width: 100%; min-height: 70px; border-radius: 12px; border: 1px solid #ddd3f7; background: #fff; color: #2a2140; padding: 10px; font: 500 14px/1.45 ui-sans-serif, system-ui, sans-serif; resize: vertical; }
.vp-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.vp-row.small { font-size: 11.5px; color: #6b6a85; }
.vp-row .spacer { flex: 1; }
.vp-row .check { color: #4c3d8a; }
.vp-mic, .vp-send, .vp-ghost { border: 0; border-radius: 99px; padding: 8px 14px; font: 700 13px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.vp-mic { background: #ece6ff; color: #4c3d8a; } .voice.listening .vp-mic { background: #ffe1ec; color: #a2406c; }
.vp-mic:disabled { opacity: .5; cursor: not-allowed; }
.vp-ghost { background: transparent; color: #6b6a85; }
.vp-send { background: linear-gradient(135deg, #8b7bff, #ff8fb8); color: #fff; box-shadow: 0 6px 16px rgba(139, 123, 255, .35); }
.vp-log { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; }
.vp-log li { padding: 6px 9px; border-radius: 10px; background: #f3effd; font-size: 12.5px; animation: vp-in .3s ease-out; }
.vp-log li b { margin-right: 4px; color: #4c3d8a; } .vp-log .vl-you { background: #fff; border: 1px solid #ece6ff; } .vp-log .vl-team { background: #e9f8f0; } .vp-log .vl-team b { color: #2f7a5c; } .vp-log .vl-guide { background: #eef3ff; } .vp-log .vl-guide b { color: #3558a8; }
html.float-mode .voice { display: none; }
html.immersive.nav-open .voice-fab { top: 70px; }
@keyframes vf-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes vp-bar { 0%, 100% { height: 6px; } 50% { height: 28px; } }
@keyframes vp-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .voice *, .voice-panel { animation: none !important; } }
.vp-tip { margin: 2px 0 6px; font-size: 11.5px; color: #6b6a85; }
.vp-tip b { color: #4c3d8a; }
.vp-row.small .check + .check { margin-left: 12px; }