.app { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.main { display: grid; grid-template-columns: 236px minmax(0, 1fr) 272px; min-height: 0; border-top: 1px solid var(--line); }
.sidebar { background: var(--bg-panel); display: flex; flex-direction: column; min-height: 0; }
.sidebar.left { border-right: 1px solid var(--line); }
.sidebar.right { border-left: 1px solid var(--line); }
.panel-title { padding: 9px 12px; font-weight: 600; border-bottom: 1px solid var(--line-soft); color: var(--text); }

.bottom { background: var(--bg-panel); border-top: 1px solid var(--line); height: var(--bottom-h, 190px); position: relative; display: flex; flex-direction: column; min-height: 0; }
.bottom.collapsed { height: 34px; }
.bottom.collapsed .bottom-body { display: none; }
.bottom.collapsed #collapseBottom svg { transform: rotate(180deg); }
.bottom-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); height: 34px; flex: none; padding-right: 6px; }
.tabs { display: flex; height: 100%; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.badge { background: var(--danger); color: #1a0a09; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.bottom-actions { display: flex; gap: 2px; }
.bottom-body { flex: 1; min-height: 0; overflow: hidden; }
.tab-panel { height: 100%; overflow: auto; }
.log-list { font-family: var(--mono); font-size: 12px; padding: 6px 12px; height: 100%; overflow: auto; }
.log-line { display: flex; gap: 10px; padding: 1px 0; }
.log-time { color: var(--muted); flex: none; }
.log-line.warn .log-msg { color: var(--warn); }
.log-line.error .log-msg { color: var(--danger); }

.workspace-wrap { position: relative; min-width: 0; min-height: 0; background: var(--ws-bg); overflow: hidden; }

/* Resizable sidebars (component library and properties). */
:root { --left-w: 236px; --right-w: 272px; }
.main { grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w); }
/* dir=rtl already reverses grid column placement. Swapping width variables would
   make the Components/Properties resize handles control the opposite panel. */
.sidebar { position: relative; }
.sidebar-resizer { position: absolute; top: 0; bottom: 0; width: 7px; z-index: 8; cursor: col-resize; touch-action: none; }
.sidebar-resizer.left { right: -4px; }
.sidebar-resizer.right { left: -4px; }
html[dir="rtl"] .sidebar-resizer.left { right: auto; left: -4px; }
html[dir="rtl"] .sidebar-resizer.right { left: auto; right: -4px; }
.sidebar-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; }
.sidebar-resizer:hover::after, .sidebar-resizer.active::after, .sidebar-resizer:focus-visible::after { background: var(--accent); }