:root{--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--bg-primary: #080c14;--bg-surface: rgba(15, 23, 42, .75);--bg-card: rgba(18, 26, 46, .65);--bg-card-hover: rgba(26, 38, 68, .85);--border-subtle: rgba(255, 255, 255, .08);--border-focus: rgba(99, 102, 241, .5);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-cyan: #00f0ff;--accent-blue: #38bdf8;--accent-indigo: #6366f1;--accent-amber: #f59e0b;--accent-emerald: #10b981;--accent-rose: #f43f5e;--glass-blur: blur(20px);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.175, .885, .32, 1.275)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%;background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);overflow:hidden;-webkit-user-select:none;user-select:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:999px}.glass-card{background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-subtle);border-radius:14px;transition:all .25s var(--ease-smooth)}.glass-card:hover{background:var(--bg-card-hover);border-color:#ffffff26;box-shadow:0 8px 24px #0006}.app-container{display:flex;flex-direction:column;width:100vw;height:100vh;height:100dvh;position:relative;background:radial-gradient(circle at 50% 0%,#151d33,#080c14 70%);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.app-header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border-subtle);background:#080c14d9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:50;flex-shrink:0}.brand-section{display:flex;align-items:center;gap:12px}.brand-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent-indigo),var(--accent-cyan));display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px #6366f166}.brand-title{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:#fff}.brand-subtitle{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-cyan);font-weight:600}.view-mode-pill{display:flex;align-items:center;background:#0f172ae6;padding:4px;border-radius:12px;border:1px solid var(--border-subtle);gap:4px}.mode-btn{padding:7px 16px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}.mode-btn.active{background:linear-gradient(135deg,#6366f14d,#00f0ff40);color:#fff;border:1px solid rgba(0,240,255,.4);box-shadow:0 0 12px #00f0ff26}.status-pill{display:flex;align-items:center;gap:8px;padding:6px 14px;background:#10b9811a;border:1px solid rgba(16,185,129,.3);border-radius:999px;font-size:.78rem;font-weight:600;color:#34d399}.status-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981}.workspace-area{flex:1;display:flex;position:relative;overflow:hidden}.viewport-3d-full{width:100%;height:100%;position:relative;background:radial-gradient(circle at center,#111a2e,#080c14)}.viewport-overlay-top{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:20}.viewport-overlay-bottom{position:absolute;bottom:24px;left:24px;right:24px;max-width:900px;margin:0 auto;z-index:20;pointer-events:none}.viewport-overlay-bottom>*{pointer-events:auto}.dashboard-container{width:100%;height:100%;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px;max-width:1280px;margin:0 auto}.room-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.room-tab{padding:8px 18px;border-radius:10px;background:#1e293b80;border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s}.room-tab.active{background:var(--accent-indigo);color:#fff;border-color:#6366f199;box-shadow:0 0 16px #6366f159}.scenes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.scene-btn{padding:14px;border-radius:12px;background:#1e293b66;border:1px solid var(--border-subtle);color:var(--text-primary);display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s var(--ease-smooth)}.scene-btn:hover{background:#6366f126;border-color:#6366f166;transform:translateY(-2px)}.scene-icon{width:38px;height:38px;border-radius:10px;background:#ffffff14;display:flex;align-items:center;justify-content:center;color:var(--accent-cyan);flex-shrink:0}.devices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.device-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.device-info{display:flex;align-items:center;gap:12px}.device-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:#ffffff0d;transition:all .3s}.device-avatar.active{background:linear-gradient(135deg,#ffc10733,#f59e0b4d);box-shadow:0 0 16px #f59e0b40;color:#fbbf24}.device-name{font-size:.95rem;font-weight:700;color:#fff}.device-room{font-size:.75rem;color:var(--text-muted);display:flex;align-items:center;gap:6px;margin-top:2px}.protocol-tag{font-size:.65rem;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;letter-spacing:.05em;background:#ffffff0f;color:var(--text-secondary)}.protocol-tag.ihost{color:#f59e0b;background:#f59e0b26}.protocol-tag.matter{color:#00f0ff;background:#00f0ff26}.protocol-tag.tuya{color:#f97316;background:#f9731626}.protocol-tag.homekit{color:#ec4899;background:#ec489926}.protocol-tag.smartthings{color:#00f0ff;background:#00f0ff26;border:1px solid rgba(0,240,255,.3)}.toggle-switch{width:50px;height:28px;background:#ffffff1a;border-radius:999px;position:relative;cursor:pointer;transition:all .3s;border:1px solid rgba(255,255,255,.08);flex-shrink:0}.toggle-switch.on{background:linear-gradient(135deg,var(--accent-indigo),var(--accent-cyan));box-shadow:0 0 12px #00f0ff4d}.toggle-knob{width:22px;height:22px;background:#fff;border-radius:50%;position:absolute;top:2px;left:3px;transition:all .25s var(--ease-spring);box-shadow:0 2px 6px #0000004d}.toggle-switch.on .toggle-knob{transform:translate(22px)}.slider-container{display:flex;align-items:center;gap:12px;margin-top:10px}.custom-range{flex:1;accent-color:var(--accent-cyan);height:6px;border-radius:999px;cursor:pointer}.color-swatches{display:flex;gap:8px;margin-top:12px}.color-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .2s}.color-swatch.active,.color-swatch:hover{transform:scale(1.2);border-color:#fff;box-shadow:0 0 8px currentColor}.ai-bar-trigger{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:10px;padding:10px 20px;background:#0f172ae6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,240,255,.4);box-shadow:0 12px 36px #00000080,0 0 20px #00f0ff40;border-radius:999px;cursor:pointer;z-index:60;transition:all .25s var(--ease-smooth)}.ai-bar-trigger:hover{transform:translateY(-2px) scale(1.02);border-color:var(--accent-cyan)}.ai-avatar-pulse{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#00f0ff);display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px #00f0ff80}.ai-drawer{position:fixed;bottom:24px;right:24px;width:420px;max-width:calc(100vw - 48px);height:560px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;background:#0a0f1af2;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(0,240,255,.3);box-shadow:0 24px 64px #000000b3,0 0 32px #00f0ff26;border-radius:20px;z-index:100;overflow:hidden;animation:slide-up .25s var(--ease-spring)}@keyframes slide-up{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);background:#0f172a99}.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.chat-bubble{max-width:85%;padding:12px 16px;border-radius:14px;font-size:.9rem;line-height:1.45}.chat-bubble.user{align-self:flex-end;background:linear-gradient(135deg,var(--accent-indigo),#4338ca);color:#fff;border-bottom-right-radius:4px}.chat-bubble.assistant{align-self:flex-start;background:#1e293bcc;border:1px solid var(--border-subtle);color:#f1f5f9;border-bottom-left-radius:4px}.action-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:8px;background:#10b98126;border:1px solid rgba(16,185,129,.3);color:#34d399;font-size:.75rem;font-weight:600}.chat-input-area{padding:12px 16px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:8px;background:#0f172acc}.chat-input{flex:1;background:#ffffff0d;border:1px solid var(--border-subtle);border-radius:10px;padding:10px 14px;color:#fff;font-size:.88rem;outline:none}.chat-input:focus{border-color:var(--accent-cyan)}.chat-send-btn{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent-indigo),var(--accent-cyan));border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.quick-prompts{display:flex;gap:6px;overflow-x:auto;padding:0 16px 10px}.prompt-chip{font-size:.75rem;padding:4px 10px;border-radius:999px;background:#ffffff0f;border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;white-space:nowrap}.prompt-chip:hover{color:var(--accent-cyan);border-color:var(--accent-cyan)}@keyframes slide-up-sheet{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.app-header{height:54px!important;min-height:54px!important;padding:0 12px!important;flex-wrap:nowrap!important;gap:8px!important}.brand-subtitle,.status-text{display:none!important}.brand-icon{width:32px!important;height:32px!important;border-radius:8px!important}.brand-title{font-size:.92rem!important;font-weight:800!important}.view-mode-pill{padding:2px!important;gap:2px!important}.mode-btn{padding:5px 8px!important;font-size:.75rem!important;gap:4px!important}.mode-btn span{font-size:.72rem!important}.header-matter-btn,.header-automations-btn .btn-label{display:none!important}.header-automations-btn{padding:6px!important;width:34px!important;height:34px!important;justify-content:center!important}.status-pill{padding:6px!important}.dashboard-container{padding:12px;gap:12px}.scenes-grid{grid-template-columns:1fr 1fr;gap:8px}.devices-grid{grid-template-columns:1fr;gap:10px}.viewport-overlay-top{top:8px!important;left:8px!important;right:8px!important;transform:none!important;display:flex;justify-content:center}.top-hud-bar{gap:6px!important}.room-tabs{padding:3px 5px!important}.room-tab{padding:4px 8px!important;font-size:.72rem!important}.climate-hud-capsule{padding:4px 8px!important;font-size:.74rem!important}.viewport-overlay-bottom{bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;left:10px!important;right:64px!important;max-width:calc(100vw - 74px)!important;margin:0!important}.quick-control-dock{padding:6px 8px!important;border-radius:16px!important}.dock-item-btn{padding:5px 8px!important;font-size:.72rem!important;border-radius:10px!important}.ai-bar-trigger{bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;right:10px!important;width:46px!important;height:46px!important;border-radius:50%!important;padding:0!important;justify-content:center!important;box-shadow:0 8px 24px #0009,0 0 16px #00f0ff66!important}.ai-bar-trigger span{display:none!important}.ai-avatar-pulse{width:36px!important;height:36px!important}.ai-drawer{right:8px!important;left:8px!important;width:auto!important;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;max-width:100vw!important;height:80vh!important;max-height:580px!important}}
