html, body { height: 100%; margin: 0; background: #0f1216; color: #e5e7eb; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
#map { height: 95vh; position: relative; }

/* Generic widget layer should be above map */
.widget { position: absolute; left: 20px; top: 80px; width: 420px; height: 520px; background: rgba(22,26,32,0.92); border: 1px solid #2a2f38; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); display: block; overflow: hidden; z-index: 1000; }
.widget-min { display: none; }
.widget.minimized { width: auto !important; height: auto !important; }
.widget.minimized .widget-header { display: none; }
.widget.minimized .widget-body { display: none; }
.widget.minimized .widget-resizer { display: none; }
.widget.minimized .widget-min { display: flex; align-items: center; justify-content: center; padding: 6px; }
.widget.maximized { top: 10px !important; left: 10px !important; right: 10px !important; width: calc(100% - 20px) !important; height: calc(100% - 20px) !important; }
.widget.dragging { opacity: 0.95; }

.widget-header { display: flex; align-items: center; justify-content: space-between; background: rgba(27,32,39,0.95); padding: 10px 12px; border-bottom: 1px solid #2a2f38; cursor: move; }
.widget-title { font-weight: 600; }
.widget-header .widget-controls button { background: #232a33; color: #c9d1d9; border: 1px solid #2a2f38; padding: 4px 8px; border-radius: 4px; margin-left: 6px; cursor: pointer; }
.widget-body { padding: 10px; height: calc(100% - 44px); display: flex; flex-direction: column; }

.tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.tab { background: #232a33; border: 1px solid #2a2f38; color: #c9d1d9; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
.tab.active { background: #304050; border-color: #3b4a5a; }
.tab-panel { display: none; height: 100%; }
.tab-panel.active { display: block; }

#chat-log { background: #0f1216; border: 1px solid #2a2f38; border-radius: 6px; padding: 8px; height: 70%; overflow-y: auto; }
.msg { margin: 6px 0; padding: 6px 8px; border-radius: 6px; }
.msg.user { background: #1f2937; }
.msg.agent { background: #11334a; }

.chat-input { display: flex; gap: 8px; margin-top: 8px; }
.chat-input input { flex: 1; background: #0f1216; border: 1px solid #2a2f38; color: #e5e7eb; border-radius: 6px; padding: 8px; }
.chat-input button { background: #304050; border: 1px solid #3b4a5a; color: #e5e7eb; padding: 8px 12px; border-radius: 6px; cursor: pointer; }

.widget-resizer { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; background: linear-gradient(135deg, transparent 50%, #3b4a5a 50%); cursor: nwse-resize; }

/* Floating logo (FAB-style) */
.widget.fab { width: 145px; height: 145px; border-radius: 9999px; padding: 0; top: 20px; left: 20px; }
.widget.fab .widget-header { display: none; }
.widget.fab .widget-body { padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; }
.widget.fab .widget-resizer { width: 16px; height: 16px; }
.fab-logo { width: 80%; height: 80%; object-fit: contain; cursor: pointer; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }

/* Bottom control bar */
.control-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 5vh; min-height: 68px; background: rgba(18,22,28,0.96); border-top: 1px solid #2a2f38; display: flex; align-items: stretch; z-index: 1100; }
:root { --control-bar-height: 5vh; }
.control-bar .folders { display: flex; gap: 8px; align-items: center; padding: 8px; min-width: 240px; border-right: 1px solid #2a2f38; }
.control-bar .folder-btn { display: inline-flex; align-items: center; gap: 8px; background: #232a33; color: #e5e7eb; border: 1px solid #2a2f38; padding: 6px 10px; border-radius: 24px; cursor: pointer; white-space: nowrap; }
.control-bar .folder-btn.active { background: #304050; border-color: #3b4a5a; }
.control-bar .folder-btn img { width: 18px; height: 18px; }
.control-bar .items { flex: 1; display: none; }
.control-bar .items .item-btn { background: #232a33; color: #e5e7eb; border: 1px solid #2a2f38; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.control-bar .spacer { flex: 1; }

/* Use cursor panel visual style for folder popups; place above control bar */
.folder-panel { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1150; }

/* Hide floating Customize Cursor FAB; we will invoke it from the bar */
.cursor-fab { display: none !important; }

/* Legacy navbar styles retained if needed */
.widget.navbar { width: 250px; min-width: 250px; min-height: 400px; top: 20px; left: 20px; height: auto; display:none; }
.navbar .widget-body { padding: 8px; }
.navbar .navbar-content { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.logo { display: flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; }
.logo-img { width: 150px; min-width: 150px; height: auto; transition: filter 0.2s ease-in-out; display: block; margin: 0 auto; }
.nav-links { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.nav-links button { width: 100%; text-align: left; background: #232a33; color: #e5e7eb; border: 1px solid #2a2f38; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.nav-links .admin-skull { background: #3a1212; color: #ffb4b4; border-color: #5e2323; }

/* Status widget */
.status-panel .pad { padding: 8px; }
.status-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #232832; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid #2a2f38; }
.badge.ok { background: #10391e; color: #9fe9b9; border-color: #235c3a; }
.badge.fail { background: #3a1212; color: #ffb4b4; border-color: #5e2323; }
.links { display: flex; gap: 12px; padding-top: 8px; }
.links a { color: #79b8ff; text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* Buttons in popups */
.leaflet-popup-content .btn-open { background: #304050; border: 1px solid #3b4a5a; color: #e5e7eb; padding: 6px 10px; border-radius: 6px; cursor: pointer; }

/* Admin Browser */
.browser { display: flex; gap: 0; height: 100%; }
.browser .sidebar { width: clamp(150px, 18vw, 240px); min-width: 150px; border-right: 1px solid #2a2f38; padding: 8px; overflow-y: auto; }
.tab-vertical { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 8px; background: #232a33; color: #c9d1d9; border: 1px solid #2a2f38; border-radius: 6px; cursor: pointer; }
.tab-vertical.active { background: #304050; border-color: #3b4a5a; }
.browser .main { flex: 1; display: flex; flex-direction: column; }
.browser .toolbar { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid #2a2f38; flex-wrap: wrap; }
.browser .toolbar .spacer { flex: 1; }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { border: 1px solid #2a2f38; padding: 6px 8px; font-size: 13px; }
.grid th { position: sticky; top: 0; background: #1b2027; }
.grid-filters input { width: 100%; background: #0f1216; color: #e5e7eb; border: 1px solid #2a2f38; border-radius: 4px; padding: 4px; }

/* Loading spinner */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #3b4a5a; border-top-color: #79b8ff; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Music UI */
.pill-group { display:flex; gap:6px; align-items:center; }
.pill { background:#232a33; color:#e5e7eb; border:1px solid #2a2f38; padding:4px 10px; border-radius:999px; cursor:pointer; }
.pill.active { background:#304050; border-color:#3b4a5a; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.music-list { border:1px solid #2a2f38; border-radius:8px; overflow:hidden; }
.list-item { display:flex; gap:10px; align-items:center; padding:8px 10px; border-bottom:1px solid #1b2027; cursor:pointer; }
.list-item:hover { background:#1b2027; }
.list-item .title { font-weight:600; }
.avatar { width:32px; height:32px; border-radius:6px; background:#1f2530; border:1px solid #2a2f38; }
.avatar.avatar-sm { width:24px; height:24px; border-radius:4px; }