/* ========================================================================== MegaMind V2 demo — SAX Workbench design language Adopted from megamind-mockup.html ("SAX Workbench v5"): Sora / Inter / JetBrains Mono / Source Serif 4, warm-paper light theme, charcoal dark theme, gold accent + per-bot brand colors (--bot / --bot-2). ========================================================================== */ :root { --bg: #FAF8F2; --surface: #FFFFFF; --surface-2: #F4F0E6; --surface-3: #ECE5D2; --hairline: rgba(61, 57, 41, 0.08); --hairline-strong: rgba(61, 57, 41, 0.16); --text: #2a2620; --text-2: #5e564a; --text-3: #9c958a; --gold: #c89a3a; --gold-2: #8a6920; --gold-soft: rgba(200, 154, 58, 0.10); --gold-edge: rgba(200, 154, 58, 0.32); --blue: #4a7da8; --rose: #b8746a; --green: #5e8a4e; --purple: #8a6db8; --user-bubble: #efe9d8; --r: 0.625rem; --r-sm: 0.375rem; --r-lg: 1rem; /* Prod font treatment (ADDENDUM 4 + v2.9 §D): Manrope-led stack, Inter fallback, v1's serif greeting stack (Copernicus/Palatino family), 1rem reader base */ --font-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: 'Source Serif 4', Georgia, serif; --font-greeting: 'Copernicus', 'Palatino Linotype', Palatino, 'Book Antiqua', 'Source Serif 4', Georgia, serif; --font-mono: 'JetBrains Mono', monospace; --letter-spacing-body: 0.012em; /* prod letter-spacing */ --font-size: 1rem; --line: 1.55; /* v2.9 §D: fluid chat column — scales with the viewport, never a narrow ribbon */ --chat-w: min(100% - 2rem, clamp(52.5rem, 58vw, 77.5rem)); /* active bot brand colors — set from JS on bot switch */ --bot: #332A7E; --bot-2: #007AA6; --bot-ink: #007AA6; --bot-soft: rgba(51, 42, 126, 0.08); --bot-edge: rgba(51, 42, 126, 0.32); } [data-theme="dark"] { --bg: #1a1814; --surface: #211f1a; --surface-2: #2a2620; --surface-3: #322d24; --hairline: rgba(247, 243, 237, 0.08); --hairline-strong: rgba(247, 243, 237, 0.16); --text: #f4efe3; --text-2: #b8b0a0; --text-3: #7a7468; --gold: #d9b057; --gold-2: #f0c875; --user-bubble: #3a3528; } * { box-sizing: border-box; } [hidden] { display: none !important; } /* ADDENDUM-15 C.9: Settings "Chat width" — Regular (the default --chat-w) and Wider only. */ html[data-chatwidth="wider"] { --chat-w: min(100% - 3rem, clamp(60rem, 76vw, 97.5rem)); } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } body { font-family: var(--font-body); font-size: var(--font-size); color: var(--text); background: var(--bg); line-height: var(--line); letter-spacing: var(--letter-spacing-body); font-weight: 480; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; display: grid; grid-template-columns: var(--nav-w, 16.5rem) 1fr; grid-template-rows: 100vh; transition: background 0.3s, color 0.3s, grid-template-columns 0.25s cubic-bezier(.2,.8,.2,1); } /* ============ SIDEBAR ============ */ aside.nav { background: var(--surface); border-right: 1px solid var(--hairline); padding: 0.75rem 0; display: flex; flex-direction: column; overflow: hidden; } .brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 1rem 0.75rem; } .brand-mark { width: 1.625rem; height: 1.625rem; border-radius: 0.4375rem; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-size: 0.8125rem; font-weight: 700; } .brand-name { font-family: 'Sora', sans-serif; font-size: 0.8125rem; font-weight: 600; line-height: 1.1; } .brand-name .sub { display: block; font-family: var(--font-mono); font-size: 0.5312rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 400; margin-top: 2px; } .live-chip { margin-left: auto; padding: 2px 0.375rem; background: rgba(94,138,78,0.12); color: var(--green); border-radius: 0.25rem; font-family: var(--font-mono); font-size: 0.5312rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; } .live-chip .dot { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--green); animation: live-pulse 1.6s ease-in-out infinite; } @keyframes live-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(94,138,78,0.4); } 50% { box-shadow: 0 0 0 0.3125rem rgba(94,138,78,0); } } .new-chat-btn { margin: 0 0.75rem 0.625rem; padding: 0.5rem 0.75rem; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #fff; border: none; border-radius: 0.4375rem; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: filter 0.15s, transform 0.1s; } .new-chat-btn:hover { filter: brightness(1.06); } .new-chat-btn:active { transform: scale(0.985); } .new-chat-btn svg { width: 0.8125rem; height: 0.8125rem; } .nav-scroll { flex: 1; overflow-y: auto; padding-bottom: 0.5rem; } .nav-label { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); padding: 0.75rem 1rem 0.25rem; display: flex; align-items: center; justify-content: space-between; } .nav-label .add { color: var(--text-3); cursor: pointer; font-size: 0.75rem; } .nav-label .add:hover { color: var(--rose); } /* Bot rows with brand-color identity */ .nav-bot { display: flex; align-items: center; gap: 0.5625rem; padding: 0.375rem 1rem; color: var(--text-2); cursor: pointer; font-size: 0.7812rem; border-left: 2px solid transparent; transition: background 0.12s; position: relative; } .nav-bot:hover { background: var(--gold-soft); color: var(--text); } .nav-bot.active { color: var(--text); font-weight: 500; border-left-color: var(--bb, var(--gold)); background: color-mix(in srgb, var(--bb, var(--gold)) 7%, transparent); } .nav-bot img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--hairline); flex-shrink: 0; } .nav-bot.active img { border-color: var(--bb, var(--gold)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb, var(--gold)) 25%, transparent); } .nav-bot .bot-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-bot .bot-role { font-family: var(--font-mono); font-size: 0.5312rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; } .nav-bot .brand-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: linear-gradient(135deg, var(--bb, var(--gold)), var(--bb2, var(--gold-2))); flex-shrink: 0; } /* Session rows */ .nav-recent { display: flex; padding: 0.375rem 1rem; color: var(--text-2); font-size: 0.75rem; cursor: pointer; align-items: center; gap: 0.5rem; white-space: nowrap; overflow: hidden; } .nav-recent:hover { background: var(--gold-soft); color: var(--text); } .nav-recent.active { background: var(--gold-soft); color: var(--text); font-weight: 500; } .nav-recent img { width: 1.125rem; height: 1.125rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--hairline); } .nav-recent .t { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav-recent .ago { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-3); flex-shrink: 0; } .nav-recent .del { color: var(--text-3); flex-shrink: 0; opacity: 0; padding: 0 2px; font-size: 0.8125rem; line-height: 1; } .nav-recent:hover .del { opacity: 1; } .nav-recent .del:hover { color: var(--rose); } .nav-empty { padding: 0.5rem 1rem; color: var(--text-3); font-size: 0.6875rem; font-style: italic; } /* §convo-search (0714): search-your-conversations box + results in the sidebar */ .convo-search-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0.75rem 0.35rem; padding: 0.32rem 0.5rem; background: var(--gold-soft); border: 1px solid var(--hairline); border-radius: 0.5rem; } .convo-search-row .cs-ico { width: 0.8rem; height: 0.8rem; color: var(--text-3); flex-shrink: 0; } .convo-search-row input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 0.75rem; font-family: inherit; } .convo-search-row input::placeholder { color: var(--text-3); } .convo-search-row input::-webkit-search-cancel-button { display: none; } .convo-search-row #convoSearchClear { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; flex-shrink: 0; } .convo-search-row #convoSearchClear:hover { color: var(--rose); } .convo-search-results { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; margin-bottom: 0.35rem; } .cs-result { padding: 0.45rem 1rem; cursor: pointer; border-left: 2px solid transparent; } .cs-result:hover { background: var(--gold-soft); border-left-color: var(--gold, var(--rose)); } .cs-result .cs-r-top { display: flex; align-items: baseline; gap: 0.5rem; } .cs-result .cs-r-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 0.72rem; font-weight: 500; } .cs-result .cs-r-date { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-3); flex-shrink: 0; } .cs-result .cs-r-snip { color: var(--text-2); font-size: 0.6875rem; line-height: 1.45; margin-top: 0.15rem; overflow-wrap: anywhere; } .cs-result .cs-r-snip mark { background: var(--gold-soft); color: var(--text); font-weight: 600; padding: 0 1px; border-radius: 2px; } .cs-result .cs-r-meta { font-family: var(--font-mono); font-size: 0.5rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.2rem; } .cs-status { padding: 0.6rem 1rem; color: var(--text-3); font-size: 0.6875rem; font-style: italic; } .msg.cs-flash { animation: csFlash 2.2s ease; } @keyframes csFlash { 0%, 30% { background: var(--gold-soft); } 100% { background: transparent; } } .nav-user { padding: 0.625rem 0.75rem; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 0.625rem; } .avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(135deg, var(--bot), var(--bot-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; flex-shrink: 0; } .nav-user-text { flex: 1; min-width: 0; } .nav-user-name { font-size: 0.7812rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-user-meta { font-size: 0.5625rem; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-btn { width: 1.625rem; height: 1.625rem; background: transparent; border: none; border-radius: 0.375rem; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn svg { width: 0.9375rem; height: 0.9375rem; } /* ============ MAIN ============ */ /* ADDENDUM-15 C.8: min-width 0 lets the main column SHRINK below its content's natural width at high zoom, so the grid reflows instead of clipping off-screen. */ main { display: grid; grid-template-rows: 3rem 1fr; overflow: hidden; position: relative; min-width: 0; } .topbar { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); border-bottom: 1px solid var(--hairline); padding: 0.625rem 1.5rem; display: flex; align-items: center; gap: 0.875rem; z-index: 50; } .crumb { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumb b { color: var(--text-2); font-weight: 600; } .crumb .sep { margin: 0 0.5rem; opacity: 0.4; } .v2-pill { display: inline-flex; align-items: center; gap: 0.3125rem; height: 1.375rem; padding: 0 0.5625rem; background: linear-gradient(135deg, rgba(138,109,184,0.12), rgba(74,125,168,0.12)); border: 1px solid rgba(138,109,184,0.3); border-radius: 6.25rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--purple); text-transform: uppercase; letter-spacing: 0.1em; } .v2-pill .pulse { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--purple); animation: live-pulse 1.4s ease-in-out infinite; } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.375rem; min-width: 0; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.2rem; } .tbtn { height: 1.75rem; padding: 0 0.625rem; border: 1px solid var(--hairline); background: var(--surface); color: var(--text-2); border-radius: 0.4375rem; font: inherit; font-size: 0.75rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; transition: all 0.15s; } .tbtn:hover { border-color: var(--gold-edge); color: var(--text); background: var(--gold-soft); } .tbtn svg { width: 0.75rem; height: 0.75rem; } .tbtn.icon-only { width: 1.75rem; padding: 0; justify-content: center; } .tbtn.primary { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #fff; border-color: var(--gold-2); } .chat-col { overflow: hidden; display: flex; flex-direction: column; position: relative; } .conv-scroll { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; scrollbar-gutter: stable; /* v3.2 AD: no reflow when the scrollbar appears on send */ } .conv-inner { max-width: var(--chat-w); margin: 0 auto; } /* ============ HERO (empty state) ============ */ .hero { padding: 1.75rem 0 1rem; animation: msg-in 0.4s ease; } .hero-art { width: 10.5rem; height: 10.5rem; margin: 0 0 0.625rem -0.625rem; position: relative; } .hero-art::before { content: ""; position: absolute; inset: 0.75rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bot-2) 16%, transparent), transparent 70%); } .hero-art img { width: 100%; height: 100%; object-fit: contain; position: relative; filter: drop-shadow(0 0.625rem 1.375rem rgba(0,0,0,0.22)); animation: hero-float 5s ease-in-out infinite; } @keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.375rem); } } .home-time { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-3); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.75rem; } .home-greet { font-family: var(--font-greeting); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .home-greet em { font-style: italic; background: linear-gradient(120deg, var(--bot), var(--bot-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="dark"] .home-greet em { filter: brightness(1.7); } .home-sub { font-size: 0.9062rem; color: var(--text-2); margin-top: 0.5rem; } .starters { margin-top: 1.375rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; } /* ADDENDUM-16 §K: samples are static per page load; this is the only rotation */ .starters-refresh { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border: none; background: none; border-radius: 6.25rem; font: inherit; font-size: 0.6875rem; color: var(--text-3); cursor: pointer; } .starters-refresh:hover { color: var(--text-2); background: var(--surface-2); } .starters-refresh svg { width: 0.75rem; height: 0.75rem; } .starter { text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); padding: 0.75rem 0.875rem; cursor: pointer; font: inherit; color: var(--text); transition: all 0.15s; } .starter:hover { border-color: var(--bot-edge); box-shadow: 0 0.25rem 0.875rem rgba(61,57,41,0.06); transform: translateY(-1px); } .starter-label { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--bot-ink); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 3px; } [data-theme="dark"] .starter-label { filter: brightness(1.6); } .starter-text { font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); } /* Mini bot switcher strip under starters */ /* v2.9.1 §L.14: rows center (a partial last row centers instead of left-aligning) and tiles are drag-and-drop re-arrangeable */ .bot-strip { margin-top: 1.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .bot-dragging { opacity: 0.45; transform: scale(1.04); cursor: grabbing !important; } body.bot-rearranging { cursor: grabbing; user-select: none; -webkit-user-select: none; } body.bot-rearranging .bot-card, body.bot-rearranging .nav-bot { transition: transform 0.15s; } .bot-pill { display: inline-flex; align-items: center; gap: 0.4375rem; height: 2.125rem; padding: 0 0.75rem 0 0.3125rem; border-radius: 6.25rem; border: 1px solid var(--hairline); background: var(--surface); font: inherit; font-size: 0.75rem; color: var(--text-2); cursor: pointer; transition: all 0.15s; } .bot-pill img { width: 1.625rem; height: 1.625rem; border-radius: 50%; object-fit: cover; } .bot-pill:hover { border-color: color-mix(in srgb, var(--bb, var(--gold)) 45%, transparent); color: var(--text); transform: translateY(-1px); } .bot-pill.active { border-color: var(--bb, var(--gold)); background: color-mix(in srgb, var(--bb, var(--gold)) 8%, var(--surface)); color: var(--text); font-weight: 600; } /* ============ CONVERSATION ============ */ .conv-header { padding-bottom: 0.875rem; margin-bottom: 1.375rem; border-bottom: 1px solid var(--hairline); display: flex; gap: 0.75rem; align-items: flex-start; } .conv-header-text { flex: 1; min-width: 0; } .conv-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.375rem; } .conv-context { display: flex; gap: 0.5rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; } .ctxpill { padding: 2px 0.5rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: 6.25rem; display: inline-flex; align-items: center; } .ctxpill img { width: 0.875rem; height: 0.875rem; border-radius: 50%; object-fit: cover; margin-right: 0.3125rem; } #convBotPill { color: var(--bot-ink); border-color: var(--bot-edge); } .messages { display: flex; flex-direction: column; gap: var(--msg-gap, 1.375rem); padding-bottom: 0.75rem; } .msg { display: flex; gap: 0.75rem; animation: msg-in 0.3s ease; } @keyframes msg-in { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: translateY(0); } } .msg-avatar { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; overflow: hidden; } .msg-avatar.user { background: var(--user-bubble); color: var(--text); } .msg-avatar.bot { background: var(--surface-2); } .msg-avatar.bot img { width: 100%; height: 100%; object-fit: cover; } .msg-avatar.system { background: var(--surface-2); color: var(--text-3); border: 1px dashed var(--hairline-strong); } .msg-bubble { flex: 1; min-width: 0; } .msg-meta { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; } .msg-name { font-size: 0.8125rem; font-weight: 600; } .msg-name .sub { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; margin-left: 0.375rem; font-weight: 400; } .msg-time { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); } .msg-content { font-size: calc(var(--font-size) + 0.5px); line-height: var(--line); overflow-wrap: break-word; } /* §AD (this wave): submit/streaming fluidity. While a bot answer streams, reserve a little height so the bubble doesn't pop from 0 and shove the layout on the first token, and contain layout so each appended token reflows only the body (no page-wide ripple/flash). The reserve releases the moment streaming ends. */ .msg-content.streaming .md-body { min-height: 1.5em; contain: layout paint; } .msg-content.streaming .md-body > *:last-child { animation: tokenIn 0.18s ease; } @keyframes tokenIn { from { opacity: 0.4; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .msg-content.streaming .md-body > *:last-child { animation: none; } } .msg.user .msg-content { background: var(--user-bubble); border-radius: 0.625rem; padding: 0.625rem 0.875rem; display: inline-block; white-space: pre-wrap; } .msg.system .msg-content { color: var(--text-2); font-size: 0.7812rem; font-style: italic; padding: 0.5rem 0.75rem; background: var(--surface-2); border-radius: 0.5rem; display: inline-block; } /* Markdown body */ .md-body p { margin: 0 0 0.625rem; } .md-body p:last-child { margin-bottom: 0; } .md-body h1, .md-body h2, .md-body h3, .md-body h4 { font-family: var(--font-serif); margin: 1.125rem 0 0.5rem; line-height: 1.3; } .md-body h1 { font-size: 1.3125rem; } .md-body h2 { font-size: 1.125rem; } .md-body h3 { font-size: 1rem; } .md-body h4 { font-size: 0.9062rem; } .md-body ul, .md-body ol { margin: 0 0 0.625rem; padding-left: 1.375rem; } .md-body li { margin-bottom: 3px; } .md-body a { color: var(--bot-ink); text-decoration-color: color-mix(in srgb, var(--bot-ink) 40%, transparent); } [data-theme="dark"] .md-body a { filter: brightness(1.5); } .md-body blockquote { margin: 0.625rem 0; padding: 0.375rem 0.875rem; border-left: 2px solid var(--gold); background: var(--surface-2); border-radius: 0 0.5rem 0.5rem 0; color: var(--text-2); } .md-body hr { border: none; border-top: 1px solid var(--hairline-strong); margin: 1rem 0; } .md-body table { border-collapse: collapse; margin: 0.625rem 0; font-size: 0.8125rem; max-width: 100%; display: block; overflow-x: auto; } .md-body th, .md-body td { border: 1px solid var(--hairline-strong); padding: 0.375rem 0.625rem; text-align: left; } .md-body th { background: var(--surface-2); font-family: var(--font-mono); font-size: 0.6562rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); } .md-body img { max-width: 100%; border-radius: 0.625rem; border: 1px solid var(--hairline); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.12); margin: 0.5rem 0; } .md-body code { font-family: var(--font-mono); font-size: 0.7812rem; background: var(--surface-2); border: 1px solid var(--hairline); padding: 1px 0.3125rem; border-radius: 0.25rem; } .md-body pre { margin: 0.625rem 0; border-radius: 0.625rem; border: 1px solid var(--hairline-strong); overflow: hidden; background: #211f1a; } [data-theme="dark"] .md-body pre { background: #14120e; } .md-body pre code { display: block; background: transparent; border: none; padding: 0.75rem 0.875rem; overflow-x: auto; color: #f4efe3; line-height: 1.55; } .codebar { display: flex; align-items: center; justify-content: space-between; padding: 0.3125rem 0.75rem; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); font-family: var(--font-mono); font-size: 0.5938rem; color: rgba(244,239,227,0.55); text-transform: uppercase; letter-spacing: 0.12em; } .codebar button { background: transparent; border: none; color: rgba(244,239,227,0.55); font-family: var(--font-mono); font-size: 0.5938rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.12em; padding: 2px 0.25rem; } .codebar button:hover { color: #f4efe3; } /* streaming caret */ .msg-content.streaming .md-body > :last-child::after { content: '▎'; color: var(--bot-ink); animation: blink 0.9s steps(2) infinite; margin-left: 1px; } @keyframes blink { 50% { opacity: 0; } } /* §DV instant-pending placeholder (task #54): three pulsing dots shown the MOMENT a message is submitted, before the awaited topic-shift call, so the chat never looks stuck and the user doesn't resend. Replaced by the real streaming bubble in sendMessage. */ #instantPending .md-body > :last-child::after { content: none !important; } #instantPending .ip-dots { display: inline-flex; gap: 0.3125rem; align-items: center; } #instantPending .ip-dots i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--bot-ink, var(--bot, currentColor)); opacity: 0.4; animation: ip-bounce 1.2s ease-in-out infinite; } #instantPending .ip-dots i:nth-child(2) { animation-delay: 0.18s; } #instantPending .ip-dots i:nth-child(3) { animation-delay: 0.36s; } @keyframes ip-bounce { 0%,80%,100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-0.25rem); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #instantPending .ip-dots i { animation: none; opacity: 0.7; } } /* §DV: disabled "Sending…" state on the send button during the synchronous lock */ #sendBtn.sending { opacity: 0.6; cursor: default; } /* user attachments echo */ .msg-attachments { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; } .msg-attachments .attach-chip { background: var(--surface); } /* ============ THINKING STRIP ============ */ .thinking-strip { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem 0.5rem 0.625rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 6.25rem; margin-top: 2px; box-shadow: 0 2px 0.625rem rgba(61,57,41,0.05); } .thinking-orb { width: 1rem; height: 1rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--bot-2), var(--bot)); animation: orb-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes orb-pulse { 0%,100% { transform: scale(0.8); opacity: 0.75; } 50% { transform: scale(1.05); opacity: 1; } } .thinking-text { font-size: 0.7812rem; color: var(--text-2); } .thinking-text .phase { transition: opacity 0.3s; } .thinking-text .node { font-family: var(--font-mono); font-size: 0.5938rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; margin-left: 0.5rem; } .thinking-elapsed { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); border-left: 1px solid var(--hairline-strong); padding-left: 0.625rem; } /* §teams-unify (0711): channel badge on sidebar rows (Teams/iOS-born chats) */ .chan-badge { display: inline-block; margin-left: 0.3125rem; padding: 0 0.3125rem; border-radius: 0.25rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; border: 1px solid var(--hairline-strong); color: var(--text-2); background: var(--surface-2); } .chan-badge.chan-teams { color: #5059c9; border-color: rgba(80,89,201,0.35); } /* ============ V2: reasoning stream + tool chips ============ */ .reasoning { margin: 0 0 0.625rem; border: 1px dashed var(--hairline-strong); border-radius: 0.625rem; background: var(--surface-2); overflow: hidden; } .reasoning summary { cursor: pointer; padding: 0.4375rem 0.75rem; font-family: var(--font-mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--purple); display: flex; align-items: center; gap: 0.375rem; list-style: none; } .reasoning summary::-webkit-details-marker { display: none; } .reasoning summary::before { content: "◐"; } .reasoning[open] summary { border-bottom: 1px dashed var(--hairline); } .reasoning .reasoning-body { padding: 0.625rem 0.875rem; font-family: var(--font-serif); font-style: italic; font-size: 0.8438rem; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; max-height: 13.75rem; overflow-y: auto; } .tool-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.625rem; } .tool-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.6875rem; border-radius: 6.25rem; border: 1px solid var(--hairline-strong); background: var(--surface); font-family: var(--font-body); font-size: 0.6875rem; color: var(--text-2); letter-spacing: 0; animation: msg-in 0.25s ease; } .tool-chip .spin { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 1.5px solid var(--gold-soft); border-top-color: var(--gold); animation: spin 0.8s linear infinite; } .tool-chip.done { border-color: rgba(94,138,78,0.35); color: var(--green); } .tool-chip.done::before { content: "✓"; font-size: 0.625rem; } @keyframes spin { to { transform: rotate(360deg); } } /* ============ HANDOFF ============ */ .handoff-row { margin-top: 0.75rem; } .handoff-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.875rem 0.4375rem 0.4375rem; border-radius: 6.25rem; border: 1.5px solid var(--hb, var(--gold)); background: color-mix(in srgb, var(--hb, var(--gold)) 8%, var(--surface)); color: var(--text); font: inherit; font-size: 0.7812rem; font-weight: 600; cursor: pointer; transition: all 0.15s; box-shadow: 0 2px 0.75rem color-mix(in srgb, var(--hb, var(--gold)) 18%, transparent); } .handoff-btn:hover { transform: translateY(-1px); box-shadow: 0 0.375rem 1.125rem color-mix(in srgb, var(--hb, var(--gold)) 30%, transparent); } .handoff-btn img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; } .handoff-btn .arr { color: var(--hb, var(--gold)); } .handoff-note { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.3125rem; } /* ============ GENERATION PANEL (doc / excel / image jobs) ============ */ .gen-card { margin-top: 0.75rem; border: 1px solid var(--gold-edge); border-radius: 0.75rem; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--gold) 4%, var(--surface))); overflow: hidden; position: relative; animation: msg-in 0.3s ease; } .gen-card.running::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 200% 100%; animation: gen-sheen 1.6s linear infinite; } @keyframes gen-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } } .gen-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; } .gen-kind { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600; color: var(--gold-2); background: var(--gold-soft); padding: 2px 0.5rem; border-radius: 0.25rem; text-transform: uppercase; letter-spacing: 0.14em; flex-shrink: 0; } [data-theme="dark"] .gen-kind { color: var(--gold); } .gen-title { font-family: var(--font-serif); font-size: 0.9062rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gen-elapsed { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); flex-shrink: 0; } .gen-status { display: flex; align-items: center; gap: 0.5625rem; padding: 0 0.875rem 0.75rem; font-size: 0.7812rem; color: var(--text-2); } .gen-status .spin { width: 0.8125rem; height: 0.8125rem; border-radius: 50%; border: 2px solid var(--gold-soft); border-top-color: var(--gold); animation: spin 0.8s linear infinite; flex-shrink: 0; } .gen-codeline { margin: 0 0.875rem 0.75rem; padding: 0.375rem 0.625rem; background: #211f1a; color: #d8d0bc; border-radius: 0.4375rem; font-family: var(--font-mono); font-size: 0.6562rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gen-codeline .lines { color: var(--gold); } .gen-done { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-top: 1px solid var(--hairline); } .gen-file-ico { width: 2.375rem; height: 2.375rem; border-radius: 0.5625rem; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.05em; flex-shrink: 0; } .gen-file-ico.xlsx { background: linear-gradient(135deg, #2e7d4f, #1d5c38); } .gen-file-ico.docx { background: linear-gradient(135deg, #2b579a, #1c3c6e); } .gen-file-ico.pdf { background: linear-gradient(135deg, #b8504a, #8e352f); } .gen-file-ico.pptx { background: linear-gradient(135deg, #c4502e, #963a1f); } /* v3.3.4 §DJ.1: image artifacts get an image-type look, never the generic gold badge */ .gen-file-ico.png, .gen-file-ico.jpg, .gen-file-ico.jpeg, .gen-file-ico.gif, .gen-file-ico.webp, .gen-file-ico.imgtype { background: linear-gradient(135deg, #2ba7c9, #16627c); } .gen-file-ico.imgtype svg { width: 60%; height: 60%; } /* §DJ.1: real image-render progress (gateway image_progress pct) */ .gen-prog { height: 4px; margin: 0 0.875rem 0.625rem; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .gen-prog-fill { display: block; height: 100%; border-radius: 3px; width: 0; background: linear-gradient(90deg, var(--gold), #2ba7c9); transition: width 0.45s ease; } /* Indeterminate: edits get no streamed progress, so animate a sliding fill so the bar reads as "working" instead of frozen at 5%. */ .gen-img-note { margin: 0 0.875rem 0.5rem; font-size: 0.6875rem; color: var(--text-2); font-style: italic; opacity: 0.85; } .gen-prog.indeterminate { position: relative; } .gen-prog.indeterminate .gen-prog-fill { width: 40%; transition: none; animation: genIndet 1.3s ease-in-out infinite; } @keyframes genIndet { 0% { margin-left: -42%; } 100% { margin-left: 102%; } } @media (prefers-reduced-motion: reduce) { .gen-prog.indeterminate .gen-prog-fill { animation: none; width: 30%; margin-left: 35%; } } .gen-file-meta { flex: 1; min-width: 0; } .gen-file-name { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gen-file-sub { font-family: var(--font-mono); font-size: 0.5938rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px; } .gen-actions { display: flex; gap: 0.375rem; flex-shrink: 0; } .gen-btn { height: 1.75rem; padding: 0 0.75rem; border-radius: 0.4375rem; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; } .gen-btn.primary { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #fff; border: 1px solid var(--gold-2); } .gen-btn.ghost { background: var(--surface); color: var(--text-2); border: 1px solid var(--hairline); } .gen-btn.ghost:hover { border-color: var(--gold-edge); color: var(--text); } .gen-error { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; color: var(--rose); font-size: 0.7812rem; border-top: 1px solid rgba(184,116,106,0.25); background: rgba(184,116,106,0.06); } .gen-error .retry { margin-left: auto; } .gen-img { display: block; width: 100%; max-height: 26.25rem; object-fit: contain; background: var(--surface-2); border-top: 1px solid var(--hairline); } /* ============ COMPOSER ============ */ .chat-composer-wrap { padding: 0.75rem 2rem 0.625rem; border-top: 1px solid var(--hairline); position: relative; background: var(--bg); } .composer-card { max-width: var(--chat-w); margin: 0 auto; border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0.5rem 2rem rgba(61,57,41,0.06); overflow: hidden; transition: all 0.2s; position: relative; } .composer-card:focus-within { border-color: var(--bot-edge); box-shadow: 0 0.5rem 2rem rgba(61,57,41,0.08), 0 0 0 0.25rem var(--bot-soft); } .composer-card.dragging::after { content: "Drop files to attach"; position: absolute; inset: 0; background: var(--gold-soft); border: 2px dashed var(--gold); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold-2); text-transform: uppercase; letter-spacing: 0.12em; z-index: 10; } .composer-input { width: 100%; border: none; background: transparent; padding: 1rem 1.25rem 0.25rem; font-family: var(--font-serif); font-size: 1.0312rem; line-height: 1.5; color: var(--text); outline: none; resize: none; min-height: 3.375rem; max-height: 12.5rem; display: block; } .composer-input::placeholder { color: var(--text-3); font-style: italic; } .composer-tray { display: flex; align-items: center; padding: 0.5rem 0.75rem; gap: 0.375rem; border-top: 1px solid var(--hairline); flex-wrap: wrap; } .ctag { height: 1.625rem; padding: 0 0.625rem; border-radius: 6.25rem; border: 1px solid var(--hairline); background: transparent; font: inherit; font-size: 0.6875rem; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3125rem; } .ctag:hover { border-color: var(--bot-edge); color: var(--text); background: var(--bot-soft); } .ctag.active { background: var(--bot-soft); border-color: var(--bot-edge); color: var(--text); } .ctag svg { width: 0.6875rem; height: 0.6875rem; } .ctag .agent-mini { width: 1rem; height: 1rem; border-radius: 50%; object-fit: cover; margin-right: 2px; } .filesession-chip { display: inline-flex; align-items: center; gap: 0.3125rem; height: 1.5rem; padding: 0 0.5625rem; border-radius: 6.25rem; background: rgba(94,138,78,0.1); border: 1px solid rgba(94,138,78,0.3); font-family: var(--font-mono); font-size: 0.5625rem; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; } .filesession-chip svg { width: 0.625rem; height: 0.625rem; } .composer-send { margin-left: auto; height: 1.75rem; padding: 0 0.875rem; border: none; border-radius: 0.4375rem; background: linear-gradient(135deg, var(--bot), var(--bot-2)); color: #fff; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem; transition: filter 0.15s, transform 0.1s, opacity 0.2s; } .composer-send:hover { filter: brightness(1.12); } .composer-send:active { transform: scale(0.97); } .composer-send:disabled { opacity: 0.5; cursor: default; filter: none; } .composer-send svg { width: 0.75rem; height: 0.75rem; } .composer-hint { max-width: var(--chat-w); margin: 0.375rem auto 0; font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; } .composer-attachments { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.625rem 0.875rem 0; } .attach-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 0.375rem; font-size: 0.6875rem; max-width: 15rem; } .attach-chip .att-type { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--gold-2); padding: 1px 0.25rem; background: var(--surface); border-radius: 3px; text-transform: uppercase; flex-shrink: 0; } [data-theme="dark"] .attach-chip .att-type { color: var(--gold); } .attach-chip .att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attach-chip .att-x { color: var(--text-3); cursor: pointer; padding: 0 2px; border: none; background: transparent; font-size: 0.8125rem; line-height: 1; } .attach-chip .att-x:hover { color: var(--rose); } .attach-chip img.thumb { width: 1.75rem; height: 1.75rem; object-fit: cover; border-radius: 0.25rem; } /* ============ SETTINGS DRAWER ============ */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 18, 14, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .drawer-backdrop.show { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 25rem; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--hairline-strong); z-index: 210; transform: translateX(102%); transition: transform 0.3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; box-shadow: -1rem 0 3rem rgba(0,0,0,0.12); } .drawer.show { transform: translateX(0); } .drawer-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; } .drawer-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; flex: 1; } .drawer-close { background: transparent; border: none; color: var(--text-3); cursor: pointer; font-size: 1.375rem; padding: 2px 0.5rem; } .drawer-close:hover { color: var(--text); } .drawer-body { flex: 1; overflow-y: auto; padding: 1.125rem 1.25rem 2rem; } .settings-section { margin-bottom: 1.75rem; } .settings-section-h { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; } .settings-section-sub { font-size: 0.75rem; color: var(--text-2); margin-bottom: 0.75rem; } .settings-section-sub code { font-family: var(--font-mono); font-size: 0.6875rem; background: var(--surface-2); padding: 1px 0.25rem; border-radius: 3px; } .settings-row { display: flex; align-items: center; padding: 0.6875rem 0; border-bottom: 1px solid var(--hairline); gap: 0.875rem; } .settings-row:last-child { border-bottom: none; } .settings-row .label { flex: 1; min-width: 0; } .settings-row .name { font-size: 0.8125rem; font-weight: 500; } .settings-row .desc { font-size: 0.7188rem; color: var(--text-3); margin-top: 2px; } .settings-row .desc.mono { font-family: var(--font-mono); font-size: 0.6562rem; word-break: break-all; } .preview-tag { font-family: var(--font-mono); font-size: 0.5rem; color: var(--purple); background: rgba(138,109,184,0.12); padding: 1px 0.375rem; border-radius: 6.25rem; letter-spacing: 0.1em; vertical-align: 2px; } .toggle { position: relative; width: 2.25rem; height: 1.25rem; background: var(--surface-3); border-radius: 6.25rem; cursor: pointer; transition: background 0.15s; flex-shrink: 0; } .toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 1rem; height: 1rem; background: var(--surface); border-radius: 50%; transition: left 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .toggle.on { background: var(--purple); } .toggle.on::after { left: 1.125rem; } .select { padding: 0.375rem 0.625rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); font: inherit; font-size: 0.75rem; color: var(--text); cursor: pointer; } .form-row { margin-bottom: 0.875rem; } .form-lbl { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.3125rem; display: block; } .form-input { width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); font: inherit; font-size: 0.8125rem; color: var(--text); outline: none; } .form-input:focus { border-color: var(--gold-edge); } .endpoint-list { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); line-height: 2; } .endpoint-list b { color: var(--text-2); font-weight: 600; } .endpoint-list .row { display: flex; justify-content: space-between; gap: 0.625rem; border-bottom: 1px solid var(--hairline); padding: 3px 0; } .endpoint-list .url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: right; } /* ============ TOASTS ============ */ .toast-host { position: fixed; bottom: 1.375rem; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; background: #2a2620; color: #f4efe3; border: 1px solid rgba(247,243,237,0.14); border-radius: 0.625rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; box-shadow: 0 0.75rem 2.5rem rgba(0,0,0,0.3); animation: toast-in 0.3s cubic-bezier(.2,.8,.2,1); max-width: 32.5rem; } @keyframes toast-in { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: translateY(0); } } .toast.err { border-color: rgba(184,116,106,0.5); } .toast.err::before { content: "⚠"; color: var(--rose); } .toast.ok::before { content: "✓"; color: #8fc97a; } .toast .toast-act { background: transparent; border: 1px solid rgba(247,243,237,0.25); color: #f4efe3; border-radius: 0.375rem; padding: 3px 0.625rem; font: inherit; font-size: 0.7188rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .toast .toast-act:hover { background: rgba(247,243,237,0.1); } .toast.leaving { opacity: 0; transform: translateY(0.5rem); transition: all 0.25s; } /* scrollbars */ ::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; } ::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 0.375rem; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* small-screen starters fallback (full mobile pass lives in the V2.3 block below) */ @media (max-width: 760px) { .starters { grid-template-columns: 1fr; } } /* ========================================================================== V2.1 ADDITIONS — collapsible sidebar, brain link, tabs/artifacts, doc-gen wizard + ticker, conference theater, lightbox, share modal, command palette, voice, message footers, customization vars, $500k polish. ========================================================================== */ /* ---------- density ---------- */ [data-density="compact"] { --msg-gap: 0.8125rem; } [data-density="compact"] .msg-content { font-size: calc(var(--font-size) + 0.2px); line-height: calc(var(--line) - 0.06); } [data-density="compact"] .conv-scroll { padding: 1rem 1.75rem; } [data-density="compact"] .msg-bubble .msg-meta { margin-bottom: 2px; } /* ---------- collapsible sidebar ---------- */ body.nav-collapsed { --nav-w: 4.125rem; } .collapse-btn { margin-left: 2px; } .collapse-btn svg { transition: transform 0.25s; } body.nav-collapsed .collapse-btn svg { transform: rotate(180deg); } body.nav-collapsed .brand-name, body.nav-collapsed .live-chip, body.nav-collapsed .new-chat-btn .label, body.nav-collapsed .nav-brain .label, body.nav-collapsed .nav-label, body.nav-collapsed .nav-tabs, body.nav-collapsed .nav-recents, body.nav-collapsed .nav-artifacts, body.nav-collapsed #navSessionsWrap, body.nav-collapsed #navArtifactsWrap, body.nav-collapsed .nav-bot .bot-name, body.nav-collapsed .nav-bot .brand-dot, body.nav-collapsed .nav-user-text { display: none; } body.nav-collapsed .brand { padding: 0.25rem 0.625rem 0.75rem; justify-content: center; } body.nav-collapsed .new-chat-btn { padding: 0.5rem; justify-content: center; margin: 0 0.625rem 0.625rem; } body.nav-collapsed .nav-brain { justify-content: center; padding: 0.5rem; margin: 0 0.625rem 0.375rem; } body.nav-collapsed .nav-bot { justify-content: center; padding: 0.375rem 0; border-left-width: 0; } body.nav-collapsed .nav-bot img { width: 1.875rem; height: 1.875rem; } body.nav-collapsed .nav-user { flex-direction: column; gap: 0.375rem; padding: 0.625rem 0.375rem; } /* ---------- brain nav link ---------- */ .nav-brain { display: flex; align-items: center; gap: 0.5625rem; margin: 0 0.75rem 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5625rem; text-decoration: none; color: var(--text-2); border: 1px solid var(--hairline); background: linear-gradient(135deg, rgba(138,109,184,0.08), rgba(74,125,168,0.08)); transition: all 0.15s; font-size: 0.7812rem; } .nav-brain:hover { border-color: rgba(138,109,184,0.45); color: var(--text); transform: translateY(-1px); box-shadow: 0 0.25rem 0.875rem rgba(138,109,184,0.15); } .nav-brain .label { font-weight: 600; } .nav-brain .label .sub { display: block; font-family: var(--font-mono); font-size: 0.5312rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; margin-top: 1px; } /* ---------- sidebar tabs + artifacts ---------- */ .nav-tabs { display: flex; gap: 0.25rem; margin: 0.75rem 0.75rem 0; padding: 3px; background: var(--surface-2); border-radius: 0.5rem; } /* v3.3.4 §DJ.2: "Live Collabs" overflowed its tab — tabs size to their label (no wrap, no clip) and share the leftover space instead of forcing thirds. */ .nav-tab { flex: 1 1 auto; min-width: 0; height: 1.5rem; padding: 0 0.4375rem; border: none; border-radius: 0.375rem; background: transparent; font: inherit; font-size: 0.6562rem; font-weight: 500; color: var(--text-3); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .nav-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 0.25rem rgba(0,0,0,0.08); font-weight: 600; } .nav-artifacts { padding-bottom: 0.375rem; } .art-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.75rem 0.4375rem 1rem; cursor: default; } .art-row:hover { background: var(--gold-soft); } .art-meta { flex: 1; min-width: 0; } .art-name { font-size: 0.7188rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .art-sub { font-family: var(--font-mono); font-size: 0.5312rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1px; } .art-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; } .art-row:hover .art-actions { opacity: 1; } .art-btn { width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); border-radius: 0.3125rem; font-size: 0.75rem; cursor: pointer; text-decoration: none; padding: 0; } .art-btn:hover { background: var(--surface-2); color: var(--text); } .art-btn.del:hover { color: var(--rose); } .gen-file-ico.sm { width: 1.75rem; height: 1.75rem; border-radius: 0.4375rem; font-size: 0.4688rem; } .art-skel { height: 2.625rem; margin: 0.375rem 0.75rem; border-radius: 0.5625rem; } /* ---------- skeleton shimmer ---------- */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; } @keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---------- topbar badges ---------- */ .collab-badge { display: inline-flex; align-items: center; gap: 0.3125rem; height: 1.375rem; padding: 0 0.5625rem; background: rgba(94,138,78,0.12); border: 1px solid rgba(94,138,78,0.4); border-radius: 6.25rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; } .collab-badge .pulse { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--green); animation: live-pulse 1.4s ease-in-out infinite; } .readonly-badge { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.5625rem; background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 6.25rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); letter-spacing: 0.1em; } /* ---------- message footer ---------- */ .msg-footer { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.5938rem; color: var(--text-3); letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .transfer-badge { font-family: var(--font-mono); font-size: 0.5312rem; color: var(--purple); background: rgba(138,109,184,0.12); border: 1px solid rgba(138,109,184,0.3); padding: 1px 0.4375rem; border-radius: 6.25rem; text-transform: uppercase; letter-spacing: 0.1em; } .brain-chip { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--purple); background: rgba(138,109,184,0.1); padding: 1px 0.4375rem; border-radius: 6.25rem; cursor: help; } /* ---------- image gen: bounded progressive preview (blur-up) ---------- */ /* The slot must be visibly sized BEFORE the first partial frame arrives — an edit lane can run ~20s with no partials, and an empty 0-height slot read as a "stuck" tiny box. Give it a min footprint + centered placeholder. */ .gen-img-slot { display: flex; align-items: center; justify-content: center; min-height: 13.75rem; min-width: 17.5rem; max-width: 22rem; margin-top: 0.625rem; border-radius: 0.75rem; background: var(--surface-2); overflow: hidden; } .gen-img-slot .gen-preview { max-width: 22rem; max-height: 16.5rem; width: auto; height: auto; object-fit: contain; border-radius: 0.5rem; opacity: 0.92; display: block; transition: filter 0.4s ease, opacity 0.4s ease; } /* ---------- Mode B: multi-expert panel roundtable ---------- */ .panel-rt { border: 1px solid var(--hairline-strong); border-radius: 0.75rem; background: var(--surface); padding: 0.625rem 0.75rem; margin: 0.25rem 0 0.5rem; } .panel-rt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .panel-rt-title { font-weight: 500; font-size: 0.8125rem; color: var(--text); } .panel-rt-count { font-size: 0.6875rem; color: var(--text-3); } .panel-rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.4375rem; } .panel-expert { display: flex; align-items: center; gap: 0.4375rem; padding: 0.375rem 0.5rem; border: 1px solid var(--hairline); border-radius: 0.5rem; background: var(--surface-2, var(--bg)); transition: opacity 0.3s; } .panel-expert[data-state="timeout"], .panel-expert[data-state="failed"] { opacity: 0.45; } .panel-x-av { width: 1.375rem; height: 1.375rem; border-radius: 50%; object-fit: cover; flex: none; } .panel-x-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .panel-x-name { font-size: 0.75rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-x-reason { font-size: 0.625rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-x-dot { flex: none; width: 1rem; text-align: center; font-size: 0.6875rem; line-height: 1; } .panel-x-dot.thinking { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--blue); animation: panel-pulse 1s ease-in-out infinite; } .panel-x-dot.pending { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hairline-strong); } .panel-x-dot.ok { color: var(--green); } .panel-x-dot.off { color: var(--text-3); } @keyframes panel-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* ---------- doc-gen wizard + rolling code ticker ---------- */ .gen-card.wizard { border-color: color-mix(in srgb, var(--gold) 55%, transparent); } .gen-card.wizard::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--gold) 9%, transparent) 48%, color-mix(in srgb, var(--gold-2) 13%, transparent) 52%, transparent 70%); background-size: 220% 100%; animation: wiz-sheen 2.2s ease-in-out infinite; border-radius: 0.75rem; } @keyframes wiz-sheen { from { background-position: 180% 0; } to { background-position: -180% 0; } } .gen-wizard { display: flex; align-items: center; gap: 0.625rem; padding: 2px 0.875rem 0.75rem; font-size: 0.7812rem; color: var(--text-2); } .wiz-orb { display: inline-flex; gap: 3px; align-items: center; } .wiz-orb span { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-2)); animation: wiz-bounce 1.1s ease-in-out infinite; } .wiz-orb span:nth-child(2) { animation-delay: 0.15s; } .wiz-orb span:nth-child(3) { animation-delay: 0.3s; } @keyframes wiz-bounce { 0%,100% { transform: translateY(0) scale(0.85); opacity: 0.6; } 50% { transform: translateY(-0.25rem) scale(1.05); opacity: 1; } } .wiz-phase { transition: opacity 0.3s; } .wiz-lines { margin-left: auto; font-family: var(--font-mono); font-size: 0.5938rem; color: var(--gold-2); background: var(--gold-soft); padding: 1px 0.5rem; border-radius: 6.25rem; } [data-theme="dark"] .wiz-lines { color: var(--gold); } /* rolling code ticker — fixed ~6-line window, append-only DOM, smooth auto-scroll (ADDENDUM 10 §1.4) */ .gen-ticker { margin: 0 0.875rem 0.75rem; padding: 0.5rem 0.75rem; background: #16140f; border-radius: 0.5625rem; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.55; border: 1px solid rgba(255,255,255,0.05); max-height: 10rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.75rem); mask-image: linear-gradient(to bottom, transparent 0, #000 0.75rem); } /* ADDENDUM-16 §D.3: append-only fluid ticker — no per-line flash animation, no blinking cursor (the strobe-of-python complaint). Status lines ride along dim. */ .gen-ticker .tl { color: #c9c0a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.72; } .gen-ticker .tl:last-child { color: #f0e8d2; } .gen-ticker .tl.status { color: #9fb8d8; font-style: italic; opacity: 0.85; } .gen-eta { font-family: var(--font-mono); font-size: 0.625rem; color: var(--gold-2); background: var(--gold-soft); padding: 1px 0.5rem; border-radius: 6.25rem; flex-shrink: 0; } .gen-eta:empty { display: none; } [data-theme="dark"] .gen-eta { color: var(--gold); } .wiz-elapsed { margin-left: auto; font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); flex-shrink: 0; } @keyframes ticker-in { from { transform: translateY(0.3125rem); opacity: 0; } } .gen-card.reveal { animation: card-reveal 0.45s cubic-bezier(.2,.9,.3,1.2); } @keyframes card-reveal { from { opacity: 0; transform: translateY(0.625rem) scale(0.985); } to { opacity: 1; transform: none; } } /* ---------- conference-call takeover theater ---------- */ .conf-overlay { position: fixed; inset: 0; z-index: 600; background: rgba(16,14,10,0.55); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.32s; } .conf-overlay.show { opacity: 1; } .conf-card { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 1.375rem; padding: 2.375rem 3.25rem 2rem; text-align: center; box-shadow: 0 2.5rem 7.5rem rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset; transform: translateY(0.625rem) scale(0.97); transition: transform 0.35s cubic-bezier(.2,.9,.3,1.15); max-width: 32.5rem; } .conf-overlay.show .conf-card { transform: none; } .conf-avatars { display: flex; align-items: center; justify-content: center; gap: 1.625rem; margin-bottom: 1.375rem; } .conf-av { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; } .conf-av img { width: 5.25rem; height: 5.25rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); box-shadow: 0 0.5rem 1.875rem rgba(0,0,0,0.25); position: relative; z-index: 1; } .conf-ring { position: absolute; top: -0.4375rem; left: 50%; transform: translateX(-50%); width: 6.125rem; height: 6.125rem; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; } .conf-av.to .conf-ring { animation: conf-ring 1.5s ease-out infinite; } .conf-overlay.joined .conf-av .conf-ring { animation: none; opacity: 0; } .conf-overlay.joined .conf-av.to img { border-color: var(--green); box-shadow: 0 0 0 0.25rem rgba(94,138,78,0.3), 0 0.5rem 1.875rem rgba(0,0,0,0.25); } @keyframes conf-ring { 0% { transform: translateX(-50%) scale(0.85); opacity: 0.8; } 100% { transform: translateX(-50%) scale(1.35); opacity: 0; } } .conf-name { font-family: var(--font-mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); } .conf-line { display: flex; gap: 0.4375rem; align-items: center; padding-bottom: 1.625rem; } .conf-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--gold); opacity: 0.25; animation: conf-dial 1.4s ease-in-out infinite; } .conf-dot:nth-child(2) { animation-delay: 0.12s; } .conf-dot:nth-child(3) { animation-delay: 0.24s; } .conf-dot:nth-child(4) { animation-delay: 0.36s; } .conf-dot:nth-child(5) { animation-delay: 0.48s; } @keyframes conf-dial { 0%,100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } } .conf-overlay.joined .conf-dot { background: var(--green); opacity: 1; animation: none; } .conf-status { font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 600; margin-bottom: 0.375rem; } .conf-sub { font-family: var(--font-mono); font-size: 0.5938rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; } /* #3 (2026-06-13): completion FLASH/pulse confirming the switch landed. Fires a one-shot green ring-pulse on the whole card + a brighten on the joined avatar when .conf-flash is added alongside .joined. */ .conf-overlay.conf-flash .conf-card { animation: conf-flash-card 0.62s cubic-bezier(.22,.9,.3,1) 1; } .conf-overlay.conf-flash .conf-av.to img { animation: conf-flash-av 0.7s ease-out 1; } @keyframes conf-flash-card { 0% { box-shadow: 0 2.5rem 7.5rem rgba(0,0,0,0.45), 0 0 0 0 rgba(94,138,78,0.0) inset, 0 0 0 0 rgba(94,138,78,0.55); } 35% { box-shadow: 0 2.5rem 7.5rem rgba(0,0,0,0.45), 0 0 0 2px rgba(94,138,78,0.35) inset, 0 0 0 0.5rem rgba(94,138,78,0.35); } 100% { box-shadow: 0 2.5rem 7.5rem rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 0 1.4rem rgba(94,138,78,0); } } @keyframes conf-flash-av { 0% { filter: brightness(1); } 30% { filter: brightness(1.45) saturate(1.2); } 100% { filter: brightness(1); } } @media (prefers-reduced-motion: reduce) { .conf-overlay.conf-flash .conf-card, .conf-overlay.conf-flash .conf-av.to img { animation: none; } } /* #4 (2026-06-13) COLLAB TEAMS-FEEL — member panel + per-message attribution */ .collab-members-panel { margin: 0 0 1rem; padding: 0.625rem 0.875rem; border: 1px solid var(--hairline); border-radius: var(--r-lg, 0.875rem); background: var(--surface-2, var(--surface)); } .cmp-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .cmp-title { font-family: var(--font-mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); } .cmp-count { font-family: var(--font-mono); font-size: 0.5938rem; color: var(--text-3); margin-left: auto; } .cmp-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cmp-member { display: flex; align-items: center; gap: 0.4375rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); opacity: 0.62; transition: opacity 0.2s; } .cmp-member.live { opacity: 1; border-color: var(--hairline-strong); } .cmp-av { position: relative; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--bot), var(--bot-2)); flex: 0 0 auto; } .cmp-presence { position: absolute; right: -1px; bottom: -1px; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-3); border: 2px solid var(--surface); } .cmp-member.live .cmp-presence { background: var(--green, #5e8a4e); } .cmp-name { font-size: 0.75rem; color: var(--text-2); white-space: nowrap; } .cmp-you { color: var(--text-3); } .cmp-owner { margin-left: 0.3125rem; font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-2, var(--text-3)); } .cmp-more { display: inline-flex; align-items: center; padding: 0 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-3); border: 1px dashed var(--hairline); border-radius: 999px; } /* per-message attribution */ /* #4 COLLAB: another person's avatar shows THEIR own Entra photo over THEIR colored initials (set inline, keyed to email) — never the viewer's photo tinted. The photo removes itself on 404 (no photo), revealing the initials underneath. */ .msg.user.from-other .msg-avatar.user { position: relative; font-weight: 600; font-size: 0.8125rem; } .collab-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .msg .said-tag { margin-left: 0.375rem; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); } .turn-bot-tag { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green, #5e8a4e); border: 1px solid currentColor; border-radius: 999px; padding: 0.0625rem 0.375rem; opacity: 0.8; } /* ---------- §live-collab: typing presence + queued question ---------- */ .collab-typing { display: flex; align-items: center; gap: 0.4375rem; min-height: 1.1rem; padding: 0.125rem 0.25rem 0.5rem; font-size: 0.75rem; color: var(--text-3); } .collab-typing[hidden] { display: none; } .collab-typing .ct-dots { display: inline-flex; gap: 0.1875rem; } .collab-typing .ct-dots i { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--green, #5e8a4e); opacity: 0.85; animation: ct-bounce 1.2s ease-in-out infinite; } .collab-typing .ct-dots i:nth-child(2) { animation-delay: 0.16s; } .collab-typing .ct-dots i:nth-child(3) { animation-delay: 0.32s; } .collab-typing .ct-label { font-style: italic; } @keyframes ct-bounce { 0%,80%,100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-0.1875rem); opacity: 1; } } .queued-chip { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0.4375rem 0.625rem; font-size: 0.75rem; color: var(--gold-2, #c9a24a); background: rgba(201,162,74,0.08); border: 1px solid rgba(201,162,74,0.32); border-radius: 0.625rem; } .queued-chip[hidden] { display: none; } .queued-chip .qc-label { flex: 1; min-width: 0; } .queued-chip .qc-spin { width: 0.75rem; height: 0.75rem; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: qc-spin 0.9s linear infinite; } .queued-chip .qc-cancel { flex-shrink: 0; background: none; border: none; color: inherit; cursor: pointer; font-size: 0.875rem; line-height: 1; padding: 0 0.125rem; opacity: 0.7; } .queued-chip .qc-cancel:hover { opacity: 1; } @keyframes qc-spin { to { transform: rotate(360deg); } } /* §attach-gate (0728, CTO rule 4): the ONE explicit action, in the composer banner, for as long as the hold lasts. It is the only way a turn ever runs with fewer documents than the user attached, so it is a real button the user has to decide to press — never a toast that times out, and never styled as the obvious next step. */ .queued-chip.attach-blocked { color: var(--rose, #b4544a); background: rgba(180,84,74,0.08); border-color: rgba(180,84,74,0.32); } .queued-chip .qc-act { flex-shrink: 0; padding: 0.1875rem 0.5rem; font: inherit; font-size: 0.6875rem; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0.375rem; cursor: pointer; opacity: 0.85; } .queued-chip .qc-act:hover { opacity: 1; background: rgba(180,84,74,0.12); } /* A file MegaMind could not read reads as a failure, not as a chip that is nearly ready. */ .attach-chip.failed { border-color: rgba(180,84,74,0.45); background: rgba(180,84,74,0.06); } .attach-chip.failed .att-type { color: var(--rose, #b4544a); } /* §turn-lock (0728): the composer is REFUSING, not broken. It has to READ as deliberately held — dimmed and not-allowed — rather than as a dead control, because "it looks frozen" is the failure mode a hard lock introduces. The reason itself is in the banner above (#queuedChip) and in the placeholder; this is only the affordance. */ .composer-card.composer-locked { opacity: 0.72; } .composer-card.composer-locked .composer-input { cursor: not-allowed; } .composer-card.composer-locked .composer-input::placeholder { color: var(--gold-2, #c9a24a); opacity: 0.95; } #sendBtn.queue { opacity: 0.92; } /* ---------- office-viewer lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 560; background: rgba(16,14,10,0.6); backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; opacity: 0; transition: opacity 0.25s; } .lightbox.show { opacity: 1; } .lightbox-card { width: min(68.75rem, 100%); height: 100%; background: var(--surface); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2.5rem 7.5rem rgba(0,0,0,0.5); transform: translateY(0.75rem); transition: transform 0.3s cubic-bezier(.2,.8,.2,1); } .lightbox.show .lightbox-card { transform: none; } .lightbox-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--hairline); } .lightbox-name { font-family: var(--font-serif); font-size: 0.9688rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lightbox-frame { flex: 1; border: none; width: 100%; background: #fff; } /* ---------- share modal ---------- */ .modal { position: fixed; inset: 0; z-index: 580; background: rgba(16,14,10,0.5); backdrop-filter: blur(0.3125rem); -webkit-backdrop-filter: blur(0.3125rem); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.22s; } .modal.show { opacity: 1; } .modal-card { width: min(27.5rem, 92vw); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 1.125rem; box-shadow: 0 1.875rem 5.625rem rgba(0,0,0,0.4); transform: translateY(0.5rem); transition: transform 0.25s cubic-bezier(.2,.8,.2,1); overflow: hidden; } .modal.show .modal-card { transform: none; } .modal-head { display: flex; align-items: center; padding: 1rem 1.25rem 0.625rem; } .modal-title { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; flex: 1; } .share-modes { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.375rem 1rem 1.125rem; } .share-mode { display: grid; grid-template-columns: 2.125rem 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0.625rem; text-align: left; padding: 0.75rem 0.875rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; transition: all 0.15s; } .share-mode:hover { border-color: var(--gold-edge); background: var(--gold-soft); transform: translateY(-1px); } .share-mode .sm-ico { grid-row: 1 / 3; font-size: 1.1875rem; width: 2.125rem; height: 2.125rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 0.5625rem; } .share-mode .sm-name { font-size: 0.8438rem; font-weight: 600; } .share-mode .sm-desc { grid-column: 2; font-size: 0.7188rem; color: var(--text-3); margin-top: 2px; } /* ---------- command palette (⌘K) ---------- */ .cmdk { position: fixed; inset: 0; z-index: 640; background: rgba(16,14,10,0.45); backdrop-filter: blur(0.3125rem); -webkit-backdrop-filter: blur(0.3125rem); display: flex; align-items: flex-start; justify-content: center; padding-top: 16vh; opacity: 0; transition: opacity 0.18s; } .cmdk.show { opacity: 1; } .cmdk-card { width: min(32.5rem, 92vw); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 1rem; overflow: hidden; box-shadow: 0 1.875rem 5.625rem rgba(0,0,0,0.45); transform: translateY(-0.375rem); transition: transform 0.22s cubic-bezier(.2,.8,.2,1); } .cmdk.show .cmdk-card { transform: none; } .cmdk-input { width: 100%; border: none; outline: none; background: transparent; padding: 1rem 1.25rem; font-family: var(--font-serif); font-size: 1.0625rem; color: var(--text); border-bottom: 1px solid var(--hairline); } .cmdk-input::placeholder { color: var(--text-3); font-style: italic; } .cmdk-list { max-height: 20rem; overflow-y: auto; padding: 0.375rem; } .cmdk-item { display: flex; align-items: center; gap: 0.6875rem; padding: 0.5625rem 0.75rem; border-radius: 0.625rem; cursor: pointer; } .cmdk-item img { width: 1.875rem; height: 1.875rem; border-radius: 50%; object-fit: cover; } .cmdk-item .n { font-weight: 600; font-size: 0.8438rem; } .cmdk-item .r { color: var(--text-3); font-size: 0.7188rem; flex: 1; } .cmdk-item .d { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; } .cmdk-item.sel { background: var(--gold-soft); outline: 1px solid var(--gold-edge); } .cmdk-item.current .n::after { content: " ·"; color: var(--green); } .cmdk-empty { padding: 1.125rem; text-align: center; color: var(--text-3); font-size: 0.7812rem; font-style: italic; } .cmdk-hint { padding: 0.5rem 1rem; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; } /* ---------- voice (mic / convo / tts) ---------- */ .mic-btn, .convo-btn { position: relative; width: 1.875rem; padding: 0; justify-content: center; } .mic-btn svg, .convo-btn svg { width: 0.8125rem; height: 0.8125rem; } .mic-btn.listening { border-color: var(--rose); color: var(--rose); background: rgba(184,116,106,0.08); } .mic-btn.listening::before { content: ""; position: absolute; inset: -3px; border-radius: 6.25rem; border: 2px solid rgba(184,116,106, calc(0.25 + var(--lvl, 0) * 0.7)); transform: scale(calc(1 + var(--lvl, 0) * 0.22)); transition: transform 0.1s; pointer-events: none; } .mic-btn.busy { opacity: 0.55; pointer-events: none; } .convo-btn.active { border-color: var(--green); color: var(--green); background: rgba(94,138,78,0.1); box-shadow: 0 0 0 3px rgba(94,138,78,0.12); } body.tts-speaking .convo-btn.active { animation: speak-pulse 1.1s ease-in-out infinite; } @keyframes speak-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(94,138,78,0.12); } 50% { box-shadow: 0 0 0 0.375rem rgba(94,138,78,0.05); } } .max-chip { font-weight: 600; } .max-chip.active { border-color: var(--purple); color: var(--purple); background: rgba(138,109,184,0.1); } .attach-chip.pending .spin { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; border: 2px solid var(--gold-soft); border-top-color: var(--gold); animation: spin 0.8s linear infinite; flex-shrink: 0; } .attach-chip .att-sub { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-3); font-style: italic; } /* ---------- range + color inputs (settings) ---------- */ .range { width: 8.125rem; accent-color: var(--gold); } .color-input { width: 2.375rem; height: 1.625rem; padding: 0; border: 1px solid var(--hairline-strong); border-radius: 0.375rem; background: var(--surface-2); cursor: pointer; } /* ---------- $500k polish: hero gradient, entrance, depth ---------- */ .hero { position: relative; } .hero-glow { position: absolute; top: -3.75rem; left: -7.5rem; width: 30rem; height: 23.75rem; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, color-mix(in srgb, var(--bot) 14%, transparent), color-mix(in srgb, var(--gold) 12%, transparent), color-mix(in srgb, var(--bot-2) 14%, transparent), color-mix(in srgb, var(--bot) 14%, transparent)); filter: blur(4.375rem); animation: hero-spin 14s linear infinite; opacity: 0.8; z-index: 0; } @keyframes hero-spin { to { transform: rotate(360deg); } } .hero > *:not(.hero-glow) { position: relative; z-index: 1; } .home-greet em { background-size: 200% auto; animation: greet-sheen 5s ease-in-out infinite alternate; } @keyframes greet-sheen { from { background-position: 0% center; } to { background-position: 100% center; } } .starter { animation: starter-in 0.5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--stagger, 0ms); } @keyframes starter-in { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } } .composer-card { box-shadow: 0 0.5rem 2rem rgba(61,57,41,0.06), 0 1px 2px rgba(61,57,41,0.05); } .topbar { box-shadow: 0 1px 0 var(--hairline); } .gen-card, .thinking-strip, .reasoning { box-shadow: 0 2px 0.75rem rgba(61,57,41,0.04); } [data-theme="dark"] .gen-card, [data-theme="dark"] .thinking-strip { box-shadow: 0 2px 0.875rem rgba(0,0,0,0.25); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero-glow { animation: none; } .gen-card.wizard::after { animation: none; background: none; } .skeleton { animation: none; } } /* small screens */ @media (max-width: 860px) { .conf-card { padding: 1.625rem 1.375rem 1.375rem; } .conf-av img { width: 4rem; height: 4rem; } .lightbox { padding: 2vh 2vw; } } /* ========================================================================== V2.2 — Memory/Skills marks, uniform LARGER bot avatars, Skills page + wizard, infra-free chrome. Edits ONLY index.html/app.js/styles.css. ========================================================================== */ /* ---------- Memory mark (replaces 🧠 emoji) ---------- */ .memory-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; flex-shrink: 0; color: var(--purple); } .memory-mark svg { width: 1.25rem; height: 1.25rem; } .nav-brain:hover .memory-mark { color: #6a4fa0; } [data-theme="dark"] .memory-mark { color: #b59ce0; } /* ---------- Skills nav button (matches .nav-brain) ---------- */ .nav-skills { display: flex; align-items: center; gap: 0.5625rem; margin: 0 0.75rem 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5625rem; text-align: left; width: calc(100% - 1.5rem); cursor: pointer; color: var(--text-2); border: 1px solid var(--hairline); background: linear-gradient(135deg, rgba(200,154,58,0.08), rgba(94,138,78,0.07)); transition: all 0.15s; font: inherit; font-size: 0.7812rem; } .nav-skills:hover { border-color: var(--gold-edge); color: var(--text); transform: translateY(-1px); box-shadow: 0 0.25rem 0.875rem rgba(200,154,58,0.14); } .nav-skills.active { border-color: var(--gold-edge); color: var(--text); background: var(--gold-soft); } .skills-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; flex-shrink: 0; color: var(--gold-2); } .skills-mark svg { width: 1.1875rem; height: 1.1875rem; } [data-theme="dark"] .skills-mark { color: var(--gold); } .nav-skills .label { font-weight: 600; } .nav-skills .label .sub { display: block; font-family: var(--font-mono); font-size: 0.5312rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; margin-top: 1px; } body.nav-collapsed .nav-skills { justify-content: center; padding: 0.5rem; margin: 0 0.625rem 0.375rem; width: auto; } body.nav-collapsed .nav-skills .label { display: none; } /* ---------- UNIFORM, LARGER bot avatars (matched set) ---------- ADDENDUM 6: all 8 robot PNGs are now uniform 512×512 padded canvases (done at image level), so every avatar renders in an IDENTICAL frame — square source into square frame, dead-center, no per-bot bias needed. */ .bot-frame, .nav-bot img, .bot-pill img, .nav-recent img, .ctxpill img, .cmdk-item img, .handoff-btn img, .msg-avatar.bot, .conf-av img, .ctag .agent-mini { background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--bb, var(--bot-2)) 16%, var(--surface-2)), var(--surface-2) 72%); } /* identical frames: uniform square canvases render 1:1, centered */ .nav-bot img, .bot-pill img, .nav-recent img, .ctxpill img, .cmdk-item img, .handoff-btn img, .msg-avatar.bot img, .conf-av img, .ctag .agent-mini, .hero-art img { object-fit: contain !important; object-position: center; } /* LARGER sidebar bot rows (expanded) */ .nav-bot { padding: 0.5rem 1rem; gap: 0.6875rem; } .nav-bot img { width: 2.375rem; height: 2.375rem; border-radius: 0.6875rem; padding: 2px; border: 1px solid var(--hairline); } .nav-bot.active img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb, var(--gold)) 30%, transparent); } .nav-bot .bot-name { font-size: 0.8125rem; } /* LARGER collapsed icon rail */ body.nav-collapsed .nav-bot { padding: 0.4375rem 0; } body.nav-collapsed .nav-bot img { width: 2.75rem; height: 2.75rem; border-radius: 0.8125rem; } /* session rows a touch larger / framed */ .nav-recent img { width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; padding: 1px; } /* message + pill avatars: framed square, whole-bot */ .msg-avatar.bot { border: 1px solid var(--hairline); } .bot-pill img { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; padding: 1px; } .cmdk-item img { border-radius: 0.5625rem; padding: 1px; } .handoff-btn img { border-radius: 0.5625rem; } .conf-av img { border-radius: 1.375rem; padding: 0.25rem; } /* ---------- max-chip: never name the model ---------- */ /* (label/title set in markup; gated to Tom in JS) */ /* ---------- SKILLS PAGE ---------- */ .skills-page { position: absolute; inset: 3rem 0 0 0; background: var(--bg); z-index: 40; overflow: hidden; display: flex; flex-direction: column; animation: msg-in 0.3s ease; } .skills-scroll { flex: 1; overflow-y: auto; padding: 1.875rem 2rem 3.75rem; } .skills-inner { max-width: 57.5rem; margin: 0 auto; } /* Back-to-chat stays reachable while the skills/routines list scrolls */ .skills-back { position: sticky; top: -0.5rem; z-index: 6; background: var(--surface); border: 1px solid var(--hairline-strong); box-shadow: 0 0.375rem 1rem rgba(0,0,0,0.14); } .skills-back:hover, .skills-back:focus-visible { border-color: var(--gold-edge); color: var(--text); } .skills-hero { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.625rem; } .skills-hero-text { flex: 1; min-width: 0; } .skills-title { font-family: var(--font-serif); font-size: clamp(1.625rem, 3vw, 2.125rem); font-weight: 600; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .skills-sub { font-size: 0.875rem; line-height: 1.6; color: var(--text-2); margin: 0; max-width: 40rem; } .skills-create-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.375rem; padding: 0 1rem; border: none; border-radius: 0.5625rem; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #fff; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: filter 0.15s, transform 0.1s; box-shadow: 0 0.25rem 1rem rgba(200,154,58,0.22); } .skills-create-btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .skills-create-btn svg { width: 0.9375rem; height: 0.9375rem; } .skills-group { margin-bottom: 1.875rem; } .skills-group-h { font-family: var(--font-mono); font-size: 0.5938rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.75rem; } .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.75rem; } .skill-card { border: 1px solid var(--hairline); border-radius: 0.875rem; background: var(--surface); padding: 1rem 1rem 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; transition: all 0.16s; position: relative; overflow: hidden; animation: msg-in 0.3s ease; } .skill-card:hover { border-color: var(--gold-edge); box-shadow: 0 0.5rem 1.5rem rgba(61,57,41,0.07); transform: translateY(-1px); } .skill-card.off { opacity: 0.62; } .skill-card-head { display: flex; align-items: flex-start; gap: 0.625rem; } .skill-card-ico { width: 2.125rem; height: 2.125rem; border-radius: 0.5625rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-soft), color-mix(in srgb, var(--gold) 14%, transparent)); color: var(--gold-2); } [data-theme="dark"] .skill-card-ico { color: var(--gold); } .skill-card-ico svg { width: 1.0625rem; height: 1.0625rem; } .skill-card-name { font-family: var(--font-serif); font-size: 0.9688rem; font-weight: 600; line-height: 1.25; flex: 1; min-width: 0; } .skill-card-desc { font-size: 0.7812rem; color: var(--text-2); line-height: 1.5; flex: 1; } .skill-card-foot { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.25rem; padding-top: 0.625rem; border-top: 1px solid var(--hairline); } .skill-scope { font-family: var(--font-mono); font-size: 0.5312rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 0.5rem; border-radius: 6.25rem; color: var(--text-3); background: var(--surface-2); } .skill-scope.org { color: var(--green); background: rgba(94,138,78,0.1); } .skill-card-foot .toggle { margin-left: auto; } .skill-toggle-label { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); } .skill-toggle-label.on { color: var(--green); } .skills-empty { grid-column: 1 / -1; padding: 1.625rem; text-align: center; color: var(--text-3); font-size: 0.8125rem; font-style: italic; border: 1px dashed var(--hairline-strong); border-radius: 0.875rem; } .skills-empty.error { color: var(--rose); border-color: rgba(184,116,106,0.35); font-style: normal; } .skill-skel { height: 7.375rem; border-radius: 0.875rem; } /* ---------- SKILL WIZARD MODAL ---------- */ .skill-modal .skill-card { width: min(35rem, 94vw); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 1.125rem; box-shadow: 0 1.875rem 5.625rem rgba(0,0,0,0.4); transform: translateY(0.5rem); transition: transform 0.25s cubic-bezier(.2,.8,.2,1); overflow: visible; max-height: 90vh; display: flex; flex-direction: column; padding: 0; } .skill-modal.show .skill-card { transform: none; } .skill-step { padding: 0.25rem 1.375rem 1.375rem; overflow-y: auto; } .skill-lead { font-size: 0.8438rem; line-height: 1.6; color: var(--text-2); margin: 0.25rem 0 0.875rem; } .skill-idea-input, .skill-textarea { width: 100%; font-family: var(--font-serif); font-size: 0.9062rem; line-height: 1.55; } .skill-idea-input { padding: 0.75rem 0.875rem; background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 0.75rem; color: var(--text); outline: none; resize: vertical; min-height: 5.75rem; } .skill-idea-input:focus { border-color: var(--gold-edge); } .skill-idea-input::placeholder { color: var(--text-3); font-style: italic; } .skill-textarea { resize: vertical; min-height: 3.75rem; font-family: var(--font-body); font-size: 0.8125rem; } .skill-examples { margin: 0.875rem 0 0.25rem; display: flex; flex-wrap: wrap; gap: 0.4375rem; align-items: center; } .skill-ex-label { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); width: 100%; } .skill-ex { text-align: left; padding: 0.4375rem 0.6875rem; border: 1px solid var(--hairline); border-radius: 6.25rem; background: var(--surface); font: inherit; font-size: 0.7188rem; color: var(--text-2); cursor: pointer; transition: all 0.14s; } .skill-ex:hover { border-color: var(--gold-edge); color: var(--text); background: var(--gold-soft); } .skill-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.125rem; } .skill-actions .gen-btn { height: 2.125rem; padding: 0 1rem; font-size: 0.8125rem; } .skill-actions .gen-btn svg { width: 0.8125rem; height: 0.8125rem; } /* "turn our recent conversation into a skill" affordance (idea step) */ .skill-fromchat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--hairline); } .skill-fromchat-or { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); } .skill-fromchat-btn { text-align: left; padding: 0.4375rem 0.75rem; border: 1px solid var(--gold-edge); border-radius: 6.25rem; background: var(--gold-soft); font: inherit; font-size: 0.75rem; color: var(--gold-2); cursor: pointer; transition: all 0.14s; } .skill-fromchat-btn:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--text); } .skill-fromchat-hint { width: 100%; font-size: 0.6875rem; line-height: 1.45; color: var(--text-3); } /* clarifying-questions step (guided wizard) */ .skill-questions { display: flex; flex-direction: column; gap: 1rem; margin: 0.25rem 0 0.25rem; max-height: 26rem; overflow-y: auto; } .skill-q { display: flex; flex-direction: column; gap: 0.4375rem; } .skill-q-text { font-size: 0.8438rem; font-weight: 600; color: var(--text); line-height: 1.4; } .skill-q-why { font-size: 0.6875rem; color: var(--text-3); line-height: 1.4; margin-top: -0.1875rem; } .skill-q-sugs { display: flex; flex-wrap: wrap; gap: 0.375rem; } .skill-q-sug { padding: 0.3125rem 0.625rem; border: 1px solid var(--hairline); border-radius: 6.25rem; background: var(--surface); font: inherit; font-size: 0.6875rem; color: var(--text-2); cursor: pointer; transition: all 0.14s; } .skill-q-sug:hover { border-color: var(--gold-edge); color: var(--text); background: var(--gold-soft); } .skill-q-sug.picked { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-2); } .skill-q-input { width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 0.5rem; color: var(--text); outline: none; font: inherit; font-size: 0.8125rem; } .skill-q-input:focus { border-color: var(--gold-edge); } /* per-step routine editor */ .flow-steps-hint { font-size: 0.75rem; color: var(--text-3); margin: 0 0 0.5rem; line-height: 1.45; } .flow-steps-editor { display: flex; flex-direction: column; gap: 0.625rem; } .flow-step-card { border: 1px solid var(--hairline-strong); border-radius: 0.625rem; background: var(--surface-2); padding: 0.625rem 0.75rem; } .flow-step-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .flow-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--gold-soft); color: var(--gold-2); font-size: 0.6875rem; font-weight: 700; flex: 0 0 auto; } .flow-step-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); flex: 1 1 auto; } .flow-step-del { border: none; background: none; color: var(--text-3); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; border-radius: 0.25rem; } .flow-step-del:hover { color: var(--rose, #b8746a); background: var(--surface-3); } .flow-step-body { display: flex; flex-direction: column; gap: 0.5rem; } .flow-f { display: flex; flex-direction: column; gap: 0.25rem; } .flow-f > span { font-size: 0.6875rem; color: var(--text-2); } .flow-f .form-input, .flow-f-ta { font-size: 0.8125rem; } .flow-f-ta { resize: vertical; min-height: 3.25rem; font-family: inherit; } .flow-f-web { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-2); cursor: pointer; } .flow-f-none { font-size: 0.75rem; color: var(--text-3); font-style: italic; } .flow-addstep-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.625rem; } .skill-drafting { display: flex; align-items: center; gap: 0.75rem; padding: 1.625rem 0.25rem 0.5rem; font-family: var(--font-serif); font-size: 1rem; color: var(--text); } .skill-draft-hint { font-size: 0.7812rem; color: var(--text-3); padding: 0 0.25rem 1.375rem; } .skill-share-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.875rem; padding: 0.75rem 0.875rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: var(--surface-2); cursor: pointer; } .skill-share-text { display: flex; flex-direction: column; gap: 2px; } .skill-share-text b { font-size: 0.8125rem; font-weight: 600; } .skill-share-text span { font-size: 0.7188rem; color: var(--text-3); } .skill-modal .form-lbl { margin-bottom: 0.375rem; } .skill-modal .modal-head { padding: 1.125rem 1.375rem 0.5rem; } body.nav-collapsed .nav-brain .memory-mark { margin: 0; } /* ========================================================================== V2.3 — Entra login gate, prod font softening (sidebar), Temporal Brain icon, Workflows, prompt suggestions, topic-shift modal, full mobile responsive. ========================================================================== */ /* ---------- softer SIDEBAR rendering (ADDENDUM 4) ---------- */ aside.nav { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.01em; } aside.nav .nav-bot, aside.nav .nav-recent, aside.nav .nav-user-name, aside.nav .nav-skills .label, aside.nav .nav-brain .label, aside.nav .new-chat-btn .label { font-weight: 460; /* slightly lighter than before — less harsh */ letter-spacing: 0.01em; } aside.nav .nav-bot.active, aside.nav .nav-recent.active { font-weight: 560; } aside.nav .brand-name { font-weight: 560; letter-spacing: 0.005em; } /* ---------- auth gate: hide app shell until signed in ---------- */ body.auth-pending > .mobile-hamburger, body.auth-pending > aside.nav, body.auth-pending > main, body.auth-pending > .drawer, body.auth-pending > .drawer-backdrop { display: none !important; } .mm-auth-overlay { display: flex; } .mm-auth-overlay.hidden { display: none !important; } /* ---------- ENTRA LOGIN OVERLAY (recreated from prod mm-auth design) ---------- */ .mm-auth-overlay { position: fixed; inset: 0; z-index: 1000; background: radial-gradient(75rem 50rem at 70% 10%, #14201f 0%, #0c1413 45%, #080b0b 100%); align-items: center; justify-content: center; font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #e6edf3; overflow: hidden; } .mm-auth-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; } .mm-auth-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(56.25rem 43.75rem at 50% 45%, transparent 30%, rgba(0,0,0,0.55) 100%); } .mm-auth-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.75rem; } .mm-auth-brand { display: flex; align-items: center; gap: 0.75rem; } .mm-auth-emblem { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; filter: drop-shadow(0 2px 0.5rem rgba(52,230,196,0.25)); } .mm-auth-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .mm-auth-brand-name { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; } .mm-auth-brand-sub { font-size: 0.6875rem; color: #8b97a7; letter-spacing: 0.04em; } .mm-auth-help { font-size: 0.75rem; color: #8b97a7; } .mm-auth-help a { color: #34e6c4; text-decoration: none; } .mm-auth-help a:hover { text-decoration: underline; } .mm-auth-card { position: relative; z-index: 4; text-align: center; width: min(26.25rem, 92vw); padding: 0.5rem 1.75rem 2.25rem; display: flex; flex-direction: column; align-items: center; } .mm-auth-robot { position: relative; height: 22.5rem; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 0.375rem; } .mm-auth-robot::before { content: ''; position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); width: 21.25rem; height: 21.25rem; border-radius: 50%; background: radial-gradient(circle, rgba(52,230,196,0.20) 0%, rgba(52,230,196,0.05) 45%, transparent 70%); } .mm-auth-robot img { position: relative; height: 22rem; width: auto; object-fit: contain; animation: mm-auth-float 4s ease-in-out infinite; filter: drop-shadow(0 1.5rem 2.5rem rgba(0,0,0,0.5)); } @keyframes mm-auth-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.5625rem); } } /* ADDENDUM-16 §A: blue glow behind the login robot + the V2 badge on the card */ .mm-auth-robot-glow { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); width: 24rem; height: 24rem; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(79,168,255,0.38) 0%, rgba(43,112,201,0.18) 42%, transparent 70%); filter: blur(0.5rem); animation: mm-glow-breathe 4s ease-in-out infinite; } @keyframes mm-glow-breathe { 0%,100% { opacity: 0.85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } } .mm-v2-badge.mm-v2-card { transform: scale(0.82); transform-origin: left center; vertical-align: 4px; margin-left: 0.4375rem; } @media (prefers-reduced-motion: reduce) { .mm-auth-robot-glow { animation: none; } } .mm-auth-card h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.375rem 0 0.25rem; color: #f4f8fb; white-space: nowrap; } .mm-auth-sub { font-size: 0.875rem; color: #9aa7b6; margin-bottom: 1.375rem; } .mm-auth-btn-wrap { width: 100%; display: flex; justify-content: center; } .mm-auth-btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.8125rem 1.625rem; border-radius: 0.75rem; border: none; cursor: pointer; background: linear-gradient(135deg, #ffffff, #eef3f6); color: #1a2733; font: inherit; font-size: 0.9375rem; font-weight: 600; box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.4); transition: transform 0.18s, box-shadow 0.18s, filter 0.18s; } .mm-auth-btn:hover { transform: translateY(-2px); box-shadow: 0 1rem 2.5rem rgba(52,230,196,0.22); filter: brightness(1.02); } .mm-auth-btn:active { transform: translateY(0); } .mm-auth-btn:disabled { opacity: 0.65; cursor: default; transform: none; } .mm-auth-msg { min-height: 1.125rem; margin: 0.875rem 0 0; font-size: 0.7812rem; color: #9aa7b6; white-space: pre-line; line-height: 1.5; max-width: 22.5rem; } .mm-auth-msg.err { color: #ffb4ab; } .mm-auth-guest { margin-top: 0.75rem; background: transparent; border: none; color: #8b97a7; font: inherit; font-size: 0.7812rem; cursor: pointer; text-decoration: underline; } .mm-auth-guest:hover { color: #cdd6df; } .mm-auth-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.875rem; margin-top: 1.25rem; font-size: 0.6875rem; color: #8b97a7; } .mm-auth-trust-item { display: inline-flex; align-items: center; gap: 0.375rem; } .mm-auth-trust-item svg { width: 0.8125rem; height: 0.8125rem; flex: 0 0 auto; fill: none; stroke: rgba(52,230,196,0.85); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mm-auth-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; align-items: center; justify-content: space-between; padding: 0.875rem 1.75rem; font-size: 0.6875rem; color: rgba(139,151,167,0.7); } .mm-auth-foot-links { display: flex; flex-wrap: wrap; gap: 1rem; } .mm-auth-foot a { color: rgba(139,151,167,0.8); text-decoration: none; } .mm-auth-foot a:hover { color: #e6edf3; } @media (max-width: 560px) { .mm-auth-foot { justify-content: center; text-align: center; } .mm-auth-card h1 { font-size: 1.625rem; } .mm-auth-robot { height: 18.75rem; } .mm-auth-robot img { height: 18.125rem; } .mm-auth-robot::before { width: 17.5rem; height: 17.5rem; } .mm-auth-topbar .mm-auth-brand-text { display: none; } } /* ---------- signed-in identity card + sign-out (settings) ---------- */ .signed-in-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; margin-bottom: 0.875rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: var(--surface-2); } .signed-in-card .avatar { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; } .signed-in-meta { min-width: 0; } .signed-in-name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .signed-in-sub { font-size: 0.7188rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-input.readonly { background: var(--surface-2); color: var(--text-2); cursor: default; } .signout-btn { margin-top: 0.875rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 1rem; border: 1px solid var(--hairline-strong); border-radius: 0.5625rem; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .signout-btn:hover { border-color: var(--rose); color: var(--rose); background: rgba(184,116,106,0.06); } .signout-btn svg { width: 0.9375rem; height: 0.9375rem; } /* ---------- TEMPORAL BRAIN animated icon (ADDENDUM 4) ---------- */ .tbrain-mark { color: var(--purple); overflow: visible; } .tbrain-mark svg { overflow: visible; } .tb-orbit { transform-box: fill-box; transform-origin: center; } .tb-orbit-1 { animation: tb-spin 9s linear infinite; } .tb-orbit-2 { animation: tb-spin 11s linear infinite reverse; } .tb-core { transform-box: fill-box; transform-origin: center; animation: tb-pulse 2.6s ease-in-out infinite; } .tb-node { transform-box: fill-box; transform-origin: center; animation: tb-twinkle 3s ease-in-out infinite; } .tb-node.tb-n2 { animation-delay: 0.5s; } .tb-node.tb-n3 { animation-delay: 1s; } .tb-node.tb-n4 { animation-delay: 1.6s; } .tb-link { opacity: 0.6; } @keyframes tb-spin { to { transform: rotate(360deg); } } @keyframes tb-pulse { 0%,100% { transform: scale(1); filter: none; } 50% { transform: scale(1.22); filter: drop-shadow(0 0 0.3125rem rgba(138,109,184,0.55)); } } @keyframes tb-twinkle { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } } .nav-brain:hover .tbrain-mark .tb-core { filter: drop-shadow(0 0 0.4375rem rgba(52,230,196,0.7)); } .nav-brain:hover .tbrain-mark { color: #6a4fa0; } @media (prefers-reduced-motion: reduce) { .tb-orbit-1, .tb-orbit-2, .tb-core, .tb-node { animation: none !important; } .mm-auth-robot img { animation: none !important; } } /* ---------- Workflows nav button mark ---------- */ .flows-mark { color: var(--blue); } [data-theme="dark"] .flows-mark { color: #7da8d4; } /* ---------- skill tier badges + scope pills ---------- */ .skill-scope.dept { color: var(--blue); background: rgba(74,125,168,0.12); } .skills-group-note { font-size: 0.75rem; color: var(--text-3); margin: -0.375rem 0 0.75rem; } .skill-share-row.col { flex-direction: column; align-items: stretch; gap: 0.625rem; cursor: default; } .skill-scope-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; } .scope-pill { flex: 1; min-width: 6rem; padding: 0.5625rem 0.75rem; border: 1px solid var(--hairline-strong); border-radius: 0.625rem; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.7812rem; cursor: pointer; transition: all 0.14s; } .scope-pill:hover { border-color: var(--gold-edge); color: var(--text); } .scope-pill.active { border-color: var(--gold-edge); background: var(--gold-soft); color: var(--text); font-weight: 600; } /* ---------- Workflows page + cards ---------- */ .flows-page .skill-card-ico.flow-ico { background: linear-gradient(135deg, rgba(74,125,168,0.14), rgba(74,125,168,0.06)); color: var(--blue); } [data-theme="dark"] .flows-page .flow-ico { color: #7da8d4; } .flow-steps { font-family: var(--font-mono); font-size: 0.6562rem; color: var(--text-3); line-height: 1.6; word-break: break-word; } .flow-run-btn { padding: 0.3125rem 0.75rem; border: 1px solid var(--hairline-strong); border-radius: 0.5rem; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.14s; } .flow-run-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(74,125,168,0.06); } .flow-run-btn:disabled { opacity: 0.6; cursor: default; } .flow-card .skill-card-foot .toggle { margin-left: auto; } /* ---------- PROMPT SUGGESTION bar (ADDENDUM 5) ---------- */ .suggest-bar { display: flex; align-items: center; gap: 0.625rem; max-width: var(--chat-w); margin: 0.5rem auto 0; padding: 0.5rem 0.75rem; border: 1px solid var(--gold-edge); border-radius: 0.625rem; background: var(--gold-soft); font-size: 0.7812rem; color: var(--text-2); animation: msg-in 0.25s ease; } .suggest-ico { color: var(--gold-2); display: inline-flex; flex-shrink: 0; } .suggest-ico svg { width: 0.9375rem; height: 0.9375rem; } .suggest-text { flex: 1; min-width: 0; line-height: 1.45; } .suggest-accept { flex-shrink: 0; padding: 0.25rem 0.75rem; border: none; border-radius: 0.4375rem; background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #fff; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .suggest-accept:hover { filter: brightness(1.06); } .suggest-dismiss { flex-shrink: 0; background: transparent; border: none; color: var(--text-3); font-size: 1.125rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .suggest-dismiss:hover { color: var(--text); } .paste-nudge { border-color: var(--hairline-strong); background: var(--surface-2); } /* ---------- TOPIC-SHIFT modal (non-dismissable) ---------- */ .topic-modal { z-index: 650; } .topic-card { width: min(27.5rem, 92vw); text-align: center; padding: 1.875rem 1.75rem 1.625rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 1.125rem; box-shadow: 0 1.875rem 5.625rem rgba(0,0,0,0.4); } .topic-ico { width: 3.25rem; height: 3.25rem; margin: 0 auto 0.875rem; border-radius: 0.875rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gold-soft), rgba(138,109,184,0.12)); color: var(--purple); } .topic-ico svg { width: 1.625rem; height: 1.625rem; } .topic-title { font-family: var(--font-serif); font-size: 1.3125rem; font-weight: 600; margin: 0 0 0.5rem; } .topic-body { font-size: 0.8438rem; line-height: 1.6; color: var(--text-2); margin: 0 0 1.375rem; } .topic-actions { display: flex; gap: 0.625rem; justify-content: center; } .topic-actions .gen-btn { height: 2.375rem; padding: 0 1.125rem; font-size: 0.8438rem; } /* ---------- mobile hamburger + slide-over scrim ---------- */ .mobile-hamburger { display: none; position: fixed; top: 0.5rem; left: 0.625rem; z-index: 220; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem); color: var(--text-2); cursor: pointer; align-items: center; justify-content: center; } .mobile-hamburger svg { width: 1.375rem; height: 1.375rem; } .nav-scrim { display: none; position: fixed; inset: 0; z-index: 150; background: rgba(20,18,14,0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s; } .nav-scrim.show { opacity: 1; } /* ========================================================================== FULL MOBILE RESPONSIVE (ADDENDUM 3) — <47.5rem: slide-over sidebar, full-width chat/composer, scaled hero/avatars, full-screen settings, ≥2.75rem tap targets. Replaces the old 53.75rem collapse. Test target: 23.75rem. ========================================================================== */ @media (max-width: 760px) { /* single-column app; sidebar becomes an off-canvas drawer */ body { grid-template-columns: 1fr; } .mobile-hamburger { display: flex; } .nav-scrim { display: block; pointer-events: none; } body.nav-open .nav-scrim { pointer-events: auto; } aside.nav { display: flex !important; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: 84vw; max-width: 20rem; transform: translateX(-104%); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); box-shadow: 1rem 0 3rem rgba(0,0,0,0.18); } body.nav-open aside.nav { transform: translateX(0); } /* never let the desktop collapse state hide drawer contents on mobile */ body.nav-collapsed aside.nav { width: 84vw; max-width: 20rem; } body.nav-collapsed .brand-name, body.nav-collapsed .live-chip, body.nav-collapsed .nav-bot .bot-name, body.nav-collapsed .nav-skills .label, body.nav-collapsed .nav-brain .label { display: revert; } .collapse-btn { display: none; } /* top bar makes room for the hamburger */ .topbar { padding-left: 3.625rem; } .crumb { font-size: 0.625rem; } /* full-width chat + composer */ main { grid-template-rows: 3rem 1fr; } .conv-scroll { padding: 1rem 0.875rem; } .conv-inner, .messages { max-width: 100%; } .chat-composer-wrap { padding: 0.5rem 0.625rem 0.625rem; } .composer-card { max-width: 100%; } .composer-hint { font-size: 0.5rem; } /* scaled hero + avatars */ .hero-art img, #heroImg { max-height: 9.375rem; } .home-greet { font-size: clamp(1.625rem, 8vw, 2.25rem); } .home-sub { font-size: 0.8125rem; } .starters { grid-template-columns: 1fr; gap: 0.5rem; } .bot-strip { gap: 0.375rem; } .bot-pill { font-size: 0.6875rem; } /* settings + wizards full-screen */ .drawer { width: 100vw; max-width: 100vw; border-left: none; } .skill-modal .skill-card, .modal-card.skill-card { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; } .topic-card { width: 92vw; } /* skills/workflows pages fit + single-column grids */ .skills-page, .flows-page { inset: 3rem 0 0 0; } .skills-scroll { padding: 1.25rem 0.875rem 3.125rem; } .skills-hero { flex-direction: column; gap: 0.75rem; } .skills-create-btn { align-self: flex-start; } .skills-grid { grid-template-columns: 1fr; } /* voice + doc panels fit */ .gen-card { max-width: 100%; } .lightbox-card { width: 96vw; height: 90vh; } /* ≥2.75rem tap targets */ .ctag, .composer-send, .tbtn, .nav-bot, .nav-recent, .icon-btn, .scope-pill, .flow-run-btn, .skills-create-btn, .mm-auth-btn, .topic-actions .gen-btn, .suggest-accept { min-height: 2.75rem; } .icon-btn { width: 2.5rem; height: 2.5rem; } .composer-send { min-width: 4rem; } /* suggestion bar fits */ .suggest-bar { max-width: 100%; } } @media (max-width: 420px) { .topbar-actions .tbtn span { display: none; } /* icon-only at very small widths */ .home-greet { font-size: 1.625rem; } .mm-auth-card { padding: 0.5rem 1rem 1.75rem; } } /* ========================================================================== V2.4 (ADDENDUM 6) — brand logo mark, logo-palette accents, user menu + usage modal, preview drawer, message actions, specialists checklist, sidebar footer links, first-run walkthrough spotlight. ========================================================================== */ /* ---------- sidebar brand: the glowing cloud-robot mark ---------- */ .brand-mark.brand-logo { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; padding: 0; background: radial-gradient(circle at 50% 40%, #0B1B33, #060B17 78%); overflow: hidden; position: relative; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(79,168,255,0.18), 0 2px 0.5rem rgba(6,11,23,0.35); transition: box-shadow 0.25s ease, transform 0.2s ease; } .brand-mark.brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .brand:hover .brand-mark.brand-logo { box-shadow: 0 0 0 1px rgba(79,168,255,0.45), 0 0 0.875rem rgba(79,168,255,0.45), 0 0 1.875rem rgba(79,168,255,0.18); transform: translateY(-1px); } /* ---------- accent presets (Workbench golds + MegaMind logo palette) ---------- */ .accent-presets { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.5rem 0 0.25rem; } .accent-swatch { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.625rem; padding: 0 0.625rem 0 0.3125rem; border: 1px solid var(--hairline); border-radius: 6.25rem; background: var(--surface); font: inherit; font-size: 0.6875rem; color: var(--text-2); cursor: pointer; transition: all 0.14s; } .accent-swatch:hover { border-color: var(--gold-edge); color: var(--text); } .accent-swatch.active { border-color: var(--sw, var(--gold)); background: color-mix(in srgb, var(--sw, var(--gold)) 9%, var(--surface)); color: var(--text); font-weight: 600; } .accent-swatch .sw-dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--sw, var(--gold)); border: 1px solid var(--hairline-strong); flex-shrink: 0; } /* ---------- sidebar footer links (IT Support / Learn / Show me how?) ---------- */ .nav-footer-links { padding: 0.5rem 0 2px; border-top: 1px solid var(--hairline); } .nav-footer-links .nav-skills { margin: 0 0.75rem 0.375rem; text-decoration: none; } .nav-footer-links .nav-ext { background: var(--surface); } .nav-footer-links .nav-ext:hover { background: var(--gold-soft); } .ext-mark { color: var(--text-3); } .nav-ext:hover .ext-mark { color: var(--gold-2); } [data-theme="dark"] .nav-ext:hover .ext-mark { color: var(--gold); } body.nav-collapsed .nav-footer-links .nav-skills { justify-content: center; padding: 0.5rem; margin: 0 0.625rem 0.375rem; width: auto; } body.nav-collapsed .nav-footer-links .label { display: none; } /* ---------- user menu (bottom-left account popover) ---------- */ .nav-user { position: relative; } .nav-user-id { display: flex; align-items: center; gap: 0.625rem; flex: 1; min-width: 0; background: transparent; border: none; padding: 0.25rem 0.375rem; margin: -0.25rem 0 -0.25rem -0.375rem; border-radius: 0.5625rem; cursor: pointer; font: inherit; color: inherit; text-align: left; } .nav-user-id:hover, .nav-user-id.open { background: var(--surface-2); } .user-menu { position: absolute; left: 0.625rem; bottom: calc(100% + 0.375rem); z-index: 230; min-width: 11.875rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 0.75rem; box-shadow: 0 0.875rem 2.75rem rgba(0,0,0,0.18); padding: 0.3125rem; animation: msg-in 0.16s ease; } .user-menu-item { display: flex; align-items: center; gap: 0.5625rem; width: 100%; padding: 0.5625rem 0.6875rem; border: none; background: transparent; border-radius: 0.5rem; font: inherit; font-size: 0.7812rem; color: var(--text-2); cursor: pointer; text-align: left; } .user-menu-item:hover { background: var(--gold-soft); color: var(--text); } .user-menu-item svg { width: 0.9375rem; height: 0.9375rem; flex-shrink: 0; } #umSignOut:hover { background: rgba(184,116,106,0.08); color: var(--rose); } /* ---------- usage modal ---------- */ .usage-modal .modal-card { width: min(30rem, 92vw); } .usage-body { padding: 0.25rem 1.25rem 1.375rem; } .usage-lead { font-size: 0.8438rem; line-height: 1.6; color: var(--text-2); margin: 2px 0 1rem; } .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.625rem; } .usage-stat { border: 1px solid var(--hairline); border-radius: 0.75rem; padding: 0.875rem 0.75rem; background: var(--surface-2); text-align: center; } .usage-stat .us-v { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; line-height: 1.15; } .usage-stat .us-k { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); margin-top: 0.3125rem; } .usage-stat .us-sub { font-size: 0.625rem; color: var(--text-3); margin-top: 2px; } /* ---------- PREVIEW DRAWER (artifacts / SharePoint / web) ---------- */ .preview-backdrop { position: fixed; inset: 0; background: rgba(20,18,14,0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 540; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .preview-backdrop.show { opacity: 1; pointer-events: auto; } .preview-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--pv-w, 45rem), 94vw); background: var(--surface); border-left: 1px solid var(--hairline-strong); z-index: 550; transform: translateX(103%); transition: transform 0.3s cubic-bezier(.2,.8,.2,1), width 0.25s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; box-shadow: -1.5rem 0 4.375rem rgba(0,0,0,0.2); } .preview-drawer.show { transform: translateX(0); } /* v2.9.1 §L.12: SPLIT VIEW — the open panel pushes the chat LEFT (v1's pattern); the conversation + composer stay fully usable alongside the artifact. The panel width follows the artifact's natural width via --pv-w (fit-to-width). */ body.pv-split main { margin-right: min(var(--pv-w, 45rem), 62vw); transition: margin-right 0.3s cubic-bezier(.2,.8,.2,1); } body.pv-split .preview-drawer { box-shadow: -0.5rem 0 1.875rem rgba(0,0,0,0.10); } body.pv-split .preview-body img { max-width: 100%; height: auto; } .preview-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .preview-title { font-family: var(--font-serif); font-size: 0.9688rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-btn { width: 1.875rem; height: 1.875rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 0.5rem; color: var(--text-3); background: var(--surface); text-decoration: none; flex-shrink: 0; } .pv-btn:hover { border-color: var(--gold-edge); color: var(--text); background: var(--gold-soft); } .pv-btn svg { width: 0.875rem; height: 0.875rem; } .preview-body { flex: 1; min-height: 0; background: var(--surface-2); display: flex; flex-direction: column; overflow: auto; position: relative; } .preview-body iframe { flex: 1; width: 100%; border: none; background: #fff; display: block; min-height: 0; } .preview-body video { width: 100%; max-height: 100%; background: #000; } .preview-body .pv-pad { padding: 1.125rem; text-align: center; } .preview-body .pv-pad img { max-width: 100%; border-radius: 0.625rem; box-shadow: 0 0.625rem 2rem rgba(0,0,0,0.18); } .pv-text { flex: 1; margin: 0; padding: 1.125rem 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: var(--text); overflow: auto; } .pv-loading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex: 1; color: var(--text-2); font-size: 0.8125rem; padding: 2.5rem; } .pv-card { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 0.75rem; padding: 2.5rem 1.75rem; text-align: center; } .pv-card-ico { font-size: 2.75rem; } .pv-card-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; max-width: 26.25rem; word-break: break-word; } .pv-card-sub { font-size: 0.7812rem; color: var(--text-3); max-width: 25rem; line-height: 1.55; } .pv-card .gen-btn { height: 2.25rem; padding: 0 1.125rem; font-size: 0.8125rem; margin-top: 0.375rem; } .pv-webnote { padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); border-bottom: 1px solid var(--hairline); background: var(--surface); flex-shrink: 0; } /* §DH zip artifact preview: file-list bar + inline rendered page */ .pv-zip { display: flex; flex-direction: column; flex: 1; min-height: 0; } .pv-ziplist { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--hairline); background: var(--surface); flex-shrink: 0; max-height: 7rem; overflow: auto; } .pv-ziplist-head { font-family: var(--font-mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin-right: 0.375rem; } .pv-zipfile { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2188rem 0.625rem; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--text-2); font-size: 0.6875rem; font-family: var(--font-mono); cursor: default; } .pv-zipfile.page { cursor: pointer; color: var(--text); } .pv-zipfile.page:hover, .pv-zipfile.page.active { border-color: var(--gold-edge); background: var(--gold-soft); } .pv-zipfile-size { color: var(--text-3); font-size: 0.625rem; } .pv-zipframe { display: flex; flex: 1; min-height: 0; flex-direction: column; } .pv-zipframe iframe { flex: 1; width: 100%; border: 0; background: #fff; } /* ---------- message actions (Copy / 👍 👎 / Retry) ---------- */ .msg-actions { display: flex; gap: 3px; margin-top: 0.375rem; opacity: 0; transition: opacity 0.18s; } .msg.bot:hover .msg-actions, .msg.bot:focus-within .msg-actions { opacity: 1; } .msg-act { width: 1.625rem; height: 1.625rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 0.4375rem; color: var(--text-3); cursor: pointer; transition: all 0.13s; padding: 0; } .msg-act svg { width: 0.875rem; height: 0.875rem; } .msg-act:hover { background: var(--surface-2); color: var(--text); } .msg-act.ok { color: var(--green); } .msg-act.active { color: var(--green); background: rgba(94,138,78,0.1); } .msg-act.active.down { color: var(--rose); background: rgba(184,116,106,0.1); } /* ---------- specialists shown checklist (settings) ---------- */ .bot-visibility { display: flex; flex-direction: column; gap: 0.25rem; } .bot-vis-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.5rem; border-radius: 0.625rem; cursor: pointer; transition: background 0.12s; } .bot-vis-row:hover { background: var(--surface-2); } .bot-vis-row.off { opacity: 0.55; } .bot-vis-row img { width: 1.875rem; height: 1.875rem; border-radius: 0.5625rem; object-fit: contain; background: var(--surface-2); border: 1px solid var(--hairline); flex-shrink: 0; } .bv-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bv-name { font-size: 0.7812rem; font-weight: 600; } .bv-role { font-family: var(--font-mono); font-size: 0.5312rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; } .bv-check { width: 1rem; height: 1rem; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; } /* ---------- TUTORIAL v2.7 §H.21 — robot guide + spotlight + canned demos ---------- */ .tour-overlay { position: fixed; inset: 0; z-index: 900; opacity: 0; transition: opacity 0.25s; } .tour-overlay.show { opacity: 1; } .tour-dim { position: absolute; inset: 0; background: rgba(14,12,9,0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .tour-ring { position: absolute; border-radius: 0.8125rem; pointer-events: none; box-shadow: 0 0 0 2px var(--gold), 0 0 1.625rem rgba(200,154,58,0.55); transition: left 0.32s cubic-bezier(.2,.8,.2,1), top 0.32s cubic-bezier(.2,.8,.2,1), width 0.32s cubic-bezier(.2,.8,.2,1), height 0.32s cubic-bezier(.2,.8,.2,1); } /* v2.9 §K.1: max-height + INTERNAL scroll — the TUTORIAL ribbon sits outside the card box and is never clipped (card keeps overflow visible). */ .tour-card { position: absolute; background: var(--surface); color: var(--text); border: 1px solid var(--hairline-strong); border-radius: 1.25rem; padding: 1.25rem 1.375rem 0.875rem; box-shadow: 0 1.75rem 5rem rgba(0,0,0,0.45); max-height: min(84vh, 47.5rem); overflow: visible; display: flex; flex-direction: column; /* §DN (this wave): tour-card step transitions were choppy — only left/top eased, so width/height changes between steps snapped. Ease width too (and keep the same curve) so the box glides between targets fluidly. */ transition: left 0.34s cubic-bezier(.2,.8,.2,1), top 0.34s cubic-bezier(.2,.8,.2,1), width 0.34s cubic-bezier(.2,.8,.2,1); } @media (prefers-reduced-motion: reduce) { .tour-card { transition: none; } } .tour-card .tour-body { overflow-y: auto; min-height: 0; flex: 0 1 auto; } .tour-card .tour-demo { min-height: 0; flex: 0 1 auto; display: flex; flex-direction: column; } .tour-card .tour-demo-screen { flex: 1 1 auto; min-height: 7.5rem; } .tour-card .tour-guide, .tour-card .tour-actions, .tour-card .tour-ask, .tour-card .tour-dontshow { flex-shrink: 0; } .tour-card.centered { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(35rem, 92vw) !important; } .tour-guide { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.625rem; } .tour-robot { width: 3.5rem; height: 3.5rem; border-radius: 1rem; object-fit: cover; flex-shrink: 0; background: var(--gold-soft); border: 1px solid var(--gold-edge); box-shadow: 0 0.375rem 1.125rem rgba(11,27,51,0.25); animation: tourBob 3.2s ease-in-out infinite; } @keyframes tourBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.25rem); } } .tour-count { font-family: var(--font-mono); font-size: 0.625rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 3px; font-weight: 700; } .tour-title { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; margin: 0; line-height: 1.2; } .tour-body { font-size: 0.9062rem; line-height: 1.65; color: var(--text-2); margin: 0 0 0.75rem; min-height: 3.2em; cursor: pointer; } .tour-body.typing::after { content: '▍'; color: var(--gold); animation: tourCaret 0.8s steps(1) infinite; } @keyframes tourCaret { 50% { opacity: 0; } } /* the movie screen */ .tour-demo { margin: 0 0 0.75rem; } .tour-demo-screen { height: 13.5rem; overflow: auto; border: 1px solid var(--hairline); border-radius: 0.875rem; padding: 0.75rem; background: color-mix(in srgb, var(--text) 4%, var(--bg, var(--surface))); position: relative; } .tour-demo-caption { margin-top: 0.5rem; font-size: 0.7812rem; line-height: 1.5; color: var(--text-2); padding: 0.4375rem 0.6875rem; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 0.5625rem 0.5625rem 0; } /* fake cursor + click ripple */ .tour-cursor { position: absolute; width: 1.625rem; height: 1.625rem; z-index: 12; pointer-events: none; transition-property: left, top; transition-timing-function: cubic-bezier(.3,.7,.3,1); transition-duration: 0.7s; filter: drop-shadow(0 3px 0.375rem rgba(0,0,0,0.4)); margin: -0.25rem 0 0 -0.25rem; } .tour-cursor svg { width: 100%; height: 100%; } .tour-cursor.press { transform: scale(0.82); } .tour-ripple { position: absolute; width: 1.125rem; height: 1.125rem; border-radius: 50%; z-index: 11; pointer-events: none; transform: translate(-50%, -50%); border: 2.5px solid var(--gold); opacity: 0; } .tour-ripple.go { animation: tourRipple 0.55s ease-out; } @keyframes tourRipple { 0% { opacity: 0.95; scale: 0.5; } 100% { opacity: 0; scale: 3; } } /* arrow from card to control */ .tour-arrow { position: absolute; inset: 0; pointer-events: none; z-index: 10; } .tour-arrow .ta-line { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 7; animation: tourDash 0.9s linear infinite; } .tour-arrow .ta-head { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; } @keyframes tourDash { to { stroke-dashoffset: -28; } } /* ask-the-robot row */ .tour-ask { display: flex; gap: 0.5rem; margin-bottom: 0.625rem; } .tour-ask-input { flex: 1; height: 2.125rem; font-size: 0.8125rem; } .tour-ask-btn { height: 2.125rem; padding: 0 1rem; flex-shrink: 0; } .tour-ask-answer { font-size: 0.8125rem; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; border: 1px solid var(--hairline); border-radius: 0.6875rem; padding: 0.625rem 0.75rem; margin-bottom: 0.625rem; background: color-mix(in srgb, var(--text) 3%, var(--surface)); max-height: 11.25rem; overflow-y: auto; } .tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; } .tour-skip { background: transparent; border: none; color: var(--text-3); font: inherit; font-size: 0.75rem; cursor: pointer; padding: 0.25rem 2px; text-decoration: underline; text-underline-offset: 2px; } .tour-skip:hover { color: var(--text); } .tour-replay { display: inline-flex; align-items: center; gap: 0.375rem; background: transparent; border: 1px solid var(--hairline-strong); border-radius: 62.4375rem; color: var(--text-2); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0.3125rem 0.8125rem; transition: all 0.13s; } .tour-replay:hover { color: var(--text); border-color: var(--gold-edge); background: var(--gold-soft); } .tour-replay svg { width: 0.8125rem; height: 0.8125rem; } .tour-nav { display: flex; gap: 0.5rem; } .tour-nav .gen-btn { height: 2.25rem; padding: 0 1.125rem; font-size: 0.8125rem; } .tour-nav .gen-btn:disabled { opacity: 0.45; cursor: default; } /* mid-demo highlight on real settings rows */ .tour-mini-hl { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 0.625rem; } /* ---------- demo-screen building blocks (all canned) ---------- */ .dm-note { font-size: 0.8125rem; color: var(--text-2); padding: 0.5rem 0.25rem; } .dm-note.dim { color: var(--text-3); font-style: italic; } .dm-chat { display: flex; flex-direction: column; gap: 0.5rem; } .dm-bubble { max-width: 92%; padding: 0.5625rem 0.75rem; border-radius: 0.8125rem; font-size: 0.7812rem; line-height: 1.55; white-space: pre-wrap; } .dm-bubble.user { align-self: flex-end; background: var(--gold-soft); border: 1px solid var(--gold-edge); border-bottom-right-radius: 0.3125rem; } .dm-bubble.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-bottom-left-radius: 0.3125rem; } .dm-streaming::after { content: '▍'; color: var(--gold); animation: tourCaret 0.8s steps(1) infinite; } .dm-attachrow { display: flex; } .dm-filechip { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--hairline-strong); border-radius: 0.5625rem; padding: 0.375rem 0.6875rem; background: var(--surface); } .dm-filechip svg { width: 0.875rem; height: 0.875rem; color: var(--gold); } .dm-filechip i { font-style: normal; color: var(--text-3); font-weight: 400; font-size: 0.6875rem; } .dm-vp { display: flex; flex-direction: column; gap: 0.375rem; } .dm-vp-row { display: flex; align-items: center; gap: 0.5625rem; border: 1px solid var(--hairline); border-radius: 0.625rem; padding: 0.5rem 0.6875rem; font-size: 0.75rem; background: var(--surface); } .dm-vp-row b { font-size: 0.7812rem; } .dm-vp-row span { color: var(--text-3); flex: 1; } .dm-toggle { width: 1.875rem; height: 1.0625rem; border-radius: 62.4375rem; background: var(--hairline-strong); position: relative; flex-shrink: 0; transition: background 0.18s; } .dm-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.8125rem; height: 0.8125rem; border-radius: 50%; background: #fff; transition: left 0.18s; } .dm-toggle.on { background: var(--gold); } .dm-toggle.on::after { left: 0.9375rem; } .dm-orbwrap { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.625rem; justify-content: center; } .dm-orb { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #b59ce0, #6f7fd0 55%, #34e6c4); box-shadow: 0 0 1.5rem rgba(111,127,208,0.8); animation: dmOrb 1.4s ease-in-out infinite; } @keyframes dmOrb { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } } .dm-orblbl { font-size: 0.75rem; color: var(--text-2); font-style: italic; } .dm-skills { display: flex; flex-direction: column; gap: 0.625rem; } .dm-chiprow { display: flex; gap: 0.4375rem; flex-wrap: wrap; } .dm-chip { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 62.4375rem; border: 1px solid var(--gold-edge); background: var(--gold-soft); position: relative; z-index: 2; } .dm-chip.dim { opacity: 0.55; border-color: var(--hairline-strong); background: var(--surface); } .dm-dock { min-height: 2.875rem; border: 2px dashed var(--hairline-strong); border-radius: 0.75rem; display: flex; align-items: center; padding: 0.4375rem 0.625rem; gap: 0.4375rem; transition: all 0.2s; } .dm-dock.filled { border-style: solid; border-color: var(--gold-edge); background: var(--gold-soft); } .dm-dock-hint { font-size: 0.7188rem; color: var(--text-3); font-style: italic; } .dm-arts { display: flex; gap: 0.625rem; } .dm-artlist { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; } .dm-art { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--hairline); border-radius: 0.625rem; padding: 0.5rem 0.625rem; background: var(--surface); } .dm-ft { font-family: var(--font-mono); font-size: 0.5rem; font-weight: 800; color: #fff; border-radius: 0.3125rem; padding: 3px 0.3125rem; } .dm-ft.xl { background: #1d7044; } .dm-ft.dx { background: #2b579a; } .dm-ft.pf { background: #b3261e; } .dm-preview { flex: 1.1; border: 1px solid var(--gold-edge); border-radius: 0.625rem; background: var(--surface); overflow: hidden; } .dm-prevhead { display: flex; justify-content: space-between; align-items: center; font-size: 0.7188rem; font-weight: 700; padding: 0.4375rem 0.625rem; border-bottom: 1px solid var(--hairline); } .dm-dl { font-size: 0.6562rem; color: var(--gold); font-weight: 700; } .dm-page { padding: 0.625rem; display: flex; flex-direction: column; gap: 0.4375rem; } .dm-page i { display: block; height: 0.4375rem; border-radius: 0.25rem; background: var(--hairline-strong); width: 86%; } .dm-share { display: flex; flex-direction: column; gap: 0.5625rem; } .dm-share-h { font-size: 0.8125rem; font-weight: 700; } .dm-linkrow { display: flex; gap: 0.4375rem; align-items: center; } .dm-link { flex: 1; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-2); border: 1px solid var(--hairline); border-radius: 0.5rem; padding: 0.4375rem 0.625rem; background: var(--surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-btn { font: inherit; font-size: 0.7188rem; font-weight: 700; border: 1px solid var(--hairline-strong); border-radius: 0.5rem; background: var(--surface); color: var(--text); padding: 0.375rem 0.75rem; cursor: default; } .dm-btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; } .dm-btn.danger { color: #c0392b; border-color: rgba(192,57,43,0.4); } .dm-share-opts { display: flex; gap: 0.375rem; } .dm-share-opts span { font-size: 0.6875rem; padding: 0.25rem 0.625rem; border-radius: 62.4375rem; border: 1px solid var(--hairline); color: var(--text-3); } .dm-share-opts span.sel { border-color: var(--gold-edge); background: var(--gold-soft); color: var(--text); font-weight: 700; } .dm-toast { align-self: flex-start; font-size: 0.7188rem; font-weight: 600; border-radius: 0.5625rem; padding: 0.4375rem 0.75rem; background: var(--gold-soft); border: 1px solid var(--gold-edge); animation: dmToastIn 0.3s ease-out; } @keyframes dmToastIn { from { opacity: 0; transform: translateY(0.375rem); } } .dm-sess { display: flex; flex-direction: column; gap: 0.5625rem; } .dm-sessrow { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--hairline); border-radius: 0.6875rem; padding: 0.5625rem 0.75rem; background: var(--surface); transition: opacity 0.5s, transform 0.5s; } .dm-sessrow.gone { opacity: 0; transform: translateX(1.625rem); } .dm-sesstitle { flex: 1; font-size: 0.7812rem; font-weight: 600; } .dm-sesstitle.editing { border-bottom: 1.5px solid var(--gold); } .dm-sessacts { display: flex; gap: 0.25rem; } .dm-ract { width: 1.625rem; height: 1.625rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); border-radius: 0.4375rem; cursor: default; } .dm-ract svg { width: 0.875rem; height: 0.875rem; } .dm-ract.on { color: var(--gold); } .dm-confirm { font-size: 0.75rem; display: flex; align-items: center; gap: 0.5625rem; border: 1px solid var(--hairline-strong); border-radius: 0.625rem; padding: 0.5rem 0.6875rem; background: var(--surface); } .dm-actrow { display: flex; align-items: center; gap: 3px; } .dm-copied { font-size: 0.6875rem; color: var(--gold); font-weight: 700; margin-left: 0.3125rem; } .dm-offer { font-size: 0.75rem; line-height: 1.5; border: 1px solid var(--gold-edge); background: var(--gold-soft); border-radius: 0.6875rem; padding: 0.5625rem 0.75rem; animation: dmToastIn 0.3s ease-out; } .dm-offer b { color: var(--gold); } .dm-swatches { display: flex; gap: 0.625rem; padding: 0.5rem 2px; } .dm-swatch { width: 2.125rem; height: 2.125rem; border-radius: 50%; border: 2px solid var(--hairline-strong); display: inline-block; } .dm-issue { display: flex; flex-direction: column; gap: 0.5rem; } .dm-formrow { display: flex; flex-direction: column; gap: 3px; } .dm-formrow label { font-size: 0.6562rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); } .dm-fakesel, .dm-fakeinput { font-size: 0.75rem; border: 1px solid var(--hairline); border-radius: 0.5rem; padding: 0.4375rem 0.625rem; background: var(--surface); min-height: 1rem; } .dm-formrow.checks { flex-direction: row; gap: 0.5rem; } .dm-check { font-size: 0.6875rem; padding: 0.25rem 0.625rem; border-radius: 62.4375rem; border: 1px solid var(--hairline); color: var(--text-3); } .dm-check.on { border-color: var(--gold-edge); background: var(--gold-soft); color: var(--text); font-weight: 600; } .dm-issue .dm-btn.primary { align-self: flex-start; } .dm-space { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; } .dm-galaxy { position: relative; flex: 1; min-height: 8.125rem; border-radius: 0.6875rem; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, #182742, #0b1424 70%); transform: scale(0.94); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); } .dm-galaxy.zoom { transform: scale(1.22); } .dm-star { position: absolute; width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #b59ce0, #6f7fd0 60%, #34e6c4); box-shadow: 0 0 0.75rem rgba(111,127,208,0.9); } .dm-star.big { width: 1.0625rem; height: 1.0625rem; box-shadow: 0 0 1.25rem rgba(180,156,224,1); } .dm-star.sm { width: 0.4375rem; height: 0.4375rem; } .dm-starlbl { position: absolute; font-size: 0.5938rem; font-weight: 600; color: #cfe0ff; background: rgba(11,27,51,0.72); border: 1px solid rgba(120,150,220,0.35); border-radius: 0.375rem; padding: 2px 0.375rem; white-space: nowrap; animation: dmToastIn 0.5s ease-out; } .dm-scenecap { font-size: 0.75rem; color: var(--text-2); font-style: italic; } .dm-narr { display: flex; flex-direction: column; gap: 0.5625rem; } .dm-narr-h { display: flex; align-items: center; gap: 0.5625rem; font-size: 0.8125rem; font-weight: 700; } .dm-narr-h img { width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; object-fit: cover; } .dm-memcard { display: flex; flex-direction: column; gap: 0.5625rem; } .dm-memrow { display: flex; align-items: center; gap: 0.5625rem; border: 1px solid var(--hairline); border-radius: 0.6875rem; padding: 0.5625rem 0.75rem; background: var(--surface); transition: opacity 0.5s, transform 0.5s; } .dm-memrow.gone { opacity: 0; transform: scale(0.85); } .dm-memtext { flex: 1; font-size: 0.7812rem; } /* ---------- §H.21b "Ask about MegaMind" help bubble (bottom right, above release pill) ---------- */ .help-bubble { position: fixed; right: 0.875rem; bottom: 3.25rem; z-index: 95; } .help-bubble-btn { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--hairline-strong); border-radius: 62.4375rem; background: var(--surface); color: var(--text); font: inherit; font-size: 0.7812rem; font-weight: 700; padding: 0.4375rem 0.9375rem 0.4375rem 0.5rem; cursor: pointer; box-shadow: 0 0.5rem 1.625rem rgba(0,0,0,0.22); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .help-bubble-btn:hover { transform: translateY(-2px); border-color: var(--gold-edge); box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.28); } .help-bubble-btn.open { border-color: var(--gold-edge); } .help-bubble-btn img { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; background: var(--gold-soft); } .help-panel { position: absolute; bottom: 3.125rem; right: 0; width: min(23.125rem, calc(100vw - 1.75rem)); height: min(30rem, 72vh); display: flex; flex-direction: column; border: 1px solid var(--hairline-strong); border-radius: 1.125rem; background: var(--surface); box-shadow: 0 1.625rem 4.375rem rgba(0,0,0,0.38); overflow: hidden; animation: dmToastIn 0.22s ease-out; } .help-panel-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--hairline); background: linear-gradient(135deg, var(--gold-soft), transparent); } .help-panel-head img { width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; object-fit: cover; } .hp-meta { flex: 1; min-width: 0; } .hp-title { font-size: 0.8438rem; font-weight: 700; } .hp-sub { font-size: 0.6875rem; color: var(--text-3); } .help-msgs { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .help-msg { max-width: 88%; padding: 0.5rem 0.75rem; border-radius: 0.8125rem; font-size: 0.7812rem; line-height: 1.55; white-space: pre-wrap; } .help-msg.user { align-self: flex-end; background: var(--gold-soft); border: 1px solid var(--gold-edge); border-bottom-right-radius: 0.3125rem; } .help-msg.bot { align-self: flex-start; background: color-mix(in srgb, var(--text) 4%, var(--surface)); border: 1px solid var(--hairline); border-bottom-left-radius: 0.3125rem; } .help-msg.hm-busy { color: var(--text-3); animation: hmPulse 1.1s ease-in-out infinite; } @keyframes hmPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } .help-input-row { display: flex; gap: 0.5rem; padding: 0.625rem; border-top: 1px solid var(--hairline); } .help-input-row .form-input { flex: 1; height: 2.25rem; font-size: 0.8125rem; } .help-send { width: 2.375rem; height: 2.25rem; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .help-send svg { width: 1rem; height: 1rem; } /* ---------- "Show me how?" searchable mini-tour list ---------- */ .tour-list-modal .modal-card { width: min(28.75rem, 92vw); } .tour-list-wrap { padding: 2px 1rem 1.125rem; } .tour-search { margin-bottom: 0.625rem; } .tour-list { max-height: 20rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3125rem; } .tour-item { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 0.625rem 0.8125rem; border: 1px solid var(--hairline); border-radius: 0.6875rem; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; transition: all 0.13s; } .tour-item:hover { border-color: var(--gold-edge); background: var(--gold-soft); transform: translateY(-1px); } .tour-item.full { border-color: var(--gold-edge); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); } .tour-item .ti-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); } .tour-item.full .ti-name { color: var(--text); } .tour-item .ti-sub { font-size: 0.7188rem; color: var(--text-3); } .tour-empty { padding: 1.125rem; text-align: center; color: var(--text-3); font-size: 0.7812rem; font-style: italic; } /* ---------- mobile adjustments for the new chrome ---------- */ @media (max-width: 760px) { .msg-actions { opacity: 1; } /* always visible on touch */ .msg-act { width: 2.125rem; height: 2.125rem; } .preview-drawer { width: 100vw; } .user-menu { left: 0.75rem; right: 0.75rem; min-width: 0; } .nav-footer-links .nav-skills { min-height: 2.75rem; } .tour-card { width: min(92vw, 26.25rem) !important; } .tour-demo-screen { height: 10.625rem; } .tour-robot { width: 2.75rem; height: 2.75rem; } .tour-title { font-size: 1.125rem; } .help-bubble-btn .hb-label { display: none; } .help-bubble-btn { padding: 0.4375rem 0.5rem; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .tour-ring, .tour-card, .tour-cursor { transition: none !important; } .tour-robot, .dm-orb, .tour-arrow .ta-line { animation: none !important; } } /* ============================================================================ ADDENDUM 10 — v2.6 wave 1 (chat UX core) ============================================================================ */ /* ---------- §5.2 user messages dock RIGHT (v1 style), bot messages stay left ---------- */ .msg.user { flex-direction: row-reverse; } .msg.user .msg-bubble { display: flex; flex-direction: column; align-items: flex-end; } .msg.user .msg-meta { flex-direction: row-reverse; } .msg.user .msg-attachments { justify-content: flex-end; } .msg.user .msg-content { text-align: left; max-width: 100%; } /* ---------- §0.1 conference re-send chip (compact, dimmer user bubble) ---------- */ .msg.user.resend .msg-bubble { align-items: flex-end; } .resend-chip { display: inline-flex; align-items: baseline; gap: 0.375rem; max-width: 100%; padding: 0.375rem 0.8125rem; background: var(--user-bubble); border: 1px dashed var(--hairline-strong); border-radius: 6.25rem; opacity: 0.74; font-size: 0.75rem; color: var(--text-2); } .resend-chip .rs-arrow { color: var(--bot-ink); font-weight: 700; } .resend-chip .rs-label { font-weight: 600; white-space: nowrap; } .resend-chip .rs-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22.5rem; } /* ---------- §CM: rolling-summary boundary chip (quiet, centered) ---------- */ .msg.summary { justify-content: center; padding: 0.25rem 0; } .summary-chip { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 auto; padding: 0.3rem 0.75rem; background: var(--surface-2); border: 1px dashed var(--hairline-strong); border-radius: 6.25rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); opacity: 0.7; cursor: pointer; transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .summary-chip:hover, .summary-chip:focus-visible { opacity: 1; color: var(--text-1); border-color: var(--hairline-strong); outline: none; } .summary-chip-icon { width: 0.8125rem; height: 0.8125rem; flex: none; } .summary-chip-caret { width: 0.75rem; height: 0.75rem; flex: none; transition: transform 0.2s ease; } .msg.summary.open .summary-chip-caret { transform: rotate(180deg); } .summary-chip-body { max-width: 38rem; margin: 0.4rem auto 0; padding: 0.625rem 0.875rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 0.625rem; font-family: var(--font-serif); font-size: 0.8125rem; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; } /* ---------- §2.1 tool/status chips: stable nodes, soft state transitions ---------- */ .tool-chip { transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; } .tool-chip.done .spin { display: none; } .reasoning .reasoning-body { scroll-behavior: smooth; } /* ---------- §4.5 refined system-notice icon ---------- */ .msg-avatar.system svg { width: 0.875rem; height: 0.875rem; } /* ---------- §4.6 recents: model name under the title, lighter italics ---------- */ .nav-recent .t-title { display: block; overflow: hidden; text-overflow: ellipsis; } /* v3.2 §BB.38: bot name under the title on every recent-chat row */ .nav-recent .t-bot { display: block; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; } .nav-recent .t-model { display: block; font-size: 0.625rem; font-style: italic; color: var(--text-3); font-weight: 400; line-height: 1.35; } /* ---------- §3/§4 composer popovers (voice + model) ---------- */ .chat-composer-wrap { position: relative; } .composer-popover { position: absolute; bottom: calc(100% + 0.5rem); right: 1.125rem; width: 19rem; max-height: 25rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 0.875rem; box-shadow: 0 1.125rem 3rem rgba(0,0,0,0.20); padding: 0.625rem; z-index: 80; opacity: 0; transform: translateY(0.375rem); transition: opacity 0.16s ease, transform 0.16s ease; } .composer-popover.show { opacity: 1; transform: translateY(0); } .vp-h { font-family: var(--font-mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); padding: 0.25rem 0.5rem 0.375rem; } .vp-h.sub { margin-top: 0.5rem; border-top: 1px solid var(--hairline); padding-top: 0.625rem; } .vp-option, .vp-row { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem; border-radius: 0.625rem; background: transparent; border: none; font: inherit; text-align: left; color: var(--text); } .vp-option { cursor: pointer; } .vp-option:hover { background: var(--bot-soft); } .vp-option.active { background: var(--gold-soft); } .vp-option.active .vp-dot { background: var(--gold); border-color: var(--gold); } .vp-dot { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; border: 1.5px solid var(--hairline-strong); flex-shrink: 0; transition: background 0.15s, border-color 0.15s; } .vp-ico { width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); } .vp-ico svg { width: 0.875rem; height: 0.875rem; } .vp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .vp-name { font-size: 0.7812rem; font-weight: 600; } .vp-desc { font-size: 0.6875rem; color: var(--text-3); } .vp-action.active { background: rgba(184,116,106,0.10); } .vp-action.active .vp-ico { color: var(--rose); } .vp-voices { display: flex; flex-direction: column; gap: 2px; } .mic-btn.active { border-color: var(--bot-edge); color: var(--bot-ink); background: var(--bot-soft); } .model-chip svg { color: var(--gold-2); } [data-theme="dark"] .model-chip svg { color: var(--gold); } /* ---------- §3.2 voice nebula — right-docked, audio-reactive orb ---------- */ .nebula-dock { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%) translateX(1.125rem); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; cursor: pointer; opacity: 0; transition: opacity 0.28s ease, transform 0.28s ease; } .nebula-dock.show { opacity: 1; transform: translateY(-50%) translateX(0); } .nebula-dock canvas { width: 5.75rem; height: 5.75rem; filter: saturate(1.25); } .nebula-label { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); background: var(--surface); border: 1px solid var(--hairline); padding: 2px 0.5rem; border-radius: 6.25rem; white-space: nowrap; } @media (max-width: 760px) { .nebula-dock { right: 0.5rem; top: auto; bottom: 8.75rem; transform: translateX(1.125rem); } .nebula-dock.show { transform: translateX(0); } .nebula-dock canvas { width: 4rem; height: 4rem; } .composer-popover { right: 0.5rem; left: 0.5rem; width: auto; } .resend-chip .rs-text { max-width: 11.25rem; } } /* ---------- §5.1 message-details checkboxes ---------- */ .meta-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; } .meta-check { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.6875rem; border: 1px solid var(--hairline-strong); border-radius: 6.25rem; font-size: 0.75rem; color: var(--text-2); cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s; } .meta-check.on { background: var(--gold-soft); border-color: var(--gold-edge); color: var(--text); } .meta-check input { accent-color: var(--gold); margin: 0; } /* ---------- §5.3 citation footnote links ---------- */ .md-body a.cite-ref { font-size: 0.82em; vertical-align: super; text-decoration: none; padding: 0 2px; color: var(--bot-ink); } .md-body a.cite-ref:hover { text-decoration: underline; } /* ---------- §5.4 Graph profile photo avatars (initials remain the fallback) ---------- */ .avatar, .msg-avatar.user { overflow: hidden; } .avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* ---------- §1.1 stream-time doc wizard chip ---------- */ .gen-card.docprep { margin-top: 0.625rem; } /* ========================================================================== WAVE 2 — ADDENDUM 10 §6 §7 §8 §9 §10 (artifacts, skills, hero cards, sessions) ========================================================================== */ /* ---------- §9 recents: favorites group + hover row actions ---------- */ .nav-sublabel { font-family: var(--font-mono); font-size: 0.5312rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); padding: 0.5rem 1rem 2px; } .nav-recent .row-acts { display: none; align-items: center; gap: 2px; flex-shrink: 0; } .nav-recent:hover .row-acts { display: inline-flex; } .nav-recent:hover .ago { display: none; } .nav-recent .ract { width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); border-radius: 0.3125rem; cursor: pointer; padding: 0; font-size: 0.8125rem; line-height: 1; } .nav-recent .ract svg { width: 0.75rem; height: 0.75rem; } .nav-recent .ract:hover { background: var(--surface-2); color: var(--text); } .nav-recent .ract.del:hover { color: var(--rose); } .nav-recent .ract.fav-btn.on { color: var(--gold); } .nav-recent.fav .ract.fav-btn { display: inline-flex; } .nav-recent .ren-input { flex: 1; min-width: 0; font: inherit; font-size: 0.75rem; color: var(--text); background: var(--surface); border: 1px solid var(--gold-edge); border-radius: 0.3125rem; padding: 2px 0.375rem; outline: none; } /* ---------- §9 hydration skeleton + still-syncing note ---------- */ .hydrate-skel { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.125rem 0.25rem; } .hs-row { display: flex; } .hs-row.user { justify-content: flex-end; } .hs-bubble { height: 2.25rem; border-radius: 0.75rem; } .hydrate-note { text-align: center; padding: 3rem 1.25rem; color: var(--text-2); } .hydrate-note .hn-title { font-family: 'Sora', sans-serif; font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 0.375rem; } .hydrate-note .hn-sub { font-size: 0.7812rem; color: var(--text-3); margin-bottom: 0.875rem; } /* ---------- §6 in-chat artifact chips (raw URLs never render) ---------- */ .art-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.625rem 0.3125rem 0.375rem; margin: 2px 0; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 0.5625rem; cursor: pointer; vertical-align: middle; max-width: 100%; transition: border-color 0.15s, background 0.15s; } .art-chip:hover { border-color: var(--gold-edge); background: var(--gold-soft); } .art-chip .gen-file-ico.sm { width: 1.375rem; height: 1.375rem; border-radius: 0.375rem; font-size: 0.4062rem; } /* v2.7.2: real document thumbnails — an icon that earned a thumb shows the page image */ .gen-file-ico.has-thumb { background: #fff; padding: 0; overflow: hidden; border: 1px solid var(--hairline-strong); } .gen-file-ico.has-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .art-chip-name { font-size: 0.75rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16.25rem; } .art-chip-open { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bot-ink); flex-shrink: 0; } /* ---------- §6 sidebar "open the library" + label actions ---------- */ .nav-label-acts { display: inline-flex; gap: 0.5rem; } .art-open-lib { display: flex; align-items: center; gap: 0.5rem; width: calc(100% - 1.5rem); margin: 2px 0.75rem 0.5rem; padding: 0.4375rem 0.625rem; background: var(--gold-soft); color: var(--text); border: 1px solid var(--gold-edge); border-radius: 0.5rem; font: inherit; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: filter 0.15s; } .art-open-lib:hover { filter: brightness(1.04); } .art-open-lib svg { width: 0.8125rem; height: 0.8125rem; color: var(--gold-2); flex-shrink: 0; } /* ---------- §6 preview tabs ---------- */ .preview-tabs { display: flex; gap: 0.375rem; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--hairline); overflow-x: auto; flex-shrink: 0; scrollbar-width: thin; } .pv-tab { flex-shrink: 0; max-width: 12.5rem; padding: 0.25rem 0.6875rem; border: 1px solid var(--hairline-strong); border-radius: 6.25rem; background: transparent; color: var(--text-2); font: inherit; font-size: 0.7188rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 0.375rem; } .pv-tab-thumb { width: 1rem; height: 1rem; border-radius: 0.25rem; object-fit: cover; object-position: top; flex-shrink: 0; background: #fff; border: 1px solid var(--hairline-strong); } .pv-tab:hover { background: var(--surface-2); color: var(--text); } .pv-tab.active { background: var(--gold-soft); border-color: var(--gold-edge); color: var(--text); font-weight: 600; } /* v2.9.1 §L.3: browser-tab semantics — each opened tab carries its own close X */ .pv-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-tab-x { flex-shrink: 0; width: 0.9375rem; height: 0.9375rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.75rem; line-height: 1; color: var(--text-3); } .pv-tab-x:hover { background: var(--hairline-strong); color: var(--text); } /* ---------- §7 skills bar above the composer ---------- */ .skills-bar { display: flex; align-items: center; gap: 0.5rem; max-width: var(--chat-w); margin: 0 auto 0.5rem; flex-wrap: wrap; } /* §slash: the "/" skill picker — a centered card that floats just above the composer */ .slash-menu { max-width: var(--chat-w); margin: 0 auto 0.5rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); box-shadow: 0 0.75rem 2rem rgba(61,57,41,0.12); overflow: hidden; max-height: 18rem; overflow-y: auto; } .slash-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.875rem; cursor: pointer; border-bottom: 1px solid var(--hairline); } .slash-item:last-child { border-bottom: none; } .slash-item.active { background: var(--gold-soft); } .slash-name { font-weight: 600; font-size: 0.85rem; color: var(--text); display: flex; align-items: center; gap: 0.4rem; } .slash-kind { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); border: 1px solid var(--gold-edge); border-radius: 0.3rem; padding: 0.05rem 0.3rem; } .slash-desc { font-size: 0.72rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slash-empty { padding: 0.75rem 0.875rem; font-size: 0.78rem; color: var(--text-2); } .skills-bar.sb-row { margin-top: -2px; } .sb-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.75rem; border: 1px solid var(--hairline-strong); border-radius: 6.25rem; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.75rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; max-width: 17.5rem; } .sb-chip:hover { border-color: var(--gold-edge); background: var(--gold-soft); color: var(--text); } .sb-chip .sb-bolt { font-size: 0.6875rem; } .sb-chip .sb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-chip.primary { background: var(--gold-soft); border-color: var(--gold-edge); color: var(--text); font-weight: 600; } .sb-chip.expander svg { width: 0.75rem; height: 0.75rem; transition: transform 0.18s; } .sb-chip.expander.open svg { transform: rotate(180deg); } .sb-chip.expander.open { background: var(--surface-2); color: var(--text); } /* ---------- §7 locked skills + explainer modal ---------- */ .skill-card.locked { cursor: pointer; } .skill-card.locked .skill-card-ico, .skill-card.locked .skill-card-name { opacity: 0.72; } .skill-card.locked .skill-card-desc { opacity: 0.6; } .skill-card:not(.locked) { cursor: pointer; } .lock-badge { margin-left: auto; color: var(--text-3); display: inline-flex; } .lock-badge svg { width: 0.875rem; height: 0.875rem; } /* Delete control on personal (user-tier) skill cards */ .skill-del { margin-left: 0.25rem; flex-shrink: 0; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-3); border-radius: 0.4rem; cursor: pointer; opacity: 0.5; transition: opacity 0.14s, color 0.14s, background 0.14s; } .skill-card:hover .skill-del, .skill-del:hover, .skill-del:focus-visible { opacity: 1; } .skill-del:hover { color: #d64545; background: rgba(214,69,69,0.10); outline: none; } .skill-del svg { width: 0.95rem; height: 0.95rem; } .skill-del-confirm { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background: var(--surface-2); border-top: 1px solid var(--hairline-strong); animation: msg-in 0.16s ease; } .sdc-text { font-size: 0.75rem; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sdc-btn { font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 0.4rem; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text-2); cursor: pointer; } .sdc-yes { color: #fff; background: #d64545; border-color: #d64545; } .sdc-yes:hover { background: #c23b3b; } .sdc-no:hover { border-color: var(--gold-edge); color: var(--text); } .sdc-btn:disabled { opacity: 0.6; cursor: default; } .skill-scope.other { color: var(--purple); background: rgba(138,109,184,0.12); } .skill-scope.lockpill { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--text-3); } .skill-scope.lockpill svg { width: 0.625rem; height: 0.625rem; } .skill-info-body { padding: 0.25rem 2px 0.75rem; } .skill-info-badges { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-bottom: 0.625rem; } .skill-info-desc { font-size: 0.8125rem; color: var(--text-2); margin: 0 0 0.875rem; } .skill-info-h { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.375rem; } .skill-info-instr { font-size: 0.7812rem; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 0.625rem; padding: 0.75rem 0.875rem; white-space: pre-wrap; max-height: 13.75rem; overflow-y: auto; line-height: 1.55; } .skill-info-locknote { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--hairline-strong); border-radius: 0.625rem; background: rgba(138,109,184,0.08); color: var(--text-2); font-size: 0.75rem; } .skill-info-locknote svg { width: 0.9375rem; height: 0.9375rem; color: var(--purple); flex-shrink: 0; } .gen-btn.primary:disabled { opacity: 0.45; cursor: not-allowed; filter: none; } /* ---------- §8 employee / people hero cards ---------- */ .emp-card { margin-top: 0.75rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); padding: 1rem; max-width: 30rem; box-shadow: 0 0.375rem 1.375rem rgba(0,0,0,0.05); animation: card-reveal 0.35s ease both; } /* ADDENDUM-16 §E: org chart UNDERNEATH every people card */ .emp-wrap { max-width: 30rem; } .emp-orgchart { margin-top: 0.5rem; padding: 0.75rem 1rem 0.875rem; background: var(--surface-2); border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); animation: card-reveal 0.35s ease both; } .oc-label { font-family: var(--font-mono); font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.5rem; } .oc-tree { display: flex; flex-direction: column; align-items: center; } .oc-node { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.75rem 0.3125rem 0.375rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 0.625rem; max-width: 100%; } .oc-node.me { border-color: var(--bot-edge); background: var(--bot-soft); box-shadow: 0 2px 0.625rem rgba(0,0,0,0.06); } .oc-node[data-oc-name] { cursor: pointer; transition: border-color 0.12s, background 0.12s; } .oc-node[data-oc-name]:hover, .oc-node[data-oc-name]:focus-visible { border-color: var(--gold-edge); background: var(--gold-soft); outline: none; } .oc-avatar { position: relative; overflow: hidden; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: linear-gradient(135deg, var(--bot-soft), var(--surface-2)); border: 1px solid var(--hairline-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.5938rem; font-weight: 700; color: var(--text-2); flex-shrink: 0; } .oc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .oc-meta { display: flex; flex-direction: column; min-width: 0; } .oc-name { font-size: 0.75rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-title { font-size: 0.625rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-loc { font-size: 0.5625rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; } /* isolation+z-index contain Leaflet's high-z panes (200-1000) so the map can't punch through the skills/routines page overlay (z-index 40). */ .emp-map { position: relative; z-index: 0; isolation: isolate; margin-top: 0.625rem; height: 9rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--hairline-strong); background: var(--surface-2); } .emp-map .leaflet-container { height: 100%; width: 100%; background: var(--surface-2); font: inherit; } [data-theme="dark"] .emp-map, [data-theme="dark"] .emp-map .leaflet-container { background: #0a0e1f; } .oc-line { width: 1px; height: 0.75rem; background: var(--hairline-strong); } .oc-reports { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: center; padding-top: 0.125rem; } .oc-reports .oc-node { padding: 0.25rem 0.625rem 0.25rem 0.3125rem; } .oc-reports .oc-avatar { width: 1.375rem; height: 1.375rem; } @keyframes card-reveal { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } } .emp-hero { display: flex; align-items: center; gap: 0.875rem; } .emp-photo { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--bot), var(--bot-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-size: 1.125rem; font-weight: 600; flex-shrink: 0; border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--bot-edge); } .emp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } /* Teams presence dot — overflows the photo's bottom-right corner */ .emp-presence { position: absolute; right: -1px; bottom: -1px; width: 0.9375rem; height: 0.9375rem; border-radius: 50%; border: 2px solid var(--surface); background: var(--text-3); box-sizing: border-box; } .emp-presence.pres-available { background: #4caf50; } .emp-presence.pres-busy, .emp-presence.pres-dnd { background: #d64545; } .emp-presence.pres-dnd::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 0.4375rem; height: 0.125rem; background: var(--surface); border-radius: 1px; } .emp-presence.pres-away { background: #e0a83c; } .emp-presence.pres-offline { background: var(--text-3); } .emp-id { min-width: 0; } .emp-name { font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 600; color: var(--text); } .emp-sub { font-size: 0.7812rem; color: var(--text-2); margin-top: 2px; } .emp-mail { font-family: var(--font-mono); font-size: 0.6562rem; color: var(--text-3); margin-top: 3px; word-break: break-all; } .emp-org { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); } .org-label { display: block; font-family: var(--font-mono); font-size: 0.5312rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.5rem; } .org-chain { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .org-node { display: inline-flex; flex-direction: column; padding: 0.3125rem 0.625rem; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 0.5rem; max-width: 10rem; } .org-node.me { background: var(--bot-soft); border-color: var(--bot-edge); } .org-name { font-size: 0.7188rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-title { font-size: 0.5938rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-arrow { color: var(--text-3); display: inline-flex; flex-shrink: 0; } .org-arrow svg { width: 0.6875rem; height: 0.6875rem; } .emp-actions { display: flex; gap: 0.5rem; margin-top: 0.875rem; } .emp-actions .gen-btn { display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; } .emp-actions .gen-btn svg { width: 0.8125rem; height: 0.8125rem; } /* ---------- §10 walkthrough "don't show again" ---------- */ .tour-dontshow { display: flex; align-items: center; gap: 0.4375rem; margin-top: 0.75rem; font-size: 0.7188rem; color: var(--text-3); cursor: pointer; user-select: none; } .tour-dontshow input { accent-color: var(--gold); margin: 0; } @media (max-width: 760px) { .nav-recent .row-acts { display: inline-flex; } /* no hover on touch */ .art-chip-name { max-width: 9.375rem; } .skills-bar { padding: 0 0.25rem; } .emp-card { max-width: 100%; } } /* ============================================================================ v2.7 WAVE (ADDENDUM 11) ============================================================================ */ /* ---------- §H.33 brand (single-line "MegaMind AI") + §H.14 generous mark ---------- */ .brand-mark.brand-logo { width: 2.375rem; height: 2.375rem; border-radius: 0.625rem; overflow: hidden; } .brand-mark.brand-logo img { width: 100%; height: 100%; object-fit: contain; } /* ---------- §B lock badges in the rail ---------- */ .nav-bot.locked { opacity: 0.62; } .nav-bot .bot-lock { display: inline-flex; width: 0.9375rem; height: 0.9375rem; color: var(--text-3); flex-shrink: 0; } .nav-bot .bot-lock svg { width: 100%; height: 100%; } /* ---------- §A.39 reroute notice ---------- */ .reroute-note { display: flex; align-items: center; gap: 0.5625rem; margin-top: 0.625rem; padding: 0.5rem 0.75rem; border: 1px solid var(--hairline); border-left: 3px solid var(--bot, #888); border-radius: 0.625rem; background: var(--surface-2); font-size: 0.75rem; color: var(--text-2); } .reroute-note svg { width: 0.9375rem; height: 0.9375rem; flex-shrink: 0; color: var(--text-3); } .reroute-note .rr-text b { color: var(--text); } .rr-override { margin-left: auto; flex-shrink: 0; border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font-size: 0.7188rem; font-weight: 600; padding: 0.3125rem 0.625rem; border-radius: 0.5rem; cursor: pointer; } .rr-override:hover { border-color: var(--bot-edge); color: var(--bot-ink); } /* ---------- §H.37 STOP button ---------- */ .composer-send.stop { background: #b8746a; border-color: #b8746a; } .composer-send.stop:hover { background: #a4625a; } /* ---------- §H.45 citation chips ---------- */ .cite-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 1px 0.4375rem 1px 0.3125rem; margin: 0 2px; border: 1px solid var(--hairline); border-radius: 62.4375rem; background: var(--surface-2); color: var(--text-2); font-size: 0.6562rem; font-weight: 600; text-decoration: none; vertical-align: 1px; } .cite-chip svg { width: 0.625rem; height: 0.625rem; } .cite-chip:hover { border-color: var(--bot-edge); color: var(--bot-ink); } /* ---------- §H.16 Prompt Assistant ---------- */ #suggestBar .suggest-text { font-style: normal; } /* ---------- topbar links (§H.34/36) ---------- */ .topbar-actions { gap: 0.375rem; } .topbar-actions a.tbtn { text-decoration: none; } @media (max-width: 980px) { .topbar-actions .tbtn:not(.icon-only):not(#shareBtn) { display: none; } } /* ---------- §H.27 corpus pill + panel ---------- */ .corpus-pill { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.25rem 0.6875rem; margin-left: 0.625rem; border-radius: 62.4375rem; border: 1px solid color-mix(in srgb, var(--cp, #888) 45%, transparent); background: color-mix(in srgb, var(--cp, #888) 9%, transparent); color: var(--text-2); font-size: 0.6875rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .corpus-pill .cp-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--cp, #888); box-shadow: 0 0 0.4375rem var(--cp, #888); } .corpus-pill:hover { color: var(--text); } .corpus-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(27.5rem, 92vw); background: var(--surface); border-left: 1px solid var(--hairline); z-index: 95; display: flex; flex-direction: column; transform: translateX(102%); transition: transform 0.24s ease; box-shadow: -1.125rem 0 3.125rem rgba(0,0,0,0.22); } .corpus-panel.show { transform: none; } /* §CS CAS client-sync panel */ .cs-callouts { padding: 0 1rem; } .cs-callout { border-radius: 0.5rem; padding: 0.5rem 0.6875rem; margin: 0.375rem 0; font-size: 0.75rem; line-height: 1.35; } .cs-callout.cs-new { border: 1px solid color-mix(in srgb, #10b981 40%, transparent); background: color-mix(in srgb, #10b981 10%, transparent); } .cs-callout.cs-warn { border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); background: color-mix(in srgb, #f59e0b 10%, transparent); } .cs-tabs { display: flex; gap: 0.375rem; padding: 0.5rem 1rem 0; } .cs-tab { border: 1px solid var(--hairline); background: transparent; color: var(--text-2); border-radius: 62.4375rem; padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-weight: 600; cursor: pointer; } .cs-tab.active { border-color: color-mix(in srgb, #0ea5e9 55%, transparent); background: color-mix(in srgb, #0ea5e9 12%, transparent); color: var(--text); } .cs-dot { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; margin-right: 0.4375rem; vertical-align: middle; } .cs-badge { display: inline-block; margin-left: 0.4375rem; padding: 0.0625rem 0.375rem; border-radius: 0.3125rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; } .cs-badge.cs-b-new { color: #10b981; border: 1px solid color-mix(in srgb, #10b981 55%, transparent); } .cs-badge.cs-b-pend { color: #0ea5e9; border: 1px solid color-mix(in srgb, #0ea5e9 55%, transparent); } .cs-badge.cs-b-dead { color: #ef4444; border: 1px solid color-mix(in srgb, #ef4444 55%, transparent); } .cs-dd-head { padding: 0.375rem 0 0.125rem; } .corpus-status { font-size: 0.6875rem; color: var(--text-3); margin-left: auto; margin-right: 0.5rem; } .corpus-search-row { display: flex; gap: 0.5rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--hairline); } .corpus-search-row .form-input { flex: 1; } .corpus-results { flex: 1; overflow-y: auto; padding: 0.875rem; font-size: 0.8125rem; } .corpus-md a { color: var(--bot-ink); } /* ---------- §H.28 hero counts ---------- */ .hero-counts { margin: 2px 0 0.875rem; font-size: 0.7812rem; color: var(--text-3); letter-spacing: 0.02em; } /* ---------- §H.40 calendar visual ---------- */ .cal-visual, .od-visual, .viz-visual { margin-top: 0.75rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: var(--surface-2); overflow: hidden; } .cal-head, .od-head, .viz-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 0.8125rem; border-bottom: 1px solid var(--hairline); font-size: 0.7812rem; font-weight: 700; color: var(--text); } .cal-head svg, .od-head svg { width: 0.9375rem; height: 0.9375rem; color: var(--bot-ink); flex-shrink: 0; } .cal-people { font-weight: 500; color: var(--text-3); font-size: 0.7188rem; margin-left: auto; } .cal-grid { display: flex; gap: 0.75rem; padding: 0.75rem; overflow-x: auto; } .cal-day { min-width: 8.125rem; } .cal-day-h { font-size: 0.6875rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4375rem; } .cal-slot { display: block; width: 100%; margin-bottom: 0.375rem; padding: 0.4375rem 0.625rem; border: 1px solid var(--hairline); border-radius: 0.5rem; background: var(--surface); color: var(--text); font-size: 0.75rem; font-weight: 600; cursor: pointer; text-align: left; } .cal-slot:hover:not(.busy) { border-color: var(--bot-edge); background: var(--bot-soft); } .cal-slot.busy { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; } .cal-slot.picked { border-color: var(--bot-ink); background: var(--bot-soft); } .cal-hint { padding: 0 0.8125rem 0.6875rem; font-size: 0.6875rem; color: var(--text-3); } .cal-empty { padding: 1rem; font-size: 0.7812rem; color: var(--text-3); } /* ---------- calendar scheduling assistant (day + week + book) ---------- */ .cal-sched .cal-head { gap: .5rem; } .cal-ttl { font-weight: 700; } .cal-meta { font-size: .6875rem; color: var(--text-3); margin-left: .375rem; font-weight: 400; } .cal-meta i { font-style: normal; color: var(--text-2); font-weight: 600; } .cal-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: .5rem; overflow: hidden; flex-shrink: 0; } .cal-toggle button { padding: .25rem .625rem; font-size: .6875rem; font-weight: 700; background: var(--surface); color: var(--text-2); border: none; cursor: pointer; } .cal-toggle button.on { background: var(--bot-ink); color: #fff; } .cal-stage { padding: .75rem .8125rem .25rem; } .cal-tabs { display: flex; gap: .375rem; overflow-x: auto; margin-bottom: .625rem; } .cal-tab { flex: 0 0 auto; padding: .3125rem .625rem; border-radius: .4375rem; border: 1px solid var(--hairline-strong); background: var(--surface); font-size: .7188rem; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; } .cal-tab:hover { background: var(--surface-2); } .cal-tab.on { background: var(--bot-ink); border-color: var(--bot-ink); color: #fff; } .cal-tab.today { box-shadow: inset 0 -2px 0 var(--gold); } .cal-axis { display: flex; margin-left: 92px; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; margin-bottom: 6px; } .cal-axis span { flex: 1; font-size: .625rem; color: var(--text-3); } .cal-prow { display: flex; align-items: center; margin-bottom: 6px; } .cal-who { width: 92px; flex: 0 0 92px; font-size: .7188rem; display: flex; align-items: center; gap: .375rem; padding-right: .375rem; } .cal-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; } .cal-nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-who small { color: var(--text-3); font-weight: 400; margin-left: 2px; } .cal-track { position: relative; flex: 1; height: 24px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 5px; overflow: hidden; } .cal-blk { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: rgba(194, 96, 62, .16); border: 1px solid rgba(194, 96, 62, .4); } .cal-blk.room { background: rgba(61, 57, 41, .10); border-color: var(--hairline-strong); } .cal-blk.tent { background: repeating-linear-gradient(45deg, rgba(194, 96, 62, .12), rgba(194, 96, 62, .12) 3px, transparent 3px, transparent 7px); } .cal-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--gold); z-index: 3; } .cal-prow.nodata .cal-nm { color: var(--text-3); } .cal-track.nd { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 5px, transparent 5px, transparent 10px); opacity: .8; } .cal-cav { font-size: .7188rem; line-height: 1.45; color: #8a6d1f; background: rgba(200, 154, 58, .10); border: 1px solid var(--gold-edge, rgba(200,154,58,.32)); border-radius: .4375rem; padding: .4375rem .625rem; margin: .5rem 0 .25rem; } .cal-cav b { color: #6f5616; } .cal-open { margin-top: .625rem; padding: .625rem .8125rem .75rem; border-top: 1px solid var(--hairline); margin-left: -.8125rem; margin-right: -.8125rem; } .cal-open-h { font-size: .6875rem; color: var(--text-3); font-weight: 600; margin-bottom: .4375rem; display: flex; align-items: center; gap: .375rem; } .cal-open-h svg, .cal-wk-hint svg { width: .8125rem; height: .8125rem; color: var(--gold); flex-shrink: 0; } .cal-chips { display: flex; flex-wrap: wrap; gap: .375rem; } .cal-chip { padding: .375rem .625rem; border-radius: .4375rem; border: 1px solid var(--bot-edge); background: var(--bot-soft); color: var(--bot-ink); font-size: .7188rem; font-weight: 600; cursor: pointer; } .cal-chip:hover { background: var(--bot-ink); color: #fff; } .cal-chip.sel { background: var(--bot-ink); color: #fff; box-shadow: 0 0 0 3px var(--bot-soft); } .cal-none { font-size: .7188rem; color: var(--text-3); } .cal-prop { display: flex; align-items: center; gap: .625rem; padding: .625rem .8125rem; background: var(--gold-soft); border-top: 1px solid var(--gold-edge); } .cal-prop[hidden] { display: none; } .cal-prop-i { display: inline-flex; width: 1rem; height: 1rem; color: var(--gold-2); flex-shrink: 0; } .cal-prop-i svg { width: 100%; height: 100%; } .cal-prop-t { flex: 1; font-size: .7188rem; color: var(--text-2); } .cal-prop-t b { color: var(--text); font-weight: 700; } .cal-book { padding: .4375rem .8125rem; border-radius: .4375rem; border: none; background: var(--bot-ink); color: #fff; font-size: .7188rem; font-weight: 700; cursor: pointer; flex-shrink: 0; } .cal-book:disabled { opacity: .6; cursor: default; } .cal-week { display: grid; gap: 2px; align-items: center; } .cal-wk-corner { height: 100%; } .cal-wk-dh { font-size: .625rem; font-weight: 700; color: var(--text-2); text-align: center; padding: 2px 0 5px; } .cal-wk-dh.today { color: var(--bot-ink); } .cal-wk-time { font-size: .5938rem; color: var(--text-3); text-align: right; padding-right: 5px; white-space: nowrap; } .cal-wk-cell { height: 15px; border-radius: 2px; background: var(--surface); border: 1px solid var(--hairline); } .cal-wk-cell.free { background: rgba(29, 158, 117, .20); border-color: rgba(29, 158, 117, .38); cursor: pointer; } .cal-wk-cell.free:hover { background: rgba(29, 158, 117, .55); } .cal-wk-cell.soft { background: rgba(200, 154, 58, .16); border-color: rgba(200, 154, 58, .3); } .cal-wk-cell.busy { background: rgba(194, 96, 62, .14); border-color: rgba(194, 96, 62, .28); } .cal-wk-cell.sel { box-shadow: 0 0 0 2px var(--bot-ink); } .cal-wk-hint { font-size: .6562rem; color: var(--text-3); display: flex; align-items: center; gap: .375rem; padding: .5rem .8125rem .25rem; } /* ---------- §H.41 onedrive tree ---------- */ .od-tree { max-height: 20rem; overflow-y: auto; padding: 0.5rem 0.375rem; } .od-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3438rem 0.625rem; border-radius: 0.4375rem; font-size: 0.7812rem; color: var(--text); } .od-row.clickable, .od-row.folder { cursor: pointer; } .od-row.clickable:hover, .od-row.folder:hover { background: var(--bot-soft); } .od-ico { display: inline-flex; width: 0.9375rem; height: 0.9375rem; color: var(--text-3); flex-shrink: 0; } .od-row.folder .od-ico { color: var(--gold, #c89a3a); } .od-ico svg { width: 100%; height: 100%; } .od-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .od-size, .od-date { margin-left: auto; font-size: 0.6562rem; color: var(--text-3); flex-shrink: 0; } .od-size + .od-date { margin-left: 0.5rem; } .od-kids[hidden] { display: none; } /* ---------- §H.43 infographics ---------- */ .viz-head .viz-title { flex: 1; } .viz-acts { display: inline-flex; gap: 0.25rem; } .viz-body { padding: 0.75rem; } .viz-body canvas { display: block; } .viz-fallback { display: grid; gap: 0.375rem; } .vf-row { display: flex; justify-content: space-between; padding: 0.4375rem 0.625rem; border: 1px solid var(--hairline); border-radius: 0.5rem; font-size: 0.7812rem; } .vf-k { color: var(--text-2); } .vf-v { font-weight: 700; color: var(--text); } /* ---------- §F resolution panel + countdown + TimeZest ---------- */ .res-panel { margin-top: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: var(--surface-2); } .res-h { font-size: 0.7812rem; font-weight: 700; color: var(--text); margin-bottom: 0.5625rem; } .res-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; } .res-btns .gen-btn { display: inline-flex; align-items: center; gap: 0.375rem; } .res-btns svg { width: 0.875rem; height: 0.875rem; } .tech-countdown { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; justify-content: center; padding: 0.5rem 0.875rem; background: color-mix(in srgb, #b8746a 14%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, #b8746a 40%, transparent); font-size: 0.7812rem; color: var(--text); } .tech-countdown b { font-variant-numeric: tabular-nums; } .tz-card { width: min(45rem, 94vw); } .tz-frame { width: 100%; height: min(58vh, 32.5rem); border: 0; border-radius: 0.625rem; background: #fff; } .tz-nourl { padding: 1.625rem 0.625rem; font-size: 0.8125rem; color: var(--text-2); text-align: center; } .tz-actions { align-items: center; } .tz-note { margin-right: auto; font-size: 0.7188rem; color: var(--text-3); } /* ADDENDUM-16 §I.3: the can't-close-until-you-pick-a-time refusal */ .tz-note.tz-refuse { color: #b8746a; font-weight: 700; animation: tz-shake 0.4s ease; } @keyframes tz-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-0.25rem); } 75% { transform: translateX(0.25rem); } } /* §I.4: TECH switch warning + conference continue-TECH row */ .tech-switch-card { width: min(28rem, 92vw); } .tech-switch-body { padding: 0 1.25rem; } .tech-switch-text { font-size: 0.8438rem; color: var(--text-2); line-height: 1.6; margin: 0.125rem 0 0; } .tech-switch-actions { display: flex; justify-content: flex-end; gap: 0.625rem; padding: 1.25rem; } .tech-switch-actions .gen-btn { height: 2.25rem; padding: 0 1.125rem; font-size: 0.8125rem; justify-content: center; white-space: nowrap; } @media (max-width: 480px) { .tech-switch-actions { flex-direction: column-reverse; gap: 0.5rem; } .tech-switch-actions .gen-btn { width: 100%; min-height: 2.75rem; } } .conf-tech-row { margin-top: 0.875rem; text-align: center; } /* ---------- §E issue + use-case modals ---------- */ /* v3.3.5 §DN.5b/6: both popouts grew so the WHOLE form sits in one view with comfortable padding — nothing truncated, no field flush against the box edge. */ .issue-modal .modal-card { width: min(44rem, 94vw); } .issue-body, .uc-body { max-height: min(76vh, 52rem); overflow-y: auto; padding: 0.375rem 1.5rem 0.5rem; } .issue-modal .modal-head, .usecase-modal .modal-head { padding: 1.125rem 1.5rem 0.625rem; } .issue-modal .skill-actions, .usecase-modal .skill-actions { padding: 0 1.5rem 1.25rem; margin-top: 0.875rem; } .issue-body .form-row, .uc-body .form-row { margin-bottom: 1rem; } .issue-shot { margin-top: 0.625rem; } .issue-shot img { max-width: 100%; max-height: 11.25rem; border-radius: 0.625rem; border: 1px solid var(--hairline); } .issue-shot-status { font-size: 0.7188rem; color: var(--text-3); margin-top: 0.375rem; } .uc-card { width: min(48rem, 94vw); border: 1px solid var(--gold-edge); box-shadow: 0 1.875rem 5.625rem rgba(0,0,0,0.4), 0 0 0 0.25rem var(--gold-soft); } /* v2.9.1 §L.10: flashier capture form (same verbiage) — template ribbon + hints */ .uc-ribbon { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.5625rem 1rem; background: linear-gradient(110deg, #0b1b33 0%, #15315c 55%, #2a5ca8 100%); color: #e9f1ff; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; position: relative; overflow: hidden; } .uc-ribbon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-100%); animation: uc-sheen 4.5s ease-in-out infinite; } @keyframes uc-sheen { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .uc-ribbon::after { animation: none; } } .uc-ribbon-sep { opacity: 0.55; } .uc-head { border-bottom: 1px solid var(--gold-edge); background: linear-gradient(180deg, var(--gold-soft), transparent); } .uc-intro { font-size: 0.7812rem; line-height: 1.6; color: var(--text-2); font-style: italic; margin: 0 0 0.75rem; padding: 0.5625rem 0.75rem; border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 0.625rem 0.625rem 0; } .uc-hint { margin-top: 0.25rem; font-size: 0.6875rem; color: var(--text-3); line-height: 1.5; } .uc-body .form-input::placeholder { color: var(--text-3); opacity: 0.9; } /* §L.4: artifact type-ahead filter sits right above the dropdown */ .issue-art-filter { margin-bottom: 0.375rem; } /* §L.15: index-only source chips — label only, no Open action */ .art-chip.index-only { cursor: default; opacity: 0.92; } .art-chip.index-only:hover { border-color: var(--hairline-strong); } .uc-tags { margin-top: 0.875rem; padding-top: 0.625rem; border-top: 1px dashed var(--hairline); } .uc-tags-h { font-size: 0.7188rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 0.5rem; } .uc-checks { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; } .uc-checks label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.7812rem; color: var(--text-2); cursor: pointer; } .uc-checks input { accent-color: var(--gold, #c89a3a); } /* ---------- §H.17 bot carousel ---------- */ /* v2.8 §C — v1-style TRANSPARENT carousel: blurred/faded backdrop, no card chrome, robot portraits gliding horizontally, name + role caption only. */ .bot-carousel { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; background: rgba(7, 9, 16, 0.8); backdrop-filter: blur(1.375rem) saturate(0.85); -webkit-backdrop-filter: blur(1.375rem) saturate(0.85); opacity: 0; transition: opacity 0.3s ease; } .bot-carousel.show { opacity: 1; } .car-track { position: relative; display: flex; align-items: center; justify-content: center; width: min(68.75rem, 94vw); height: min(66vh, 35rem); } .car-card { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 17.5rem; padding: 0; border: none; background: transparent; box-shadow: none; cursor: pointer; transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.26, 1), opacity 0.55s ease, filter 0.55s ease; transform: translateX(calc(var(--off) * 16.25rem)) scale(0.62); opacity: 0; filter: blur(2px) saturate(0.6); } .car-card.center { transform: translateX(0) scale(1); opacity: 1; filter: none; z-index: 3; } .car-card.near { z-index: 2; opacity: 0.45; filter: blur(1px) saturate(0.65); transform: translateX(calc(var(--off) * 16.25rem)) scale(0.74); } .car-card.far { z-index: 1; opacity: 0.1; } .car-card img { width: 14.375rem; height: 14.375rem; object-fit: contain; background: transparent; filter: drop-shadow(0 0.875rem 1.625rem rgba(0, 0, 0, 0.55)) drop-shadow(0 0.375rem 1rem color-mix(in srgb, var(--cc, #888) 35%, transparent)); } .car-card.center img { animation: carFloat 2.6s ease-in-out infinite; } @keyframes carFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-0.875rem) scale(1.04); } } .car-name { font-size: 1.625rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0.875rem rgba(0, 0, 0, 0.6); display: inline-flex; align-items: center; gap: 0.4375rem; } .car-name svg { width: 1rem; height: 1rem; color: #c9cfdd; } .car-role { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--cc, var(--gold)) 75%, #fff); text-shadow: 0 1px 0.625rem rgba(0, 0, 0, 0.55); } @media (prefers-reduced-motion: reduce) { .car-card { transition: none; } .car-card.center img { animation: none; } } .car-arrow { position: relative; z-index: 5; width: 2.875rem; height: 2.875rem; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0 0.5rem; } .car-arrow svg { width: 1.25rem; height: 1.25rem; } .car-arrow:hover { border-color: var(--bot-edge); color: var(--bot-ink); } .car-hint { position: absolute; bottom: 7vh; left: 0; right: 0; text-align: center; font-size: 0.75rem; color: #cfd6e4; } /* ---------- §H.18 pinned skill chips ---------- */ .pinned-dock { position: absolute; left: 0.875rem; top: 5.375rem; z-index: 24; display: flex; flex-direction: column; gap: 0.5rem; max-width: 12.5rem; } .pin-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.6875rem; border-radius: 62.4375rem; border: 1px solid var(--gold-edge, rgba(200,154,58,0.32)); background: var(--surface); color: var(--text); font-size: 0.75rem; font-weight: 600; cursor: pointer; box-shadow: 0 0.25rem 0.875rem rgba(0,0,0,0.10); text-align: left; } .pin-chip:hover { border-color: var(--gold, #c89a3a); } .pin-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8.125rem; } .pin-x { margin-left: 2px; color: var(--text-3); font-size: 0.8125rem; line-height: 1; } .pin-x:hover { color: #b8746a; } .pinned-dropzone { position: absolute; left: 0.625rem; top: 4.375rem; bottom: 10rem; width: 11.875rem; z-index: 23; display: none; align-items: center; justify-content: center; border: 2px dashed var(--gold-edge, rgba(200,154,58,0.4)); border-radius: 1rem; background: color-mix(in srgb, var(--gold, #c89a3a) 7%, transparent); color: var(--text-2); font-size: 0.7812rem; font-weight: 600; text-align: center; padding: 0.625rem; } body.skill-dragging .pinned-dropzone { display: flex; } .pinned-dropzone.over { border-color: var(--gold, #c89a3a); background: color-mix(in srgb, var(--gold, #c89a3a) 14%, transparent); } .chat-col { position: relative; } @media (max-width: 1100px) { .pinned-dock, .pinned-dropzone { display: none !important; } } /* ---------- §H.29 release notes pill ---------- */ .release-pill { position: fixed; bottom: 0.875rem; right: 0.875rem; z-index: 80; padding: 0.375rem 0.8125rem; border-radius: 62.4375rem; border: 1px solid var(--hairline); background: var(--surface); color: var(--text-2); font-size: 0.7188rem; font-weight: 700; cursor: pointer; box-shadow: 0 0.375rem 1.25rem rgba(0,0,0,0.16); } .release-pill:hover { color: var(--text); border-color: var(--gold-edge, rgba(200,154,58,0.4)); } /* §pill-clearance (0720, Tom): at in-between widths (above the 760px mobile hide-all, below comfortable desktop) the wide "Ask about MegaMind" labeled bubble collides with the release pill. Go icon-only and pin the bubble on its own lane clearly above the pill; the panel keeps its own anchor. */ @media (max-width: 1180px) { .help-bubble { bottom: 3.75rem !important; right: 0.875rem !important; } .help-bubble-btn .hb-label { display: none; } .help-bubble-btn { padding: 0.4375rem; } } .release-panel { position: fixed; bottom: 3.25rem; right: 0.875rem; z-index: 81; width: min(26.25rem, 92vw); max-height: min(58vh, 35rem); display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 0.875rem; background: var(--surface); box-shadow: 0 1.5rem 4.375rem rgba(0,0,0,0.3); opacity: 0; transform: translateY(0.5rem); transition: opacity 0.18s ease, transform 0.18s ease; overflow: hidden; } .release-panel.show { opacity: 1; transform: none; } .rel-h { padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 800; border-bottom: 1px solid var(--hairline); } .rel-body { overflow-y: auto; padding: 0.375rem 1rem 0.875rem; } .rel-month summary { cursor: pointer; padding: 0.5625rem 0; font-size: 0.7812rem; font-weight: 700; color: var(--text); } .rel-ver { padding: 0.25rem 0 0.625rem 0.75rem; border-left: 2px solid var(--hairline); margin: 0 0 0.5rem 0.25rem; } .rel-ver-h { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.75rem; } .rel-ver-h span { color: var(--text-3); font-size: 0.6562rem; } .rel-ver-h em { color: var(--text-2); font-style: normal; } .rel-ver ul { margin: 0.375rem 0 0; padding-left: 1.125rem; font-size: 0.7375rem; color: var(--text-2); } .rel-ver li { margin-bottom: 3px; } /* ---------- §H.26 maintenance + broadcast ---------- */ .maint-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 16, 0.82); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); } .maint-card { text-align: center; max-width: 26.25rem; padding: 1.875rem; color: #f3f4f8; } .maint-card img { width: 6.875rem; height: 6.875rem; object-fit: contain; border-radius: 1.375rem; margin-bottom: 1rem; } .maint-card h2 { margin: 0 0 0.5rem; font-size: 1.375rem; } .maint-card p { margin: 0; font-size: 0.875rem; color: #c4c9d6; } /* §broadcast (0723): a GLOWING banner off to the side (was a full-width top bar) — ad-hoc admin notice pushed live to every user; pulses so it draws the eye. */ .broadcast-bar { position: fixed; top: 4.75rem; right: 1rem; left: auto; z-index: 200; display: flex; align-items: center; gap: 0.6rem; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.7rem 2.1rem 0.7rem 0.95rem; border-radius: 0.85rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.38; color: #fff; background: linear-gradient(120deg, #2b6cb0, #4FA8FF); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 10px 30px rgba(0,0,0,0.28), 0 0 18px 2px rgba(79,168,255,0.55); animation: bcastGlow 2.2s ease-in-out infinite, bcastIn 0.35s cubic-bezier(.2,.9,.25,1); } .broadcast-bar::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px 2px currentColor; flex: none; opacity: 0.95; animation: bcastDot 1.2s ease-in-out infinite; } .broadcast-bar[data-type="warning"], .broadcast-bar[data-type="maintenance"] { background: linear-gradient(120deg, #b7791f, #ecc94b); color: #1a1a14; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 10px 30px rgba(0,0,0,0.28), 0 0 18px 2px rgba(236,201,75,0.6); } .broadcast-bar[data-type="error"] { background: linear-gradient(120deg, #9b2c2c, #e53e3e); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 10px 30px rgba(0,0,0,0.3), 0 0 20px 3px rgba(229,62,62,0.65); } .broadcast-bar[data-type="success"] { background: linear-gradient(120deg, #276749, #48bb78); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 10px 30px rgba(0,0,0,0.28), 0 0 18px 2px rgba(72,187,120,0.6); } .broadcast-bar .drawer-close { position: absolute; top: 0.3rem; right: 0.45rem; color: inherit; opacity: 0.8; } @keyframes bcastGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.13); } } @keyframes bcastDot { 0%,100% { opacity: 0.95; } 50% { opacity: 0.4; } } @keyframes bcastIn { from { opacity: 0; transform: translateX(0.75rem); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 640px) { .broadcast-bar { top: auto; bottom: 5.75rem; right: 0.5rem; left: 0.5rem; max-width: none; } } @media (prefers-reduced-motion: reduce) { .broadcast-bar, .broadcast-bar::before { animation: bcastIn 0.2s ease both; } } /* ---------- §H.30 image shimmer + blur-up ---------- */ .gen-shimmer { position: relative; width: 100%; max-width: 26.25rem; height: 12.5rem; margin-top: 0.625rem; border-radius: 0.75rem; overflow: hidden; background: linear-gradient(120deg, var(--surface-2) 30%, color-mix(in srgb, var(--bot, #888) 14%, var(--surface-2)) 50%, var(--surface-2) 70%); background-size: 220% 100%; animation: mmShimmer 1.6s ease-in-out infinite; } .gen-shimmer span { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--bot-2, #aaa) 18%, transparent), transparent 60%); animation: mmShimmerDrift 3.4s ease-in-out infinite alternate; } @keyframes mmShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @keyframes mmShimmerDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(14%, 8%) scale(1.15); } } img.gen-img.blur-up { transition: filter 0.5s ease; } @media (prefers-reduced-motion: reduce) { .gen-shimmer, .gen-shimmer span { animation: none; } } /* ---------- §H.38 clickable attachment chips ---------- */ .attach-chip.clickable { cursor: pointer; } .attach-chip.clickable:hover { border-color: var(--bot-edge); } /* ---------- §H.46 usage per-bot rows ---------- */ .usage-bots-h { margin: 1rem 0 0.5rem; font-size: 0.7188rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); } .usage-bots { display: grid; gap: 0.375rem; } .usage-bot-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.6875rem; border: 1px solid var(--hairline); border-radius: 0.625rem; font-size: 0.7812rem; } .usage-bot-row img { width: 1.625rem; height: 1.625rem; object-fit: contain; } .ub-name { font-weight: 700; color: var(--text); } .ub-stats { margin-left: auto; color: var(--text-2); font-size: 0.75rem; } /* ============================================================================ v2.8 (ADDENDUM 12) — tutorial overhaul, demo context, What's New ============================================================================ */ /* §E.1: visible TUTORIAL flag on the tour card */ .tour-flag { position: absolute; top: -0.6875rem; left: 1.375rem; padding: 3px 0.75rem; border-radius: 62.4375rem; background: var(--gold, #c89a3a); color: #fff; font-size: 0.6562rem; font-weight: 800; letter-spacing: 0.22em; box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.25); z-index: 2; } /* §E.4: skip-section button sits with Back/Next */ .tour-skip-section { font-size: 0.75rem; opacity: 0.85; } /* §E.5: canned demo conversation — hide the real messages, keep their listeners */ .messages.tour-demo-ctx > :not(#tourDemoConvo) { display: none !important; } #tourDemoConvo .msg-actions { opacity: 1; } /* §D / shortcuts demo: composer flash when Ctrl+/ lands */ .tour-kbd-flash { box-shadow: 0 0 0 3px var(--gold-edge, rgba(200, 154, 58, 0.4)), 0 0.75rem 2.5rem rgba(0, 0, 0, 0.18) !important; transition: box-shadow 0.25s ease; } /* §E.3: section index in the Show Me How modal */ .tour-sec { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; width: 100%; margin-top: 0.625rem; padding: 0.5625rem 0.75rem; border: 1px solid var(--gold-edge, rgba(200, 154, 58, 0.35)); border-radius: 0.625rem; background: var(--gold-soft, rgba(200, 154, 58, 0.08)); cursor: pointer; text-align: left; } .tour-sec:hover { border-color: var(--gold, #c89a3a); } .tour-sec .ts-name { font-weight: 800; font-size: 0.8438rem; color: var(--text); } .tour-sec .ts-count { font-size: 0.6875rem; color: var(--text-3); white-space: nowrap; } .tour-item.sec-sub { margin-left: 0.875rem; width: calc(100% - 0.875rem); } /* keycaps */ .dm-keys { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 0 0.375rem; } .dm-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 2.875rem; height: 2.875rem; padding: 0 0.75rem; border-radius: 0.5625rem; border: 1px solid var(--hairline); border-bottom-width: 3px; background: var(--surface); font-family: inherit; font-size: 1.1875rem; font-weight: 800; color: var(--text); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); } .dm-keys .dm-plus { font-size: 1rem; color: var(--text-3); font-weight: 700; } .dm-shortcut { text-align: center; } /* prompt-assistant demo */ .dm-suggest { display: flex; flex-direction: column; gap: 0.5rem; } .dm-fakeinput.typed { min-height: 1.875rem; } .dm-suggestbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.625rem; border-radius: 0.5625rem; border: 1px dashed var(--gold-edge, rgba(200, 154, 58, 0.4)); background: var(--gold-soft, rgba(200, 154, 58, 0.07)); font-size: 0.75rem; color: var(--text-2); } .dm-suggestbar .dm-btn { margin-left: auto; flex: none; } /* Show Me How demo index */ .dm-index { display: flex; flex-direction: column; gap: 0.375rem; } .dm-ix-h { font-weight: 800; font-size: 0.8125rem; color: var(--text); margin-bottom: 2px; } .dm-ix-sec { display: flex; align-items: center; justify-content: space-between; padding: 0.4375rem 0.625rem; border: 1px solid var(--hairline); border-radius: 0.5625rem; font-size: 0.7812rem; color: var(--text); background: var(--surface); } .dm-ix-sec i { font-style: normal; font-size: 0.6875rem; color: var(--text-3); } .dm-ix-sec.sel { border-color: var(--gold, #c89a3a); background: var(--gold-soft, rgba(200, 154, 58, 0.08)); } /* Learn page captures + canned playing-video frame */ .dm-learn { display: flex; } .dm-learn .dm-shot { width: 100%; border-radius: 0.625rem; border: 1px solid var(--hairline); box-shadow: 0 0.5rem 1.625rem rgba(0, 0, 0, 0.18); } .dm-player { position: relative; border-radius: 0.625rem; overflow: hidden; border: 1px solid var(--hairline); background: #000; } .dm-player > img { width: 100%; display: block; opacity: 0.55; } .dm-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .dm-playbtn { width: 3.375rem; height: 3.375rem; border-radius: 50%; border: none; cursor: default; background: rgba(255, 255, 255, 0.92); color: #0B1B33; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0.5rem 1.625rem rgba(0, 0, 0, 0.45); } .dm-playbtn svg { width: 1.625rem; height: 1.625rem; } .dm-play-overlay.playing .dm-playbtn { opacity: 0; transition: opacity 0.4s ease; } .dm-player-bar { position: absolute; left: 0; right: 0; bottom: 1.625rem; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.75rem; } .dm-pb-time { font-size: 0.6562rem; color: #fff; text-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.7); } .dm-pb-track { flex: 1; height: 0.25rem; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; } .dm-pb-track i { display: block; height: 100%; width: 2%; background: var(--gold, #c89a3a); transition: width 1.6s linear; } .dm-player-title { position: absolute; left: 0; right: 0; bottom: 0.25rem; padding: 0 0.75rem; font-size: 0.7188rem; font-weight: 700; color: #fff; text-shadow: 0 1px 0.3125rem rgba(0, 0, 0, 0.8); } /* canned browser window (IT support demo) */ .dm-browser { border: 1px solid var(--hairline); border-radius: 0.625rem; overflow: hidden; background: var(--surface); } .dm-tabbar { display: flex; gap: 0.25rem; padding: 0.375rem 0.5rem 0; background: var(--bg-2, rgba(0, 0, 0, 0.04)); } .dm-tab { padding: 0.3125rem 0.75rem; border-radius: 0.5rem 0.5rem 0 0; font-size: 0.6875rem; color: var(--text-3); background: transparent; } .dm-tab.on { background: var(--surface); color: var(--text); font-weight: 700; } .dm-urlbar { padding: 0.375rem 0.75rem; font-size: 0.6875rem; color: var(--text-2); border-bottom: 1px solid var(--hairline); background: var(--surface); } .dm-helpdesk { padding: 0.75rem; } .dm-hd-title { font-weight: 800; font-size: 0.875rem; color: var(--text); margin-bottom: 0.5rem; } .dm-hd-row { padding: 0.5rem 0.625rem; margin-top: 0.375rem; border: 1px solid var(--hairline); border-radius: 0.5625rem; font-size: 0.7812rem; color: var(--text); cursor: default; } .dm-hd-row.sel { border-color: var(--gold, #c89a3a); background: var(--gold-soft, rgba(200, 154, 58, 0.08)); } /* sharing demo extras */ .dm-share-note { font-size: 0.75rem; color: var(--text-2); padding: 0.375rem 2px; } .dm-collab-badge { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.3125rem 0.6875rem; border-radius: 62.4375rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; color: #1d8a4e; border: 1px solid rgba(29, 138, 78, 0.4); background: rgba(29, 138, 78, 0.08); } .dm-collab-badge .dm-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #1d8a4e; animation: dmPulse 1.4s ease-in-out infinite; } @keyframes dmPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .dm-peoplerow { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; } .dm-peoplerow .dm-fakeinput { flex: 1; } .dm-person { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5625rem; margin-top: 0.375rem; border: 1px solid var(--hairline); border-radius: 0.5625rem; font-size: 0.7812rem; color: var(--text); transition: opacity 0.4s ease, transform 0.4s ease; } .dm-person.gone { opacity: 0; transform: translateX(0.875rem); } .dm-pava { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--gold-soft, rgba(200, 154, 58, 0.15)); color: var(--gold, #c89a3a); font-size: 0.5938rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .dm-px { margin-left: auto; border: none; background: none; color: var(--text-3); font-size: 0.9375rem; cursor: default; } /* copy / clipboard demo */ .dm-clip { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } /* conference demo */ .dm-conf { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.6875rem; border-radius: 62.4375rem; border: 1px dashed var(--gold-edge, rgba(200, 154, 58, 0.45)); font-size: 0.7188rem; color: var(--text-2); margin: 0.25rem 0; } .dm-confdot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--gold, #c89a3a); animation: dmPulse 1.2s ease-in-out infinite; } .dm-confnote { font-size: 0.6875rem; color: var(--text-3); padding-top: 0.25rem; } /* doc-gen demo */ .dm-genjob { display: flex; align-items: center; gap: 0.5625rem; padding: 0.5625rem 0.75rem; border: 1px solid var(--hairline); border-radius: 0.625rem; font-size: 0.7812rem; color: var(--text-2); margin: 0.375rem 0; } .dm-genspin { width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 2px solid var(--gold-soft, rgba(200, 154, 58, 0.25)); border-top-color: var(--gold, #c89a3a); animation: dmSpin 0.9s linear infinite; } @keyframes dmSpin { to { transform: rotate(360deg); } } .dm-artdone { display: flex; align-items: center; gap: 0.5625rem; padding: 0.5625rem 0.75rem; border: 1px solid var(--gold-edge, rgba(200, 154, 58, 0.4)); border-radius: 0.625rem; font-size: 0.7812rem; color: var(--text); background: var(--gold-soft, rgba(200, 154, 58, 0.06)); margin: 0.375rem 0; } .dm-artdone .dm-btn { margin-left: auto; } /* mini specialist carousel demo */ .dm-caro { overflow: hidden; text-align: center; padding: 0.5rem 0 0.25rem; } .dm-caro-track { display: inline-flex; align-items: center; gap: 0.875rem; transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.26, 1); } .dm-caro-track img { width: 3.5rem; height: 3.5rem; object-fit: contain; opacity: 0.45; filter: saturate(0.6); transition: all 0.6s ease; } .dm-caro-track img.big { width: 5.75rem; height: 5.75rem; opacity: 1; filter: drop-shadow(0 0.375rem 0.875rem rgba(0, 0, 0, 0.3)); } .dm-caro-name { margin-top: 0.375rem; font-size: 0.7812rem; font-weight: 800; color: var(--text); } /* skills screen demo */ .dm-skpage { display: flex; flex-direction: column; gap: 0.375rem; } .dm-skgroup { font-size: 0.6562rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 0.25rem; } .dm-skcard { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.6875rem; border: 1px solid var(--hairline); border-radius: 0.625rem; font-size: 0.75rem; color: var(--text-2); } .dm-skcard b { color: var(--text); font-size: 0.7812rem; display: inline-flex; align-items: center; gap: 0.3125rem; } .dm-skcard b svg { width: 0.75rem; height: 0.75rem; color: var(--text-3); } .dm-skcard span { flex: 1; } .dm-skcard .dm-btn { flex: none; } .dm-skcard.locked { opacity: 0.85; } /* memory gauge demo */ .dm-gaugewrap { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.5rem 2px; } .dm-gauge { height: 0.75rem; border-radius: 0.375rem; background: var(--hairline); overflow: hidden; } .dm-gauge i { display: block; height: 100%; width: 8%; border-radius: 0.375rem; background: linear-gradient(90deg, #8a6db8, #6f7fd0, #34e6c4); transition: width 1.6s cubic-bezier(0.22, 0.8, 0.26, 1); } .dm-gaugelbl b { display: block; font-size: 0.8125rem; color: var(--text); } .dm-gaugelbl span { font-size: 0.7188rem; color: var(--text-3); } /* memory check-in demo */ .dm-checkin .dm-chiprow { margin-top: 0.5rem; } .dm-chip.sel { border-color: var(--gold, #c89a3a); background: var(--gold-soft, rgba(200, 154, 58, 0.1)); color: var(--text); } /* account menu / usage demo */ .dm-menu { display: flex; flex-direction: column; max-width: 13.75rem; } .dm-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .dm-stat { padding: 0.625rem; border: 1px solid var(--hairline); border-radius: 0.625rem; text-align: center; } .dm-stat b { display: block; font-size: 1.1875rem; color: var(--text); } .dm-stat span { font-size: 0.6562rem; color: var(--text-3); } /* What's New — modal list + demo list share wn-item */ .whats-new-list { max-height: min(58vh, 28.75rem); overflow: auto; padding: 0.25rem 1.125rem 1.125rem; } .dm-wn { display: flex; flex-direction: column; } .wn-item { display: flex; gap: 0.75rem; padding: 0.625rem 2px; border-bottom: 1px solid var(--hairline); } .wn-item:last-child { border-bottom: none; } .wn-date { flex: none; width: 5.25rem; font-size: 0.6875rem; color: var(--text-3); padding-top: 2px; } .wn-title { font-size: 0.8438rem; font-weight: 800; color: var(--text); } .wn-body { font-size: 0.7812rem; color: var(--text-2); line-height: 1.5; margin-top: 2px; } .wn-empty { padding: 1.125rem 0.25rem; font-size: 0.8125rem; color: var(--text-3); } /* ========================================================================== v2.9 (ADDENDUM 13) — reasoning dock, nebula status, portals, V2 badge, sources chips, release-notes-by-date, bot cards, use-case popover ========================================================================== */ /* ---------- §C/§I in-bubble nebula + thin status line ---------- */ .nebula-mini { position: relative; width: 1.125rem; height: 1.125rem; flex-shrink: 0; display: inline-block; } .nebula-mini span { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; } .nebula-mini span:nth-child(1) { background: radial-gradient(circle at 32% 36%, var(--bot-2), transparent 68%); animation: neb-a 2.6s ease-in-out infinite; } .nebula-mini span:nth-child(2) { background: radial-gradient(circle at 66% 60%, var(--bot), transparent 66%); animation: neb-b 3.4s ease-in-out infinite; } .nebula-mini span:nth-child(3) { background: radial-gradient(circle at 50% 45%, #34e6c4, transparent 58%); opacity: 0.75; animation: neb-c 2.1s ease-in-out infinite; } [data-theme="dark"] .nebula-mini span { filter: brightness(1.45) saturate(1.2); } @keyframes neb-a { 0%,100% { transform: scale(0.82) translate(0,0); } 50% { transform: scale(1.12) translate(1.5px,-1px); } } @keyframes neb-b { 0%,100% { transform: scale(1.05) translate(0,0); } 50% { transform: scale(0.8) translate(-1.5px,1px); } } @keyframes neb-c { 0%,100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.9; } } .live-strip { display: inline-flex; align-items: center; gap: 0.5625rem; padding: 0.375rem 0.8125rem 0.375rem 0.5625rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: 6.25rem; margin-top: 2px; box-shadow: none; } .live-strip .thinking-text { font-size: 0.75rem; color: var(--text-2); } @media (prefers-reduced-motion: reduce) { .nebula-mini span { animation: none !important; } } /* ---------- ADDENDUM-16 §C: the ORIGINAL reasoning panel look (v2.3-era bundle) restored onto the v2.9.1 in-chat area — dashed border, surface-2 background, mono uppercase purple header with the ◐ mark, serif italic narration, a fixed-height window the text SCROLLS THROUGH (soft fade at the top). ---------- */ .reasoning { margin: 0.25rem 0 0.625rem; border: 1px dashed var(--hairline-strong); border-radius: 0.625rem; background: var(--surface-2); overflow: hidden; } .reasoning .rs-head { display: flex; align-items: center; gap: 0.375rem; width: 100%; padding: 0.4375rem 0.75rem; border: none; background: transparent; color: var(--purple); font-family: var(--font-mono); font-size: 0.5938rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; text-align: left; } .reasoning .rs-head::before { content: "◐"; font-size: 0.6875rem; line-height: 1; display: inline-block; } .reasoning.live .rs-head::before { animation: spin 1.8s linear infinite; } .reasoning .rs-head:hover { background: color-mix(in srgb, var(--purple) 5%, transparent); } .reasoning .rs-chev { display: none; } .reasoning.open .rs-head { border-bottom: 1px dashed var(--hairline); } .reasoning .rs-title { font: inherit; color: var(--purple); } .reasoning .rs-sub { margin-left: auto; font-family: var(--font-mono); font-size: 0.5938rem; letter-spacing: 0.08em; color: var(--text-3); white-space: nowrap; text-transform: none; } .reasoning .rs-body { display: none; padding: 0.625rem 0.875rem; font-family: var(--font-serif); font-style: italic; font-size: 0.8438rem; color: var(--text-2); line-height: 1.6; max-height: 13.75rem; overflow-y: auto; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.375rem); mask-image: linear-gradient(180deg, transparent 0, #000 1.375rem); } .reasoning.open .rs-body { display: block; } /* v3.2 §BB.37: the live reasoning box starts SMALL and grows with its content, up to the same max height — no fixed-height empty box on turn start. */ .reasoning.live.open .rs-body { min-height: 1.5rem; max-height: 13.75rem; height: auto; transition: max-height 0.25s ease; } .rs-plan { font: inherit; line-height: 1.6; color: var(--text); padding: 2px 0 0.5rem; border-bottom: 1px dashed var(--hairline); margin-bottom: 0.5rem; white-space: pre-wrap; } .rs-round { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.375rem 0; } .rs-round-text { flex: 1; min-width: 0; font: inherit; line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; } .rs-round .rs-ms, .rs-info .rs-ms, .rs-pill .rs-ms { font-family: var(--font-mono); font-style: normal; font-size: 0.625rem; color: var(--text-3); flex-shrink: 0; padding-top: 2px; } /* §C.4: small nebula working indicator under the narration (the old busy cursor is gone) */ .rs-working { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0 0.125rem; } .rs-working .rs-working-note { font-family: var(--font-mono); font-style: normal; font-size: 0.5938rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .rs-toolwrap { padding: 0.25rem 0; } .rs-pill { gap: 0.4375rem; } .rs-pill.has-q { cursor: pointer; } .rs-query { margin: 0.375rem 0 2px 0.375rem; padding: 0.4375rem 0.625rem; border-left: 2px solid var(--bot-edge); background: var(--surface-2); border-radius: 0 0.5rem 0.5rem 0; font-family: var(--font-mono); font-style: normal; font-size: 0.6875rem; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; word-break: break-word; } /* §C.3: tool pills live BELOW the reasoning box — stable keyed rows, never flashing */ .tools-slot .tool-pills { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0 0 0.625rem; } .tools-slot .tool-chip { animation: none; } .tools-slot .tool-chip .tc-count { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-3); } .tools-slot .rs-query { margin-left: 0.75rem; } .rs-info { display: flex; align-items: baseline; gap: 0.5625rem; padding: 0.25rem 0; font-size: 0.75rem; color: var(--text-3); } .rs-info .rs-label { flex: 1; min-width: 0; } /* §R: self-heal — subtle amber pill for error→recovery transitions */ .rs-heal { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.3125rem 0; padding: 0.3125rem 0.75rem 0.3125rem 0.5625rem; border: 1px solid rgba(196,148,58,0.45); background: rgba(196,148,58,0.10); border-radius: 6.25rem; font-size: 0.7188rem; color: #9a7223; } [data-theme="dark"] .rs-heal { color: #e3b65e; border-color: rgba(227,182,94,0.4); background: rgba(227,182,94,0.10); } .rs-heal-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #c4943a; animation: orb-pulse 1.6s ease-in-out infinite; flex-shrink: 0; } /* ---------- ADDENDUM-16 §M: artifacts library same-window overlay ---------- */ .artifacts-overlay { position: fixed; inset: 0; z-index: 240; display: flex; flex-direction: column; background: var(--bg); opacity: 0; transition: opacity 0.22s ease; } .artifacts-overlay.show { opacity: 1; } .artifacts-overlay-head { display: flex; align-items: center; padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--hairline); flex-shrink: 0; background: var(--surface); } .artifacts-overlay-frame { flex: 1; width: 100%; border: none; background: var(--bg); } /* ---------- ADDENDUM-16 §F.4: Live Collab Sessions tab ---------- */ .nav-collabs { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.5rem; } .collab-row { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: 0.625rem; border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.3s ease; } .collab-row .collab-glow { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-3); flex-shrink: 0; } .collab-row.live { border-color: rgba(52,230,196,0.4); box-shadow: 0 0 0.75rem rgba(52,230,196,0.18); } .collab-row.live .collab-glow { background: #34e6c4; box-shadow: 0 0 0.5rem rgba(52,230,196,0.9); animation: live-pulse 2.2s ease-in-out infinite; } .collab-row.flash { animation: collab-flash 0.9s ease 3; } @keyframes collab-flash { 0%,100% { box-shadow: 0 0 0.75rem rgba(52,230,196,0.18); } 50% { box-shadow: 0 0 1.25rem rgba(52,230,196,0.65); border-color: rgba(52,230,196,0.9); } } .collab-row.ended { opacity: 0.55; filter: grayscale(0.7); } .collab-meta { flex: 1; min-width: 0; } .collab-title { font-size: 0.75rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collab-sub { font-size: 0.625rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collab-readd-dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--gold); color: #fff; font-size: 0.5938rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .collab-row.flash, .collab-row.live .collab-glow { animation: none; } } /* ---------- §F.3: collab manage modal ---------- */ .collab-manage-card { width: min(30rem, 92vw); } .collab-manage-sub { font-size: 0.75rem; color: var(--text-2); margin: 0.25rem 0 0.75rem; } .collab-members { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; } .collab-member { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.625rem; border: 1px solid var(--hairline); border-radius: 0.625rem; background: var(--surface-2); } .collab-member .cm-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #34e6c4; flex-shrink: 0; } .collab-member.removed .cm-dot { background: var(--text-3); } .collab-member.removed { opacity: 0.6; } .collab-member .cm-email { flex: 1; min-width: 0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collab-member .cm-tag { font-family: var(--font-mono); font-size: 0.5938rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); } .collab-readds { margin-bottom: 0.75rem; } .collab-readd-h { font-family: var(--font-mono); font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.375rem; } .collab-member.readd { border-color: var(--gold-edge); } .collab-add-row { display: flex; gap: 0.5rem; margin-bottom: 0.875rem; } .collab-add-row .form-input { flex: 1; } .collab-manage-actions { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); } .collab-manage-primary { display: flex; gap: 0.5rem; align-items: center; } .collab-manage-actions .gen-btn { padding: 0.45rem 0.9rem; } .gen-btn.danger { border-color: rgba(184,116,106,0.5); color: #b8746a; } /* ---------- §I.2 sources block — clean stacked chips ---------- */ .sources-block { margin: 0.75rem 0 0.25rem; padding: 0.625rem 0.75rem; border: 1px solid var(--hairline); border-radius: 0.75rem; background: var(--surface); } .sources-label { display: block; font-family: var(--font-mono); font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.5rem; } .sources-chips { display: flex; flex-direction: column; gap: 0.375rem; align-items: flex-start; } .sources-chips .art-chip { margin: 0; text-decoration: none; color: inherit; } .src-chip:hover { border-color: var(--bot-edge); } /* ---------- §F SAX portals dropdown + overlay ---------- */ .portal-wrap { position: relative; display: inline-flex; } #portalBtn .caret { width: 0.75rem; height: 0.75rem; margin-left: -1px; transition: transform 0.16s ease; } #portalBtn.open .caret { transform: rotate(180deg); } .portal-menu { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 140; min-width: 12.25rem; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 0.75rem; box-shadow: 0 1.125rem 3.125rem rgba(0,0,0,0.22); padding: 0.375rem; display: flex; flex-direction: column; } .portal-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.75rem; border: none; background: none; border-radius: 0.5rem; font: inherit; font-size: 0.7812rem; color: var(--text-2); cursor: pointer; text-align: left; } .portal-item:hover { background: var(--surface-2); color: var(--text); } .portal-item svg { width: 0.8125rem; height: 0.8125rem; margin-left: auto; color: var(--text-3); } .portal-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-2)); flex-shrink: 0; } .portal-overlay { position: fixed; inset: 0; z-index: 230; display: flex; align-items: center; justify-content: center; background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); opacity: 0; transition: opacity 0.2s ease; } .portal-overlay.show { opacity: 1; } .portal-card { width: min(80rem, 94vw); height: min(53.75rem, 90vh); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 1rem; overflow: hidden; box-shadow: 0 2.5rem 7.5rem rgba(0,0,0,0.45); transform: translateY(0.625rem) scale(0.985); transition: transform 0.22s cubic-bezier(.2,.8,.2,1); } .portal-overlay.show .portal-card { transform: none; } .portal-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem 0.625rem 1.125rem; border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .portal-title { font-size: 0.875rem; font-weight: 800; margin-right: auto; } .portal-frame { flex: 1; border: none; width: 100%; background: #fff; } /* ---------- §H.1 anchored use-case popover (under the thumbs-up) ---------- */ .msg-actions { position: relative; } .uc-pop { position: absolute; top: calc(100% + 0.5rem); z-index: 60; width: min(18.75rem, 78vw); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 0.8125rem; padding: 0.75rem 0.875rem; box-shadow: 0 1rem 3rem rgba(0,0,0,0.2); opacity: 0; transform: translateY(-0.25rem); transition: opacity 0.16s ease, transform 0.16s ease; } .uc-pop::before { content: ''; position: absolute; top: -0.3125rem; left: 1.625rem; width: 0.5625rem; height: 0.5625rem; background: var(--surface); border-left: 1px solid var(--hairline-strong); border-top: 1px solid var(--hairline-strong); transform: rotate(45deg); } .uc-pop.show { opacity: 1; transform: none; } .uc-pop-text { font-size: 0.7812rem; color: var(--text-2); line-height: 1.5; margin-bottom: 0.625rem; } .uc-pop-acts { display: flex; gap: 0.5rem; } /* ---------- §E release notes by date ---------- */ .rel-h { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0.625rem; font-size: 0.8125rem; font-weight: 800; border-bottom: 1px solid var(--hairline); } .rel-day { padding: 0.25rem 0 2px; } .rel-day-h { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); padding: 0.625rem 0 0.25rem; } .rel-day.older .rel-day-h { color: var(--text-3); } .rel-ver ul { margin: 0.25rem 0 0; padding-left: 1.125rem; } .rel-ver li { font-size: 0.7812rem; color: var(--text-2); line-height: 1.55; margin: 3px 0; } /* ---------- §J splash V2 badge (animated, reduced-motion safe) ---------- */ .mm-v2-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 0.625rem; padding: 2px 0.5625rem 3px; border-radius: 0.5rem; vertical-align: 2px; background: linear-gradient(120deg, #16315e, #1d4f8a 45%, #0e2547); border: 1px solid rgba(91, 240, 206, 0.45); box-shadow: 0 0 1.125rem rgba(43, 167, 201, 0.45), 0 0 2px rgba(91, 240, 206, 0.6) inset; overflow: hidden; } .mm-v2-text { font-family: 'Sora', 'Inter', sans-serif; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; background: linear-gradient(105deg, #9df7e2 8%, #5bf0ce 36%, #e8f6ff 52%, #2ba7c9 78%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: v2-shift 5.5s ease-in-out infinite alternate; } .mm-v2-sheen { position: absolute; top: -40%; bottom: -40%; width: 36%; left: -50%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-18deg); animation: v2-sheen 4.4s ease-in-out infinite; } .mm-v2-spark { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #9df7e2; opacity: 0; box-shadow: 0 0 0.375rem 1px rgba(91,240,206,0.8); } .mm-v2-spark.s1 { top: 18%; left: 12%; animation: v2-spark 3.8s ease-in-out infinite 0.4s; } .mm-v2-spark.s2 { top: 64%; left: 78%; animation: v2-spark 4.6s ease-in-out infinite 1.6s; } .mm-v2-spark.s3 { top: 36%; left: 52%; animation: v2-spark 5.2s ease-in-out infinite 2.7s; } @keyframes v2-shift { 0% { background-position: 0% center; } 100% { background-position: 100% center; } } @keyframes v2-sheen { 0%, 55% { left: -50%; } 85%, 100% { left: 120%; } } @keyframes v2-spark { 0%, 88%, 100% { opacity: 0; transform: scale(0.6); } 92% { opacity: 1; transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { .mm-v2-text { animation: none; } .mm-v2-sheen, .mm-v2-spark { display: none; } } /* ---------- §K.2 bot strip — larger portraits, organized grid ---------- v2.9.1 §L.14 fix-forward: centered wrapping flex (NOT auto-fit grid) so a partial last row centers instead of left-aligning. */ .bot-strip { margin-top: 1.875rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 45rem; margin-left: auto; margin-right: auto; } .bot-strip .bot-card { flex: 0 0 6.875rem; } .bot-card { display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; padding: 0.875rem 0.5rem 0.75rem; border: 1px solid var(--hairline); border-radius: 1rem; background: var(--surface); font: inherit; cursor: pointer; color: var(--text-2); transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .bot-card:hover { transform: translateY(-3px); border-color: var(--bb, var(--gold)); box-shadow: 0 0.75rem 1.875rem rgba(0,0,0,0.10); } .bot-card.active { border-color: var(--bb, var(--gold)); background: color-mix(in srgb, var(--bb, #c89a3a) 7%, var(--surface)); color: var(--text); } .bc-portrait { width: 4rem; height: 4rem; border-radius: 1.125rem; overflow: hidden; background: color-mix(in srgb, var(--bb, #c89a3a) 12%, var(--surface-2)); display: flex; align-items: center; justify-content: center; } .bc-portrait img { width: 100%; height: 100%; object-fit: cover; } .bot-card.active .bc-portrait { box-shadow: 0 0 0 2px var(--bb, var(--gold)); } .bc-name { font-size: 0.7812rem; font-weight: 700; } .bc-role { font-family: var(--font-mono); font-size: 0.5312rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; text-align: center; line-height: 1.35; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 760px) { .bot-strip { gap: 0.5rem; } .bot-strip .bot-card { flex: 0 0 5.75rem; } .bc-portrait { width: 3.25rem; height: 3.25rem; } } /* ========================================================================== WAVE 7 (ADDENDUM-15 go-live) — new components ========================================================================== */ /* C.1: thumbs-down inline "what was off" popover */ .fb-pop { width: min(26rem, 86vw); } .fb-pop .fb-pop-row { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.4rem; } .fb-pop .fb-pop-input { flex: 1; min-width: 0; font-size: 0.8125rem; } .fb-pop .fb-pop-skip { height: 1.6rem; font-size: 0.7rem; padding: 0 0.6rem; } /* C.3: collapsible Specialists section */ .nav-label-toggle { background: none; border: none; width: 100%; text-align: left; cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } .nav-label-toggle:hover { color: var(--text-2); } .nav-label-toggle .sec-chev { width: 0.8rem; height: 0.8rem; transition: transform 0.18s; } .nav-label-toggle.collapsed .sec-chev { transform: rotate(-90deg); } /* C.4: Recently deleted */ .nav-deleted-link { display: flex; align-items: center; gap: 0.45rem; margin: 0.3rem 0 0; padding: 0.35rem 1rem; width: 100%; background: none; border: none; color: var(--text-3); font: inherit; font-size: 0.7rem; cursor: pointer; } .nav-deleted-link:hover { color: var(--text-2); background: var(--gold-soft); } .nav-deleted-link svg { width: 0.85rem; height: 0.85rem; } .deleted-card { width: min(33rem, 94vw); } .deleted-sub { font-size: 0.78rem; color: var(--text-2); padding: 0 1.1rem 0.6rem; } .deleted-list { max-height: 55vh; overflow-y: auto; padding: 0 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .deleted-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); } .deleted-row img { width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover; } .deleted-row .t { flex: 1; min-width: 0; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deleted-row .ago { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-3); } .deleted-row .deleted-restore { height: 1.7rem; font-size: 0.72rem; padding: 0 0.7rem; } /* C.5: workflow run stats + edit/delete */ .flow-stats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.45rem 0 0; } .flow-stat { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 0.9rem; padding: 0.12rem 0.5rem; } .flow-stat.good { color: var(--green); border-color: rgba(94,138,78,0.35); } .flow-stat.bad { color: var(--rose); border-color: rgba(184,116,106,0.4); } .flow-edit-btn, .flow-del-btn { background: none; border: 1px solid var(--hairline); border-radius: var(--r-sm); color: var(--text-2); font: inherit; font-size: 0.7rem; padding: 0.2rem 0.55rem; cursor: pointer; } .flow-edit-btn:hover { border-color: var(--gold-edge); color: var(--text); } .flow-del-btn:hover { border-color: rgba(184,116,106,0.55); color: var(--rose); } .flow-edit-stats { margin: 0.6rem 0 0.2rem; border-top: 1px dashed var(--hairline); padding-top: 0.55rem; } .flow-runs-h { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0.5rem 0 0.3rem; } .flow-run-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; color: var(--text-2); padding: 0.18rem 0; } .flow-run-row .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--green); flex-shrink: 0; } .flow-run-row.bad .dot { background: var(--rose); } /* C.6: launched-skill view — larger, full content, no truncation */ #skillInfoModal .modal-card { width: min(50rem, 94vw); max-height: min(85vh, 60rem); display: flex; flex-direction: column; } #skillInfoModal .skill-info-body { overflow-y: auto; flex: 1; min-height: 0; } #skillInfoModal .skill-info-instr { max-height: none; white-space: pre-wrap; overflow: visible; font-size: 0.84rem; line-height: 1.55; } .skill-info-triggers { color: var(--text-2); } /* item 4: share collab invitees + owner shutdown + live-now presence */ .share-collab-panel { padding: 0.5rem 1.25rem 1.15rem; display: flex; flex-direction: column; } .share-collab-h { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.6rem; } .share-collab-panel #shareInvitees { display: block; width: 100%; box-sizing: border-box; margin: 0; } .share-collab-note { font-size: 0.72rem; color: var(--text-3); margin: 0.7rem 0 0; line-height: 1.5; } .share-collab-panel .share-invite-results { margin: 0.7rem 0 0; } .share-collab-panel .skill-actions { margin-top: 1.1rem; } .share-invite-results { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.4rem 0; } .inv-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.76rem; } .inv-row .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex-shrink: 0; } .inv-row.good { color: var(--text-2); } .inv-row.good .dot { background: var(--green); } .inv-row.bad { color: var(--rose); } .inv-row.bad .dot { background: var(--rose); } /* ---------- collab/UI polish (2026-06-17) ---------- */ /* #1 (0711, Tom): the reasoning box spans the FULL chat width, left-aligned. */ .reasoning { max-width: none; margin-left: 0; margin-right: 0; } /* #4: generated-image card never overflows / blows up full-bleed. */ .gen-card { max-width: min(30rem, 100%); } /* 0730: was 30rem — an unqualified cap that beat the <=760px 100% by order */ .gen-card img, .gen-img-slot img { max-width: 100%; } /* #5: header buttons keep their size and never let label text spill outside the button (they wrap to a new row instead of squishing). */ .tbtn { flex-shrink: 0; white-space: nowrap; } @media (max-width: 900px) { .topbar { flex-wrap: wrap; row-gap: 0.4rem; } .crumb { min-width: 0; } } .share-owner-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 1.1rem 1rem; padding: 0.55rem 0.7rem; border: 1px dashed var(--hairline-strong); border-radius: var(--r); } .share-owner-text { flex: 1; font-size: 0.76rem; color: var(--text-2); } .share-shutdown:hover { border-color: rgba(184,116,106,0.55); color: var(--rose); } .live-now-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); background: rgba(94,138,78,0.1); border-radius: 0.9rem; padding: 0.14rem 0.55rem; } .live-now-chip .pulse { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--green); animation: live-pulse 1.6s ease-in-out infinite; } /* doc-gen 2.0: visual-QA chip on done cards */ .gen-qa-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; font-size: 0.7rem; color: var(--green); background: rgba(94,138,78,0.09); border: 1px solid rgba(94,138,78,0.25); border-radius: 0.9rem; padding: 0.18rem 0.6rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gen-qa-chip svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; } .gen-qa-chip.dim { color: var(--text-3); background: var(--surface-2); border-color: var(--hairline); } /* #19 (2026-06-13) IMAGE TOOLS — refine / GIF / copy / export on a finished image */ .img-tools { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; } .img-tools .gen-btn { font-size: 0.7rem; } .img-refine-row { display: flex; gap: 0.375rem; margin-top: 0.45rem; } .img-refine-input { flex: 1; min-width: 0; border: 1px solid var(--hairline-strong); border-radius: 0.5rem; background: var(--surface); color: var(--text); font: inherit; font-size: 0.8125rem; padding: 0.4rem 0.6rem; outline: none; } .img-refine-input:focus { border-color: var(--bot-edge, var(--bot)); box-shadow: 0 0 0 0.18rem var(--bot-soft, rgba(51,42,126,0.15)); } /* ---- WAVE 7 tutorial rework (ADDENDUM-15 §A) ---- */ /* A.9: the dialog sizes to its content and NEVER scrolls */ .tour-card { max-height: calc(100vh - 1.75rem); } .tour-card .tour-body { overflow: visible; min-height: 0; margin-bottom: 0.45rem; } .tour-demo-screen { height: auto; min-height: 6.5rem; max-height: clamp(9rem, 30vh, 16rem); } /* A.2: bullet points under the intro line */ .tour-points { margin: 0 0 0.7rem; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.84rem; line-height: 1.5; color: var(--text-2); } .tour-points li::marker { color: var(--gold); } /* A.19: Skip to… dropdown */ .tour-nav { position: relative; } .tour-skip-menu { position: absolute; bottom: calc(100% + 0.4rem); left: 0; min-width: 13rem; max-height: 50vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 0.75rem; box-shadow: 0 0.9rem 2.4rem rgba(0,0,0,0.3); padding: 0.35rem; display: flex; flex-direction: column; z-index: 5; } .tour-skip-item { background: none; border: none; text-align: left; font: inherit; font-size: 0.8rem; color: var(--text-2); padding: 0.4rem 0.6rem; border-radius: 0.5rem; cursor: pointer; } .tour-skip-item:hover { background: var(--gold-soft); color: var(--text); } .tour-skip-item.cur { color: var(--gold); font-weight: 600; } .tour-skip-item.end { border-top: 1px solid var(--hairline); margin-top: 0.25rem; } /* A.18: the REAL Memory page behind the tour */ .tour-memory-frame { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; z-index: 890; background: #0a0d18; } .tour-overlay.tour-lite .tour-dim { background: rgba(8, 9, 14, 0.34); backdrop-filter: none; -webkit-backdrop-filter: none; } /* A.1: drag-drop + paste + ingestion demo pieces */ .dm-dropzone { border: 1.5px dashed var(--gold-edge); border-radius: 0.75rem; padding: 1rem 0.8rem; text-align: center; color: var(--text-3); font-size: 0.78rem; transition: background 0.2s, border-color 0.2s; } .dm-dropzone.over { background: var(--gold-soft); border-color: var(--gold); color: var(--text-2); } .dm-flyer { position: absolute; top: 0.5rem; right: 0.7rem; display: inline-block; will-change: transform; z-index: 3; } .dm-pasteflash { margin-top: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 0.5rem; background: var(--gold-soft); border: 1px solid var(--gold-edge); color: var(--text-2); font-size: 0.74rem; } .dm-pasteflash.flash { animation: dmFlash 0.8s ease-out; } @keyframes dmFlash { 0% { background: var(--gold); color: #fff; } 100% { background: var(--gold-soft); } } .dm-extract { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; } .dm-ex-label { font-size: 0.72rem; color: var(--text-2); white-space: nowrap; } .dm-ex-bar { flex: 1; height: 0.4rem; border-radius: 0.4rem; background: var(--surface-3); overflow: hidden; } .dm-ex-bar i { display: block; height: 100%; width: 0; border-radius: 0.4rem; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 0.5s ease; } /* A.7: real video player in the demo box */ .dm-player.real video { width: 100%; max-height: clamp(7rem, 24vh, 13rem); border-radius: 0.6rem; background: #000; display: block; } /* A.22: corpus pill mock */ .dm-corpus { display: flex; flex-direction: column; gap: 0.55rem; } .dm-cpill { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: 1rem; border: 1px solid var(--gold-edge); background: var(--gold-soft); font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-2); } .dm-cpill .dm-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--green); } .dm-corpus-panel { border: 1px solid var(--hairline); border-radius: 0.7rem; padding: 0.4rem; background: var(--surface); } .dm-corpus-panel .dim { color: var(--text-3); } /* share demo extras */ .dm-person .dm-pava.ok { background: rgba(94,138,78,0.18); color: var(--green); } .dm-person .dm-pava.no { background: rgba(184,116,106,0.18); color: var(--rose); } .dm-pnote { font-style: normal; font-size: 0.66rem; color: var(--text-3); margin-left: 0.4rem; } .dm-pnote.bad { color: var(--rose); } .dm-endrow { margin-top: 0.5rem; } /* ===================== ADDENDUM-16 §B TUTORIAL V2 ===================== */ /* B.1: cinematic fly-in opening */ .tour-intro { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.25rem; cursor: pointer; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, rgba(38,64,118,0.55), rgba(8,10,18,0.92) 70%), rgba(8,10,18,0.9); animation: tiIn 0.5s ease-out; } @keyframes tiIn { from { opacity: 0; } } .tour-intro.out { opacity: 0; transition: opacity 0.55s ease; pointer-events: none; } .ti-title { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; animation: tiTitle 1s cubic-bezier(.2,.8,.2,1) 0.25s backwards; } @keyframes tiTitle { from { opacity: 0; transform: translateY(2.5rem) scale(0.8); } } .ti-welcome { font-family: var(--font-mono); font-size: clamp(0.8rem, 1.6vw, 1.05rem); letter-spacing: 0.34em; text-transform: uppercase; color: #9fc1ff; } .ti-name { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; color: #fff; text-shadow: 0 0 3.5rem rgba(79,168,255,0.55); display: inline-flex; align-items: baseline; gap: 0.55rem; } .ti-v2 { font-family: var(--font-mono); font-weight: 800; font-size: 0.42em; color: #0B1B33; background: linear-gradient(135deg, #9fc1ff, #4FA8FF); border-radius: 0.5em; padding: 0.18em 0.5em; letter-spacing: 0.08em; box-shadow: 0 0 1.6rem rgba(79,168,255,0.7); transform: translateY(-0.25em); animation: tiV2 0.7s cubic-bezier(.2,.8,.2,1) 1.05s backwards; } @keyframes tiV2 { from { opacity: 0; transform: translateY(-0.25em) scale(2.4) rotate(8deg); } } .ti-robots { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.5rem, 2vw, 1.4rem); max-width: 88vw; } /* the 8 portraits read as transparent renders: circle crop + feathered mask */ .ti-bot { width: clamp(3.6rem, 8.5vw, 6.5rem); height: clamp(3.6rem, 8.5vw, 6.5rem); object-fit: cover; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); filter: drop-shadow(0 0 1.1rem rgba(79,168,255,0.45)) saturate(1.1); animation: tiBotIn 1s cubic-bezier(.2,.85,.25,1) calc(0.45s + var(--i) * 0.14s) backwards, tiBotFloat 3.4s ease-in-out calc(1.6s + var(--i) * 0.2s) infinite; } @keyframes tiBotIn { from { opacity: 0; transform: translateY(55vh) scale(0.25) rotate(-14deg); } } @keyframes tiBotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.45rem); } } .ti-skip { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.45); animation: tiIn 1s ease 2.4s backwards; } /* B.2: the big arrow flies in first, then the card appears */ .tour-arrow .ta-line { stroke-width: 4.2; filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.35)); } .tour-arrow .ta-head { stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.35)); } .tour-arrow.fly { animation: taFly 0.5s cubic-bezier(.2,.85,.3,1); } @keyframes taFly { 0% { opacity: 0; transform: scale(0.82) translateY(-1.4rem); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } } .tour-card.pre { opacity: 0; transform: translateY(0.6rem) scale(0.985); pointer-events: none; } .tour-card { transition: left 0.3s cubic-bezier(.2,.8,.2,1), top 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1); } .tour-card.centered.pre { transform: translate(-50%, -50%) translateY(0.6rem) scale(0.985); } /* B.13: fully clear dim while the on-screen conference visual plays */ .tour-overlay.tour-clear .tour-dim { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* B.18: the on-page flying skill chip + the ghost pinned dock */ .tour-flychip { position: fixed; z-index: 950; padding: 0.4rem 0.9rem; border-radius: 62rem; background: var(--gold-soft); border: 1px solid var(--gold-edge); color: var(--text); font-size: 0.78rem; font-weight: 600; box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,0.3); pointer-events: none; white-space: nowrap; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); } .tour-flychip.pinned { box-shadow: 0 0 0 2px var(--gold), 0 0.6rem 1.8rem rgba(0,0,0,0.3); } .pinned-dock.tour-ghost-dock { min-height: 3.4rem; min-width: 9.5rem; border: 1.5px dashed var(--gold-edge); border-radius: 0.9rem; background: var(--gold-soft); } /* v3.2 BA.18: the chat-width settings demo glides instead of snapping */ html.tour-anim-width .conv-inner, html.tour-anim-width .composer-card, html.tour-anim-width .composer-hint, html.tour-anim-width .skills-bar { transition: max-width 0.9s cubic-bezier(.2,.8,.2,1); } /* B.22: the Memory camera glides */ .tour-memory-frame { transition: transform 0.95s cubic-bezier(.25,.8,.25,1); will-change: transform; } /* B.7: the video fades back to the Learn screenshots */ .dm-player.dm-fadeout { opacity: 0; transition: opacity 0.6s ease; } /* B.10: bits for the Live Collaborate demo */ .dm-btn.mini { padding: 2px 0.55rem; font-size: 0.64rem; margin-left: auto; } .dm-share-note { margin-top: 0.45rem; font-size: 0.74rem; color: var(--text-2); line-height: 1.5; } /* B.6: the big orb nebula on the right + its Stop control */ .nebula-dock canvas { width: 8.75rem; height: 8.75rem; } .nebula-stop { background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: 62rem; color: var(--text-2); font: inherit; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.75rem; cursor: pointer; transition: all 0.13s; } .nebula-stop:hover { color: var(--rose, #b8746a); border-color: var(--rose, #b8746a); } @media (max-width: 48rem) { .nebula-dock canvas { width: 5rem; height: 5rem; } } /* v3.2 §BB.24: the Your-usage box wears the same brain mark as MegaMind Memory */ .usage-title { display: inline-flex; align-items: center; gap: 0.5rem; } .usage-brain-mark { display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--purple); flex-shrink: 0; } .usage-brain-mark svg { width: 100%; height: 100%; } /* ---------- v3.2 §BG corpus panel: category list + result cards ---------- */ .corpus-cats-h { font-family: var(--font-mono); font-size: 0.5938rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 0.25rem 0 0.5rem; } .corpus-cat { padding: 0.5rem 0.625rem; border: 1px solid var(--hairline); border-radius: 0.625rem; background: var(--surface-2); margin-bottom: 0.375rem; } .corpus-cat .cc-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); } .cc-meta { font-size: 0.6875rem; color: var(--text-3); margin-top: 1px; } .corpus-result { display: block; padding: 0.5625rem 0.625rem; border: 1px solid var(--hairline); border-radius: 0.625rem; background: var(--surface-2); margin-bottom: 0.375rem; text-decoration: none; color: inherit; } .corpus-result:hover { border-color: var(--gold-edge, rgba(196,148,58,0.4)); } .corpus-result .cr-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); } .corpus-result .cr-excerpt { font-size: 0.7188rem; color: var(--text-2); margin-top: 2px; line-height: 1.45; } /* ---------- v3.2 §BE live-collab chrome ---------- */ /* Inside a live collaboration the topbar quiets down: Share, Show me how, Learn, IT Support and SAX Portals hide until the collab ends. */ body.in-collab #shareBtn, body.in-collab #tourHelpBtn, body.in-collab .topbar-actions a.tbtn[href*="/learn"], body.in-collab #itSupportLink, body.in-collab .portal-wrap { display: none !important; } /* Top-bar buttons never wrap or spill their labels (owner overflow screenshot) */ .topbar-actions .tbtn { white-space: nowrap; overflow: hidden; max-width: 13.75rem; } .topbar-actions .tbtn svg { flex-shrink: 0; } /* §BE: never truncate emails in the collab people lists */ .collab-member .cm-email { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; } /* ---------- v3.2 AE.4 mobile pass (<=480px) ---------- */ @media (max-width: 480px) { .topbar { padding: 0 0.5rem; gap: 0.25rem; } .topbar-actions { gap: 0.25rem; } .topbar-actions .tbtn:not(.icon-only) { max-width: 7.5rem; } .conv-scroll { padding: 0.875rem 0.75rem; } .chat-composer-wrap { padding: 0.5rem 0.625rem calc(0.625rem + env(safe-area-inset-bottom, 0px)); } .msg { gap: 0.5rem; } .msg-avatar { width: 1.75rem; height: 1.75rem; } .hero { padding: 1.25rem 0.875rem; } .hero-tiles { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .reasoning.live.open .rs-body { max-height: 9.5rem; } .gen-card { max-width: 100%; } .preview-drawer, .corpus-panel, .drawer { width: 100vw !important; max-width: 100vw !important; } .modal-card { width: calc(100vw - 1.5rem); max-height: calc(100dvh - 2rem); } .tour-card { left: 0.5rem !important; right: 0.5rem !important; width: auto !important; max-width: none !important; } } /* v3.2 SITE-CONTRACT §7: employee card fact grid + lookup summary */ .emp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.375rem 1rem; margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px solid var(--hairline); } .emp-fact { min-width: 0; } .emp-fact .ef-k { display: block; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .emp-fact .ef-v { display: block; font-size: 0.7812rem; color: var(--text); overflow-wrap: anywhere; } .emp-summary { margin-top: 0.625rem; font-size: 0.7812rem; line-height: 1.5; color: var(--text-2); } /* Web-bio citations — a small row of clickable source chips under the bio */ .emp-bio-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.5rem; } .ebs-label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); } .ebs-chip { display: inline-flex; align-items: center; max-width: 12rem; padding: 0.125rem 0.5rem; font-size: 0.6875rem; line-height: 1.4; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 999px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 0.12s, color 0.12s; } .ebs-chip:hover, .ebs-chip:focus-visible { border-color: var(--gold-edge); color: var(--text); outline: none; } .collab-row .collab-livenow { color: #2bbf9e; overflow-wrap: anywhere; white-space: normal; } /* v3.3 CH: real attach flow reading-progress (parity with the tutorial demo) */ .attach-extract { display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-top: 0.3rem; } .attach-extract .ax-label { font-size: 0.6875rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } .attach-extract .ax-bar { flex: 1; height: 0.4rem; border-radius: 0.4rem; background: var(--surface-3); overflow: hidden; position: relative; } .attach-extract .ax-bar i { display: block; height: 100%; width: 40%; border-radius: 0.4rem; background: linear-gradient(90deg, var(--gold), var(--gold-2)); animation: axslide 1.2s ease-in-out infinite; } @keyframes axslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } } @media (prefers-reduced-motion: reduce) { .attach-extract .ax-bar i { animation: none; width: 100%; opacity: 0.5; } } .attach-chip.ready .att-type { color: #2bbf9e; } /* ===================== v3.3.1 (ADDENDUM-18 site pass 2) ===================== */ /* CS: the V1 voice robot rides the right dock (gradient orb removed) */ .robot-dock .voice-robot { position: relative; width: 10.5rem; cursor: pointer; filter: drop-shadow(0 0.6rem 1.6rem rgba(0, 140, 220, 0.28)); } .robot-dock .voice-robot img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } .robot-dock .voice-robot canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .robot-dock .voice-robot-tip { position: absolute; bottom: -1.6rem; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--hairline-strong); color: var(--text-2); font-size: 0.6875rem; padding: 0.25rem 0.6rem; border-radius: 0.5rem; white-space: nowrap; display: none; } .robot-dock .voice-robot-tip.show { display: block; } @media (max-width: 48rem) { .robot-dock .voice-robot { width: 6.5rem; } } @media (prefers-reduced-motion: reduce) { .robot-dock .voice-robot { filter: none; } } /* v3.3.5 §DO.4 VOICE ROBOT V2: twice the size. The chest nebula is voice-reactive (megamind-robot.js setLevel rides the WebAudio analysers). Fade-in/out and click-to-stop unchanged. #14 (2026-06-13): the robot is CENTERED IN THE RIGHT GUTTER — the empty space between the chat column's right edge and the window's right edge — NOT screen-centered and NOT flush to the window edge. positionRobotDock() (app.js) measures that midpoint each layout change and writes it into --robot-left; the 50% fallback keeps it sane before the first measure. */ .nebula-dock.robot-dock { right: auto; left: var(--robot-left, 50%); top: var(--robot-top, 50%); transform: translate(-50%, -50%) scale(0.92); gap: 0.375rem; touch-action: none; /* §robot-drag: pointer drags own touch gestures on the dock */ } .nebula-dock.robot-dock.show { transform: translate(-50%, -50%) scale(1); } /* §robot-drag: while dragging, track the pointer 1:1 (no eased lag) */ .nebula-dock.mm-dragging { transition: none; cursor: grabbing; } .nebula-dock.mm-dragging .voice-robot { cursor: grabbing; } .robot-dock .voice-robot { width: 21rem; filter: drop-shadow(0 1rem 2.6rem rgba(0, 140, 220, 0.34)); } /* §DO.3 (this wave): a GLOWING ORB ring wraps the whole robot and breathes with the live voice level. The host streams the level into --vlvl (0..1) on the .voice-robot element each frame; we drive the orb's scale + brightness off it so the robot looks "alive" in its own halo (like the chest nebula, but outside the body). --vlvl is undefined until voice is live, so the orb idles calm. */ .robot-dock .voice-robot { --vlvl: 0; } .robot-dock .voice-robot::before { content: ""; position: absolute; left: 50%; top: 48%; width: 118%; height: 118%; transform: translate(-50%, -50%) scale(calc(0.94 + var(--vlvl) * 0.16)); border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle at 50% 50%, rgba(120, 235, 255, calc(0.16 + var(--vlvl) * 0.30)) 0%, rgba(0, 200, 255, calc(0.10 + var(--vlvl) * 0.22)) 34%, rgba(0, 120, 220, calc(0.04 + var(--vlvl) * 0.10)) 60%, rgba(0, 90, 180, 0) 78%); filter: blur(calc(6px + var(--vlvl) * 10px)); transition: transform 0.09s linear, filter 0.12s linear; animation: orbBreathe 4.2s ease-in-out infinite; } @keyframes orbBreathe { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .robot-dock .voice-robot::before { animation: none; transition: none; } } @media (max-width: 48rem) { /* mobile: ignore the gutter math, dock bottom-center (no room for a gutter) */ .nebula-dock.robot-dock { left: 50% !important; right: auto; top: auto; bottom: 8.75rem; transform: translate(-50%, 0) scale(0.92); } .nebula-dock.robot-dock.show { transform: translate(-50%, 0) scale(1); } .robot-dock .voice-robot { width: 13rem; } } @media (prefers-reduced-motion: reduce) { .nebula-dock.robot-dock, .nebula-dock.robot-dock.show { transform: translate(-50%, -50%); } } /* CL step 22: phantom Ctrl+K keystroke visual */ .tour-phantom-keys { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0.92); display: flex; align-items: center; gap: 0.5rem; z-index: 960; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .tour-phantom-keys.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .tour-phantom-keys kbd { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--hairline-strong); border-bottom-width: 4px; border-radius: 0.75rem; padding: 0.7rem 1.1rem; box-shadow: 0 0.9rem 2.4rem rgba(0,0,0,0.35); transition: transform 0.12s ease, border-bottom-width 0.12s ease; } .tour-phantom-keys span { font-size: 1.3rem; color: var(--text-2); font-weight: 600; } .tour-phantom-keys.press kbd { transform: translateY(3px); border-bottom-width: 1px; } @media (prefers-reduced-motion: reduce) { .tour-phantom-keys { transition: none; } } /* CL step 28: the flying chip fades once the pinned chip lands in the rail */ .tour-flychip.gone { transition: opacity 0.25s ease; opacity: 0; } .pin-chip.tour-demo-chip { pointer-events: none; } /* ===================== ADDENDUM-18 §DP — MOBILE SIMPLE MODE (≤480px) ===================== */ /* On phones: chat + specialist switching + readable output only. Everything else hidden. */ @media (max-width: 480px) { /* --- 1. Hide clutter: suggestions, skills, version, topbar extras --- */ .nav-brain, .nav-skills, #tabArtifacts, #tabCollabs, #navArtifactsWrap, #navCollabsWrap, #recentlyDeletedBtn, #clearSessionsBtn, #tourHelpBtn, #shareBtn, #itSupportLink, #issueBtn, #themeBtn, #topSettings, .portal-wrap, .topbar-actions .tbtn[href*="learn"], .reasoning-panel, .right-dock, .nebula-dock, #v2Pill, /* Live Reasoning toggle */ #releasePill, /* v7.5.0 version badge */ #starters, /* Quick-start suggestion tiles */ #skillsBar, /* Department skills / SAX skills / Daily briefing chips */ #helpBubbleBtn, /* "Ask about MegaMind" bubble */ .hero-tiles, .starters /* belt-and-braces for both selector forms */ { display: none !important; } /* --- 2. Layout: full-width, no sidebar gutter --- */ body, body.nav-collapsed { grid-template-columns: 1fr !important; } main { overflow-x: hidden; min-width: 0; width: 100%; } /* --- 3. Side menu: slide in BELOW the topbar so header stays visible --- */ aside.nav { top: 2.875rem !important; height: calc(100dvh - 2.875rem) !important; max-height: calc(100dvh - 2.875rem) !important; overflow-y: auto; } /* --- 4. Topbar: compact, full-width --- */ .topbar { padding: 0 0.625rem; min-height: 2.875rem; gap: 0.25rem; } .topbar-actions { gap: 0.25rem; min-width: 0; } .breadcrumb-wrap { min-width: 0; flex: 1; overflow: hidden; } .breadcrumb { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- 5. Hero: just the robot + greeting, no tiles --- */ .hero { padding: 1rem 0.75rem 0.5rem; } .hero .hero-tiles, .hero .starters { display: none !important; } /* --- 6. Bot strip: horizontal scroll, compact cards --- */ .bot-strip { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; justify-content: flex-start !important; padding: 0.25rem 0.5rem 0.5rem; gap: 0.375rem; max-width: 100vw; scrollbar-width: none; } .bot-strip::-webkit-scrollbar { display: none; } .bot-strip .bot-card { flex: 0 0 4.75rem !important; padding: 0.625rem 0.375rem 0.5rem; } .bc-portrait { width: 2.75rem !important; height: 2.75rem !important; border-radius: 0.875rem !important; } .bc-name { font-size: 0.625rem; } .bc-role { font-size: 0.5rem; } /* --- 7. Composer: taller input box, full width --- */ .chat-composer-wrap { padding: 0.5rem 0.625rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; width: 100%; } #composerInput { min-height: 5.5rem !important; height: auto !important; } .composer-card { padding: 0.5rem 0.625rem; } /* --- 8. Messages: guaranteed fit, no horizontal bleed --- */ .conv-scroll { padding: 0.75rem 0.625rem; overflow-x: hidden; } .msg { gap: 0.375rem; max-width: 100%; min-width: 0; } .msg-avatar { width: 1.625rem; height: 1.625rem; flex-shrink: 0; } .msg-content { min-width: 0; max-width: 100%; overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; } .msg.user .msg-content { max-width: calc(100vw - 3rem); } .md-body, .md-body * { max-width: 100%; min-width: 0; box-sizing: border-box; } .md-body p, .md-body li, .md-body blockquote { overflow-wrap: break-word; word-break: break-word; } .md-body pre, .msg-body pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre; } .md-body code, .msg-body code, code { max-width: 100%; overflow-x: auto; word-break: break-word; } .md-body table, .msg-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .gen-card, .emp-card, .res-panel, .viz-wrap, .img-card { max-width: 100% !important; overflow-x: hidden; box-sizing: border-box; } /* --- 9. Modals / drawers fill viewport --- */ .modal-card { width: calc(100vw - 1rem) !important; max-height: calc(100dvh - 2rem) !important; } .preview-drawer, .corpus-panel, .drawer { width: 100vw !important; max-width: 100vw !important; } } /* v8.0.1: keep the release-notes pill(s) OFF the sign-in screen. Both the legacy gateway-fed pill (#releasePill) and the new release-notes.js widget (#releaseNotesBtn, created with inline fixed styles) leaked onto the Entra login. Hidden while the auth overlay is up (body.auth-pending); they reappear once signed in (the class is removed on auth). */ body.auth-pending #releasePill, body.auth-pending #releaseNotesBtn, body.auth-pending #releaseNotesPanel, body.auth-pending .mm-release-btn, body.auth-pending .mm-release-panel { display: none !important; } /* ===== CAS Reclassification Console drawer (megamind-qbo-jobs) ===== */ .casdrawer{ width:min(680px,96vw); } .cas-tabs{ display:flex; gap:4px; padding:6px 10px 0; overflow-x:auto; border-bottom:1px solid var(--line,#e4e7ec); } .cas-tab{ display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:12px; font-weight:600; border:1px solid var(--line,#e4e7ec); border-bottom:none; border-radius:8px 8px 0 0; background:transparent; color:var(--muted,#667085); cursor:pointer; white-space:nowrap; max-width:200px; } .cas-tab.active{ background:var(--panel,#f6f7f9); color:var(--text,#1a2230); } .cas-tab .x{ opacity:.5; font-weight:700; } .cas-tab .x:hover{ opacity:1; } .cas-tab .dot{ width:7px; height:7px; border-radius:50%; background:#2563eb; animation:casbl 1s infinite; } @keyframes casbl{50%{opacity:.25}} .cas-body{ padding:0; overflow-y:auto; height:calc(100% - 92px); } .casc{ font-size:13px; } .casc-head{ padding:12px 14px; border-bottom:1px solid var(--line,#e4e7ec); } .casc-sub{ color:var(--muted,#667085); font-size:12px; margin-top:3px; } .casc-prog{ padding:12px 14px; border-bottom:1px solid var(--line,#e4e7ec); } .casc-prog-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; } .casc-count b{ font-size:19px; } .casc-count{ color:var(--muted,#667085); font-size:13px; } .casc-bar{ height:9px; background:var(--panel,#eef0f3); border-radius:6px; overflow:hidden; margin:9px 0 10px; } .casc-bar span{ display:block; height:100%; background:#0f9d58; border-radius:6px; transition:width .4s; } .casc-pills{ display:flex; gap:6px; flex-wrap:wrap; } .casc-pill{ font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--panel,#eef0f3); color:var(--muted,#667085); } .casc-pill.done{ background:#e6f4ea; color:#0f9d58; } .casc-pill.writing{ background:#e7effe; color:#2563eb; } .casc-pill.fail{ background:#fdeaea; color:#d13438; } .casc-pill.hold{ background:#fbf1e0; color:#b7791f; } .casc-actions{ display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line,#e4e7ec); flex-wrap:wrap; } .casc-btn{ font-size:12px; font-weight:600; padding:6px 13px; border-radius:7px; border:1px solid transparent; cursor:pointer; } .casc-btn.primary{ background:#2563eb; color:#fff; } .casc-btn.ghost{ background:transparent; color:var(--muted,#667085); border-color:var(--line,#e4e7ec); } .casc-btn[disabled]{ opacity:.45; cursor:default; } .casc-lane{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted,#667085); padding:12px 14px 6px; } .casc-lane.amber{ color:#b7791f; } .casc-table{ width:100%; border-collapse:collapse; font-size:12px; } .casc-table th{ text-align:left; color:var(--muted,#667085); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding:0 12px 6px; } .casc-table td{ padding:6px 12px; border-top:1px solid var(--line,#e4e7ec); white-space:nowrap; font-variant-numeric:tabular-nums; } .casc-table td.r,.casc-table th.r{ text-align:right; } .casc-s{ font-size:11px; font-weight:600; } .casc-s.done{ color:#0f9d58; } .casc-s.already{ color:#8a94a6; } .casc-s.pending{ color:var(--muted,#98a2b3); } .casc-s.writing{ color:#2563eb; } .casc-s.failed{ color:#d13438; } .casc-s.review{ color:#b7791f; } .casc-review{ margin:0 14px 8px; border:1px solid var(--line,#e4e7ec); border-radius:8px; padding:9px 10px; } .casc-review .rn{ color:var(--muted,#667085); font-size:11px; margin:3px 0 0; } .casc-empty{ padding:24px 14px; color:var(--muted,#667085); font-size:12.5px; text-align:center; } .casc-foot{ padding:9px 14px; border-top:1px solid var(--line,#e4e7ec); color:var(--muted,#667085); font-size:11px; } @media (prefers-color-scheme:dark){ .casc-bar,.casc-pill{ background:#232a36; } .casc-pill.done{ background:#123020; } .casc-pill.writing{ background:#122139; } .casc-pill.fail{ background:#331a1b; } .casc-pill.hold{ background:#2c2413; } } /* §whats-new (0725): admin-authored announcement, shown once per user per announcement id. */ #whatsNewOverlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;} #whatsNewOverlay .wn-backdrop{position:absolute;inset:0;background:rgba(6,10,18,.62);backdrop-filter:blur(3px);} #whatsNewOverlay .wn-card{position:relative;max-width:560px;width:100%;max-height:80vh;overflow:auto; background:var(--card,#fff);color:var(--text,#111);border-radius:14px;padding:28px 30px 22px; box-shadow:0 24px 70px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.08);} #whatsNewOverlay .wn-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-bottom:8px;} #whatsNewOverlay .wn-title{margin:0 0 12px;font-size:22px;line-height:1.25;} #whatsNewOverlay .wn-body{font-size:14.5px;line-height:1.62;} #whatsNewOverlay .wn-body :first-child{margin-top:0;} #whatsNewOverlay .wn-body :last-child{margin-bottom:0;} #whatsNewOverlay .wn-body img{max-width:100%;height:auto;border-radius:8px;} #whatsNewOverlay .wn-actions{display:flex;justify-content:flex-end;margin-top:20px;} #whatsNewOverlay .wn-ok{padding:9px 20px;border-radius:8px;border:0;cursor:pointer;font-weight:600;font-size:14px; background:var(--accent,#2BA7C9);color:#fff;} #whatsNewOverlay .wn-ok:hover{filter:brightness(1.07);} @media (prefers-reduced-motion:no-preference){#whatsNewOverlay .wn-card{animation:wnIn .18s ease-out;}} @keyframes wnIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} /* ============================================================================ ADDENDUM 20 — §phone-is-a-phone (0730) The mobile layout was keyed ONLY to the CSS viewport width (<=480px). That asks "is the viewport narrow?" when the question is "is this a phone?", and the two diverge the moment the browser reports a desktop width — iOS "Request Desktop Website", or a home-screen web app that inherited it. Measured: a user's home-screen app showed the #releasePill badge, which is display:none !important under 481px, proving the mobile block was not active. `body.mm-phone` is set from the PHYSICAL device size (screen.width, which desktop mode does NOT change) plus a coarse pointer — see markPhoneDevice() in app.js. HONEST LIMIT: this makes the content FIT the reported viewport; it cannot shrink a 980px layout viewport to 390px. The manifest + re-adding the icon is the actual cure. Values mirror the @media (max-width: 480px) block — that block stays the source of truth. ============================================================================ */ body.mm-phone, body.mm-phone.nav-collapsed { grid-template-columns: 1fr !important; } body.mm-phone main { overflow-x: hidden; min-width: 0; width: 100%; } body.mm-phone .conv-scroll { overflow-x: hidden; } body.mm-phone .msg { max-width: 100%; min-width: 0; } body.mm-phone .msg-content { min-width: 0; max-width: 100%; overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; } body.mm-phone .md-body, body.mm-phone .md-body * { max-width: 100%; min-width: 0; box-sizing: border-box; } body.mm-phone .md-body pre, body.mm-phone .md-body table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.mm-phone .gen-card, body.mm-phone .emp-card, body.mm-phone .res-panel, body.mm-phone .viz-wrap, body.mm-phone .img-card { max-width: 100% !important; overflow-x: hidden; box-sizing: border-box; } body.mm-phone .breadcrumb-wrap { min-width: 0; flex: 1; overflow: hidden; } body.mm-phone .breadcrumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.mm-phone .chat-composer-wrap { box-sizing: border-box; width: 100%; } body.mm-phone #releasePill, body.mm-phone #helpBubbleBtn { display: none !important; } /* §find-the-button (0730): the ONLY way to add or remove people in the Collaborations list was a bare "⋯" rendered as a 1.25rem .art-btn — invisible in practice, and the reason an owner reported "not seeing where I can add people". Give it a label. */ .collab-row .collab-managebtn { flex: 0 0 auto; margin-left: auto; padding: 0.3rem 0.625rem; border: 1px solid var(--hairline-strong); border-radius: 62.4375rem; background: var(--surface); color: var(--text); font: inherit; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; cursor: pointer; width: auto; height: auto; transition: border-color 0.15s ease; } .collab-row .collab-managebtn:hover { border-color: var(--gold-edge); } /* §find-the-button II (0730): the LIVE·COLLAB badge is the owner's in-conversation route to people management — the only one that survives mobile simple mode and the in-collab chrome hide. Make it look pressable, but ONLY for the owner (members get a plain status pill). */ /* nowrap: the badge has a FIXED 1.375rem height, so the added word wrapped it onto two lines and broke the pill (measured in a harness before shipping). */ .collab-badge { white-space: nowrap; } .collab-badge.owner { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .collab-badge.owner:hover { background: rgba(94,138,78,0.22); border-color: rgba(94,138,78,0.75); } .collab-badge.owner:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .collab-badge .cb-manage { text-decoration: underline; text-underline-offset: 0.125rem; font-weight: 700; } /* ============================================================================ ADDENDUM 19 — §H.21b-2 "Ask about MegaMind" bubble: self-hiding chrome (1) collapsed to the bot face by default; the label expands on hover / focus / panel-open. Guarded to >=1181px because the 1180px query above already does `.hb-label { display: none }` — expanding there inflates an empty pill. (2) idle auto-hide: JS adds .idle after IDLE_MS with the panel closed, and removes it when the pointer approaches the corner (initHelpBubbleAutohide). Dimmed rather than display:none so it stays hit-testable and findable. ============================================================================ */ @media (min-width: 1181px) { .help-bubble-btn { max-width: 2.75rem; padding: 0.4375rem; overflow: hidden; transition: max-width 0.22s ease, padding 0.22s ease, transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .help-bubble-btn .hb-label { white-space: nowrap; opacity: 0; transition: opacity 0.18s ease; } .help-bubble:hover .help-bubble-btn, .help-bubble-btn:focus-visible, .help-bubble-btn.open { max-width: 15rem; padding: 0.4375rem 0.9375rem 0.4375rem 0.5rem; } .help-bubble:hover .hb-label, .help-bubble-btn:focus-visible .hb-label, .help-bubble-btn.open .hb-label { opacity: 1; } } .help-bubble { transition: opacity 0.4s ease; } .help-bubble.idle { opacity: 0.16; } .help-bubble.idle .help-bubble-btn { box-shadow: none; } .help-bubble.idle:hover { opacity: 1; } /* CSS safety net if a wake event is missed */ @media (prefers-reduced-motion: reduce) { .help-bubble, .help-bubble-btn, .help-bubble-btn .hb-label { transition: none !important; } }