/* GENERATED by tools/build_apos_css.py from the REAL APOS PWA (applications/eden-dev/eden-dev/dgx.html, md5 84cb5456):
   its header, tabs, input bar and chat bubbles, scoped under .apos-app. Never hand-edit. */
.apos-app { --surface-bg: transparent; --accent: #F2E8D2; --border: rgba(242,232,210,0.18); --text-dim: rgba(230,237,243,0.55); --gold: #C9A84C; --accent-dim: rgba(242,232,210,0.4); --green: #95FFA8; --btn-bg: rgba(45,38,30,0.5); --text: #E6EDF3; --icon: #FFF4DD; --bg: #000000; }
.apos-app * { margin: 0px; padding: 0px; box-sizing: border-box; }
.apos-app .header { padding-right: 14px; padding-bottom: 10px; padding-left: 14px; padding-top: max(10px, env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; z-index: 60; background: var(--surface-bg); }
.apos-app .header .dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(255, 95, 87); transition: background 200ms; }
.apos-app .header h1 { font-family: "JetBrains Mono", monospace; font-size: 15px; color: var(--accent); letter-spacing: 2.4px; font-weight: 500; text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px; }
.apos-app .header #vortex-btn { position: absolute; left: 14px; top: calc(50% + env(safe-area-inset-top) / 2); transform: translateY(-50%); margin: 0px; }
.apos-app .header #hdr-menu-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0px; }
.apos-app .hdr-menu-wrap { position: absolute; right: 14px; top: calc(50% + env(safe-area-inset-top) / 2); transform: translateY(-50%); margin: 0px; }
.apos-app .hdr-menu-wrap #hdr-menu-btn { position: static; transform: none; }
.apos-app .hdr-popover { display: none; position: absolute; right: 0px; top: calc(100% + 6px); flex-direction: column; gap: 6px; padding: 8px; background: rgba(10, 10, 12, 0.92); border: 1px solid var(--border); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 20px; z-index: 30; backdrop-filter: blur(8px); }
.apos-app .hdr-popover .hdr-row { display: flex; align-items: center; gap: 10px; }
.apos-app .hdr-popover .hdr-row .hdr-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--text-dim); white-space: nowrap; }
.apos-app .sos-btn { color: rgb(255, 85, 85); border-color: rgba(255, 85, 85, 0.45); font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.apos-app .meta-tabs { display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--border); align-items: center; background: var(--surface-bg); }
.apos-app .mtab { flex-shrink: 0; padding: 6px 14px; border-radius: 8px 8px 0px 0px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.5px; user-select: none; transition: border-color 120ms, background 120ms, color 120ms; }
.apos-app .mtab.active { background: rgba(201, 168, 76, 0.18); border-color: var(--gold); color: var(--gold); }
.apos-app .meta-tabs, .apos-app #tabs { max-height: 120px; opacity: 1; overflow: hidden; transition: max-height 260ms cubic-bezier(0.25, 0.85, 0.4, 1.05), opacity 200ms, padding 260ms cubic-bezier(0.25, 0.85, 0.4, 1.05), border-color 200ms; }
.apos-app .header { transition: padding 260ms cubic-bezier(0.25, 0.85, 0.4, 1.05); }
.apos-app .hdr-collapse { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 2px 10px; margin: 0px; cursor: pointer; color: var(--accent-dim); line-height: 0; user-select: none; transition: color 160ms; }
.apos-app .hdr-collapse svg { width: 16px; height: 16px; display: block; transition: transform 260ms cubic-bezier(0.25, 0.85, 0.4, 1.05); }
.apos-app .header h1 { cursor: pointer; }
.apos-app .gc { max-width: 90%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; border: 1px solid; background: rgba(10, 14, 20, 0.38); backdrop-filter: blur(15px) saturate(1.2); box-shadow: rgba(255, 255, 255, 0.06) 0px 1px 0px inset; }
.apos-app .gc .meta { display: flex; gap: 6px; align-items: center; font-size: 11px; opacity: 0.75; margin-bottom: 3px; }
.apos-app .gc .who { font-weight: 600; font-family: "JetBrains Mono", monospace; }
.apos-app .gc .channel { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); text-transform: uppercase; letter-spacing: 0.5px; }
.apos-app .gc .ts { margin-left: auto; opacity: 0.6; font-family: "JetBrains Mono", monospace; }
.apos-app .gc .text { white-space: pre-wrap; }
.apos-app .gc .msg-controls { display: flex; gap: 6px; margin-top: 0px; max-height: 0px; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 200ms, opacity 150ms, margin-top 200ms; }
.apos-app .gc.controls-open .msg-controls { max-height: 40px; opacity: 1; margin-top: 7px; pointer-events: auto; }
.apos-app .gc.controls-open { box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset; }
.apos-app .gc.from-jarvis, .apos-app .gc.from-jason { cursor: pointer; }
.apos-app .gc.from-jason { align-self: flex-end; background: linear-gradient(rgba(120, 140, 170, 0.14), rgba(120, 140, 170, 0.14)), rgba(10, 14, 20, 0.38); border-color: rgba(130, 150, 180, 0.45); }
.apos-app .gc.from-jason .who { color: var(--gold); }
.apos-app .gc.from-cortana { align-self: flex-start; background: linear-gradient(rgba(242, 232, 210, 0.08), rgba(242, 232, 210, 0.08)), rgba(10, 14, 20, 0.38); border-color: var(--accent-dim); }
.apos-app .gc.from-cortana .who { color: var(--accent); }
.apos-app .gc.from-jason { animation: 220ms cubic-bezier(0.25, 0.85, 0.4, 1.05) 0s 1 normal both running gcInRight; }
.apos-app .gc.from-cortana, .apos-app .gc.from-code, .apos-app .gc.from-jarvis, .apos-app .gc.from-system, .apos-app .gc.from-unknown { animation: 220ms cubic-bezier(0.25, 0.85, 0.4, 1.05) 0s 1 normal both running gcInLeft; }
.apos-app .group-feed.instant .gc { animation: auto ease 0s 1 normal none running none !important; }
.apos-app .gc.typing { padding: 10px 14px; min-height: 34px; }
.apos-app .gc.typing .dots { display: flex; gap: 4px; align-items: center; height: 14px; }
.apos-app .gc.typing .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: 1.1s ease-in-out 0s infinite normal none running typingDot; }
.apos-app .gc.typing .dots span:nth-child(2) { animation-delay: 0.18s; }
.apos-app .gc.typing .dots span:nth-child(3) { animation-delay: 0.36s; }
.apos-app .gc.from-code { align-self: flex-start; background: rgba(10, 14, 20, 0.38); border-color: rgba(255, 255, 255, 0.12); }
.apos-app .gc.from-code .who { color: var(--green); }
.apos-app .gc.from-jarvis { align-self: flex-start; background: rgba(10, 14, 20, 0.38); border-color: rgba(255, 255, 255, 0.12); }
.apos-app .gc.from-jarvis .who { color: var(--green); }
.apos-app .gc.from-system, .apos-app .gc.from-unknown { align-self: center; background: transparent; border-color: rgba(255, 255, 255, 0.1); opacity: 0.55; font-size: 12px; }
.apos-app .input-bar { padding-top: 8px; padding-right: 10px; padding-left: 10px; border-top: 1px solid var(--border); display: flex; gap: 6px; background: rgba(8, 11, 16, 0.94); backdrop-filter: blur(8px); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.apos-app .input-bar textarea { flex: 1 1 0%; background: var(--btn-bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 13px; outline: none; resize: none; min-height: 36px; max-height: 140px; min-width: 0px; }
.apos-app .input-wrap { flex: 1 1 0%; position: relative; display: flex; min-width: 0px; border-radius: 6px; transition: box-shadow 220ms ease-out; }
.apos-app .input-wrap textarea { flex: 1 1 0%; transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.25, 0.85, 0.4, 1.05); }
.apos-app .voice-viz { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--btn-bg); border: 1px solid var(--accent); border-radius: 6px; padding: 0px 12px; pointer-events: none; opacity: 0; transform: scale(0.98); transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.25, 0.85, 0.4, 1.05); }
.apos-app .voice-viz .bar { width: 3px; height: 4px; background: var(--accent); border-radius: 1.5px; transition: height 70ms; flex-shrink: 0; }
.apos-app .input-bar button { background: var(--btn-bg); color: var(--icon); border: 1px solid var(--border); border-radius: 6px; padding: 0px 14px; font-weight: 600; font-size: 12px; cursor: pointer; font-family: "JetBrains Mono", monospace; letter-spacing: 1px; }
.apos-app .input-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
.apos-app .mic-btn { width: 44px; height: 44px; min-width: 44px; flex: 0 0 44px; align-self: center; box-sizing: border-box; align-items: center; justify-content: center; transition: background 120ms, transform 80ms; user-select: none; background: var(--btn-bg) !important; color: var(--icon) !important; border: 1px solid var(--border) !important; padding: 0px !important; display: flex !important; }
.apos-app .mic-btn svg { width: 20px; height: 20px; display: block; }
.apos-app .mic-orb-canvas { position: absolute; inset: 0px; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; z-index: 1; display: none; }
.apos-app .mic-btn { position: relative; }
.apos-app .mic-health-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: rgb(85, 85, 85); pointer-events: none; transition: background 200ms; }
.apos-app .mic-health-dot.down { background: rgb(255, 85, 85); }
.apos-app button { transition: transform 80ms, background 120ms; }
.apos-app .input-bar .attach-btn { width: 40px; height: 40px; min-width: 40px; flex: 0 0 40px; align-self: center; box-sizing: border-box; align-items: center; justify-content: center; transition: background 120ms, transform 80ms; user-select: none; background: var(--btn-bg) !important; color: var(--icon) !important; border: 1px solid var(--border) !important; padding: 0px !important; display: flex !important; }
.apos-app .input-bar .attach-btn svg { width: 18px; height: 18px; display: block; }
.apos-app .gc .atts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.apos-app .gc-img { max-width: 100%; max-height: 340px; border-radius: 8px; border: 1px solid var(--border); display: block; background: var(--bg); cursor: zoom-in; }
.apos-app .bell-btn { background: var(--btn-bg); border: 1px solid var(--border); border-radius: 6px; width: 36px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0px; color: var(--text-dim); transition: color 200ms, border-color 200ms, transform 80ms; user-select: none; }
.apos-app .bell-btn svg { width: 18px; height: 18px; display: block; }
.apos-app #refresh-btn { color: var(--icon); }
.apos-app .header, .apos-app .tabs, .apos-app .input-bar, .apos-app .keys-bar { box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px inset; }
.apos-app .mic-btn, .apos-app .bell-btn:not(.sos-btn), .apos-app .input-bar .attach-btn, .apos-app .add-btn, .apos-app #send { box-shadow: rgba(0, 0, 0, 0.28) 0px 1px 3px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset; }
.apos-app #refresh-btn, .apos-app #push-bell { width: 30px; height: 30px; opacity: 0.55; transition: opacity 160ms, color 200ms, transform 80ms; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.apos-app #refresh-btn svg, .apos-app #push-bell svg { width: 16px; height: 16px; }
.apos-app .sos-btn { font-size: 9px; letter-spacing: 1.2px; padding: 0px 8px; min-width: 30px; width: auto; height: 24px; border-color: rgba(255, 85, 85, 0.22); opacity: 0.65; transition: opacity 160ms, color 200ms, border-color 200ms; }
.apos-app .mic-btn:not(.recording):not(.transcribing) { background: rgba(45, 38, 30, 0.22) !important; }
.apos-app .input-bar .attach-btn { background: rgba(45, 38, 30, 0.22) !important; }
.apos-app #send { background: rgba(45, 38, 30, 0.22); }
.apos-app .bell-btn.sos-btn { background: rgba(45, 38, 30, 0.22); }