/* ============================================================ MIRA v2 — voice surfaces (overlay + widget) ============================================================ */ /* ---------- OVERLAY ---------- */ .ov { position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column; color: var(--ink); animation: popIn .4s var(--ease-out) both; } .ov-bg { position:absolute; inset:0; z-index:0; background: radial-gradient(70% 60% at 30% 22%, oklch(0.82 0.10 300 / 0.9), transparent 60%), radial-gradient(75% 65% at 78% 30%, oklch(0.80 0.09 270 / 0.85), transparent 62%), radial-gradient(90% 80% at 50% 105%, oklch(0.85 0.09 350 / 0.95), transparent 60%), linear-gradient(160deg, oklch(0.84 0.08 295), oklch(0.86 0.07 330)); animation: ovDrift 18s ease-in-out infinite alternate; } [data-theme="dark"] .ov-bg { background: radial-gradient(70% 60% at 30% 22%, oklch(0.42 0.13 300 / 0.95), transparent 60%), radial-gradient(75% 65% at 78% 30%, oklch(0.38 0.12 270 / 0.9), transparent 62%), radial-gradient(90% 80% at 50% 105%, oklch(0.40 0.12 350 / 0.95), transparent 60%), linear-gradient(160deg, oklch(0.20 0.04 295), oklch(0.17 0.04 320)); } /* tryb męski (?mode=max → ): CAŁA scena niebieska (Jarvis), nie tylko kula */ .mira-max .ov { color: oklch(0.96 0.02 250); } .mira-max .ov-bg { background: radial-gradient(70% 58% at 30% 22%, oklch(0.52 0.16 250 / 0.88), transparent 60%), radial-gradient(75% 62% at 78% 28%, oklch(0.46 0.15 235 / 0.82), transparent 62%), radial-gradient(90% 80% at 50% 108%, oklch(0.44 0.15 265 / 0.9), transparent 60%), linear-gradient(160deg, oklch(0.23 0.07 255), oklch(0.16 0.05 265)); } .mira-max .ov-caption .ov-cap-t { color: oklch(0.97 0.02 250); } @keyframes ovDrift { 0%{ transform:scale(1) translateY(0);} 100%{ transform:scale(1.08) translateY(-2%);} } .ov > *:not(.ov-bg) { position:relative; z-index:1; } .ov-top { display:flex; align-items:flex-start; justify-content:space-between; padding: 30px 36px; } .ov-brand { text-align:center; flex:1; } .ov-eyebrow { font-size:11px; letter-spacing:0.4em; color: oklch(1 0 0 / 0.7); font-weight:600; } [data-theme="dark"] .ov-eyebrow { color: oklch(1 0 0 / 0.6); } .ov-name { font-size:48px; font-style:italic; color:#fff; line-height:1.1; margin-top:2px; text-shadow: 0 2px 30px oklch(0.4 0.1 300 / 0.4); } .ov-controls { position:absolute; right:36px; top:30px; display:flex; gap:12px; align-items:center; } .seg { display:flex; background: oklch(0.3 0.04 300 / 0.35); border-radius: var(--r-pill); padding:4px; backdrop-filter: blur(10px); } .seg button { padding:8px 18px; border-radius: var(--r-pill); font-size:14px; font-weight:600; color: oklch(1 0 0 / 0.75); transition: all .2s; } .seg button.on { background:#fff; color: var(--p-700); box-shadow: var(--shadow-sm); } .ov-close { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; background: oklch(0.3 0.04 300 / 0.3); backdrop-filter: blur(10px); transition: background .2s; } .ov-close:hover { background: oklch(0.3 0.04 300 / 0.5); } .ov-stage { flex:1; display:flex; align-items:center; justify-content:center; gap:40px; padding: 0 48px; min-height:0; } .ov-orb-wrap { display:flex; flex-direction:column; align-items:center; gap:30px; cursor:pointer; } .ov-caption { text-align:center; max-width:420px; } .ov-cap-t { font-size:22px; font-weight:600; color:#fff; text-shadow: 0 1px 16px oklch(0.4 0.1 300 / 0.4); } .ov-cap-d { font-size:15px; color: oklch(1 0 0 / 0.78); margin-top:6px; } .ov-feed { width:380px; flex:none; align-self:center; max-height:74vh; display:flex; flex-direction:column; gap:12px; } .ov-feed-head { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#fff; opacity:0.85; } .ov-feed-list { display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding-right:4px; } .ov-feed .mc { box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); } .ov-input { padding: 16px 48px 30px; display:flex; flex-direction:column; align-items:center; gap:14px; } .ov-input .inputbar { width:min(620px, 90%); } .ov-foot { font-size:12px; letter-spacing:0.24em; color: oklch(1 0 0 / 0.6); text-transform:uppercase; } @media (max-width: 960px) { .ov-feed { display:none; } } /* ---------- WIDGET ---------- */ .widget-stage { position:absolute; inset:0; display:grid; place-items:center; background: var(--bg); background-image: var(--app-grad); } .widget { width:280px; border-radius: 24px; overflow:hidden; background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow-lg); animation: popIn .4s var(--ease-out) both; } .widget-bar { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line-soft); background: var(--surface-2); } .widget-dots { display:flex; gap:6px; } .widget-dots span { width:10px; height:10px; border-radius:50%; background: var(--line); } .widget-dots span:first-child { background: oklch(0.7 0.16 28); } .widget-title { flex:1; text-align:center; font-size:17px; font-style:italic; color: var(--ink); } .widget-expand { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color: var(--ink-3); } .widget-expand:hover { background: var(--hover); color: var(--ink); } .widget-body { display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 20px 22px; } .widget-status { font-size:15px; font-weight:600; color: var(--ink); } .widget-ptt { display:flex; align-items:center; justify-content:center; gap:9px; width:calc(100% - 28px); margin:0 14px 16px; padding:13px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size:14px; font-weight:600; transition: all .2s; } .widget-ptt:hover { filter:brightness(0.97); } .widget-ptt.on { background: var(--accent); color:#fff; animation: micpulse 1.4s var(--ease) infinite; } .widget-ptt kbd { font-family: var(--sans); font-size:11px; background: var(--surface); color: var(--ink-3); padding:2px 7px; border-radius:6px; border:1px solid var(--line); margin-left:2px; } .widget-ptt.on kbd { display:none; } /* ---------- VOICE DOCK (over the panel) ---------- */ .vdock { position: fixed; right: 22px; bottom: 22px; z-index: 75; width: 380px; max-width: calc(100vw - 44px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: dockIn .42s var(--spring) both; } @keyframes dockIn { from { transform: translateY(16px) scale(0.96); } to { transform: none; } } .vdock-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 11px 17px; background: linear-gradient(120deg, var(--accent-soft), var(--surface) 130%); border-bottom: 1px solid var(--line-soft); } .vdock-id { display: flex; align-items: center; gap: 9px; min-width: 0; } .vdock-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--down); flex: none; box-shadow: 0 0 0 0 var(--down); animation: livePulse 1.6s var(--ease) infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 oklch(0.64 0.14 28 / 0.5); } 100% { box-shadow: 0 0 0 8px oklch(0.64 0.14 28 / 0); } } .vdock-name { font-size: 19px; font-style: italic; color: var(--ink); line-height: 1; white-space: nowrap; } .vdock-live-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--down); background: oklch(0.64 0.14 28 / 0.12); padding: 3px 8px; border-radius: 99px; flex: none; } .vdock-actions { display: flex; gap: 4px; } .vdock-btn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); transition: background .15s, color .15s; } .vdock-btn:hover { background: var(--hover); color: var(--ink); } .vdock-body { display: flex; align-items: center; gap: 15px; padding: 16px 17px; cursor: pointer; } .vdock-caption { min-width: 0; } .vdock-cap-t { font-size: 16px; font-weight: 600; color: var(--ink); } .vdock-cap-d { font-size: 13px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; text-wrap: pretty; } .vdock-card { padding: 0 14px 4px; max-height: 280px; overflow-y: auto; } .vdock-card .mc { box-shadow: var(--shadow-sm); } .vdock-input { padding: 12px 14px 8px; } .vdock-input .inputbar { box-shadow: none; border-color: var(--line); } .vdock-hint { font-size: 11px; color: var(--ink-4); padding: 0 16px 13px; text-align: center; line-height: 1.4; } .vdock-hint kbd { font-family: var(--sans); font-size: 10px; background: var(--surface-2); color: var(--ink-3); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); }