/* =========================================================== AEGIS — military command center meets sci-fi HUD =========================================================== */ :root { --bg: #080c0e; /* near black */ --bg-sidebar: #060a0b; --accent: #00d4a0; /* teal/cyan — overridable per user */ --user-accent: #3080c0; /* blue */ --border: #0d2a2a; /* dark teal */ --surface: #0a1a18; /* card / AEGIS bubble */ --user-surface:#0a1a2a; /* user bubble */ --muted: #8ab0a8; /* muted text */ --system: #004433; /* system text */ --active: #c0d8d0; /* active text */ --mono: "Share Tech Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --sans: "Rajdhani", "Segoe UI", system-ui, sans-serif; } /* Light theme — applied via [data-theme="light"] on . Tactical/mono feel kept; accent stays the user's chosen color. */ :root[data-theme="light"] { --bg: #f4f4f2; /* page background */ --bg-sidebar: #ebebeb; /* sidebar / rails */ --border: #c0d8d0; --surface: #ffffff; /* cards / AEGIS bubble */ --user-surface:#ebebeb; /* user bubble */ --muted: #1a2a28; /* secondary text */ --system: #5a6f68; /* de-emphasized text */ --active: #0a1a18; /* primary text */ } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--active); font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; overflow: hidden; } /* Mono utility — labels, timestamps, status, headers, identifiers */ .mono, .brand-name, .sys-status-text, .user-role, .new-op-btn, .recents-label, .recents li .ts, .header-label, .chat-sub, .hud, .msg .who, .typing-label, .statusbar, .footer-line, .overlay-sub, .field-label, .overlay-btn, .overlay-btn-sm, .overlay-input, .overlay-select, .overlay-title { font-family: var(--mono); } #app { display: grid; grid-template-columns: 220px 1fr 320px; grid-template-rows: 1fr auto; height: 100dvh; } #app.hub-collapsed { grid-template-columns: 220px 1fr 0; } #app.hub-collapsed .hub { display: none; } /* ---------------- Sidebar ---------------- */ .sidebar { grid-row: 1 / 2; grid-column: 1; position: relative; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; z-index: 30; } /* L-shaped corner accent marks */ .corner { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2; } .corner-tl { top: 8px; left: 8px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); } .corner-br { bottom: 8px; right: 8px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); } .sidebar-top { padding: 18px 16px 12px; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { width: 16px; height: 16px; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .brand-name { font-size: 18px; letter-spacing: 3px; color: var(--active); } .sys-status { display: flex; align-items: center; gap: 7px; margin-top: 10px; } .sys-status-text { font-size: 9px; letter-spacing: 1px; color: var(--accent); } .status-dot { width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; animation: blink-dot 1.6s steps(1, end) infinite; } @keyframes blink-dot { 0%,60% { opacity: 1; } 61%,100% { opacity: .15; } } .user-badge { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 9px; background: var(--surface); border: 1px solid var(--border); } .user-avatar { width: 30px; height: 30px; background: var(--user-surface); border: 1px solid var(--user-accent); color: var(--user-accent); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; flex-shrink: 0; } .user-badge-info { min-width: 0; flex: 1; } .user-name { font-size: 15px; font-weight: 600; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-agent { font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--muted); margin-top: 2px; text-transform: uppercase; } .user-role { font-size: 8.5px; letter-spacing: 1px; color: var(--accent); margin-top: 1px; } .logout-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 26px; height: 26px; font-size: 13px; cursor: pointer; flex-shrink: 0; } .logout-btn:hover { border-color: var(--accent); color: var(--accent); } .new-op-btn { width: 100%; margin-top: 14px; padding: 9px; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; letter-spacing: 2px; cursor: pointer; transition: background .12s; } .new-op-btn:hover { background: rgba(0, 212, 160, 0.1); } .recents-label { font-size: 9px; letter-spacing: 2px; color: var(--system); padding: 14px 16px 8px; } .recents { list-style: none; margin: 0; padding: 0 8px; overflow-y: auto; flex: 1; min-height: 0; } .recents li { display: flex; align-items: center; gap: 6px; padding: 9px 9px; border-left: 2px solid transparent; cursor: pointer; transition: background .1s; } .recents li:hover { background: var(--surface); } .recents li.active { background: var(--surface); border-left-color: var(--accent); } .recents li .info { flex: 1; min-width: 0; } .recents li .title { display: block; font-size: 14px; color: var(--active); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recents li .ts { display: block; font-size: 9px; letter-spacing: 1px; color: var(--muted); margin-top: 2px; } .recents li .del { opacity: 0; background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; flex-shrink: 0; } .recents li:hover .del { opacity: 1; } .recents li .del:hover { color: var(--user-accent); } .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); } .footer-line { font-size: 9px; letter-spacing: 1px; color: var(--system); line-height: 1.7; } .systems { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .sys-btn { width: 100%; text-align: left; background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; padding: 8px 9px; cursor: pointer; transition: .12s; } .sys-btn:hover { border-color: var(--accent); color: var(--accent); } .sys-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(0,212,160,.08); } /* thin dark scrollbar w/ teal thumb */ .recents::-webkit-scrollbar { width: 6px; } .recents::-webkit-scrollbar-track { background: var(--bg-sidebar); } .recents::-webkit-scrollbar-thumb { background: var(--accent); } /* ---------------- Chat ---------------- */ .chat { grid-row: 1 / 2; grid-column: 2; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); } /* subtle scan line overlay */ .scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( to bottom, rgba(0, 212, 160, 0.03) 0px, rgba(0, 212, 160, 0.03) 1px, transparent 1px, transparent 3px ); } .chat-header { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); position: relative; z-index: 10; } .header-label { font-size: 9px; letter-spacing: 2px; color: var(--system); } .chat-title-wrap { flex: 1; min-width: 0; } .chat-title { font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: .5px; color: var(--active); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .chat-sub { font-size: 9px; letter-spacing: 1px; color: var(--muted); margin-top: 2px; } .hud { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .hud-item { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; } .hud-key { font-size: 8px; letter-spacing: 1.5px; color: var(--system); } .hud-val { font-size: 11px; letter-spacing: 1px; color: var(--accent); } .icon-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 38px; height: 38px; font-size: 15px; cursor: pointer; display: grid; place-items: center; transition: .12s; flex-shrink: 0; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } .icon-btn.active { border-color: var(--accent); color: var(--accent); } .hud-tts { width: 34px; height: 34px; } .menu-btn { display: none; } .messages { flex: 1; overflow-y: auto; padding: 22px clamp(14px, 5vw, 70px); display: flex; flex-direction: column; gap: 18px; min-height: 0; position: relative; z-index: 6; } .welcome { margin: auto; text-align: center; max-width: 540px; color: var(--muted); } .welcome-mark { width: 34px; height: 34px; margin: 0 auto; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .welcome h1 { font-family: var(--mono); color: var(--active); font-size: 24px; letter-spacing: 3px; margin: 16px 0 8px; } .welcome p { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); } /* message bubbles */ .msg { display: flex; gap: 12px; max-width: 860px; width: 100%; margin: 0 auto; } .msg .avatar { width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; flex-shrink: 0; } .msg.assistant .avatar { background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .msg.user .avatar { background: var(--user-surface); border: 1px solid var(--user-accent); color: var(--user-accent); } .msg .body { flex: 1; min-width: 0; } .msg .who { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 5px; } .msg.assistant .who { color: var(--accent); } .msg.user .who { color: var(--user-accent); } .bubble { border-radius: 0; padding: 11px 14px; line-height: 1.55; font-size: 15px; color: var(--active); white-space: pre-wrap; word-wrap: break-word; } .msg.assistant .bubble { background: var(--surface); border-left: 2px solid var(--accent); } .msg.user .bubble { background: var(--user-surface); border-right: 2px solid var(--user-accent); } .msg.user { flex-direction: row-reverse; } .msg.user .body { display: flex; flex-direction: column; align-items: flex-end; } .msg.user .bubble { text-align: left; } .bubble code { font-family: var(--mono); background: #060f0d; padding: 1px 5px; font-size: 13px; color: var(--accent); } .bubble pre { background: #060f0d; border: 1px solid var(--border); padding: 12px; overflow-x: auto; } .bubble pre code { background: none; padding: 0; color: var(--active); } .msg-img { max-width: min(320px, 70%); border: 1px solid var(--border); margin-bottom: 8px; display: block; } .msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .msg-attachments .msg-img { margin-bottom: 0; } .msg-file-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: var(--muted); border: 1px solid var(--border); padding: 6px 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Placeholder shown when the browser can't decode the image (e.g. HEIC). */ .msg-img-fallback { width: 64px; height: 64px; object-fit: contain; background: var(--panel2, #142a26); padding: 8px; } /* ---- Rich markdown inside bubbles (family-hub lists/grids/SITREP) ---- */ .bubble p { margin: 0 0 8px; } .bubble p:last-child { margin-bottom: 0; } .bubble h1, .bubble h2, .bubble h3 { font-family: var(--mono); color: var(--accent); letter-spacing: 1.5px; margin: 10px 0 8px; line-height: 1.3; } .bubble h1 { font-size: 15px; } .bubble h2 { font-size: 13px; } .bubble h3 { font-size: 11px; color: var(--muted); } .bubble h1:first-child, .bubble h2:first-child, .bubble h3:first-child { margin-top: 0; } .bubble hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; } .bubble a { color: var(--accent); text-decoration: underline; } .bubble del { color: var(--system); } .bubble em { color: var(--muted); font-style: italic; } .bubble ul.md-list { list-style: none; margin: 6px 0; padding-left: 4px; } .bubble ul.md-list li { position: relative; padding-left: 16px; margin: 3px 0; line-height: 1.5; } .bubble ul.md-list li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); font-size: 11px; } .bubble ul.md-list li.md-check { padding-left: 0; } .bubble ul.md-list li.md-check::before { content: none; } .bubble li.md-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; border: 1px solid var(--accent); background: transparent; vertical-align: -2px; margin-right: 6px; position: relative; flex-shrink: 0; } .bubble li.md-check input[type="checkbox"]:checked { background: var(--accent); } .bubble li.md-check input[type="checkbox"]:checked::after { content: "✓"; position: absolute; top: -3px; left: 1px; font-size: 11px; color: var(--bg); } .bubble table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; } .bubble th, .bubble td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; } .bubble th { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); background: rgba(0,212,160,.06); } /* processing indicator */ .typing { display: inline-flex; gap: 5px; align-items: center; } .typing span { width: 6px; height: 6px; background: var(--accent); animation: blink 1.2s infinite; } .typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; } .typing-label { font-size: 9px; letter-spacing: 1.5px; color: var(--accent); margin-left: 8px; } @keyframes blink { 0%,80%,100% { opacity: .2 } 40% { opacity: 1 } } /* ---------------- Composer ---------------- */ .attach-preview { display: flex; align-items: center; gap: 10px; padding: 10px clamp(14px, 5vw, 70px); border-top: 1px solid var(--border); position: relative; z-index: 6; flex-wrap: wrap; } .attach-list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; } .attach-chip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); padding: 4px 6px 4px 4px; max-width: 180px; } .attach-chip img { width: 36px; height: 36px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } .attach-file-icon { font-size: 18px; width: 36px; text-align: center; flex-shrink: 0; } .attach-chip-name { font-family: var(--mono); font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .attach-chip-remove { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; flex-shrink: 0; } .attach-chip-remove:hover { color: var(--user-accent); } .attach-name { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-remove { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 28px; height: 28px; cursor: pointer; } .attach-remove:hover { border-color: var(--user-accent); color: var(--user-accent); } .attach-action { background: transparent; border: 1px solid var(--border); color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 6px 10px; cursor: pointer; white-space: nowrap; } .attach-action:hover { border-color: var(--accent); background: rgba(0,212,160,.08); } .attach-action.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .mask-status { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--accent); white-space: nowrap; } /* ---------------- Mask editor overlay ---------------- */ .mask-editor { position: relative; width: min(860px, 94vw); max-height: 92vh; display: flex; flex-direction: column; gap: 12px; background: var(--bg-sidebar); border: 1px solid var(--border); padding: 18px; } .mask-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .mask-editor-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--accent); margin-top: 4px; } .mask-tools { display: flex; align-items: center; gap: 10px; } .mask-tool-label { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--system); } .mask-brush { width: 120px; accent-color: var(--accent); cursor: pointer; } .mask-tool-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 6px 10px; cursor: pointer; } .mask-tool-btn:hover { border-color: var(--accent); color: var(--accent); } .mask-tool-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .mask-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: repeating-conic-gradient(#1a1f1d 0% 25%, #141817 0% 50%) 50% / 22px 22px; border: 1px solid var(--border); overflow: hidden; } .mask-canvas { position: absolute; max-width: 100%; max-height: 64vh; } .mask-paint { cursor: crosshair; touch-action: none; } .mask-editor-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .mode-tabs { display: flex; gap: 6px; padding: 10px clamp(14px, 5vw, 70px) 0; border-top: 1px solid var(--border); position: relative; z-index: 6; } .mode-tab { background: transparent; border: 1px solid var(--border); color: var(--text-dim, #8ab0a8); font-family: "Share Tech Mono", monospace; font-size: 11px; letter-spacing: 1px; padding: 4px 12px; cursor: pointer; border-radius: 3px; transition: color 0.15s, border-color 0.15s, background 0.15s; } .mode-tab:hover { color: var(--accent); border-color: var(--accent); } .mode-tab.active { color: var(--accent); border-color: var(--accent); background: rgba(0, 212, 160, 0.1); } .think-tabs { display: flex; gap: 6px; padding: 6px clamp(14px, 5vw, 70px) 0; position: relative; z-index: 6; } .think-tab { background: transparent; border: 1px solid var(--border); color: var(--text-dim, #8ab0a8); font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: 1px; padding: 3px 10px; cursor: pointer; border-radius: 3px; } .think-tab:hover { color: var(--accent); border-color: var(--accent); } .think-tab.active { color: #f0c040; border-color: #806820; background: rgba(240, 192, 64, 0.08); } .composer { display: flex; align-items: flex-end; gap: 9px; padding: 10px clamp(14px, 5vw, 70px) 16px; position: relative; z-index: 6; } .input { flex: 1; resize: none; background: var(--surface); border: 1px solid var(--border); color: var(--active); padding: 11px 14px; font-family: var(--sans); font-size: 15px; line-height: 1.5; max-height: 160px; outline: none; } .input::placeholder { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--system); } .input:focus { border-color: var(--accent); } .mic-btn.listening { border-color: var(--user-accent); color: var(--user-accent); animation: micpulse 1.3s infinite; } @keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(48,128,192,.4) } 50% { box-shadow: 0 0 0 6px rgba(48,128,192,0) } } /* angled chevron send button via clip-path */ .send-btn { position: relative; width: 50px; height: 40px; background: var(--accent); border: none; cursor: pointer; flex-shrink: 0; clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); transition: filter .12s; } .send-btn::after { content: ""; position: absolute; top: 50%; left: 42%; width: 9px; height: 9px; border-top: 2px solid var(--bg); border-right: 2px solid var(--bg); transform: translate(-50%, -50%) rotate(45deg); } .send-btn:hover { filter: brightness(1.15); } .send-btn:disabled { opacity: .4; cursor: not-allowed; } /* STOP state — square red button while a request is in flight. */ .send-btn.stop { background: #e24b4a; clip-path: none; animation: stopPulse 1.4s ease-in-out infinite; } .send-btn.stop::after { top: 50%; left: 50%; width: 12px; height: 12px; border: 0; background: #fff; transform: translate(-50%, -50%) rotate(0); } @keyframes stopPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } /* Streaming bubble + thinking indicator */ .stream-bubble .stream-text { white-space: pre-wrap; } .stream-bubble .stream-text:empty { display: none; } .thinking { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; } .thinking .thinking-note { flex-basis: 100%; margin-top: 6px; font-size: 11px; letter-spacing: .3px; color: var(--muted, #8ab0a8); font-style: italic; } .msg.cancelled .cancel-note { font-size: 12px; letter-spacing: 1px; color: var(--muted, #8ab0a8); font-style: italic; padding: 4px 0; opacity: .8; } .backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 20; } /* ---------------- Status bar ---------------- */ .statusbar { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 18px; background: #04070700; background-color: #050807; border-top: 1px solid var(--border); font-size: 9px; letter-spacing: 1px; color: var(--system); z-index: 40; } .statusbar-left { display: flex; align-items: center; gap: 8px; } .statusbar .status-dot { width: 6px; height: 6px; } .statusbar-right { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------- Overlays: login + onboarding ---------------- */ .overlay { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 100; padding: 20px; } .overlay::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,212,160,.03) 0px, rgba(0,212,160,.03) 1px, transparent 1px, transparent 3px ); } .overlay-card { position: relative; width: 360px; max-width: 92vw; text-align: center; background: var(--bg-sidebar); border: 1px solid var(--border); padding: 36px 30px; } .overlay-card.wide { width: 420px; text-align: left; } .overlay-mark { width: 30px; height: 30px; margin: 0 auto; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .overlay-title { letter-spacing: 5px; font-size: 22px; margin: 14px 0 4px; text-align: center; color: var(--active); } .overlay-card.wide .overlay-title { font-size: 18px; letter-spacing: 3px; } .overlay-sub { font-size: 10px; letter-spacing: 1px; color: var(--accent); margin-bottom: 22px; text-align: center; } .overlay-input, .overlay-select { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--active); padding: 12px 14px; font-size: 13px; letter-spacing: 1px; outline: none; margin-bottom: 12px; } .overlay-input::placeholder { color: var(--system); } .overlay-input:focus, .overlay-select:focus { border-color: var(--accent); } .field-label { display: block; font-size: 9px; letter-spacing: 2px; color: var(--system); margin: 6px 0 6px; } .voice-row { display: flex; gap: 8px; align-items: stretch; } .voice-row .overlay-select { margin-bottom: 12px; } .overlay-btn { width: 100%; padding: 12px; background: var(--accent); border: none; color: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: 2px; cursor: pointer; margin-top: 6px; } .overlay-btn:hover { filter: brightness(1.12); } .overlay-btn-sm { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 0 14px; height: 44px; font-size: 11px; letter-spacing: 1px; cursor: pointer; white-space: nowrap; margin-bottom: 12px; } .overlay-btn-sm:hover { background: rgba(0,212,160,.1); } .overlay-err { color: var(--user-accent); font-family: var(--mono); font-size: 11px; letter-spacing: 1px; min-height: 16px; margin-top: 10px; text-align: center; } /* show/hide password field */ .pw-field { position: relative; margin-bottom: 12px; } .pw-field .overlay-input { margin-bottom: 0; padding-right: 46px; } .pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 44px; display: grid; place-items: center; background: transparent; border: none; color: var(--system); cursor: pointer; } .pw-toggle:hover { color: var(--accent); } .pw-toggle .eye-off { display: none; } .pw-toggle.revealed .eye-open { display: none; } .pw-toggle.revealed .eye-off { display: block; } /* Calendar accounts manager */ .cal-account-list { list-style: none; margin: 0 0 16px; padding: 0; } .cal-account-list:empty::after { content: "NO ACCOUNTS LINKED"; display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--system); text-align: center; padding: 14px 0; } .cal-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); padding: 10px 12px; margin-bottom: 8px; } .cal-account-email { font-family: var(--mono); font-size: 12px; letter-spacing: .5px; color: var(--active); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-account-remove { flex: none; background: transparent; border: 1px solid var(--user-accent); color: var(--user-accent); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 5px 10px; cursor: pointer; } .cal-account-remove:hover { background: rgba(192,48,80,.12); } /* ================= FAMILY HUB PANEL ================= */ .hub { grid-row: 1 / 2; grid-column: 3; position: relative; background: var(--bg-sidebar); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; z-index: 8; } .hub-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .hub-title { font-family: var(--mono); font-size: 12px; letter-spacing: 4px; color: var(--accent); } .hub-head-actions { display: flex; gap: 6px; } .hub-icon { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; cursor: pointer; display: grid; place-items: center; font-size: 13px; } .hub-icon:hover { border-color: var(--accent); color: var(--accent); } .widget-stack { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .widget-stack::-webkit-scrollbar { width: 8px; } .widget-stack::-webkit-scrollbar-track { background: var(--bg-sidebar); } .widget-stack::-webkit-scrollbar-thumb { background: var(--border); } .widget-stack::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ---- widget card ---- */ .widget { background: var(--surface); border: 1px solid #0d3030; border-left: 2px solid var(--accent); position: relative; } .widget.dragging { opacity: .5; } .widget-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: default; border-bottom: 1px solid var(--border); } .widget-grip { font-family: var(--mono); color: var(--muted); cursor: grab; opacity: .4; transition: opacity .12s, color .12s; font-size: 14px; line-height: 1; } .widget:hover .widget-grip { opacity: 1; color: var(--accent); } .widget-name { flex: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; } .widget-tools { position: relative; display: flex; gap: 4px; } .widget-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; } .widget-btn:hover { color: var(--accent); } .widget-body { padding: 12px; font-family: var(--sans); font-size: 14px; color: var(--active); } .widget.collapsed .widget-body { display: none; } .widget-body, .widget-row, .ev-name, .meal-name, .chore-name, .gro-text, .store-name, .fam-name { color: var(--active); } /* per-widget gear dropdown */ .widget-menu { position: absolute; top: 26px; right: 0; z-index: 20; min-width: 150px; background: var(--bg-sidebar); border: 1px solid var(--accent); padding: 4px; } .widget-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--active); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 8px 10px; cursor: pointer; } .widget-menu button:hover { background: #0d2a28; color: var(--accent); } .widget-empty { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); text-align: center; padding: 8px 0; } .widget-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid rgba(13,42,42,.5); } .widget-row:last-child { border-bottom: none; } .widget-row:hover { background: #0d2a28; } .w-seeall { display: block; width: 100%; text-align: center; background: transparent; border: none; color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 8px 0 2px; cursor: pointer; } /* weather widget */ .wx-now { display: flex; align-items: center; gap: 12px; } .wx-emoji { font-size: 34px; line-height: 1; } .wx-temp { font-size: 30px; font-weight: 700; color: var(--active); } .wx-label { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); } .wx-feels { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--accent); margin-top: 6px; } .wx-meta { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 1px; margin-top: 4px; } .wx-today { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 1px; } /* calendar / list rows */ .ev-time { font-family: var(--mono); font-size: 10px; color: var(--accent); min-width: 60px; letter-spacing: .5px; } .ev-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev-owner { font-family: var(--mono); font-size: 8px; color: var(--muted); letter-spacing: 1px; } /* grocery widget */ .gro-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--border); } .gro-tab { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; padding: 4px 9px; cursor: pointer; white-space: nowrap; } .gro-tab:hover { border-color: var(--accent); color: var(--accent); } .gro-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 700; } .gro-tab-add { color: var(--accent); font-size: 13px; line-height: 1; padding: 3px 9px; } .gro-check { width: 18px; height: 18px; flex-shrink: 0; border: 1px solid var(--border); cursor: pointer; display: grid; place-items: center; color: var(--accent); font-size: 12px; } .gro-item.done .gro-text { color: var(--system); text-decoration: line-through; } .gro-text { flex: 1; cursor: pointer; } .gro-add { display: flex; gap: 6px; margin-top: 8px; } .gro-add input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--active); padding: 7px 9px; font-family: var(--sans); font-size: 13px; outline: none; } .gro-add input::placeholder { color: #005540; } .gro-add input:focus { border-color: var(--accent); } .gro-add button, .w-action-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 0 10px; cursor: pointer; } .gro-add button:hover, .w-action-btn:hover { background: rgba(0,212,160,.1); } .store-mode-btn { width: 100%; margin-top: 9px; background: var(--accent); color: var(--bg); border: none; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; padding: 9px; cursor: pointer; font-weight: 700; } .store-mode-btn:hover { filter: brightness(1.12); } /* meals widget grid */ .meal-grid { display: flex; flex-direction: column; gap: 4px; } .meal-day { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; } .meal-day:hover { background: #0d2a28; border-color: var(--accent); } .meal-dow { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--accent); min-width: 32px; } .meal-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .meal-name.empty { color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 1px; border: 1px solid var(--accent); padding: 3px 10px; flex: none; } .meal-day:hover .meal-name.empty { background: rgba(0,212,160,.12); } .meal-by { font-family: var(--mono); font-size: 8px; color: var(--muted); } /* chores widget */ .chore-item { gap: 8px; } .chore-check { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--border); cursor: pointer; display: grid; place-items: center; color: var(--accent); font-size: 13px; } .chore-main { flex: 1; min-width: 0; } .chore-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chore-pts-inline { color: var(--muted); font-family: var(--mono); font-size: 11px; } .chore-due { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); } .chore-item.overdue .chore-due { color: #a32d2d; } .chore-item.overdue { border-left: 2px solid #a32d2d; } .chore-pts { font-family: var(--mono); font-size: 10px; color: #d4a017; } .chore-item.done .chore-name { color: var(--system); text-decoration: line-through; } /* progress bar (chores/points) */ .progress { height: 6px; background: var(--bg); border: 1px solid var(--border); margin: 8px 0 4px; } .progress-fill { height: 100%; background: var(--accent); transition: width .5s ease; } .progress-label { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); } /* points widget */ .points-big { font-size: 52px; font-weight: 700; color: #d4a017; text-align: center; line-height: 1; font-family: var(--sans); } .points-big.pop { animation: pointsPop .6s ease; } @keyframes pointsPop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } } .points-badge { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; margin-top: 4px; } .badge-bronze { color: #cd7f32; } .badge-silver { color: #c0c0c0; } .badge-gold { color: #d4a017; } .badge-legend { color: var(--accent); } .points-recent { margin-top: 10px; } .reward-ladder { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; } .reward-ladder-label { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--system); margin-bottom: 8px; } .reward-row { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid rgba(13,42,42,.4); font-size: 13px; } .reward-row:last-child { border-bottom: none; } .reward-row.locked { opacity: .55; } .reward-row.unlocked { color: var(--active); } .reward-row.redeemed { opacity: .7; } .reward-icon { font-family: var(--mono); font-size: 12px; width: 18px; text-align: center; } .reward-icon.locked { color: var(--system); } .reward-icon.unlocked { color: var(--accent); } .reward-pts { font-family: var(--mono); font-size: 10px; color: var(--muted); min-width: 44px; } .reward-name { flex: 1; } /* family overview */ .fam-row { display: flex; gap: 9px; padding: 9px 8px; border-bottom: 1px solid rgba(13,42,42,.5); } .fam-row:last-child { border-bottom: none; } .fam-avatar { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; border: 1px solid; border-radius: 50%; } .fam-admin .fam-avatar { color: var(--accent); border-color: var(--accent); } .fam-adult .fam-avatar { color: var(--user-accent); border-color: var(--user-accent); } .fam-child .fam-avatar { color: var(--warn-amber, #d4a017); border-color: #d4a017; } .fam-info { flex: 1; min-width: 0; } .fam-name { font-size: 13px; font-weight: 600; } .fam-line { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fam-clear { color: var(--muted); font-style: italic; opacity: .85; } /* quick actions */ .qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .qa-btn { background: var(--bg); border: 1px solid var(--border); color: var(--active); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 11px 6px; cursor: pointer; text-align: center; } .qa-btn:hover { border-color: var(--accent); color: var(--accent); } /* ================= STORE MODE ================= */ .store-mode { position: fixed; inset: 0; z-index: 300; background: #040809; display: flex; flex-direction: column; } .store-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); } .store-title { font-family: var(--mono); font-size: 20px; letter-spacing: 4px; color: var(--accent); } .store-count { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--muted); margin-top: 4px; } .store-exit { background: transparent; border: 1px solid var(--user-accent); color: var(--user-accent); font-family: var(--mono); font-size: 12px; letter-spacing: 1px; padding: 12px 16px; cursor: pointer; } .store-list { flex: 1; overflow-y: auto; padding: 14px 18px 0; } .store-cat { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: var(--system); margin: 18px 0 8px; } .store-row { display: flex; align-items: center; gap: 16px; padding: 16px 14px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: 18px; } .store-row:active { background: #0d2a28; } .store-box { width: 30px; height: 30px; flex-shrink: 0; border: 2px solid var(--accent); display: grid; place-items: center; color: var(--accent); font-size: 20px; } .store-row.done { opacity: .55; } .store-row.done .store-name { text-decoration: line-through; color: var(--system); } .store-row.done .store-box { border-color: var(--system); color: var(--system); } .store-name { flex: 1; } .store-add { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); } .store-add-input { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--active); padding: 14px; font-size: 16px; outline: none; } .store-add-input:focus { border-color: var(--accent); } .store-add-btn { background: var(--accent); border: none; color: var(--bg); font-family: var(--mono); font-size: 13px; letter-spacing: 2px; padding: 0 22px; cursor: pointer; font-weight: 700; } /* ================= MODALS (recipe / settings) ================= */ .modal-overlay { position: fixed; inset: 0; z-index: 250; padding: 20px; background: rgba(4,8,9,.95); display: grid; place-items: center; } .modal-card { position: relative; width: 460px; max-width: 94vw; max-height: 90vh; overflow-y: auto; background: var(--bg-sidebar); border: 1px solid var(--border); padding: 28px 26px; } .modal-close { position: absolute; top: 12px; right: 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; cursor: pointer; font-size: 13px; } .modal-close:hover { border-color: var(--user-accent); color: var(--user-accent); } .recipe-day { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: var(--accent); } .recipe-name { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: 1px; color: var(--active); margin: 4px 0 6px; } .recipe-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--system); margin-bottom: 16px; } .recipe-section { margin-bottom: 14px; } .recipe-label { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--system); margin-bottom: 6px; } .recipe-hint { color: var(--system); opacity: .7; } .recipe-input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--active); padding: 10px 12px; font-family: var(--sans); font-size: 14px; outline: none; resize: vertical; } .recipe-input:focus { border-color: var(--accent); } .recipe-input[readonly] { color: var(--muted); } .recipe-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .recipe-status { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--accent); min-height: 14px; margin-top: 8px; } .recipe-done-btn { border-color: var(--accent); color: var(--accent); } .recipe-done-btn:hover { background: var(--accent); color: var(--bg); } /* Recipe toolbar (change meal / serves / generate). */ .recipe-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 16px; } .recipe-serves { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--system); display: flex; align-items: center; gap: 6px; } .recipe-serves-input { width: 56px; background: var(--surface); border: 1px solid var(--border); color: var(--active); padding: 6px 8px; font-family: var(--mono); font-size: 13px; outline: none; } .recipe-serves-input:focus { border-color: var(--accent); } /* Favorite recipes picker. */ .fav-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; } .fav-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); } .fav-info { flex: 1; min-width: 0; } .fav-name { font-family: var(--sans); font-size: 15px; color: var(--active); } .fav-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--system); margin-top: 2px; } .fav-use { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; cursor: pointer; background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 7px 12px; } .fav-use:hover { background: var(--accent); color: var(--bg); } .fav-del { font-family: var(--mono); font-size: 12px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 6px 9px; } .fav-del:hover { border-color: var(--danger); color: var(--danger); } .fav-empty { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--system); padding: 16px 0; } /* Completed-meal checkmark in the meal-plan widget. */ .meal-day.done { border-color: var(--accent); } .meal-day.done .meal-name { color: var(--muted); } .meal-check { color: var(--accent); font-weight: 700; } /* ================= COOK VIEW (fullscreen cooking mode) ================= */ .cook-view { position: fixed; inset: 0; z-index: 400; /* Slightly warmer than the command center — easier on the eyes in a kitchen. */ background: #14100c; color: #f2ede4; flex-direction: column; padding: 18px clamp(16px, 5vw, 64px) 24px; font-family: var(--sans); } .cook-top { display: flex; align-items: center; gap: 16px; } .cook-progress { flex: 1; height: 8px; background: #2a2218; border: 1px solid #3a2f20; border-radius: 4px; overflow: hidden; } .cook-progress-bar { height: 100%; width: 0%; background: #f0a830; transition: width .25s ease; } .cook-exit { background: transparent; border: 1px solid #5a4a30; color: #e0c89a; font-family: var(--mono); font-size: 14px; letter-spacing: 2px; padding: 10px 16px; cursor: pointer; } .cook-exit:hover { border-color: #f0a830; color: #f0a830; } .cook-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; min-height: 0; } .cook-stepnum { font-family: var(--mono); font-size: 18px; letter-spacing: 4px; color: #f0a830; } .cook-step { font-size: clamp(22px, 4vw, 40px); line-height: 1.4; max-width: 22ch; font-weight: 500; } .cook-timer-btn { background: #f0a830; border: none; color: #14100c; font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: 2px; padding: 16px 32px; cursor: pointer; border-radius: 6px; } .cook-timer-btn:hover { filter: brightness(1.1); } .cook-timer-display { font-family: var(--mono); font-size: clamp(40px, 9vw, 84px); font-weight: 700; color: #f0a830; letter-spacing: 3px; } .cook-timer-display.done { color: #4ad295; animation: cook-flash 1s steps(2) infinite; } @keyframes cook-flash { 50% { opacity: .35; } } .cook-nav { display: flex; gap: 16px; } .cook-nav-btn { flex: 1; background: #221a10; border: 1px solid #4a3b22; color: #f2ede4; font-family: var(--mono); font-size: 20px; letter-spacing: 2px; padding: 22px; cursor: pointer; border-radius: 6px; } .cook-nav-btn:hover:not(:disabled) { border-color: #f0a830; color: #f0a830; } .cook-nav-btn:disabled { opacity: .3; cursor: default; } .cook-done-btn { margin-top: 14px; background: var(--accent); border: none; color: #08110d; font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: 2px; padding: 18px; cursor: pointer; border-radius: 6px; width: 100%; } .cook-done-btn:hover { filter: brightness(1.08); } .cook-ingredients { margin-top: 14px; } .cook-ing-toggle { background: transparent; border: 1px solid #4a3b22; color: #e0c89a; font-family: var(--mono); font-size: 14px; letter-spacing: 2px; padding: 12px 18px; cursor: pointer; width: 100%; } .cook-ing-toggle:hover { border-color: #f0a830; color: #f0a830; } .cook-ing-list { list-style: none; margin: 10px 0 0; padding: 14px 18px; background: #1c160f; border: 1px solid #3a2f20; border-radius: 6px; max-height: 26vh; overflow-y: auto; } .cook-ing-list li { font-size: 18px; padding: 7px 0; border-bottom: 1px solid #2a2218; } .cook-ing-list li:last-child { border-bottom: none; } .cook-ing-empty { color: #9a8b70; } /* ================= RESTOCK POPUP ================= */ .restock-card { width: 440px; } .restock-title { font-family: var(--mono); font-size: 20px; letter-spacing: 2px; color: var(--active); margin: 0 0 4px; } .restock-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin: 0 0 16px; } .restock-list { list-style: none; margin: 0 0 18px; padding: 0; max-height: 50vh; overflow-y: auto; } .restock-item { margin-bottom: 8px; } .restock-item label { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: 16px; color: var(--active); } .restock-item label:hover { border-color: var(--accent); } .restock-item input { position: absolute; opacity: 0; pointer-events: none; } .restock-box { width: 22px; height: 22px; border: 1px solid var(--muted); flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); font-size: 16px; font-weight: 700; } .restock-item input:checked + .restock-box { background: var(--accent); border-color: var(--accent); color: var(--bg); } .restock-item input:checked + .restock-box::after { content: "✓"; } .restock-item input:checked ~ .restock-text { color: var(--accent); } .restock-text { flex: 1; } .restock-empty, .restock-confirm { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; color: var(--muted); padding: 16px; text-align: center; } .restock-confirm { color: var(--accent); } .restock-actions { display: flex; flex-direction: column; gap: 10px; } .restock-skip { background: transparent; border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 2px; padding: 11px; cursor: pointer; } .restock-skip:hover { border-color: var(--muted); color: var(--active); } .ws-title { font-family: var(--mono); font-size: 16px; letter-spacing: 3px; color: var(--accent); margin: 0 0 4px; } .ws-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--muted); margin-bottom: 16px; } .ws-list { list-style: none; margin: 0; padding: 0; } .ws-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 7px; background: var(--surface); border: 1px solid var(--border); } .ws-item.dragging { opacity: .5; } .ws-grip { font-family: var(--mono); color: var(--system); cursor: grab; font-size: 14px; } .ws-label { flex: 1; font-family: var(--sans); font-size: 14px; color: var(--active); } .ws-toggle { width: 42px; height: 22px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; position: relative; flex-shrink: 0; } .ws-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--system); transition: .15s; } .ws-toggle.on { border-color: var(--accent); } .ws-toggle.on::after { left: 22px; background: var(--accent); } /* ================= CONFETTI ================= */ #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 400; } /* ================= MOBILE ================= */ .mobile-tabs { display: none; } @media (max-width: 980px) { /* Hub becomes an overlay column toggled by the chat header on tablet. */ #app { grid-template-columns: 220px 1fr; } .hub { position: fixed; inset: 0 0 0 auto; width: 340px; max-width: 86vw; transform: translateX(100%); transition: transform .25s ease; z-index: 60; border-left: 1px solid var(--accent); } #app.hub-open .hub { transform: translateX(0); } #app.hub-collapsed { grid-template-columns: 220px 1fr; } } @media (max-width: 760px) { #app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 300px; transform: translateX(-100%); transition: transform .25s ease; grid-row: 1 / -1; z-index: 80; } .sidebar.open { transform: translateX(0); } .chat { grid-column: 1; grid-row: 1 / 2; } .menu-btn { display: none; } .backdrop.open { display: block; } .hud-item { display: none; } .statusbar { display: none; } /* Mobile content panels driven by the bottom tab bar. */ .hub { position: static; transform: none; width: auto; max-width: none; grid-column: 1; grid-row: 1 / 2; border-left: none; display: none; } #app[data-mtab="hub"] .chat { display: none; } #app[data-mtab="hub"] .hub { display: flex; } #app[data-mtab="chat"] .hub { display: none; } #app.hub-collapsed .hub { display: none; } #app[data-mtab="hub"].hub-collapsed .hub { display: flex; } /* Bottom tab bar */ .mobile-tabs { display: flex; grid-column: 1; grid-row: 2; height: 60px; background: var(--bg-sidebar); border-top: 1px solid var(--border); z-index: 70; } .mtab { flex: 1; background: transparent; border: none; color: var(--system); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; } .mtab-ico { font-size: 17px; } .mtab-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; } .mtab.active { color: var(--accent); } /* keep chat input above the tab bar */ .composer { padding-bottom: 12px; } .hub-collapse-btn { display: none; } #hubToggleBtn { display: none; } } /* ================= USER SETTINGS (slide-over) ================= */ .settings-overlay { position: fixed; inset: 0; z-index: 200; } .settings-backdrop { position: absolute; inset: 0; background: rgba(4,8,9,.7); } .settings-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--bg-sidebar); border-left: 1px solid var(--accent); display: flex; flex-direction: column; min-height: 0; animation: slideIn .22s ease; } @keyframes slideIn { from { transform: translateX(40px); opacity: .4; } to { transform: translateX(0); opacity: 1; } } .settings-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .settings-title { font-family: var(--mono); font-size: 16px; letter-spacing: 5px; color: var(--accent); } .settings-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--muted); margin-top: 3px; } .settings-close { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 32px; height: 32px; cursor: pointer; font-size: 13px; } .settings-close:hover { border-color: var(--accent); color: var(--accent); } .settings-body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; } .settings-section { margin-bottom: 26px; } .settings-section-head { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--accent); padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .settings-label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--system); margin: 14px 0 6px; } .settings-label:first-of-type { margin-top: 0; } .settings-input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--active); padding: 11px 13px; font-family: var(--sans); font-size: 15px; outline: none; } .settings-input:focus { border-color: var(--accent); } .pw-field .settings-input { padding-right: 46px; } .swatch-row { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; } .swatch.selected { border-color: var(--active); } .swatch.selected::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .seg { display: flex; border: 1px solid var(--border); } .seg-btn { flex: 1; background: var(--surface); border: none; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 2px; padding: 10px; cursor: pointer; border-right: 1px solid var(--border); } .seg-btn:last-child { border-right: none; } .seg-btn.active { background: var(--accent); color: var(--bg); font-weight: 700; } .settings-voice-current { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .settings-hint { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); } .voice-list { max-height: 230px; overflow-y: auto; border: 1px solid var(--border); } .voice-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; } .voice-item:last-child { border-bottom: none; } .voice-item:hover { background: #0d2a28; } .voice-item.selected { background: rgba(0,212,160,.1); border-left: 2px solid var(--accent); } .voice-item-name { font-size: 14px; color: var(--active); } .voice-item-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .5px; color: var(--muted); } .voice-play { background: transparent; border: 1px solid var(--border); color: var(--accent); width: 30px; height: 30px; cursor: pointer; flex-shrink: 0; } .voice-play:hover { border-color: var(--accent); } .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; color: var(--active); border-bottom: 1px solid rgba(13,42,42,.5); } .settings-toggle-row:last-child { border-bottom: none; } .toggle { width: 44px; height: 24px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; position: relative; flex-shrink: 0; } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--system); transition: .15s; } .toggle.on { border-color: var(--accent); } .toggle.on::after { left: 22px; background: var(--accent); } .settings-btn { width: 100%; margin-top: 16px; padding: 12px; background: var(--accent); border: none; color: var(--bg); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; cursor: pointer; } .settings-btn:hover { filter: brightness(1.12); } .settings-btn-sm { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 7px 12px; cursor: pointer; } .settings-btn-sm:hover { background: rgba(0,212,160,.1); } .settings-status { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; min-height: 14px; margin-top: 10px; } .settings-status.ok { color: var(--accent); } .settings-status.err { color: var(--user-accent); } /* Voice integrations — token + setup */ .token-field { display: flex; align-items: stretch; gap: 8px; margin-top: 4px; } .token-code { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: .5px; padding: 9px 10px; overflow-x: auto; white-space: nowrap; user-select: all; } .token-warning { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; color: var(--user-accent); margin-top: 8px; line-height: 1.4; } .setup-details { margin-top: 12px; border: 1px solid var(--border); background: var(--bg); } .setup-details > summary { cursor: pointer; padding: 9px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--active); list-style: none; } .setup-details > summary::-webkit-details-marker { display: none; } .setup-details[open] > summary { border-bottom: 1px solid var(--border); color: var(--accent); } .setup-steps { margin: 0; padding: 12px 12px 12px 28px; font-family: var(--sans); font-size: 12.5px; color: var(--active); line-height: 1.7; } .setup-steps ul { padding-left: 18px; margin: 4px 0; } .setup-steps code { font-family: var(--mono); font-size: 10.5px; color: var(--accent); background: var(--surface); padding: 1px 5px; word-break: break-all; } .about-grid { display: grid; grid-template-columns: 90px 1fr; gap: 8px 14px; } .about-key { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--system); } .about-val { font-family: var(--mono); font-size: 11px; letter-spacing: .5px; color: var(--active); } .settings-toast { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--accent); color: var(--bg); font-family: var(--mono); font-size: 11px; letter-spacing: 2px; padding: 9px 18px; opacity: 0; transition: .2s; pointer-events: none; } .settings-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Family settings extras ---- */ .fam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fam-pw-result { margin-top: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--accent); } .fam-pw-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .fam-pw-row span { flex: 1; font-family: var(--mono); font-size: 15px; letter-spacing: 1px; color: var(--active); background: var(--bg); border: 1px dashed var(--border); padding: 8px 10px; word-break: break-all; } .fam-reward-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .fam-reward-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; color: var(--active); } .fam-reward-item .pts { font-family: var(--mono); font-size: 11px; color: var(--accent); } .fam-convo-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .fam-convo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: 13px; color: var(--active); } .fam-convo-item:hover { background: #0d2a28; border-color: var(--accent); } .fam-convo-item .when { font-family: var(--mono); font-size: 9px; color: var(--muted); } .fam-msg { margin-bottom: 14px; } .fam-msg .who { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--system); margin-bottom: 3px; } .fam-msg .text { font-size: 14px; color: var(--active); white-space: pre-wrap; } .fam-msg.assistant .text { color: var(--muted); } .fam-msg img { max-width: 100%; margin-top: 6px; border: 1px solid var(--border); } @media (max-width: 760px) { .settings-panel { width: 100vw; border-left: none; } } /* global scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ===== Dev-agent changeset panel ===== */ .changeset { margin-top: 10px; border: 1px solid #0d3030; border-left: 2px solid var(--accent); background: #0a1614; border-radius: 2px; overflow: hidden; } .changeset.self { border-left-color: #d4a017; } .changeset.applied { border-left-color: #2f9e6b; opacity: 0.92; } .changeset.discarded { opacity: 0.6; } .cs-loading { padding: 12px; font: 11px "Share Tech Mono", monospace; color: #6a8f86; letter-spacing: 1px; } .cs-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #0c1f1c; border-bottom: 1px solid #0d3030; } .cs-badge { font: 10px "Share Tech Mono", monospace; letter-spacing: 2px; color: #04201a; background: var(--accent); padding: 2px 8px; border-radius: 2px; } .cs-badge.ok { background: #2f9e6b; } .changeset.self .cs-badge { background: #d4a017; } .cs-cb { font: 12px "Rajdhani", sans-serif; color: #c0d8d0; letter-spacing: 1px; } .cs-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 2px; } .cs-file { font: 12px "Rajdhani", sans-serif; color: #c0d8d0; background: #0d2a28; border: 1px solid #0d3030; padding: 3px 8px; border-radius: 2px; } .cs-file em { color: #8ab0a8; font-style: normal; font-size: 11px; } .cs-warn { margin: 8px 12px 0; padding: 7px 10px; border-radius: 2px; background: #2a2410; border: 1px solid #574a16; color: #e8c766; font: 12px "Rajdhani", sans-serif; letter-spacing: 0.3px; } .cs-diff { margin: 10px 12px 0; max-height: 360px; overflow: auto; border: 1px solid #0d3030; } .cs-filediff + .cs-filediff { border-top: 1px solid #0d3030; } .cs-filehdr { font: 11px "Share Tech Mono", monospace; color: #8ab0a8; letter-spacing: 1px; padding: 5px 8px; background: #0c1f1c; position: sticky; top: 0; } .cs-code { font: 12px/1.5 "Share Tech Mono", monospace; background: #060d0c; } .cs-line { display: flex; white-space: pre-wrap; word-break: break-word; padding: 0 8px; } .cs-line .cs-sym { width: 14px; flex: 0 0 14px; color: #5a7a72; user-select: none; } .cs-line.add { background: rgba(47, 158, 107, 0.14); color: #b7e9cf; } .cs-line.add .cs-sym { color: #2f9e6b; } .cs-line.del { background: rgba(163, 45, 45, 0.16); color: #e9b7b7; } .cs-line.del .cs-sym { color: #c95a5a; } .cs-line.ctx { color: #9fb8b0; } .cs-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 12px; } .cs-btn { font: 11px "Share Tech Mono", monospace; letter-spacing: 1px; cursor: pointer; padding: 6px 12px; border-radius: 2px; border: 1px solid var(--accent); background: var(--accent); color: #04201a; } .cs-btn.review { background: transparent; color: var(--accent); } .cs-btn.discard { background: transparent; border-color: #3a2020; color: #c95a5a; padding: 6px 9px; margin-left: auto; } .cs-btn:disabled { opacity: 0.6; cursor: default; } .changeset.self .cs-btn.apply { background: #d4a017; border-color: #d4a017; } .cs-commit { font: 11px "Rajdhani", sans-serif; color: #8ab0a8; display: flex; align-items: center; gap: 4px; } .cs-status { padding: 0 12px 11px; } .cs-status:empty { padding: 0; } .cs-ok { color: #4fd6a0; font: 12px "Rajdhani", sans-serif; } .cs-err { color: #e07a7a; font: 12px "Rajdhani", sans-serif; } /* ===== DEV STATUS widget ===== */ .dev-list { display: flex; flex-direction: column; gap: 8px; } .dev-cb { border: 1px solid #0d3030; border-left: 2px solid var(--accent); background: #0c1f1c; padding: 8px 10px; border-radius: 2px; } .dev-cb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dev-cb-name { font: 13px "Rajdhani", sans-serif; font-weight: 600; color: #c0d8d0; letter-spacing: 0.5px; } .dev-check { font: 9px "Share Tech Mono", monospace; letter-spacing: 1px; cursor: pointer; padding: 3px 8px; border-radius: 2px; border: 1px solid var(--accent); background: transparent; color: var(--accent); } .dev-check:hover { background: var(--accent); color: #04201a; } .dev-stack { font: 11px "Rajdhani", sans-serif; color: #8ab0a8; margin-top: 2px; } .dev-last { font: 11px "Rajdhani", sans-serif; color: #6a8f86; margin-top: 3px; } .dev-commit { font: 10px "Share Tech Mono", monospace; color: #8ab0a8; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dev-err { font: 11px "Rajdhani", sans-serif; color: #e0a36a; margin-top: 3px; } .dev-empty { font: 11px "Share Tech Mono", monospace; color: #8ab0a8; letter-spacing: 1px; padding: 6px 0; } .dev-hint { font: 11px "Rajdhani", sans-serif; color: #6a8f86; margin-top: 4px; } /* ---- Voice conversation-mode banner ---- */ .wake-banner { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); display: none; align-items: center; gap: 10px; padding: 9px 14px; background: rgba(0, 22, 18, 0.92); border: 1px solid var(--accent); border-radius: 22px; box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 212, 160, 0.25); font: 12px "Share Tech Mono", monospace; letter-spacing: 1px; color: var(--accent); z-index: 2000; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; } .wake-banner.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); } .wake-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: wakePulse 1.3s ease-in-out infinite; flex: 0 0 auto; } .wake-text { white-space: nowrap; } .wake-x { background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; padding: 0 2px; opacity: 0.7; } .wake-x:hover { opacity: 1; } @keyframes wakePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } } /* ---- Severe-weather alert banners (top-right stack) ---- */ .wx-stack { position: fixed; top: 14px; right: 14px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, 92vw); } .wx-alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; background: rgba(40, 30, 0, 0.96); border: 1px solid var(--warn, #d4a017); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 14px rgba(212, 160, 23, 0.3); color: #f4e6c0; font-size: 13px; opacity: 0; transform: translateX(20px); transition: opacity 0.25s, transform 0.25s; } .wx-alert.show { opacity: 1; transform: translateX(0); } .wx-alert-severe { background: rgba(48, 12, 12, 0.96); border-color: var(--alert, #e24b4a); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 16px rgba(226, 75, 74, 0.45); color: #f6d6d6; animation: wxFlash 1.4s ease-in-out 3; } @keyframes wxFlash { 0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 16px rgba(226,75,74,0.45); } 50% { box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 30px rgba(226,75,74,0.9); } } .wx-ico { flex: 0 0 auto; font-size: 16px; line-height: 1.2; } .wx-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .wx-body b { font-size: 14px; letter-spacing: 0.3px; } .wx-sub { opacity: 0.85; font-size: 12px; } .wx-x { background: none; border: none; color: inherit; font-size: 14px; cursor: pointer; opacity: 0.7; padding: 0 2px; flex: 0 0 auto; } .wx-x:hover { opacity: 1; } /* ---- Locations / places manager (Settings) ---- */ .places-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .places-empty { font-size: 13px; opacity: 0.7; padding: 6px 2px; } .place-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; background: var(--panel2, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.08)); } .place-item.editing { flex-direction: column; align-items: stretch; gap: 8px; } .place-ico { font-size: 18px; flex: 0 0 auto; } .place-meta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .place-label { font-weight: 600; display: flex; align-items: center; gap: 6px; } .place-addr { font-size: 12px; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .place-star { color: var(--warn, #d4a017); } .place-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .place-ic { background: none; border: 1px solid var(--border, rgba(255,255,255,0.12)); color: var(--text2, #8ab0a8); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 13px; line-height: 1; } .place-ic:hover { color: var(--accent); border-color: var(--accent); } .places-add { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .places-add-row { display: flex; gap: 8px; align-items: center; } .places-add-row .settings-input { flex: 1 1 auto; } .places-wh { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; } .places-wh input { accent-color: var(--accent); } .settings-status.error { color: var(--alert, #e24b4a); }