/* ============================================================ Mythox — Floating AI dock (R2) styles · Brand OS tokens Soft, premium, non-intrusive. Bottom-right launcher + slide-up docked panel. Loaded globally; recolors with the palette. ============================================================ */ /* ---------- launcher ---------- */ #ai-dock-fab{ position:fixed; right:24px; bottom:24px; z-index:1200; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg, var(--surface), var(--surface-2)); border:1px solid var(--gold-line, color-mix(in srgb, var(--accent) 34%, transparent)); color:var(--accent); cursor:pointer; box-shadow:0 12px 34px -12px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); transition:transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease, border-color .3s ease; } #ai-dock-fab:hover{ transform:translateY(-3px) scale(1.04); border-color:var(--accent); box-shadow:0 16px 40px -12px rgba(0,0,0,.7), 0 0 26px -4px var(--glow); } #ai-dock-fab.active{ transform:scale(.94); } #ai-dock-fab .ai-dock-fab-glyph{ font-family:var(--font-display, "Space Grotesk", sans-serif); font-weight:700; font-size:21px; letter-spacing:-.04em; line-height:1; color:var(--accent); text-shadow:0 0 14px var(--glow); } #ai-dock-fab .ai-dock-fab-spark{ position:absolute; top:11px; right:12px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--glow); animation:aiDockPulse 2.4s cubic-bezier(.23,1,.32,1) infinite; } @keyframes aiDockPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}} /* ---------- docked panel ---------- */ #ai-dock-panel{ position:fixed; right:24px; bottom:92px; z-index:1199; width:min(384px, calc(100vw - 32px)); height:min(70vh, 560px); display:flex; flex-direction:column; overflow:hidden; background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:20px; box-shadow:0 28px 70px -24px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); transform:translateY(18px) scale(.98); opacity:0; transform-origin:bottom right; transition:transform .34s cubic-bezier(.23,1,.32,1), opacity .28s ease; pointer-events:none; } #ai-dock-panel.open{ transform:none; opacity:1; pointer-events:auto; } #ai-dock-panel .ai-dock-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex:0 0 auto; } #ai-dock-panel .ai-dock-title{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--text); font-family:var(--font-display, sans-serif); } #ai-dock-panel .ai-dock-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--glow); } #ai-dock-panel .ai-dock-model{ flex:1; font-size:11px; color:var(--muted); text-align:right; font-family:var(--font-body, sans-serif); letter-spacing:.02em; } #ai-dock-panel .ai-dock-x{ background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; width:26px; height:26px; border-radius:8px; transition:all .2s; } #ai-dock-panel .ai-dock-x:hover{ background:var(--surface-2); color:var(--text); } /* ---- "?" questions pop-up (#8g) + "message a human" support path (fix #14) ---- */ #ai-dock-panel .ai-dock-help{ background:transparent; border:1px solid var(--line); color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; line-height:1; width:24px; height:24px; border-radius:50%; transition:all .2s; flex:0 0 auto; } #ai-dock-panel .ai-dock-help:hover, #ai-dock-panel .ai-dock-help[aria-expanded="true"]{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft); } /* #8g: the "?" now opens a small floating menu of questions (was: chips dumped into the chat). */ #ai-dock-panel .ai-dock-suppop{ position:absolute; top:52px; right:14px; z-index:6; width:min(260px, calc(100% - 28px)); background:color-mix(in srgb, var(--surface) 96%, transparent); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px -16px rgba(0,0,0,.7); padding:10px; display:flex; flex-direction:column; gap:6px; opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none; transition:opacity .16s var(--ease, ease), transform .16s var(--ease, ease); } #ai-dock-panel .ai-dock-suppop.open{ opacity:1; transform:none; pointer-events:auto; } #ai-dock-panel .ai-dock-suppop-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:2px 2px 4px; } #ai-dock-panel .ai-dock-suppop-list{ display:flex; flex-direction:column; gap:6px; } #ai-dock-panel .ai-dock-supq{ text-align:left; background:var(--surface); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:7px 10px; font-size:12.5px; font-family:inherit; cursor:pointer; transition:all .15s; } #ai-dock-panel .ai-dock-supq:hover{ border-color:var(--accent); color:var(--accent); } #ai-dock-panel .ai-dock-suphuman, #ai-dock-panel .ai-dock-supsend{ margin-top:4px; background:var(--accent); color:var(--ink-on-accent); border:none; cursor:pointer; border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:600; font-family:inherit; transition:filter .15s; } #ai-dock-panel .ai-dock-suphuman:hover, #ai-dock-panel .ai-dock-supsend:hover{ filter:brightness(1.06); } #ai-dock-panel .ai-dock-suphuman:disabled, #ai-dock-panel .ai-dock-supsend:disabled{ opacity:.6; cursor:default; } #ai-dock-panel .ai-dock-supform{ display:flex; flex-direction:column; gap:8px; margin-top:6px; } #ai-dock-panel .ai-dock-supta{ width:100%; box-sizing:border-box; resize:vertical; min-height:60px; font-family:inherit; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 10px; color:var(--text); } #ai-dock-panel .ai-dock-supta:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft); outline:none; } #ai-dock-panel .ai-dock-supok{ margin:0; color:var(--accent); font-weight:600; } #ai-dock-panel .ai-dock-msgs{ flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; } #ai-dock-panel .ai-dock-msgs::-webkit-scrollbar{ width:7px; } #ai-dock-panel .ai-dock-msgs::-webkit-scrollbar-thumb{ background:var(--line-2, var(--border)); border-radius:7px; } #ai-dock-panel .ai-dock-msg{ max-width:88%; font-size:13.5px; line-height:1.6; } #ai-dock-panel .ai-dock-msg.me{ align-self:flex-end; background:var(--accent); color:var(--ink-on-accent); border-radius:14px 14px 4px 14px; padding:9px 13px; } #ai-dock-panel .ai-dock-msg.me p{ margin:0; } #ai-dock-panel .ai-dock-msg.ai{ align-self:flex-start; background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:11px 14px; } #ai-dock-panel .ai-dock-msg.ai p{ margin:0 0 8px; } #ai-dock-panel .ai-dock-msg.ai p:last-child{ margin-bottom:0; } #ai-dock-panel .ai-dock-msg.ai ul,#ai-dock-panel .ai-dock-msg.ai ol{ margin:6px 0 0; padding-left:18px; } #ai-dock-panel .ai-dock-msg.ai li{ margin-bottom:6px; } #ai-dock-panel .ai-dock-msg.ai a, #ai-dock-panel .ai-dock-msg.ai .ai-cta{ color:var(--accent); font-weight:600; } #ai-dock-panel .ai-dock-msg.ai code{ font-family:var(--mono, monospace); font-size:.9em; background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:1px 4px; } #ai-dock-panel .ai-dock-msg.ai .ai-md-h{ font-weight:700; font-size:14px; line-height:1.3; margin:9px 0 4px; color:var(--text); } #ai-dock-panel .ai-dock-msg.ai .ai-md-h:first-child{ margin-top:0; } #ai-dock-panel .ai-dock-typing{ display:inline-flex; gap:4px; align-items:center; } #ai-dock-panel .ai-dock-typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:aiDockType 1s infinite; } #ai-dock-panel .ai-dock-typing i:nth-child(2){ animation-delay:.15s; } #ai-dock-panel .ai-dock-typing i:nth-child(3){ animation-delay:.3s; } @keyframes aiDockType{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} #ai-dock-panel .ai-dock-composer{ flex:0 0 auto; display:flex; align-items:flex-end; gap:8px; padding:12px; border-top:1px solid var(--line); background:color-mix(in srgb, var(--surface-2) 60%, transparent); } #ai-dock-panel .ai-dock-composer textarea{ flex:1; resize:none; max-height:130px; background:var(--surface); border:1px solid var(--line); border-radius:12px; color:var(--text); font-family:var(--font-body, sans-serif); font-size:13.5px; line-height:1.5; padding:10px 12px; outline:none; transition:border-color .2s; } #ai-dock-panel .ai-dock-composer textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft); } #ai-dock-panel .ai-dock-send{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; border:none; cursor:pointer; background:var(--accent); color:var(--ink-on-accent); font-size:17px; line-height:1; transition:transform .2s, opacity .2s, box-shadow .2s; } #ai-dock-panel .ai-dock-send:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 16px -6px var(--glow); } #ai-dock-panel .ai-dock-send:disabled{ opacity:.4; cursor:default; } @media (max-width:520px){ #ai-dock-panel{ right:12px; left:12px; width:auto; bottom:84px; height:min(72vh,540px); } #ai-dock-fab{ right:16px; bottom:16px; } } @media (prefers-reduced-motion:reduce){ #ai-dock-fab,#ai-dock-panel,#ai-dock-panel *{ animation:none!important; transition:opacity .2s ease!important; } #ai-dock-panel{ transform:none; } } /* ---------- model switcher (clickable pill → dropdown) ---------- */ #ai-dock-panel .ai-dock-modelwrap{ flex:1; display:flex; justify-content:flex-end; position:relative; min-width:0; } /* a clearly-clickable pill (accent hairline + accent down-arrow), so it no longer reads as plain text — new users can tell they can switch the model here */ #ai-dock-panel .ai-dock-model{ flex:0 1 auto; max-width:100%; font-size:11px; color:var(--text); background:var(--surface-2); border:1px solid var(--gold-line); cursor:pointer; padding:4px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body, sans-serif); letter-spacing:.02em; white-space:nowrap; transition:color .2s, background .2s, border-color .2s, box-shadow .2s; } #ai-dock-panel .ai-dock-model::after{ content:"▾"; color:var(--accent); opacity:1; font-size:11px; line-height:1; transition:transform .18s ease; } #ai-dock-panel .ai-dock-model:hover{ border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft); } #ai-dock-panel .ai-dock-model:hover::after{ transform:translateY(1px); } #ai-dock-panel .ai-dock-model[aria-expanded="true"]{ border-color:var(--accent); box-shadow:0 0 0 3px var(--gold-soft); } /* dropdown menu — pops below the pill (panel clips overflow, so it opens inward) */ #ai-dock-panel .ai-dock-model-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:40; min-width:240px; max-width:300px; max-height:320px; overflow-y:auto; padding:6px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line-2, var(--line)); box-shadow:0 18px 50px rgba(0,0,0,.55); text-align:left; } #ai-dock-panel .ai-dock-model-menu[hidden]{ display:none; } #ai-dock-panel .ai-dock-model-menu.open{ animation:aiDockMenu .16s ease both; } @keyframes aiDockMenu{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } } #ai-dock-panel .ai-dock-model-opt{ display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; cursor:pointer; padding:9px 11px; border-radius:10px; border:0; background:transparent; color:var(--text); font-family:inherit; font-size:13px; transition:background .12s ease; } #ai-dock-panel .ai-dock-model-opt:hover{ background:var(--surface-3, var(--surface)); } #ai-dock-panel .ai-dock-model-opt .mo-main{ min-width:0; } #ai-dock-panel .ai-dock-model-opt .mo-name{ font-weight:600; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; } #ai-dock-panel .ai-dock-model-opt .mo-d{ display:block; font-size:11px; color:var(--muted); margin-top:1px; } #ai-dock-panel .ai-dock-model-opt .mo-check{ margin-left:auto; color:var(--accent); opacity:0; flex:0 0 auto; } #ai-dock-panel .ai-dock-model-opt.sel .mo-check{ opacity:1; } #ai-dock-panel .ai-dock-model-opt.locked{ opacity:.74; } #ai-dock-panel .ai-dock-model-opt.locked .mo-name{ color:var(--muted); } /* tier badges (scoped copy so the dock is self-sufficient if ai-chat.css isn't loaded yet) */ #ai-dock-panel .mo-tier{ font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:6px; line-height:1.2; white-space:nowrap; } #ai-dock-panel .mo-tier-free{ background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); } #ai-dock-panel .mo-tier-pro{ background:var(--gold-soft); color:var(--accent); } #ai-dock-panel .mo-tier-max{ background:color-mix(in srgb, var(--blue) 16%, transparent); color:var(--blue); } /* Visually-hidden file input that is STILL rendered (not display:none) — Safari refuses to open the picker via .click() on a display:none input, so this keeps the attach + folder buttons working on Mac/Safari as well as Chrome. Used by both the Midas dock and the Home chat. */ .ai-vfile{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; opacity:0; } /* ---------- attach button + file chips ---------- */ #ai-dock-panel .ai-dock-attach{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; cursor:pointer; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:18px; line-height:1; transition:all .2s; align-self:flex-end; display:grid; place-items:center; position:relative; user-select:none; /*