/* ── Full-viewport shell ── */ .app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ── App body (everything below the header) ── */ .app-body { flex: 1; display: flex; overflow: hidden; } /* ── Grid area (fills the app body) ── */ .app-grid-area { flex: 1; position: relative; overflow: hidden; } /* ── Floating control panels – bottom-left corner ── */ .floating-panels-container { position: absolute; bottom: 14px; left: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 20; } /* ── Empty state placeholder ── */ .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: #4b5563; user-select: none; } .empty-state p { margin: 0; font-size: 1.1rem; } .empty-state .empty-hint { font-size: 0.85rem; color: #374151; } /* ── Access denied state ── */ .access-denied-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #4b5563; user-select: none; padding: 2rem; text-align: center; } .access-denied-title { margin: 0; font-size: 1.15rem; font-weight: 600; color: #9ca3af; } .access-denied-hint { margin: 0; font-size: 0.875rem; color: #6b7280; } .access-request-sent { color: #34d399; } .access-request-actions { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .access-request-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; } .btn-request-access { background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 6px; color: #818cf8; cursor: pointer; font-size: 0.85rem; padding: 0.45rem 1.1rem; transition: background 0.12s, border-color 0.12s; } .btn-request-access:hover { background: rgba(99, 102, 241, 0.25); border-color: rgba(99, 102, 241, 0.6); } .link-btn { background: none; border: none; color: #818cf8; cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; transition: color 0.12s; } .link-btn:hover { color: #a5b4fc; }