/* FILE: public_html/WebVR_MktechLLC/app/ui/css/layout.css */
/* Canvas-first shell: rails overlay; edge “X”; snap bottom; mobile 3-rails */
.ui-shell { position: fixed; inset: 0; }
.ui-viewport { position: absolute; inset: 0; z-index: var(--z-canvas); overflow: hidden; }
#renderCanvas { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
/* Rails (alias existing .slot-* for compatibility) */
.rail, .slot {
position: absolute;
/* DEFAULT BASE z-index is for bottom rail now; sides override below */
z-index: calc(var(--z-rails) - 1);
background: var(--bg-1);
color: var(--text-0);
border: 1px solid #2b3242;
box-shadow: var(--shadow-1);
overflow: hidden;
transition: transform var(--duration-slow) var(--ease), height var(--duration-slow) var(--ease), width var(--duration-slow) var(--ease);
will-change: transform, height, width;
}
/* Side rails sit ABOVE bottom rail by default */
.rail--left, .slot-left,
.rail--right, .slot-right { z-index: var(--z-rails); }
/* Bottom rail default (under sides); can be raised temporarily via .z-top */
.rail--bottom, .slot-bottom { z-index: calc(var(--z-rails) - 1); }
.rail--bottom.z-top, .slot-bottom.z-top { z-index: calc(var(--z-rails) + 1); }
/* Left/Right (desktop) */
.rail--left, .slot-left {
top: 0; bottom: 0; left: 0; width: var(--rail-left-w, var(--rail-w));
border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius);
transform: translateX(-100%);
}
.rail--right, .slot-right {
top: 0; bottom: 0; right: 0; width: var(--rail-right-w, var(--rail-w));
border-top-left-radius: var(--radius); border-bottom-left-radius: var(--radius);
transform: translateX(100%);
}
.slot-left.is-open, .slot-right.is-open,
.rail--left.is-expanded, .rail--right.is-expanded { transform: translateX(0); }
/* Bottom (toolbar-first + hidden support) */
.rail--bottom, .slot-bottom {
left: 0; right: 0; bottom: 0;
border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
height: var(--toolbar-h);
transform: translateY(0);
}
/* Truly hidden: completely off-screen and non-interactive */
.rail--bottom.is-hidden, .slot-bottom.is-hidden {
transform: translateY(100%);
pointer-events: none;
}
/* Visible states */
.rail--bottom.is-open, .slot-bottom.is-open { height: var(--bottom-snap, var(--toolbar-h)); }
.rail--bottom.is-collapsed, .slot-bottom.is-collapsed { height: var(--toolbar-h); }
/* Dragging state */
.is-dragging { transition: none !important; }
/* Panel scaffold */
.panel, .slot .panel { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; contain: layout paint; }
.panel-header, .panel__header {
display: flex; align-items: center; gap: var(--gap-2);
padding: 10px 12px; border-bottom: 1px solid #2b3242;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.panel-title, .panel__title { font-weight: 600; letter-spacing: .2px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-actions { display: flex; gap: var(--gap-2); }
.header-x, .panel__close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #2b3242; background: #10141c; color: #e7e7e7; }
.header-x:hover, .panel__close:hover { background: #151a24; }
/* Rail bodies host multiple panel-cards; use grid for vertical rhythm */
.panel-body, .panel__body {
overflow: auto;
padding: var(--gap-3);
display: grid;
gap: var(--gap-3);
grid-auto-rows: min-content; /* key: collapsed cards shrink to header height */
}
/* Offscreen optimization */
.panel-card__body { content-visibility: auto; contain-intrinsic-size: 400px 300px; }
.placeholder { opacity:.85; font-size: 13px; }
.ph-title { font-weight: 600; margin-bottom: 6px; }
.ph-desc { color: var(--text-1); }
/* Handles */
.handle, .drag-handle { position: absolute; opacity: .001; }
.slot-left .drag-handle, .rail--left .handle { top: 0; bottom: 0; right: 0; width: 18px; cursor: ew-resize; }
.slot-right .drag-handle, .rail--right .handle { top: 0; bottom: 0; left: 0; width: 18px; cursor: ew-resize; }
.slot-bottom .drag-handle, .rail--bottom .handle { top: 0; left: 0; right: 0; height: 18px; cursor: ns-resize; }
.handle:focus-visible, .drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Edge “X” controls (alias .fab for compat) */
.edge-x, .fab {
position: fixed; z-index: var(--z-overlay);
display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 12px;
border: 1px solid #2b3242; background: rgba(22,26,34,.92); color: #cfd6e6;
user-select: none; -webkit-tap-highlight-color: transparent;
}
.edge-x:hover, .fab:hover { background: rgba(22,26,34,.98); color: #fff; }
.edge-x--left, .fab-left { left: 10px; top: 50%; transform: translateY(-50%); }
.edge-x--right, .fab-right { right: 10px; top: 50%; transform: translateY(-50%); }
.edge-x--bottom, .fab-bottom{ left: 50%; bottom: 10px; transform: translateX(-50%); }
/* Mobile stacking */
.ui-shell.mobile .slot-left,
.ui-shell.mobile .slot-right,
.ui-shell.mobile .slot-bottom,
.ui-shell.mobile .rail--left,
.ui-shell.mobile .rail--right,
.ui-shell.mobile .rail--bottom {
top: auto; left: 0; right: 0; bottom: 0;
transform: none;
height: var(--toolbar-h);
border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
border-left: 1px solid #2b3242; border-right: 1px solid #2b3242;
}
.ui-shell.mobile .slot.m-active, .ui-shell.mobile .rail.is-active { height: var(--bottom-snap, var(--toolbar-h)); }
.ui-shell.mobile .slot.m-collapsed, .ui-shell.mobile .rail:not(.is-active) { height: var(--toolbar-h); }
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-overlay); display: none; pointer-events: none; }
.ui-shell.mobile .mobile-bar { display: block; }
.mobile-tabs { display: flex; gap: var(--gap-2); padding: var(--gap-2); justify-content: center; pointer-events: auto; }
.mobile-tab { min-width: 80px; height: 36px; padding: 0 var(--gap-3); border-radius: 10px; border: 1px solid #2b3242; background: #10141c; color: #e7e7e7; }
.mobile-tab.active { background: #182036; border-color: #2f3a54; }
/* Touch-friendly adjustments */
@media (max-width: 900px) {
.header-x { width: 40px; height: 40px; }
.handle, .drag-handle { height: 20px; width: 20px; }
.panel-card__header { padding: 12px 14px; }
.panel__close { min-width: 36px; min-height: 36px; }
}
/* Caps for side rails on desktop */
@media (min-width: 900px) {
.slot-left, .rail--left, .slot-right, .rail--right { max-width: var(--rail-w-max); }
}
/* ---------------------------------------------------------------------------
Add-on: Panel-card banner/collapse (modular; does not affect .panel)
--------------------------------------------------------------------------- */
.panel-card {
display: grid; grid-template-rows: auto 1fr;
min-width: 0; min-height: 0;
contain: layout paint;
overflow: clip; /* avoids jitter when collapsing */
}
/* Optional: keep headers visible as you scroll long rail bodies */
.panel-card__header {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: var(--gap-2);
padding: 10px 12px; border-bottom: 1px solid #2b3242;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.panel-card__title { font-weight: 600; letter-spacing: .2px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-card__body { overflow: auto; padding: var(--gap-3); }
/* Collapsed banner behavior (requested) */
.panel-card.is-collapsed .panel-card__body { display: none; }
.panel-card.is-collapsed .panel-card__header { height: 40px; cursor: pointer; overflow: hidden; box-shadow: none; }
/* ---------------------------------------------------------------------------
Responsiveness & accessibility polish
--------------------------------------------------------------------------- */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.rail, .slot, .panel, .panel-card { transition: none !important; }
}
/* Clamp side-rail widths visually (JS may still set vars; this ensures min/max) */
:root { --rail-w-min: 260px; --rail-w-max: 400px; }
/* Override widths using clamp so rails stay within sensible bounds */
.rail--left { width: clamp(var(--rail-w-min), var(--rail-left-w, var(--rail-w)), var(--rail-w-max)); }
.rail--right { width: clamp(var(--rail-w-min), var(--rail-right-w, var(--rail-w)), var(--rail-w-max)); }