/* ═══════════════════════════════════════════════════════════════════
ASAS-AI — Theme v3.2.0
Bubble style · Full-width · Responsive · ASAS orange accent
═══════════════════════════════════════════════════════════════════ */
/* ── Design tokens ── */
#asas-app {
--navy: #0a0f1e;
--navy2: #111827;
--navy3: #1a2540;
--navy4: #243050;
--surface: #131c2e;
--surface2: #1a2540;
--surface3: #1f2d4a;
--border: rgba(212,168,71,.12);
--border2: rgba(255,255,255,.06);
--border3: rgba(255,255,255,.03);
--gold: #D4A847;
--gold2: #e8c14e;
--gold-dim: rgba(212,168,71,.15);
--gold-glow: rgba(212,168,71,.08);
--text: #e8eaf2;
--text2: #8899b8;
--text3: #4a5a7a;
--accent: #d97706;
--accent2: #f59e0b;
--accent-bg: rgba(217,119,6,.12);
--user-bg: #1f3050;
--user-text: #e8eaf2;
--code-bg: #0d1428;
--code-text: #c9d6f0;
--green: #10b981;
--red: #ef4444;
--amber: #f59e0b;
--sans: 'Inter', system-ui, sans-serif;
--mono: 'Fira Code','IBM Plex Mono',monospace;
--r: 14px;
--r-sm: 10px;
--r-xs: 7px;
--bg: var(--navy);
--sidebar: var(--navy2);
}
/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ── Wrapper — full viewport, no fixed height box ── */
.asas-chat-wrap{
width:100%;
font-family:var(--sans);
}
/* ══════════════════════════════════════════════════════════════════
APP SHELL — fills full viewport height
══════════════════════════════════════════════════════════════════ */
#asas-app{
display:flex;
width:100%;
height:100dvh;
background:var(--navy);
font-size:14px;
color:var(--text);
font-family:var(--sans);
position:relative;
overflow:hidden;
}
/* ══════════════════════════════════════════════════════════════════
SIDEBAR
══════════════════════════════════════════════════════════════════ */
#asas-sidebar{
width:252px;flex-shrink:0;background:var(--navy2);
border-right:1px solid var(--border);display:flex;flex-direction:column;
transition:transform .25s ease;
height:100%;overflow:hidden;
}
#asas-sidebar-top{
padding:16px 14px 12px;
border-bottom:1px solid var(--border3);
flex-shrink:0;
}
/* ── Logo ── */
.asas-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.asas-logomark{
width:36px;height:36px;border-radius:9px;
background:var(--gold);color:var(--navy);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.asas-logomark.asas-logomark-img{background:none !important}
.asas-logomark.asas-logomark-img img{width:36px;height:36px;object-fit:cover;border-radius:9px;display:block}
.asas-logomark svg{width:18px;height:18px}
.asas-logotype-name{display:block;font-size:16px;font-weight:600;color:var(--text);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.asas-logotype-sub{display:block;font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* ── New chat button ── */
.asas-new-btn{
width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;
border-radius:var(--r-sm);background:var(--gold-dim);
border:1px solid var(--border);font-size:13px;font-weight:500;
color:var(--gold);cursor:pointer;font-family:var(--sans);
transition:background .15s,border-color .15s;letter-spacing:.01em;
}
.asas-new-btn:hover{background:rgba(212,168,71,.22);border-color:rgba(212,168,71,.35)}
.asas-new-btn svg{width:13px;height:13px}
/* ── History ── */
#asas-sidebar-history{
flex:1;overflow-y:auto;padding:10px 8px;
display:flex;flex-direction:column;gap:2px;
scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
#asas-sidebar-history::-webkit-scrollbar{width:3px}
#asas-sidebar-history::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.asas-sb-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;padding:2px 8px;margin-bottom:5px}
.asas-history-empty{font-size:12.5px;color:var(--text3);padding:8px;font-style:italic}
.asas-history-item{
display:flex;align-items:center;gap:8px;padding:7px 9px;
border-radius:var(--r-xs);cursor:pointer;transition:background .12s;user-select:none;
}
.asas-history-item:hover{background:var(--surface2)}
.asas-history-item.active{background:linear-gradient(135deg, rgba(212,168,71,.16), rgba(212,168,71,.06));border-left:2px solid var(--gold);padding-left:7px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset;}
.asas-history-item.active .asas-hist-preview{color:var(--gold);font-weight:500}
.asas-history-icon{flex-shrink:0;opacity:.3;width:13px;height:13px}
.asas-history-item.active .asas-history-icon{opacity:.7;color:var(--gold)}
.asas-hist-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;pointer-events:none}
.asas-hist-preview{display:block;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asas-hist-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.asas-hist-ts{font-size:10.5px;color:var(--text3)}
.asas-hist-tok{display:inline-flex;align-items:center;gap:2px;font-size:10px;color:var(--text3);opacity:.78;white-space:nowrap;font-variant-numeric:tabular-nums}
.asas-hist-opts{
opacity:0;width:22px;height:22px;border-radius:5px;border:none;background:none;
cursor:pointer;display:flex;align-items:center;justify-content:center;
color:var(--text3);flex-shrink:0;padding:0;transition:opacity .15s,background .12s;
}
.asas-history-item:hover .asas-hist-opts{opacity:1}
.asas-history-item.active .asas-hist-opts{opacity:.7}
.asas-hist-opts svg{width:13px;height:13px}
.asas-hist-opts:hover{background:var(--surface3);color:var(--text2)}
/* ── User strip ── */
.asas-user-strip{
display:flex;align-items:center;gap:10px;padding:12px 14px;
border-top:1px solid var(--border3);background:none;
border-left:none;border-right:none;border-bottom:none;
cursor:pointer;width:100%;font-family:var(--sans);transition:background .12s;flex-shrink:0;
}
.asas-user-strip:hover{background:var(--surface2)}
.asas-av-xs{
width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--navy);
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;object-fit:cover;
}
img.asas-av-xs{background:var(--surface2)}
.asas-strip-info{flex:1;min-width:0;text-align:left}
.asas-strip-name{display:block;font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asas-strip-tier{display:block;font-size:10.5px;color:var(--text3)}
.asas-strip-tier.pro,.asas-strip-tier.elite,.asas-strip-tier.elite-plus,
.asas-strip-tier.elite_plus,.asas-strip-tier.team,.asas-strip-tier.enterprise{color:var(--gold);font-weight:500}
/* ══════════════════════════════════════════════════════════════════
MAIN AREA
══════════════════════════════════════════════════════════════════ */
#asas-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--navy);overflow:hidden}
#asas-topbar{
display:none;align-items:center;justify-content:space-between;
padding:10px 16px;border-bottom:1px solid var(--border);
background:var(--navy2);flex-shrink:0;
}
#asas-topbar button{padding:5px;color:var(--text2);background:none;border:none;cursor:pointer;display:flex;align-items:center}
.asas-topbar-title{font-size:16px;font-weight:600;color:var(--text)}
/* ── Feed — scrollable, centered content ── */
#asas-feed-wrap{
flex:1;overflow-y:auto;
scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
#asas-feed-wrap::-webkit-scrollbar{width:4px}
#asas-feed-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
#asas-feed{
padding:32px 24px 12px;
display:flex;flex-direction:column;
max-width:860px;
margin:0 auto;
width:100%;
}
/* ══════════════════════════════════════════════════════════════════
MESSAGES — restored bubble style
══════════════════════════════════════════════════════════════════ */
.asas-msg{display:flex;gap:12px;margin-bottom:24px;animation:asas-in .2s ease}
.asas-msg.no-anim{animation:none}
@keyframes asas-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.asas-msg-av{
width:32px;height:32px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:700;margin-top:2px;
}
.asas-msg.ai .asas-msg-av{background:var(--gold);color:var(--navy)}
.asas-msg.user .asas-msg-av{background:var(--user-bg);color:var(--user-text);border:1px solid var(--border);order:2}
.asas-msg-body{flex:1;max-width:calc(100% - 44px);background:transparent;}
.asas-msg.user{flex-direction:row-reverse}
.asas-msg.user .asas-msg-body{display:flex;flex-direction:column;align-items:flex-end}
/* ═══════════════════════════════════════════════════════════════
CHAT BUBBLES — Single authoritative definition (no duplicates)
AI: transparent, no border, no radius — pure prose on page bg
User: dark pill, rounded, right-aligned
═══════════════════════════════════════════════════════════════ */
/* AI bubble: completely transparent — text flows directly on chat bg */
.asas-msg.ai .asas-bubble {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
width: 100%;
padding: 4px 0 2px;
font-size: 14.5px;
line-height: 1.75;
word-break: break-word;
color: var(--text, #e8eaf2);
}
/* User bubble: rounded pill, right-aligned */
.asas-msg.user .asas-bubble {
background: var(--ub, rgba(255,255,255,.08));
color: var(--ut, #e8eaf2);
border: 1px solid rgba(255,255,255,.07);
border-radius: 18px 18px 4px 18px;
box-shadow: none;
max-width: 76%;
padding: 11px 16px;
font-size: 14.5px;
line-height: 1.65;
word-break: break-word;
}
/* ── Typography inside bubble ── */
.asas-bubble p{margin:0 0 10px}.asas-bubble p:last-child{margin:0}
.asas-bubble h1,.asas-bubble h2,.asas-bubble h3{
font-weight:600;color:var(--gold);margin:18px 0 8px;line-height:1.3;
}
.asas-bubble h1:first-child,.asas-bubble h2:first-child,.asas-bubble h3:first-child{margin-top:0}
.asas-bubble h1{font-size:17px}.asas-bubble h2{font-size:15.5px}.asas-bubble h3{font-size:14.5px}
.asas-bubble ul,.asas-bubble ol{padding-left:22px;margin:8px 0 12px}
.asas-bubble li{margin-bottom:5px;color:var(--text)}
.asas-bubble code{
font-family:var(--mono);font-size:12.5px;
background:var(--code-bg);border:1px solid var(--border);
border-radius:4px;padding:1px 6px;color:var(--gold2);
}
.asas-bubble pre{
background:var(--code-bg);border:1px solid var(--border);
border-radius:var(--r-sm);padding:14px 16px;margin:12px 0;overflow-x:auto;
}
.asas-bubble pre code{
background:none;border:none;border-radius:0;
color:var(--code-text);display:block;padding:0;font-size:13px;line-height:1.6;
}
.asas-bubble blockquote{
border-left:3px solid var(--gold);margin:12px 0;
padding:10px 14px;background:var(--gold-glow);
border-radius:0 var(--r-xs) var(--r-xs) 0;color:var(--text2);
}
.asas-bubble blockquote p{margin:0}
.asas-bubble table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px;border-radius:var(--r-sm);overflow:hidden}
.asas-bubble th{
background:var(--navy3);color:var(--gold);
padding:9px 13px;text-align:left;font-weight:600;font-size:12px;
letter-spacing:.05em;border:1px solid var(--border);
}
.asas-bubble td{padding:8px 13px;border:1px solid var(--border3);color:var(--text);vertical-align:top}
.asas-bubble tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.asas-bubble tr:hover td{background:var(--gold-glow)}
/* ── Elapsed time — shown below bubble ── */
.asas-elapsed{
display:inline-flex;align-items:center;gap:4px;
margin-top:6px;font-size:10.5px;color:var(--text3);
opacity:0;animation:asas-fade-in .4s ease .1s forwards;letter-spacing:.02em;
}
/* Inline per-response token count — subtle, greyed, next to the time */
.asas-elapsed .asas-tok-dot{opacity:.5;margin:0 1px;}
.asas-elapsed .asas-tok-inline{color:inherit;opacity:.85;white-space:nowrap;}
@keyframes asas-fade-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
/* ── Download toolbar ── */
.asas-dl-toolbar{
display:flex;align-items:center;gap:5px;
margin-top:8px;padding-top:8px;
border-top:1px solid rgba(212,168,71,.1);
flex-wrap:wrap;
}
.asas-dl-label{font-size:10.5px;color:var(--text3);font-weight:500;letter-spacing:.04em;margin-right:3px}
.asas-dl-btn{
font-size:11px;font-weight:600;padding:3px 10px;
border-radius:5px;border:1px solid rgba(212,168,71,.3);
background:rgba(212,168,71,.07);color:var(--gold);cursor:pointer;
transition:background .13s,border-color .13s;line-height:1.6;
white-space:nowrap;font-family:var(--sans);
}
.asas-dl-btn:hover{background:rgba(212,168,71,.18);border-color:rgba(212,168,71,.5)}
.asas-dl-copy{border-color:rgba(100,180,255,.3);background:rgba(100,180,255,.07);color:#7ab8ff}
.asas-dl-copy:hover{background:rgba(100,180,255,.15);border-color:rgba(100,180,255,.5)}
/* ── Typing dots ── */
.asas-typing-dots{
display:flex;gap:5px;padding:13px 17px;
background:var(--surface);border:1px solid var(--border);
border-left:3px solid var(--gold);
border-radius:3px var(--r) var(--r) var(--r);width:fit-content;
}
.asas-typing-dots span{
width:6px;height:6px;border-radius:50%;background:var(--gold);
opacity:.3;animation:asas-dot 1.1s ease-in-out infinite;
}
.asas-typing-dots span:nth-child(2){animation-delay:.18s}
.asas-typing-dots span:nth-child(3){animation-delay:.36s}
@keyframes asas-dot{0%,80%,100%{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}
/* attachment tags */
.asas-msg-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.asas-msg-att-tag{
display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
padding:3px 9px;border-radius:5px;
background:var(--gold-dim);color:var(--gold);border:1px solid var(--border);
}
.asas-msg-img{
max-width:280px;max-height:200px;border-radius:var(--r-sm);
object-fit:contain;display:block;margin-bottom:8px;border:1px solid var(--border);
}
/* ══════════════════════════════════════════════════════════════════
COMPOSER
══════════════════════════════════════════════════════════════════ */
#asas-composer{
border-top:1px solid var(--border);padding:12px 24px 16px;
background:var(--navy2);flex-shrink:0;
}
.asas-composer-inner{max-width:860px;margin:0 auto}
/* token quota row */
#asas-token-quota-row{
display:flex;align-items:center;gap:10px;padding:0 0 10px;font-size:12px;color:var(--text2);
}
#asas-token-quota-row .asas-quota-bar{flex-shrink:0;width:72px;height:3px;background:var(--border2);border-radius:2px;overflow:hidden}
.asas-quota-fill,.asas-token-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .5s ease,background .3s ease}
#asas-token-quota-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#asas-token-quota-txt a,#asas-upgrade-link{
color:var(--gold);font-weight:600;text-decoration:none;
padding:1px 7px;border-radius:4px;background:var(--gold-dim);
transition:background .15s;font-size:11px;
}
#asas-token-quota-txt a:hover,#asas-upgrade-link:hover{background:rgba(212,168,71,.25)}
#asas-attachments-preview{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px}
#asas-attachments-preview:empty{display:none}
/* input box */
#asas-input-wrap{
display:flex;align-items:flex-end;gap:8px;
background:var(--surface);border:1px solid var(--border2);
border-radius:var(--r);padding:9px 10px 9px 14px;
transition:border-color .18s,box-shadow .18s;
}
#asas-input-wrap:focus-within{
border-color:rgba(212,168,71,.5);
box-shadow:0 0 0 3px rgba(212,168,71,.07);
}
#asas-input-wrap.drag-over{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
/* attach toolbar */
#asas-attach-toolbar{display:flex;align-items:center;gap:2px;flex-shrink:0}
.asas-attach-btn{
width:30px;height:30px;border-radius:var(--r-xs);background:none;border:none;
color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;
flex-shrink:0;transition:color .15s,background .15s;position:relative;
}
.asas-attach-btn svg{width:16px;height:16px;flex-shrink:0}
.asas-attach-btn:hover{color:var(--gold);background:var(--gold-dim)}
.asas-attach-btn::after{
content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;
transform:translateX(-50%);background:var(--navy3);color:var(--text);
font-size:11px;font-family:var(--sans);white-space:nowrap;
padding:4px 9px;border-radius:6px;pointer-events:none;
opacity:0;transition:opacity .15s;z-index:10;border:1px solid var(--border);
}
.asas-attach-btn:hover::after{opacity:1}
.asas-attach-divider{width:1px;height:18px;background:var(--border2);margin:0 4px;flex-shrink:0}
#asas-input{
flex:1;font-family:var(--sans);font-size:14.5px;color:var(--text);
background:none;border:none;outline:none;resize:none;
line-height:1.6;min-height:22px;max-height:160px;overflow-y:auto;scrollbar-width:thin;
}
#asas-input::placeholder{color:var(--text3)}
#asas-send{
width:36px;height:36px;border-radius:9px;
background:var(--gold);color:var(--navy);border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:background .15s,transform .1s,box-shadow .15s;
}
#asas-send:hover{background:var(--gold2);box-shadow:0 0 0 3px rgba(212,168,71,.2)}
#asas-send:active{transform:scale(.92)}
#asas-send:disabled{background:var(--surface2);color:var(--text3);cursor:not-allowed;box-shadow:none}
#asas-send svg{width:14px;height:14px}
#asas-footer-note{font-size:11px;color:var(--text3);text-align:center;margin-top:8px;line-height:1.4}
.asas-error-msg{
font-size:13px;color:#f87171;background:rgba(239,68,68,.08);
border:1px solid rgba(239,68,68,.2);border-radius:var(--r-xs);
padding:9px 13px;text-align:center;margin-bottom:16px;
}
/* ══════════════════════════════════════════════════════════════════
ACCOUNT PANEL
══════════════════════════════════════════════════════════════════ */
#asas-panel-bg{
position:absolute;inset:0;background:rgba(5,8,18,.65);z-index:50;
display:none;justify-content:flex-end;border-radius:0;overflow:hidden;
backdrop-filter:blur(3px);
}
#asas-panel-bg.open{display:flex}
#asas-panel{
width:320px;background:var(--navy2);height:100%;overflow-y:auto;
display:flex;flex-direction:column;
box-shadow:-16px 0 48px rgba(0,0,0,.5);
border-left:1px solid var(--border);
scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
#asas-panel::-webkit-scrollbar{width:3px}
#asas-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.asas-panel-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0}
.asas-panel-title{font-size:15px;font-weight:600;color:var(--text);letter-spacing:.02em}
.asas-panel-close{
width:28px;height:28px;border-radius:7px;background:none;border:none;
color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background .12s,color .12s;
}
.asas-panel-close:hover{background:var(--surface2);color:var(--text)}
.asas-panel-close svg{width:14px;height:14px}
/* ── Profile hero ── */
.asas-profile-hero{
position:relative;padding:22px 18px 18px;overflow:hidden;
border-bottom:1px solid var(--border);
}
.asas-profile-hero-bg{
position:absolute;inset:0;
background:linear-gradient(145deg,#0d1a35 0%,#0a0f1e 60%,#111827 100%);
}
.asas-profile-hero-bg::before{
content:'';position:absolute;inset:0;
background-image:repeating-linear-gradient(-45deg,transparent,transparent 18px,rgba(212,168,71,.03) 18px,rgba(212,168,71,.03) 19px);
}
.asas-profile-hero-body{position:relative;display:flex;align-items:center;gap:14px}
.asas-av-ring-wrap{position:relative;width:70px;height:70px;flex-shrink:0;cursor:pointer}
.asas-av-ring-svg{position:absolute;inset:0;width:70px;height:70px}
.asas-av-ring-inner{
position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:var(--navy3);
display:flex;align-items:center;justify-content:center;border:2px solid var(--navy);
}
.asas-av-ring-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.asas-av-ring-initials{
width:100%;height:100%;border-radius:50%;background:var(--gold);color:var(--navy);
display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;letter-spacing:.02em;
}
.asas-av-overlay{
position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.6);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;opacity:0;transition:opacity .2s;
color:#fff;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;pointer-events:none;
}
.asas-av-ring-inner:hover .asas-av-overlay{opacity:1}
.asas-av-ring-pct{
position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
font-size:9px;font-weight:800;letter-spacing:.04em;
background:var(--navy3);border:1px solid var(--border);
border-radius:8px;padding:1px 6px;white-space:nowrap;color:var(--gold);
}
.asas-profile-hero-info{flex:1;min-width:0}
.asas-profile-name{font-size:14.5px;font-weight:700;color:#f0f2ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.asas-profile-email{font-size:11.5px;color:rgba(136,153,184,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:9px}
.asas-profile-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.asas-tier-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.07em}
.asas-tier-pill.free{background:rgba(255,255,255,.06);color:rgba(136,153,184,.9);border:1px solid rgba(255,255,255,.1)}
.asas-tier-pill.pro{background:rgba(59,130,246,.18);color:#93c5fd;border:1px solid rgba(59,130,246,.3)}
.asas-tier-pill.elite{background:rgba(139,92,246,.18);color:#c4b5fd;border:1px solid rgba(139,92,246,.3)}
.asas-tier-pill.elite-plus,.asas-tier-pill.elite_plus,.asas-tier-pill.team,.asas-tier-pill.enterprise{background:rgba(212,168,71,.18);color:var(--gold);border:1px solid rgba(212,168,71,.35)}
.asas-av-remove-btn{font-size:11px;color:var(--text3);background:none;border:none;cursor:pointer;padding:0;font-family:var(--sans);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.asas-av-remove-btn:hover{color:var(--red)}
#asas-av-status{font-size:11.5px;padding:2px 0 6px;color:var(--text3);text-align:center}
#asas-av-status.ok{color:var(--green)}
#asas-av-status.error{color:var(--red)}
.asas-token-ring-card{margin:14px 14px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px}
.asas-token-ring-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.asas-token-mini-ring-wrap{position:relative;width:50px;height:50px;flex-shrink:0}
.asas-token-mini-ring-wrap svg{width:50px;height:50px}
.asas-token-mini-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.asas-token-mini-pct{font-size:12px;font-weight:800;color:var(--gold)}
.asas-token-mini-lbl{font-size:8px;color:var(--text3);margin-top:1px;text-transform:uppercase;letter-spacing:.05em}
.asas-token-ring-details{flex:1;min-width:0}
.asas-token-ring-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.asas-token-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-bottom:5px}
.asas-token-bar-fill{height:4px;border-radius:2px;transition:width .5s ease}
.asas-token-ring-nums{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-bottom:5px}
.asas-token-ring-nums span:first-child{color:var(--text);font-weight:600}
.asas-token-ring-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text3)}
.asas-token-ring-meta strong{color:var(--text2)}
.asas-token-unlimited{font-size:13px;font-weight:700;color:var(--green)}
.asas-token-plan-pill{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.06em;background:var(--gold-dim);color:var(--gold);border:1px solid rgba(212,168,71,.25)}
.asas-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 14px 12px}
.asas-stat-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 8px;text-align:center}
.asas-stat-val{font-size:19px;font-weight:700;color:var(--text);line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.asas-stat-lbl{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.asas-panel-sec{border-top:1px solid var(--border3);padding:10px 14px 14px}
.asas-panel-sec:last-child{padding-bottom:16px}
.asas-panel-sec-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:6px;padding:0 2px}
.asas-nav-links{display:flex;flex-direction:column;gap:2px}
.asas-nav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;transition:background .12s;cursor:pointer}
.asas-nav-link:hover{background:var(--surface2)}
.asas-nav-icon{width:32px;height:32px;border-radius:9px;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.asas-nav-icon svg{width:14px;height:14px;color:var(--text2)}
.asas-nav-text{flex:1;min-width:0}
.asas-nav-text-main{display:block;font-size:13px;color:var(--text);font-weight:500}
.asas-nav-text-sub{display:block;font-size:11px;color:var(--text3);margin-top:1px}
.asas-nav-arrow{width:11px;height:11px;margin-left:auto;opacity:.2;flex-shrink:0}
.asas-nav-icon-gold{background:rgba(212,168,71,.12)}
.asas-nav-icon-gold svg{color:var(--gold)}
.asas-nav-link-upgrade:hover{background:rgba(212,168,71,.07)}
.asas-nav-link.danger .asas-nav-text-main{color:#f87171}
.asas-nav-icon-danger{background:rgba(248,113,113,.1)}
.asas-nav-icon-danger svg{color:#f87171}
.asas-nav-link.danger:hover{background:rgba(248,113,113,.07)}
/* gate */
.asas-gate{max-width:400px;margin:60px auto;padding:30px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:14.5px;color:var(--text2);text-align:center;line-height:1.6}
.asas-gate-icon{width:50px;height:50px;border-radius:12px;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.asas-gate h2{font-size:20px;font-weight:600;color:var(--text);margin:0 0 10px}
.asas-gate p{margin:0 0 18px}
.asas-gate .asas-btn{display:inline-flex;width:auto;padding:9px 24px}
.asas-btn{display:flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:500;font-family:var(--sans);cursor:pointer;text-decoration:none;width:100%;text-align:center;transition:background .15s,color .15s;border:1px solid var(--border);background:none;color:var(--text2)}
.asas-btn:hover{background:var(--surface2);color:var(--text)}
.asas-btn.primary{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700}
.asas-btn.primary:hover{background:var(--gold2);border-color:var(--gold2)}
.asas-quota-error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:var(--r-xs);padding:12px 16px;font-size:13.5px;color:#fca5a5;margin:8px 0;line-height:1.6}
.asas-quota-error a{color:var(--gold) !important;font-weight:700;text-decoration:none}
.asas-token-details-link{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--gold);font-weight:600;text-decoration:none;opacity:.8}
.asas-token-details-link:hover{opacity:1}
/* ══════════════════════════════════════════════════════════════════
VISUAL ENGINE — file preview shown as HTML inline
══════════════════════════════════════════════════════════════════ */
.asas-visual-wrap{
border:1px solid rgba(212,168,71,.25);border-radius:var(--r-sm);
overflow:hidden;margin:12px 0;background:var(--code-bg);
}
.asas-visual-label{
display:flex;align-items:center;gap:8px;
background:var(--navy3);color:var(--gold);
font-size:11.5px;font-weight:700;padding:8px 14px;
letter-spacing:.05em;border-bottom:1px solid rgba(212,168,71,.15);
}
.asas-visual-badge{
margin-left:auto;background:var(--gold-dim);color:var(--gold);
border:1px solid rgba(212,168,71,.3);border-radius:20px;
font-size:9.5px;padding:2px 8px;letter-spacing:.07em;font-weight:800;
}
.asas-visual-body{padding:16px;overflow-x:auto}
.asas-svg-body{display:flex;justify-content:center;align-items:flex-start;min-height:200px}
.asas-svg-body svg{max-width:100%;height:auto;border-radius:6px}
.asas-mmd-body{padding:20px;background:#F4F6FA;min-height:160px}
.asas-mermaid-pre{margin:0;background:transparent !important;border:none !important}
/* ── HTML visual iframe — taller for full chart display ── */
.asas-visual-iframe{width:100%;min-height:480px;border:none;display:block;background:#fff}
.asas-visual-actions{
display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;
background:var(--navy3);border-top:1px solid rgba(255,255,255,.06);
}
.asas-vis-btn{
background:var(--gold);color:var(--navy);border:none;
padding:7px 16px;border-radius:6px;font-size:12px;font-weight:700;
cursor:pointer;transition:opacity .15s,transform .1s;white-space:nowrap;font-family:inherit;
}
.asas-vis-btn:hover{opacity:.85;transform:translateY(-1px)}
.asas-vis-btn:active{transform:translateY(0)}
.asas-vis-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.asas-vis-btn.asas-vis-btn-sec{background:transparent;color:var(--gold);border:1.5px solid rgba(212,168,71,.5)}
.asas-vis-btn.asas-vis-btn-sec:hover{background:var(--gold-dim)}
/* ── Inline HTML file preview — rendered in-page ── */
.asas-html-preview{
width:100%;overflow:hidden;border-radius:var(--r-sm);
border:1px solid rgba(212,168,71,.15);background:#fff;margin:0;
}
.asas-html-preview-frame{
width:100%;min-height:360px;border:none;display:block;background:#fff;
}
.asas-html-preview-actions{
display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;
background:var(--navy3);border-top:1px solid rgba(255,255,255,.06);
}
.asas-file-preview-table{width:100%;border-collapse:collapse;font-size:13px}
.asas-file-preview-table th{background:var(--navy3);color:var(--gold);padding:9px 13px;text-align:left;font-weight:700;border:1px solid rgba(212,168,71,.2);white-space:nowrap}
.asas-file-preview-table td{padding:8px 13px;border:1px solid var(--border3);color:var(--code-text);vertical-align:top}
.asas-file-preview-table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.asas-file-preview-table tr:hover td{background:var(--gold-glow)}
.asas-visual-fullscreen{position:fixed !important;inset:0 !important;z-index:99999 !important;border-radius:0 !important;margin:0 !important;width:100vw !important;height:100vh !important;overflow:auto !important}
.asas-visual-fullscreen .asas-visual-iframe{min-height:calc(100vh - 80px) !important}
body.asas-visual-fs-active{overflow:hidden}
.asas-mmd-prose{color:var(--text2);font-size:14px;line-height:1.7;margin-bottom:12px}
/* ── Streaming cursor ── */
.asas-cursor{display:inline-block;color:var(--gold);font-size:1em;line-height:1;vertical-align:baseline;animation:asas-blink .55s step-end infinite;margin-left:1px}
@keyframes asas-blink{0%,100%{opacity:1}50%{opacity:0}}
#asas-token-quota-row .asas-token-fill,.asas-token-bar-fill{transition:width .6s ease,background .4s ease}
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE — tablet & mobile
══════════════════════════════════════════════════════════════════ */
/* Tablet: narrow sidebar */
@media(max-width:900px){
#asas-sidebar{width:200px}
#asas-feed{max-width:100%}
}
/* Mobile: sidebar becomes overlay drawer */
@media(max-width:640px){
#asas-app{height:100dvh}
#asas-topbar{display:flex}
#asas-sidebar{
position:fixed;top:0;bottom:0;left:0;z-index:200; /* was `inset-y:0` — not a CSS property, silently ignored */
transform:translateX(-100%);width:280px;
box-shadow:4px 0 24px rgba(0,0,0,.5);
}
#asas-sidebar.open{transform:translateX(0)}
#asas-panel{width:100%}
#asas-feed{padding:16px 14px 8px}
#asas-composer{padding:8px 14px 12px}
.asas-stats{grid-template-columns:repeat(2,1fr)}
.asas-msg.user .asas-bubble{max-width:90%}
.asas-visual-iframe,.asas-html-preview-frame{min-height:280px}
#asas-attach-toolbar .asas-attach-btn:nth-child(n+3){display:none}
#asas-attach-toolbar .asas-attach-divider{display:none}
}
/* Very small screens */
@media(max-width:380px){
.asas-bubble{padding:11px 13px;font-size:14px}
#asas-send{width:32px;height:32px}
}
/* Fullscreen embed mode */
.asas-chat-wrap[data-embed="fullscreen"] #asas-app{
height:100dvh !important;border-radius:0 !important;border:none !important;
}
/* Tier pill aliases */
.asas-strip-tier.pro,.asas-strip-tier.team,.asas-strip-tier.enterprise,
.asas-strip-tier.elite,.asas-strip-tier.elite-plus,.asas-strip-tier.elite_plus{color:var(--gold);font-weight:600}
.asas-token-plan-pill.free{background:var(--gold-dim);color:var(--gold)}
.asas-token-plan-pill.pro{background:var(--gold);color:var(--navy)}
.asas-token-plan-pill.team{background:var(--navy3);color:#c7d2fe}
.asas-token-plan-pill.enterprise{background:var(--gold);color:var(--navy)}
/* ═══════════════════════════════════════════════════════════════════
v3.3.0 NEW FEATURES — Stop · Search · Preview Panel · BG Picker · Logo
═══════════════════════════════════════════════════════════════════ */
/* ── ASDD Logo (replace orange hexagon) ─────────────────────────── */
.asas-logomark.asas-logomark-img{background:transparent !important;border-radius:0 !important}
.asas-logomark.asas-logomark-img img{width:40px;height:40px;object-fit:contain;border-radius:0;display:block}
.asas-msg-av{
width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;
overflow:hidden;
}
.asas-msg.ai .asas-msg-av{
background:transparent;padding:0;
}
.asas-msg.ai .asas-msg-av img.asas-ai-avatar{
width:100%;height:100%;object-fit:contain;border-radius:0;
}
/* ── Stop Button ─────────────────────────────────────────────────── */
#asas-stop-btn{
display:none;position:absolute;bottom:calc(100% + 8px);left:50%;
transform:translateX(-50%);
background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);
color:#f87171;font-size:12px;font-weight:600;padding:6px 18px;
border-radius:20px;cursor:pointer;
transition:all .15s;white-space:nowrap;
backdrop-filter:blur(6px);
z-index:20;
}
#asas-stop-btn:hover{background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.6)}
#asas-composer{position:relative}
/* Stopped note */
.asas-stopped-note{
font-size:11px;color:var(--text3);margin-top:6px;font-style:italic;
}
/* ── Conversation Search ─────────────────────────────────────────── */
#asas-search-btn{
width:28px;height:28px;border-radius:7px;border:none;
background:transparent;color:var(--text2);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s;
flex-shrink:0;
}
#asas-search-btn:hover{background:var(--surface2);color:var(--text)}
#asas-search-wrap{
overflow:hidden;max-height:0;transition:max-height .2s ease,padding .2s;
padding:0 14px;
}
#asas-search-wrap.open{max-height:52px;padding:8px 14px}
#asas-search-input{
width:100%;padding:6px 10px;border-radius:7px;
border:1px solid var(--border);background:var(--surface2);
color:var(--text);font-size:13px;outline:none;
font-family:var(--sans);
}
#asas-search-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-dim)}
#asas-search-input::placeholder{color:var(--text3)}
#asas-search-empty{
font-size:12px;color:var(--text3);text-align:center;
padding:8px 14px;display:none;
}
mark.asas-search-hl{
background:rgba(212,168,71,.3);color:var(--gold);border-radius:2px;
padding:0 1px;font-style:normal;
}
/* ── Side Preview Panel ──────────────────────────────────────────── */
#asas-preview-panel{
width:0;flex-shrink:0;background:var(--navy2);
border-left:1px solid var(--border);
display:flex;flex-direction:column;
overflow:hidden;height:100%;
position:relative;min-width:0;
}
#asas-preview-panel.open{width:420px}
#asas-preview-panel.animating{transition:width .25s cubic-bezier(.4,0,.2,1)}
/* ── Drag handle ── */
#asas-resize-handle{
position:absolute;left:0;top:0;bottom:0;width:5px;
cursor:col-resize;z-index:20;background:transparent;
touch-action:none;
}
#asas-resize-handle:hover,
#asas-resize-handle.dragging{background:rgba(212,168,71,.2)}
#asas-resize-handle::after{
content:'';position:absolute;top:50%;left:1px;transform:translateY(-50%);
width:3px;height:40px;border-radius:2px;
background:rgba(212,168,71,.7);opacity:0;transition:opacity .15s;
}
#asas-resize-handle:hover::after,
#asas-resize-handle.dragging::after{opacity:1}
#asas-preview-hd{
display:flex;align-items:center;justify-content:space-between;
padding:10px 12px 10px 16px;border-bottom:1px solid var(--border3);flex-shrink:0;gap:8px;
}
#asas-preview-hd-left{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);min-width:0}
#asas-preview-hd-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.asas-size-btn{
width:24px;height:24px;border:1px solid var(--border2);background:none;
border-radius:5px;cursor:pointer;color:var(--text2);
display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;transition:all .12s;padding:0;
}
.asas-size-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border)}
.asas-size-btn.active{background:var(--gold-dim);color:var(--gold);border-color:var(--gold)}
#asas-preview-close{
width:24px;height:24px;border:none;background:none;color:var(--text2);
cursor:pointer;border-radius:5px;display:flex;align-items:center;justify-content:center;
font-size:14px;margin-left:2px;transition:all .12s;
}
#asas-preview-close:hover{background:var(--surface2);color:var(--text)}
#asas-preview-body{
flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
}
#asas-preview-body iframe{width:100%;flex:1;border:none;border-radius:8px;background:#0a0f1e;min-height:300px}
#asas-preview-body svg{max-width:100%;border-radius:6px}
#asas-preview-body img{max-width:100%;border-radius:6px}
/* App layout when preview is open */
#asas-app.has-preview #asas-main{min-width:0;flex:1}
#asas-app.resizing{user-select:none;cursor:col-resize}
.asas-dl-preview{background:rgba(212,168,71,.1) !important;color:var(--gold) !important;border-color:rgba(212,168,71,.25) !important}
/* ── Background Colour Picker ────────────────────────────────────── */
#asas-bg-btn{
width:28px;height:28px;border-radius:7px;border:none;
background:transparent;color:var(--text2);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .15s;flex-shrink:0;
}
#asas-bg-btn:hover{background:var(--surface2);color:var(--text)}
#asas-bg-picker{
position:absolute;top:calc(100% + 6px);left:0;z-index:9999;
background:var(--navy3);border:1px solid var(--border);
border-radius:12px;padding:14px;width:240px;
box-shadow:0 8px 32px rgba(0,0,0,.45);
}
.asas-bg-picker-hd{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:12px;font-size:13px;font-weight:600;color:var(--text);
}
#asas-bg-close{
background:none;border:none;color:var(--text2);cursor:pointer;
font-size:14px;padding:0;line-height:1;
}
.asas-bg-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.asas-bg-swatch{
width:30px;height:30px;border-radius:8px;border:2px solid transparent;
cursor:pointer;transition:transform .1s,border-color .1s;
}
.asas-bg-swatch:hover{transform:scale(1.12)}
.asas-bg-swatch-active{border-color:var(--gold) !important}
.asas-bg-custom-row{
display:flex;align-items:center;gap:10px;margin-bottom:10px;
font-size:12px;color:var(--text2);
}
#asas-bg-custom{
width:34px;height:28px;border:1px solid var(--border);border-radius:6px;
cursor:pointer;padding:1px;background:none;
}
.asas-bg-reset{
width:100%;padding:6px;background:var(--surface2);border:1px solid var(--border);
border-radius:7px;color:var(--text2);font-size:12px;cursor:pointer;
}
.asas-bg-reset:hover{color:var(--text)}
/* ── Sidebar top button row ──────────────────────────────────────── */
#asas-sidebar-top-btns{
display:flex;align-items:center;gap:4px;
padding:4px 14px 8px;
}
@media(max-width:768px){
#asas-preview-panel.open{display:none}
}
/* ── Search button inline label fix ─────────────────────────────── */
#asas-sidebar-top-btns{
padding:2px 14px 10px;
border-bottom:1px solid var(--border3);
display:flex;gap:6px;align-items:center;
position:relative;
}
#asas-search-btn,
#asas-bg-btn{
flex:1;padding:5px 8px;border-radius:7px;
font-size:12px;color:var(--text2);gap:5px;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--border3);background:var(--surface);
cursor:pointer;transition:background .15s,color .15s;
}
#asas-search-btn:hover,
#asas-bg-btn:hover{background:var(--surface2);color:var(--text)}
#asas-search-btn svg,
#asas-bg-btn svg{flex-shrink:0}
/* ═══════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════
ASAS-AI THEME SYSTEM v3.4.0
Direct hardcoded colours per surface per theme — no cascade dependency.
Every critical surface uses !important to win over base rules.
Covers: app shell · sidebar · history · composer · input · bubbles ·
preview panel · account panel · profile · token card · nav links
═══════════════════════════════════════════════════════════════════════ */
/* ── Theme picker widget ─────────────────────────────────────────────── */
#asas-theme-picker {
position: fixed;
z-index: 9200;
border-radius: 12px;
padding: 10px;
width: 244px;
background: #111827;
border: 1px solid rgba(212,168,71,.25);
box-shadow: 0 12px 40px rgba(0,0,0,.7);
color: #e8eaf2;
}
.asas-theme-picker-hd {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.asas-theme-picker-hd span {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .09em;
}
#asas-theme-picker-close {
background: none; border: none; cursor: pointer;
font-size: 14px; padding: 0; line-height: 1; opacity: .6;
}
#asas-theme-picker-close:hover { opacity: 1; }
.asas-theme-group-lbl {
font-size: 10px; font-weight: 700; opacity: .5;
text-transform: uppercase; letter-spacing: .1em; margin: 10px 0 7px;
}
.asas-theme-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 4px; }
.asas-theme-swatch { display: flex; flex-direction: column; align-items: stretch; gap: 4px; cursor: pointer; border: none; background: none; padding: 0; width: 100%; }
.asas-theme-preview { width: 100%; height: 38px; border-radius: 7px; border: 2px solid rgba(255,255,255,.1); position: relative; overflow: hidden; transition: transform .12s, border-color .15s; }
.asas-theme-swatch:hover .asas-theme-preview { transform: scale(1.08); border-color: rgba(128,128,128,.5); }
.asas-theme-swatch.active .asas-theme-preview { border-color: #D4A847; box-shadow: 0 0 0 2px rgba(212,168,71,.3); }
.asas-theme-preview-inner { position: absolute; inset: 0; display: flex; }
.asas-theme-preview-sidebar { width: 30%; height: 100%; flex-shrink: 0; }
.asas-theme-preview-main { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 4px 3px; }
.asas-theme-preview-bubble { height: 8px; border-radius: 2px; border-left: 2px solid transparent; }
.asas-theme-preview-bubble.user { width: 55%; align-self: flex-end; border-left: none; margin-top: 1px; opacity: .5; }
.asas-theme-preview-composer { height: 9px; margin-top: auto; border-radius: 2px; border: 1px solid rgba(128,128,128,.2); }
/* Light-theme previews (Cloud/Paper/Arctic/Sage) are near-white fills, so the
dark-swatch styling above — a pale 10%-white frame, no inner outlines — is
invisible on them: bubble, composer and the sidebar/main seam all vanish.
Give this one grid dark 12–20%-black outlines instead, scoped so the
dark-theme grid above keeps its original look untouched. */
.asas-theme-grid-light .asas-theme-preview { border-color: rgba(0,0,0,.20); }
.asas-theme-grid-light .asas-theme-preview-sidebar { box-shadow: 1px 0 0 rgba(0,0,0,.14); }
.asas-theme-grid-light .asas-theme-preview-bubble { outline: 1px solid rgba(0,0,0,.16); outline-offset: -1px; }
.asas-theme-grid-light .asas-theme-preview-composer { border-color: rgba(0,0,0,.20); }
.asas-theme-lbl { font-size: 9px; text-align: center; white-space: nowrap; opacity: .6; line-height: 1.2; }
.asas-theme-swatch.active .asas-theme-lbl { opacity: 1; font-weight: 700; color: #D4A847; }
/* ════════════════════════════════════════════════════════════════════════
MIXIN — applied to EVERY theme via the [data-theme] attribute.
These are overrides that work via CSS variables set per theme below.
════════════════════════════════════════════════════════════════════════ */
#asas-app[data-theme] { color: var(--tx); }
#asas-app[data-theme] #asas-sidebar { background: var(--sb) !important; border-right-color: var(--bd) !important; }
#asas-app[data-theme] #asas-main { background: var(--bg) !important; }
#asas-app[data-theme] #asas-feed-wrap { background: var(--bg) !important; }
#asas-app[data-theme] #asas-composer { background: var(--sb) !important; border-top-color: var(--bd) !important; }
#asas-app[data-theme] #asas-input-wrap { background: var(--sf) !important; border-color: var(--b2) !important; }
#asas-app[data-theme] #asas-input { color: var(--tx) !important; background: transparent !important; }
#asas-app[data-theme] #asas-input::placeholder { color: var(--t3) !important; }
#asas-app[data-theme] #asas-topbar { background: var(--sb) !important; border-bottom-color: var(--bd) !important; }
#asas-app[data-theme] #asas-footer-note { color: var(--t3) !important; }
#asas-app[data-theme] #asas-send { background: var(--ac) !important; color: var(--an) !important; }
#asas-app[data-theme] #asas-send:hover { background: var(--ac2) !important; }
#asas-app[data-theme] #asas-send:disabled { background: var(--s2) !important; color: var(--t3) !important; }
/* sidebar items */
#asas-app[data-theme] .asas-logotype-name { color: var(--tx) !important; }
#asas-app[data-theme] .asas-logotype-sub { color: var(--t3) !important; }
#asas-app[data-theme] .asas-sb-label { color: var(--t3) !important; }
#asas-app[data-theme] .asas-history-empty { color: var(--t3) !important; }
#asas-app[data-theme] .asas-hist-preview { color: var(--tx) !important; }
#asas-app[data-theme] .asas-hist-ts { color: var(--t3) !important; }
#asas-app[data-theme] .asas-history-item:hover { background: var(--s2) !important; }
#asas-app[data-theme] .asas-history-item.active { background: var(--ad) !important; border-left-color: var(--ac) !important; }
#asas-app[data-theme] .asas-history-item.active .asas-hist-preview { color: var(--ac) !important; }
#asas-app[data-theme] .asas-new-btn { background: var(--ad) !important; border-color: var(--bd) !important; color: var(--ac) !important; }
#asas-app[data-theme] .asas-user-strip:hover { background: var(--s2) !important; }
#asas-app[data-theme] .asas-strip-name { color: var(--tx) !important; }
#asas-app[data-theme] .asas-strip-tier { color: var(--t3) !important; }
#asas-app[data-theme] #asas-search-btn,
#asas-app[data-theme] #asas-bg-btn { background: var(--sf) !important; border-color: var(--b2) !important; color: var(--t2) !important; }
#asas-app[data-theme] #asas-search-btn:hover,
#asas-app[data-theme] #asas-bg-btn:hover { background: var(--s2) !important; color: var(--tx) !important; }
#asas-app[data-theme] #asas-search-input { background: var(--s2) !important; border-color: var(--bd) !important; color: var(--tx) !important; }
/* bubbles */
#asas-app[data-theme] .asas-msg.ai .asas-bubble { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--tx) !important; }
#asas-app[data-theme] .asas-msg.user .asas-bubble { background: var(--ub) !important; border: 1px solid rgba(0,0,0,.12) !important; color: var(--ut) !important; border-radius: 18px 18px 4px 18px !important; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
#asas-app[data-theme] .asas-bubble p,
#asas-app[data-theme] .asas-bubble li { color: var(--tx) !important; }
#asas-app[data-theme] .asas-bubble h1,
#asas-app[data-theme] .asas-bubble h2,
#asas-app[data-theme] .asas-bubble h3 { color: var(--ac) !important; }
#asas-app[data-theme] .asas-bubble code { background: var(--cb) !important; color: var(--ac2) !important; border-color: var(--bd) !important; }
#asas-app[data-theme] .asas-bubble pre { background: var(--cb) !important; border-color: var(--bd) !important; }
#asas-app[data-theme] .asas-bubble pre code { color: var(--ct) !important; }
#asas-app[data-theme] .asas-bubble blockquote { border-left-color: var(--ac) !important; background: var(--ag) !important; color: var(--t2) !important; }
#asas-app[data-theme] .asas-bubble th { background: var(--n3) !important; color: var(--ac) !important; }
#asas-app[data-theme] .asas-bubble td { border-color: var(--b3) !important; color: var(--tx) !important; }
#asas-app[data-theme] .asas-bubble tr:nth-child(even) td { background: var(--s3) !important; }
#asas-app[data-theme] .asas-typing-dots { background: var(--sf) !important; border-color: var(--bd) !important; border-left-color: var(--ac) !important; }
#asas-app[data-theme] .asas-typing-dots span { background: var(--ac) !important; }
#asas-app[data-theme] .asas-cursor { color: var(--ac) !important; }
#asas-app[data-theme] .asas-elapsed { color: var(--t3) !important; }
/* preview panel */
#asas-app[data-theme] #asas-preview-panel { background: var(--sb) !important; border-left-color: var(--bd) !important; }
#asas-app[data-theme] #asas-preview-hd { border-bottom-color: var(--b3) !important; }
#asas-app[data-theme] #asas-preview-hd-left { color: var(--tx) !important; }
#asas-app[data-theme] #asas-preview-close { color: var(--t2) !important; }
#asas-app[data-theme] #asas-preview-close:hover { background: var(--s2) !important; }
#asas-app[data-theme] .asas-size-btn { border-color: var(--b2) !important; color: var(--t2) !important; }
#asas-app[data-theme] .asas-size-btn:hover { background: var(--s2) !important; color: var(--tx) !important; }
#asas-app[data-theme] .asas-size-btn.active { background: var(--ad) !important; color: var(--ac) !important; border-color: var(--ac) !important; }
/* account panel */
#asas-app[data-theme] #asas-panel-bg { background: rgba(0,0,0,.55) !important; }
#asas-app[data-theme] #asas-panel { background: var(--sb) !important; border-left-color: var(--bd) !important; }
#asas-app[data-theme] .asas-panel-title { color: var(--tx) !important; }
#asas-app[data-theme] .asas-panel-close { color: var(--t3) !important; }
#asas-app[data-theme] .asas-panel-close:hover { background: var(--s2) !important; }
#asas-app[data-theme] .asas-profile-hero { border-bottom-color: var(--bd) !important; }
#asas-app[data-theme] .asas-profile-hero-bg { background: linear-gradient(145deg, var(--n3), var(--sb)) !important; }
#asas-app[data-theme] .asas-profile-name { color: var(--tx) !important; }
#asas-app[data-theme] .asas-profile-email { color: var(--t2) !important; }
#asas-app[data-theme] .asas-av-ring-inner { background: var(--n3) !important; }
#asas-app[data-theme] .asas-av-ring-pct { background: var(--n3) !important; border-color: var(--bd) !important; color: var(--ac) !important; }
#asas-app[data-theme] .asas-token-ring-card { background: var(--sf) !important; border-color: var(--bd) !important; }
#asas-app[data-theme] .asas-token-mini-pct { color: var(--ac) !important; }
#asas-app[data-theme] .asas-token-mini-lbl { color: var(--t3) !important; }
#asas-app[data-theme] .asas-token-bar { background: var(--b2) !important; }
#asas-app[data-theme] .asas-token-ring-nums { color: var(--t3) !important; }
#asas-app[data-theme] .asas-token-ring-nums span:first-child { color: var(--tx) !important; }
#asas-app[data-theme] .asas-token-ring-meta { color: var(--t3) !important; }
#asas-app[data-theme] .asas-stat-box { background: var(--sf) !important; border-color: var(--bd) !important; }
#asas-app[data-theme] .asas-stat-val { color: var(--tx) !important; }
#asas-app[data-theme] .asas-stat-lbl { color: var(--t3) !important; }
#asas-app[data-theme] .asas-panel-sec { border-top-color: var(--b3) !important; }
#asas-app[data-theme] .asas-panel-sec-lbl { color: var(--t3) !important; }
#asas-app[data-theme] .asas-nav-link:hover { background: var(--s2) !important; }
#asas-app[data-theme] .asas-nav-icon { background: var(--s2) !important; }
#asas-app[data-theme] .asas-nav-icon svg { color: var(--t2) !important; }
#asas-app[data-theme] .asas-nav-icon-gold { background: var(--ad) !important; }
#asas-app[data-theme] .asas-nav-icon-gold svg { color: var(--ac) !important; }
#asas-app[data-theme] .asas-nav-text-main { color: var(--tx) !important; }
#asas-app[data-theme] .asas-nav-text-sub { color: var(--t3) !important; }
#asas-app[data-theme] .asas-dl-toolbar { border-top-color: var(--bd) !important; }
#asas-app[data-theme] .asas-dl-label { color: var(--t3) !important; }
#asas-app[data-theme] .asas-dl-btn { background: var(--ad) !important; color: var(--ac) !important; border-color: var(--bd) !important; }
#asas-app[data-theme] .asas-visual-label { background: var(--n3) !important; color: var(--ac) !important; }
#asas-app[data-theme] .asas-visual-actions { background: var(--n3) !important; }
#asas-app[data-theme] .asas-token-plan-pill { background: var(--ad) !important; color: var(--ac) !important; }
#asas-app[data-theme] mark.asas-search-hl { background: var(--ad) !important; color: var(--ac) !important; }
#asas-app[data-theme] .asas-msg-att-tag { background: var(--ad) !important; color: var(--ac) !important; }
/* ════════════════════════════════════════════════════════════════════════
DARK THEMES
Short variable names: --bg main bg, --sb sidebar bg, --sf surface/bubble,
--s2 surface2, --s3 surface3/stripe, --n3 navy3, --bd border, --b2 border2,
--b3 border3, --tx text, --t2 text2, --t3 text3, --ac accent/gold,
--ac2 accent2, --ad accent-dim, --ag accent-glow, --ub user-bubble bg,
--ut user-bubble text, --cb code bg, --ct code text, --an accent nav (navy for dark)
════════════════════════════════════════════════════════════════════════ */
/* ── 1. Midnight Navy ── */
/* ── 2. Obsidian ── */
#asas-app[data-theme="obsidian"] #asas-feed-wrap {
background:
linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
#0a0a0a !important;
background-size: 32px 32px, 32px 32px, auto !important;
}
/* ── 3. Deep Slate ── */
#asas-app[data-theme="deep-slate"] #asas-feed-wrap {
background:
radial-gradient(circle,rgba(148,163,184,.11) 1px,transparent 1px),
#0f172a !important;
background-size: 24px 24px, auto !important;
}
/* ── 4. Volcanic ── */
#asas-app[data-theme="volcanic"] #asas-feed-wrap {
background:
repeating-linear-gradient(-55deg,transparent,transparent 38px,rgba(232,100,30,.03) 38px,rgba(232,100,30,.03) 39px),
repeating-linear-gradient(55deg,transparent,transparent 38px,rgba(232,100,30,.03) 38px,rgba(232,100,30,.03) 39px),
#120a08 !important;
background-size: auto !important;
}
/* ── 5. Forest ── */
#asas-app[data-theme="forest"] #asas-feed-wrap {
background:
repeating-linear-gradient(0deg,transparent,transparent 22px,rgba(52,211,153,.042) 22px,rgba(52,211,153,.042) 23px),
repeating-linear-gradient(90deg,transparent,transparent 22px,rgba(52,211,153,.042) 22px,rgba(52,211,153,.042) 23px),
#071410 !important;
background-size: auto !important;
}
/* ── 6. Cosmic Purple ── */
#asas-app[data-theme="cosmic-purple"] #asas-feed-wrap {
background:
radial-gradient(circle,rgba(167,139,250,.16) 1px,transparent 1px),
radial-gradient(circle,rgba(167,139,250,.08) 1px,transparent 1px),
#0d0818 !important;
background-size: 40px 40px, 20px 20px, auto !important;
background-position: 0 0, 10px 10px, 0 0 !important;
}
/* ── 7. Steel Blue ── */
#asas-app[data-theme="steel-blue"] #asas-feed-wrap {
background:
repeating-linear-gradient(-45deg,transparent,transparent 18px,rgba(56,189,248,.035) 18px,rgba(56,189,248,.035) 19px),
repeating-linear-gradient(45deg,transparent,transparent 18px,rgba(56,189,248,.035) 18px,rgba(56,189,248,.035) 19px),
#080e18 !important;
background-size: auto !important;
}
/* ── 8. Gold Standard ── */
#asas-app[data-theme="gold-standard"] #asas-feed-wrap {
background:
repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(212,168,71,.048) 28px,rgba(212,168,71,.048) 29px),
repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(212,168,71,.048) 28px,rgba(212,168,71,.048) 29px),
#0f0b05 !important;
background-size: auto !important;
}
/* ════════════════════════════════════════════════════════════════════════
LIGHT THEMES
════════════════════════════════════════════════════════════════════════ */
/* ── 9. Cloud White ── */
/* ── 10. Warm Paper ── */
#asas-app[data-theme="light-paper"] #asas-feed-wrap {
background:
repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(140,100,30,.09) 27px,rgba(140,100,30,.09) 28px),
#faf7f0 !important;
background-size: auto !important;
}
#asas-app[data-theme="light-paper"] #asas-sidebar {
background: #f0e8d8 !important;
}
#asas-app[data-theme="light-paper"] #asas-composer {
background: #f0e8d8 !important;
}
/* ── 11. Arctic ── */
#asas-app[data-theme="light-arctic"] #asas-feed-wrap {
background:
radial-gradient(circle,rgba(29,111,191,.1) 1px,transparent 1px),
#ecf4ff !important;
background-size: 26px 26px, auto !important;
}
#asas-app[data-theme="light-arctic"] #asas-sidebar {
background: #dceeff !important;
}
#asas-app[data-theme="light-arctic"] #asas-composer {
background: #dceeff !important;
}
/* ── 12. Sage Green ── */
/* Theme definitions and the legacy-variable bridge live in asas-themes.css (shared with the profile dashboard). */
#asas-app[data-theme="light-sage"] #asas-feed-wrap {
background:
repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(42,138,80,.055) 20px,rgba(42,138,80,.055) 21px),
#eef6f0 !important;
background-size: auto !important;
}
#asas-app[data-theme="light-sage"] #asas-sidebar {
background: #e0f0e6 !important;
}
#asas-app[data-theme="light-sage"] #asas-composer {
background: #e0f0e6 !important;
}
/* ── Light themes: shared tweaks ─────────────────────────────────────── */
#asas-app[data-theme^="light-"] .asas-profile-hero-bg::before { opacity: 0 !important; }
#asas-app[data-theme^="light-"] #asas-panel-bg { background: rgba(0,0,0,.3) !important; }
/* ── Sidebar pattern background (applies to ALL themes) ─────────────── */
#asas-app[data-theme="midnight-navy"] #asas-sidebar,
#asas-app[data-theme="obsidian"] #asas-sidebar,
#asas-app[data-theme="deep-slate"] #asas-sidebar,
#asas-app[data-theme="volcanic"] #asas-sidebar,
#asas-app[data-theme="forest"] #asas-sidebar,
#asas-app[data-theme="cosmic-purple"] #asas-sidebar,
#asas-app[data-theme="steel-blue"] #asas-sidebar,
#asas-app[data-theme="gold-standard"] #asas-sidebar {
/* Subtle vertical line accent on dark sidebars */
background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) !important;
background-size: auto 40px !important;
}
/* ═══════════════════════════════════════════════════════════════════════
ASAS-AI v3.5.2 — Full-Width Feed + Welcome Screen
═══════════════════════════════════════════════════════════════════════ */
/* ── Full-width feed ─────────────────────────────────────────────────── */
#asas-feed {
max-width: 100% !important;
padding: 24px 28px 12px !important;
box-sizing: border-box;
}
/* ── AI bubbles: full width ─────────────────────────────────────────── */
/* AI bubble: see base rules above */
/* User bubble: see base rules above */
/* ── Visuals: full width ─────────────────────────────────────────────── */
.asas-visual-wrap,
.asas-html-preview-frame,
.asas-visual-iframe { width: 100% !important; max-width: 100% !important; }
/* ── Composer: wider ─────────────────────────────────────────────────── */
#asas-composer { padding: 8px 28px 14px !important; }
/* ── Input focus glow ────────────────────────────────────────────────── */
#asas-input-wrap { transition: border-color .2s !important; }
#asas-input-wrap:focus-within { border-color: rgba(212,168,71,.35) !important; }
#asas-input { font-size: 14.5px !important; }
/* ── Welcome screen ──────────────────────────────────────────────────── */
#asas-welcome {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 52px 28px 36px;
animation: asas-in .35s ease;
}
#asas-welcome.hidden { display: none !important; }
.asas-welcome-logo {
display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.asas-welcome-title {
font-size: 26px; font-weight: 800; color: #D4A847;
letter-spacing: .06em; line-height: 1;
}
.asas-welcome-sub {
font-size: 11.5px; color: rgba(255,255,255,.35);
margin-top: 3px; letter-spacing: .04em;
}
.asas-welcome-msg {
font-size: 13.5px; color: rgba(255,255,255,.45);
line-height: 1.7; margin: 0 0 24px; max-width: 500px;
}
.asas-welcome-pills {
display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.asas-welcome-pill {
padding: 7px 15px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.09);
border-radius: 18px;
color: rgba(255,255,255,.65);
font-size: 12px; font-weight: 500;
cursor: pointer; font-family: inherit;
transition: background .15s, border-color .15s, color .15s;
}
.asas-welcome-pill:hover {
background: rgba(212,168,71,.1);
border-color: rgba(212,168,71,.28);
color: #D4A847;
}
/* ── Scrollbar ──────────────────────────────────────────────────────── */
#asas-feed-wrap {
scrollbar-width: thin !important;
scrollbar-color: rgba(212,168,71,.12) transparent !important;
}
#asas-feed-wrap::-webkit-scrollbar { width: 3px !important; }
#asas-feed-wrap::-webkit-scrollbar-thumb {
background: rgba(212,168,71,.18) !important;
border-radius: 3px !important;
}
/* ── Mobile feed/composer adjustments ───────────────────────────────── */
@media(max-width:768px){
#asas-feed { padding: 14px 12px 8px !important; }
#asas-composer { padding: 6px 10px 10px !important; }
/* mobile user bubble: see responsive section */
#asas-welcome { padding: 28px 14px 20px; }
.asas-welcome-title { font-size: 20px; }
.asas-welcome-msg { font-size: 12.5px; }
.asas-welcome-pill { font-size: 11px; padding: 6px 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════
ASAS-AI v3.5.3 — Full UI Rebuild
User profile at top · Alternating conversations · Scroll arrows ·
Theme consistency · welcome screen
═══════════════════════════════════════════════════════════════════════ */
/* ── Sidebar header: logo + user profile pill ────────────────────────── */
.asas-sb-head {
/* Was a single row: logo + profile pill fighting over ~223px, which
truncated one or the other no matter how each was sized. Stacked
instead — the sidebar has vertical room to spare and neither the
"ASAS-AI" wordmark nor the user's name should ever need an ellipsis. */
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-bottom: 14px;
}
.asas-sb-head .asas-profile-pill { max-width: 100%; width: 100%; }
.asas-sb-head .asas-pill-info { flex: 1; }
.asas-sb-head .asas-logo { flex: 1; min-width: 0; margin-bottom: 0; }
.asas-logo-ai { color: var(--gold); font-weight: 800; }
/* ── Profile pill at top of sidebar ─────────────────────────────────── */
.asas-profile-pill {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 10px 5px 5px;
/* Glass: translucent layered fill + blur, so the pill reads as a distinct
frosted surface floating over the sidebar rather than a flat tint. */
background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255,255,255,.12);
border-radius: 22px;
cursor: pointer;
font-family: inherit;
transition: background .16s, border-color .16s, box-shadow .16s, transform .12s;
flex-shrink: 0;
max-width: 100%;
box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 10px -4px rgba(0,0,0,.35);
}
.asas-profile-pill:hover {
background: linear-gradient(145deg, rgba(212,168,71,.16), rgba(212,168,71,.05));
border-color: rgba(212,168,71,.35);
box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px -4px rgba(212,168,71,.25);
transform: translateY(-1px);
}
.asas-av-initials {
background: linear-gradient(135deg, var(--gold) 0%, #e8c14e 100%);
color: var(--navy);
font-size: 11px; font-weight: 800;
box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 0 0 3px rgba(212,168,71,.25);
}
.asas-profile-pill img.asas-av-xs {
box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 0 0 3px rgba(212,168,71,.25);
}
.asas-pill-info {
display: flex; flex-direction: column; gap: 1px;
min-width: 0; overflow: hidden;
}
.asas-pill-name {
font-size: 11.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block;
}
.asas-pill-tier {
font-size: 9.5px; color: var(--text3);
display: block; white-space: nowrap;
}
.asas-pill-tier.asas-tier-pro {
display: inline-flex; align-items: center; gap: 2px;
color: #1a1005; font-weight: 700; letter-spacing: .02em;
background: linear-gradient(135deg, var(--gold), #e8c14e);
padding: 1px 6px 2px; border-radius: 6px; margin-top: 1px;
}
.asas-pill-tier.pro,
.asas-pill-tier.elite,
.asas-pill-tier.elite-plus,
.asas-pill-tier.elite_plus,
.asas-pill-tier.enterprise { color: var(--gold); font-weight: 600; }
/* ── Alternating conversation rows ──────────────────────────────────── */
.asas-history-item:nth-child(odd) {
background: rgba(255,255,255,.018);
}
.asas-history-item:nth-child(even) {
background: rgba(0,0,0,.08);
}
.asas-history-item:hover,
.asas-history-item:nth-child(odd):hover,
.asas-history-item:nth-child(even):hover {
background: var(--surface2) !important;
}
.asas-history-item.active,
.asas-history-item.active:nth-child(odd),
.asas-history-item.active:nth-child(even) {
background: var(--gold-dim) !important;
border-left: 2px solid var(--gold);
padding-left: 7px;
}
/* Light theme alternating rows */
#asas-app[data-theme*="light"] .asas-history-item:nth-child(odd) {
background: rgba(0,0,0,.025) !important;
}
#asas-app[data-theme*="light"] .asas-history-item:nth-child(even) {
background: rgba(255,255,255,.8) !important;
}
/* ── Command bar scroll arrows ───────────────────────────────────────── */
.asas-cbt-wrap {
position: relative;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,.04);
background: rgba(0,0,0,.2);
}
.asas-cbt-arrow {
flex-shrink: 0;
width: 28px;
height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(10,15,30,.9);
border: none;
color: rgba(255,255,255,.5);
cursor: pointer;
z-index: 2;
transition: color .12s, background .12s;
padding: 0;
}
.asas-cbt-arrow:hover { color: #D4A847; }
.asas-cbt-arrow-l { border-right: 1px solid rgba(255,255,255,.04); }
.asas-cbt-arrow-r { border-left: 1px solid rgba(255,255,255,.04); }
.asas-cbt-arrow.hidden { display: none; }
/* Make tab strip flex-1 between arrows */
#asas-cbt {
flex: 1;
}
/* Remove old border-bottom from #asas-cbt since wrapper handles it */
#asas-cbt { border-bottom: none !important; }
/* ── Theme picker — now positioned by JS near Theme button ──────────── */
#asas-theme-picker { color: var(--text, #e8eaf2); }
.asas-theme-group-lbl { color: var(--text2, #aaa); }
.asas-theme-lbl { color: var(--text2, #aaa); }
.asas-theme-swatch.active .asas-theme-lbl { color: #D4A847; }
/* ── Theme consistency — command bar follows theme ───────────────────── */
#asas-app[data-theme] #asas-command-bar {
background: var(--sb) !important;
border-bottom-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-cbt-wrap { background: rgba(0,0,0,.15) !important; }
#asas-app[data-theme] .asas-cbtab { color: var(--t2, rgba(255,255,255,.4)) !important; }
/* Featured tabs (Photo→3D, Concept Boards) are excluded: their ACTIVE state
is a solid gold/orange/purple gradient, and forcing gold text onto a gold
background made the label invisible (measured 1.00:1). Their own rules in
asas-command-bar.css set dark text for that state. */
#asas-app[data-theme] .asas-cbtab.active:not(.asas-cbtab-featured) { color: var(--ac, #D4A847) !important; border-bottom-color: var(--ac, #D4A847) !important; }
#asas-app[data-theme] .asas-cbc {
background: rgba(255,255,255,.03) !important;
border-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-cbc:hover {
background: var(--ad, rgba(212,168,71,.07)) !important;
border-color: var(--ac, #D4A847) !important;
}
#asas-app[data-theme] .asas-cbc-name { color: var(--tx, #e8eaf2) !important; }
#asas-app[data-theme] .asas-profile-pill {
background: var(--sf) !important;
border-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-profile-pill:hover { background: var(--ad) !important; }
#asas-app[data-theme] .asas-pill-name { color: var(--tx) !important; }
#asas-app[data-theme] .asas-cbt-arrow { background: var(--sb) !important; }
/* ── Welcome screen ─────────────────────────────────────── */
#asas-welcome {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
width: 100%;
}
.asas-welcome-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-bottom: 32px;
}
.asas-welcome-logos {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 4px;
}
.asas-welcome-logo-asdd {
width: 52px; height: 52px;
border-radius: 14px;
overflow: hidden;
flex-shrink: 0;
}
.asas-welcome-logo-asdd img {
width: 100%; height: 100%; object-fit: contain;
}
.asas-welcome-logo-divider {
width: 1px; height: 40px;
background: rgba(255,255,255,.12);
}
.asas-welcome-logo-asas {
display: flex;
align-items: center;
justify-content: center;
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(212,168,71,.2) 0%, rgba(212,168,71,.06) 100%);
border: 1px solid rgba(212,168,71,.25);
font-size: 16px; font-weight: 900;
color: #D4A847;
letter-spacing: -.02em;
flex-shrink: 0;
}
.asas-welcome-greeting {
font-size: clamp(22px, 4vw, 32px);
font-weight: 700;
color: var(--text, #e8eaf2);
text-align: center;
letter-spacing: -.02em;
line-height: 1.15;
}
.asas-welcome-greeting span {
color: var(--gold, #D4A847);
}
.asas-welcome-sub {
font-size: 14px;
color: var(--text2, rgba(255,255,255,.45));
text-align: center;
line-height: 1.6;
max-width: 420px;
margin: 0;
}
/* Quick-start prompt pills */
.asas-welcome-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
max-width: 680px;
}
.asas-welcome-pill {
padding: 8px 16px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.09);
border-radius: 20px;
color: var(--text2, rgba(255,255,255,.65));
font-size: 13px; font-weight: 500;
cursor: pointer; font-family: inherit;
transition: background .15s, border-color .15s, color .15s;
}
.asas-welcome-pill:hover {
background: rgba(212,168,71,.1);
border-color: rgba(212,168,71,.3);
color: #D4A847;
}
/* Theme-aware welcome */
#asas-app[data-theme] .asas-welcome-greeting { color: var(--tx) !important; }
#asas-app[data-theme] .asas-welcome-pill {
background: var(--sf) !important;
border-color: var(--bd) !important;
color: var(--t2) !important;
}
#asas-app[data-theme] .asas-welcome-pill:hover {
background: var(--ad) !important;
border-color: var(--ac) !important;
color: var(--ac) !important;
}
/* ── Adjust sidebar to not show old user strip space ─────────────────── */
.asas-user-strip { display: none !important; } /* replaced by top pill */
/* ── Sidebar top-btns: tighter layout ───────────────────────────────── */
#asas-sidebar-top { padding-bottom: 10px; }
#asas-sidebar-top-btns { margin-top: 2px; }
/* ── Mobile: pill adjusts ────────────────────────────────────────────── */
@media(max-width:768px){
.asas-sb-head { flex-direction: column; gap: 10px; }
.asas-profile-pill { max-width: 100%; width: 100%; }
.asas-pill-info { flex: 1; }
.asas-cbt-arrow { width: 24px; height: 32px; }
#asas-welcome { min-height: 40vh; padding: 24px 16px; }
.asas-welcome-greeting { font-size: 20px; }
.asas-welcome-pill { font-size: 11.5px; padding: 6px 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════
ASAS-AI v3.5.5 — Welcome Screen + Mode Selector (Complete Rebuild)
Mobile-first · No conflicts · Single source of truth
═══════════════════════════════════════════════════════════════════════ */
/* ── Welcome: flex container outside #asas-feed ─────────────────────── */
#asas-welcome {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 0;
}
#asas-welcome.hidden { display: none !important; }
/* Sibling rule: when welcome visible → hide feed; when hidden → show feed */
#asas-welcome:not(.hidden) ~ #asas-feed-wrap { display: none !important; }
#asas-welcome.hidden ~ #asas-feed-wrap {
display: flex !important;
flex: 1;
flex-direction: column;
min-height: 0;
overflow-y: auto;
}
/* ── Inner scroll container — centres on large screens ──────────────── */
.asas-wlc-inner {
width: 100%;
max-width: 700px;
margin: 0 auto;
padding: 36px 28px 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
box-sizing: border-box;
animation: asas-wlc-in .32s cubic-bezier(.4,0,.2,1) both;
}
@keyframes asas-wlc-in {
from { opacity:0; transform:translateY(10px); }
to { opacity:1; transform:translateY(0); }
}
/* ── Logo row ────────────────────────────────────────────────────────── */
.asas-wlc-logos {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
flex-shrink: 0;
}
.asas-wlc-logo-wrap {
width: 56px;
height: 56px;
border-radius: 14px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
flex-shrink: 0;
}
.asas-wlc-logo-asas { background: #000; border-color: rgba(255,255,255,.12); }
.asas-wlc-logo-img {
width: 100%; height: 100%;
object-fit: contain;
}
.asas-wlc-logo-asas-img {
object-fit: cover;
width: 100%; height: 100%;
}
.asas-wlc-logo-sep {
width: 1px; height: 36px;
background: rgba(255,255,255,.12);
flex-shrink: 0;
}
/* ── Greeting ────────────────────────────────────────────────────────── */
.asas-wlc-greeting {
font-size: clamp(20px, 3.5vw, 30px);
font-weight: 700;
color: var(--text, #e8eaf2);
text-align: center;
letter-spacing: -.02em;
line-height: 1.2;
margin: 0 0 8px;
}
.asas-wlc-name { color: var(--gold, #D4A847); }
.asas-wlc-tagline {
font-size: 12.5px;
color: var(--text2, rgba(255,255,255,.4));
text-align: center;
margin: 0 0 24px;
letter-spacing: .03em;
line-height: 1.5;
}
/* ── Mode label ──────────────────────────────────────────────────────── */
.asas-wlc-mode-lbl {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--text2, rgba(255,255,255,.3));
margin: 0 0 10px;
text-align: center;
}
/* ── Mode grid ───────────────────────────────────────────────────────── */
.asas-wlc-modes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
width: 100%;
margin-bottom: 20px;
}
/* ── Mode card ───────────────────────────────────────────────────────── */
.asas-wlc-mode {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 13px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 11px;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background .14s, border-color .14s, transform .1s;
-webkit-tap-highlight-color: transparent;
}
.asas-wlc-mode:hover,
.asas-wlc-mode:focus-visible {
background: rgba(212,168,71,.08);
border-color: rgba(212,168,71,.28);
transform: translateY(-1px);
outline: none;
}
.asas-wlc-mode:active { transform: none; }
.asas-wlc-mode.selected {
background: rgba(212,168,71,.12);
border-color: rgba(212,168,71,.45);
}
.asas-wlc-mode-icon {
font-size: 18px;
line-height: 1;
flex-shrink: 0;
margin-top: 1px;
}
.asas-wlc-mode-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.asas-wlc-mode-name {
font-size: 12.5px;
font-weight: 700;
color: var(--text, #e8eaf2);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.asas-wlc-mode-desc {
font-size: 10.5px;
color: var(--text2, rgba(255,255,255,.38));
line-height: 1.4;
display: block;
}
/* ── Hint ────────────────────────────────────────────────────────────── */
.asas-wlc-hint {
font-size: 11px;
color: var(--text2, rgba(255,255,255,.25));
text-align: center;
margin: 0;
line-height: 1.6;
padding: 0 8px;
}
/* ── Mode indicator badge in composer ───────────────────────────────── */
#asas-mode-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 14px;
font-size: 12px;
}
#asas-mode-indicator button {
background: none; border: none;
color: rgba(255,255,255,.3);
cursor: pointer; font-size: 14px;
padding: 0 2px; line-height: 1;
transition: color .12s;
}
#asas-mode-indicator button:hover { color: var(--text, #e8eaf2); }
.asas-mode-badge {
background: rgba(212,168,71,.12);
border: 1px solid rgba(212,168,71,.25);
color: var(--gold, #D4A847);
font-size: 10.5px; font-weight: 700;
padding: 2px 9px; border-radius: 10px;
letter-spacing: .04em;
}
/* ── Theme-aware ─────────────────────────────────────────────────────── */
#asas-app[data-theme] .asas-wlc-greeting { color: var(--tx) !important; }
#asas-app[data-theme] .asas-wlc-mode {
background: var(--sf) !important;
border-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-wlc-mode:hover {
background: var(--ad) !important;
border-color: var(--ac) !important;
}
#asas-app[data-theme] .asas-wlc-mode-name { color: var(--tx) !important; }
#asas-app[data-theme] .asas-wlc-mode-desc { color: var(--t2) !important; }
/* ═══════════════════════════════════════════════════════════════════════
RESPONSIVE — Mobile first
═══════════════════════════════════════════════════════════════════════ */
/* Tablet (641–900px): 3 cols still, slightly tighter */
@media(min-width:641px) and (max-width:900px){
.asas-wlc-inner { padding: 28px 20px 24px; }
.asas-wlc-modes { grid-template-columns: repeat(3,1fr); gap: 7px; }
.asas-wlc-logo-wrap { width: 50px; height: 50px; }
}
/* Mobile (≤640px): 2-column mode grid, smaller logos */
@media(max-width:640px){
.asas-wlc-inner { padding: 20px 12px 16px; gap: 0; }
.asas-wlc-logos { gap: 10px; margin-bottom: 14px; }
.asas-wlc-logo-wrap { width: 44px; height: 44px; border-radius: 11px; }
.asas-wlc-logo-sep { height: 28px; }
.asas-wlc-greeting { font-size: 18px; margin-bottom: 6px; }
.asas-wlc-tagline { font-size: 11px; margin-bottom: 16px; }
.asas-wlc-mode-lbl { margin-bottom: 8px; }
.asas-wlc-modes {
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-bottom: 14px;
}
.asas-wlc-mode { padding: 10px 10px; gap: 8px; }
.asas-wlc-mode-icon { font-size: 16px; }
.asas-wlc-mode-name { font-size: 12px; }
/* Hide description on small screens to prevent overflow */
.asas-wlc-mode-desc { display: none; }
.asas-wlc-hint { font-size: 10.5px; }
}
/* Very small (≤380px): single column modes */
@media(max-width:380px){
.asas-wlc-modes { grid-template-columns: 1fr; }
.asas-wlc-mode { flex-direction: row; }
.asas-wlc-logo-wrap { width: 38px; height: 38px; border-radius: 9px; }
.asas-wlc-inner { padding: 14px 10px 12px; }
}
/* ── ASAS icon logo specifics ────────────────────────────────────────── */
.asas-wlc-logo-asas {
background: #0a0a0a !important;
border-color: rgba(255,255,255,.15) !important;
}
.asas-wlc-logo-asas-img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
/* ── CAD Upload Button ─────────────────────────────────────── */
.asas-attach-cad {
position: relative;
}
.asas-cad-badge {
position: absolute;
top: -5px;
right: -5px;
background: var(--accent, #D4A847);
color: #0a0f1e;
font-size: 7px;
font-weight: 700;
letter-spacing: .04em;
padding: 1px 3px;
border-radius: 3px;
line-height: 1.2;
pointer-events: none;
}
/* ── Compliance Badges ─────────────────────────────────────── */
.asas-badge-pass,
.asas-badge-warn,
.asas-badge-fail {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
line-height: 1.5;
margin: 1px 2px;
}
.asas-badge-pass { background: rgba(39,174,96,.15); color: #27ae60; border: 1px solid rgba(39,174,96,.3); }
.asas-badge-warn { background: rgba(243,156,18,.15); color: #f39c12; border: 1px solid rgba(243,156,18,.3); }
.asas-badge-fail { background: rgba(231,76,60,.15); color: #e74c3c; border: 1px solid rgba(231,76,60,.3); }
/* ── Progress Indicator ─────────────────────────────────────── */
.asas-progress-wrap {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0;
}
.asas-progress-msg {
font-size: 12px;
color: var(--text3, #888);
font-style: italic;
animation: asas-fade-in .4s ease;
transition: opacity .3s ease;
}
.asas-progress-elapsed {
font-size: 11px;
color: var(--accent, #D4A847);
font-weight: 600;
opacity: .8;
letter-spacing: .03em;
}
@keyframes asas-fade-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── IFC Upload Button ──────────────────────────────────────── */
.asas-attach-ifc {
position: relative;
}
.asas-attach-ifc .asas-cad-badge {
background: #1f6fb2;
color: #fff;
}
.asas-attach-schedule {
position: relative;
}
.asas-attach-schedule .asas-cad-badge {
background: #b85a0e;
color: #fff;
}
.asas-attach-office {
position: relative;
}
.asas-attach-office .asas-cad-badge {
background: #217346;
color: #fff;
}
/* ════════════════════════════════════════════════════════════════════
v3.8 additions: Profile panel · Folders · Conversations header
════════════════════════════════════════════════════════════════════ */
#asas-panel-bg {
position: fixed !important;
inset: 0 !important;
background: rgba(5,8,18,.72) !important;
z-index: 9100 !important;
display: none;
justify-content: flex-end;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
#asas-panel-bg.open { display: flex !important; }
#asas-panel {
width: 320px !important;
max-width: min(320px, 100vw) !important;
background: var(--navy2, #131c2e) !important;
height: 100% !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
box-shadow: -16px 0 48px rgba(0,0,0,.65) !important;
border-left: 1px solid var(--border, rgba(255,255,255,.08)) !important;
animation: asas-panel-slide .22s ease !important;
}
@keyframes asas-panel-slide {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.asas-profile-hero {
position: relative !important;
padding: 22px 18px 18px !important;
border-bottom: 1px solid var(--border, rgba(255,255,255,.07)) !important;
overflow: hidden;
flex-shrink: 0;
}
.asas-profile-hero-bg { position: absolute; inset: 0; z-index: 0;
background: linear-gradient(135deg, #0d1a35 0%, #0a0f1e 60%, #111827 100%); }
.asas-profile-hero-bg::before { content:''; position:absolute; inset:0;
background-image: repeating-linear-gradient(-45deg,transparent,transparent 18px,rgba(212,168,71,.03) 18px,rgba(212,168,71,.03) 19px); }
.asas-profile-hero-body { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.asas-av-ring-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; cursor: pointer; }
.asas-av-ring-svg { position: absolute; inset: 0; width: 72px; height: 72px; }
.asas-av-ring-inner { position: absolute; inset: 7px; border-radius: 50%; overflow: hidden;
background: var(--navy3, #0a0f1e); display: flex; align-items: center; justify-content: center;
border: 2px solid rgba(255,255,255,.1); }
.asas-av-ring-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.asas-av-ring-initials { width: 100%; height: 100%; border-radius: 50%;
background: var(--gold, #D4A847); color: var(--navy, #0a0f1e);
display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.asas-av-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.58);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; opacity: 0; transition: opacity .18s; color: #fff; font-size: 9px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
.asas-av-ring-inner:hover .asas-av-overlay { opacity: 1; }
.asas-av-ring-pct { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
font-size: 9px; font-weight: 800; background: var(--navy3, #0a0f1e);
border: 1px solid var(--border); border-radius: 8px; padding: 1px 6px;
white-space: nowrap; color: var(--gold, #D4A847); pointer-events: none; }
.asas-profile-hero-info { flex: 1; min-width: 0; overflow: hidden; }
.asas-profile-name { font-size: 15px; font-weight: 700; color: #f0f2ff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.asas-profile-email { font-size: 12px; color: rgba(136,153,184,.85);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 9px; }
.asas-profile-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
#asas-conv-header { display: flex; align-items: center; justify-content: space-between;
padding: 9px 12px 5px; flex-shrink: 0; }
.asas-conv-title { font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .1em; color: var(--text3, #6b7280); }
#asas-create-folder-btn { display: flex; align-items: center; gap: 5px; background: none;
border: 1px solid rgba(212,168,71,.22); border-radius: 20px; color: rgba(212,168,71,.75);
font-size: 11px; font-family: var(--sans); font-weight: 500;
padding: 3px 9px; cursor: pointer; transition: all .14s; white-space: nowrap; }
#asas-create-folder-btn:hover { background: rgba(212,168,71,.08); border-color: #D4A847; color: #D4A847; }
#asas-folder-bar { flex-shrink: 0; overflow-y: auto; max-height: 180px;
border-bottom: 1px solid rgba(255,255,255,.05);
scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
#asas-folder-bar::-webkit-scrollbar { width: 3px; }
#asas-folder-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.asas-folder-item { display: flex; align-items: center; gap: 9px; padding: 7px 12px;
margin: 1px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
color: var(--text2, #8899b8); transition: background .1s, color .1s; position: relative; }
.asas-folder-item:hover { background: var(--surface2, rgba(255,255,255,.05)); color: var(--text, #e8eaf2); }
.asas-folder-item.active { background: rgba(212,168,71,.1); color: var(--gold, #D4A847); }
.asas-folder-item svg { flex-shrink: 0; opacity: .6; }
.asas-folder-item.active svg { opacity: 1; }
.asas-folder-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asas-folder-item-opts { opacity: 0; flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--text3, #6b7280); font-size: 16px; line-height: 1;
padding: 0 2px; transition: opacity .12s; border-radius: 4px; }
.asas-folder-item:hover .asas-folder-item-opts { opacity: .65; }
.asas-folder-item-opts:hover { opacity: 1 !important; }
.asas-folder-menu { position: fixed; z-index: 99999; background: var(--navy2, #131c2e);
border: 1px solid rgba(212,168,71,.18); border-radius: 9px; padding: 4px;
min-width: 172px; max-width: 230px; box-shadow: 0 8px 28px rgba(0,0,0,.55); }
.asas-folder-menu-item { display: flex; align-items: center; gap: 8px; width: 100%;
padding: 7px 10px; border: none; background: none; border-radius: 6px;
font-size: 12.5px; font-family: var(--sans); color: var(--text2, #8899b8);
cursor: pointer; text-align: left; transition: background .08s, color .08s; }
.asas-folder-menu-item:hover { background: rgba(255,255,255,.07); color: #f0f0f0; }
.asas-folder-menu-item.asas-folder-menu-active { color: #D4A847; }
.asas-folder-menu-item.asas-folder-menu-active::after { content:'✓'; margin-left:auto; }
.asas-folder-menu-item.asas-folder-menu-danger { color: #f87171; }
.asas-folder-menu-item.asas-folder-menu-danger:hover { background: rgba(248,113,113,.08); }
.asas-folder-menu-item.asas-folder-menu-new { color: rgba(212,168,71,.8); }
.asas-folder-menu-item.asas-folder-menu-new:hover { color: #D4A847; }
.asas-folder-menu-sep { height: 1px; background: rgba(255,255,255,.06); margin: 3px 0; }
.asas-folder-submenu { max-height: 260px; overflow-y: auto; }
.asas-folder-menu-header { font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: var(--text3, #6b7280); padding: 5px 10px 7px; }
@media (max-width: 640px) {
#asas-panel { width: 100vw !important; max-width: 100vw !important; }
#asas-folder-bar { max-height: 140px; }
}
/* ═══ PROFILE PANEL v3.9 — stat cards, sub buttons ═══════════════════ */
.asas-stat-card {
background: var(--surface, rgba(255,255,255,.03));
border: 1px solid var(--border, rgba(255,255,255,.07));
border-radius: 8px;
padding: 10px 6px;
text-align: center;
}
.asas-stat-val {
font-size: 22px;
font-weight: 700;
color: var(--text, #e8eaf2);
line-height: 1.1;
}
.asas-stat-lbl {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text3, #6b7280);
margin-top: 3px;
}
.asas-sub-btn {
display: block;
margin-top: 10px;
padding: 9px;
text-align: center;
font-size: 12.5px;
border-radius: 8px;
text-decoration: none;
font-family: var(--sans);
transition: background .14s;
border: 1px solid var(--border);
color: var(--text2, #8899b8);
}
.asas-sub-btn:hover { background: rgba(255,255,255,.05); }
.asas-sub-btn-upgrade {
background: rgba(212,168,71,.1);
border-color: rgba(212,168,71,.3);
color: var(--gold, #D4A847);
font-weight: 600;
}
.asas-sub-btn-upgrade:hover { background: rgba(212,168,71,.18); }
/* ═══ Qatar Standards Inline Tooltips ═══════════════════════════════ */
.asas-std-ref {
color: var(--gold, #D4A847);
text-decoration: underline dotted;
cursor: help;
font-weight: 500;
position: relative;
display: inline;
}
.asas-std-tooltip {
position: fixed;
z-index: 99999;
background: #0d1629;
border: 1px solid rgba(212,168,71,.35);
border-radius: 10px;
padding: 10px 14px;
max-width: 320px;
font-size: 12px;
line-height: 1.55;
color: #e8eaf2;
box-shadow: 0 8px 28px rgba(0,0,0,.6);
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity .15s, transform .15s;
}
.asas-std-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
.asas-std-tooltip-code {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: #D4A847;
margin-bottom: 4px;
}
.asas-std-tooltip-title {
font-weight: 600;
font-size: 12.5px;
margin-bottom: 4px;
color: #f0f2ff;
}
.asas-std-tooltip-desc {
color: rgba(200,210,230,.8);
font-size: 11.5px;
line-height: 1.5;
}
.asas-std-tooltip-copy {
margin-top: 6px;
font-size: 10px;
color: rgba(212,168,71,.7);
cursor: pointer;
pointer-events: all;
display: inline-block;
}
/* ═══ Edit file panel ════════════════════════════════════════════════ */
.asas-edit-panel {
background: var(--navy2, #131c2e);
border: 1px solid rgba(212,168,71,.2);
border-radius: 10px;
margin-top: 8px;
overflow: hidden;
}
.asas-edit-panel-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: rgba(212,168,71,.07);
border-bottom: 1px solid rgba(255,255,255,.06);
font-size: 12.5px;
font-weight: 600;
color: #D4A847;
}
.asas-edit-close {
background: none;
border: none;
color: var(--text3, #6b7280);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 2px 4px;
border-radius: 4px;
}
.asas-edit-close:hover { color: var(--text, #e8eaf2); }
.asas-edit-body { padding: 12px 14px; }
.asas-edit-field { margin-bottom: 10px; }
.asas-edit-field label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text3, #6b7280);
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 4px;
}
.asas-edit-input {
width: 100%;
background: var(--surface2, rgba(255,255,255,.05));
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px;
padding: 7px 10px;
font-size: 12.5px;
font-family: var(--sans);
color: var(--text, #e8eaf2);
resize: vertical;
}
.asas-edit-input:focus {
outline: none;
border-color: rgba(212,168,71,.4);
background: rgba(255,255,255,.07);
}
.asas-edit-footer {
padding: 10px 14px;
border-top: 1px solid rgba(255,255,255,.06);
display: flex;
align-items: center;
}
/* ═══ Session files panel ════════════════════════════════════════════ */
#asas-files-panel {
border-top: 1px solid rgba(255,255,255,.06);
padding: 8px 0;
flex-shrink: 0;
}
.asas-files-hd {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text3, #6b7280);
padding: 4px 14px 6px;
}
.asas-file-item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
margin: 1px 6px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
color: var(--text2, #8899b8);
transition: background .1s;
text-decoration: none;
}
.asas-file-item:hover {
background: rgba(255,255,255,.05);
color: var(--text, #e8eaf2);
}
.asas-file-item-icon { font-size: 14px; flex-shrink: 0; }
.asas-file-item-name {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asas-file-item-type {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
color: var(--text3);
flex-shrink: 0;
}
/* ═══ CPD Tracker banner ══════════════════════════════════════════════ */
.asas-cpd-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(212,168,71,.1);
border: 1px solid rgba(212,168,71,.25);
border-radius: 6px;
padding: 5px 10px;
font-size: 11px;
color: #D4A847;
font-weight: 500;
margin: 6px 0 0;
cursor: pointer;
}
.asas-cpd-badge:hover { background: rgba(212,168,71,.18); }
/* ═══════════════════════════════════════════════════════════════════════
THEME COVERAGE — Profile panel, chat area, all sections
Forces CSS variables to override inline styles throughout
═══════════════════════════════════════════════════════════════════════ */
/* Profile panel drawer — full theme */
#asas-app[data-theme] #asas-panel {
background: var(--sb) !important;
border-left-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-profile-hero-bg {
background: linear-gradient(135deg, var(--n3,#0d1a35) 0%, var(--bg,#0a0f1e) 60%, var(--sb,#111827) 100%) !important;
}
#asas-app[data-theme] .asas-profile-name { color: var(--tx) !important; }
#asas-app[data-theme] .asas-profile-email { color: var(--t3) !important; }
/* Stat cards */
#asas-app[data-theme] .asas-stat-card {
background: var(--s2) !important;
border-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-stat-val { color: var(--tx) !important; }
#asas-app[data-theme] .asas-stat-lbl { color: var(--t3) !important; }
/* All inline-styled card blocks inside the panel */
#asas-app[data-theme] #asas-panel [style*="background:var(--surface"] {
background: var(--s2) !important;
border-color: var(--bd) !important;
}
#asas-app[data-theme] #asas-panel [style*="rgba(255,255,255,.03)"] {
background: var(--s2) !important;
}
#asas-app[data-theme] #asas-panel [style*="rgba(255,255,255,.04)"] {
background: var(--s2) !important;
}
#asas-app[data-theme] #asas-panel [style*="#131c2e"] {
background: var(--sb) !important;
}
/* Token bar */
#asas-app[data-theme] .asas-token-bar {
background: var(--s3, rgba(255,255,255,.06)) !important;
}
/* Subscription button */
#asas-app[data-theme] .asas-sub-btn {
background: var(--s2) !important;
border-color: var(--bd) !important;
color: var(--t2) !important;
}
#asas-app[data-theme] .asas-sub-btn-upgrade {
background: rgba(212,168,71,.1) !important;
border-color: rgba(212,168,71,.3) !important;
color: var(--ac) !important;
}
/* Nav links */
#asas-app[data-theme] .asas-nav-link {
color: var(--t2) !important;
}
#asas-app[data-theme] .asas-nav-link:hover {
background: var(--s2) !important;
color: var(--tx) !important;
}
#asas-app[data-theme] .asas-nav-icon {
background: var(--s2) !important;
border-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-nav-text-main { color: var(--tx) !important; }
#asas-app[data-theme] .asas-nav-text-sub { color: var(--t3) !important; }
#asas-app[data-theme] .asas-nav-arrow { color: var(--t3) !important; }
/* Project context button — theme-aware */
#asas-app[data-theme] #asas-set-project-btn.asas-project-btn-empty {
background: linear-gradient(135deg, rgba(212,168,71,.07) 0%, rgba(212,168,71,.02) 100%) !important;
}
/* CPD section inside panel */
#asas-app[data-theme] #asas-panel [style*="rgba(212,168,71,.06)"] {
background: rgba(212,168,71,.06) !important;
}
/* Chat message body — NEVER has a background (styling is on .asas-bubble) */
#asas-app[data-theme] .asas-msg.ai .asas-msg-body {
background: transparent !important;
border: none !important;
color: var(--tx) !important;
}
#asas-app[data-theme] .asas-msg.user .asas-msg-body {
background: transparent !important;
border: none !important;
color: var(--tx) !important;
}
/* Input area */
#asas-app[data-theme] #asas-input-wrap {
background: var(--sb) !important;
border-color: var(--bd) !important;
}
#asas-app[data-theme] #asas-input {
color: var(--tx) !important;
background: transparent !important;
}
#asas-app[data-theme] #asas-input::placeholder {
color: var(--t3) !important;
}
/* Topbar */
#asas-app[data-theme] #asas-topbar {
background: var(--sb) !important;
border-bottom-color: var(--bd) !important;
}
#asas-app[data-theme] .asas-topbar-title { color: var(--tx) !important; }
#asas-app[data-theme] .asas-topbar-btn { color: var(--t2) !important; }
#asas-app[data-theme] .asas-topbar-btn:hover { background: var(--s2) !important; }
/* Folder bar items */
#asas-app[data-theme] .asas-folder-item { color: var(--t2) !important; }
#asas-app[data-theme] .asas-folder-item:hover { background: var(--s2) !important; color: var(--tx) !important; }
#asas-app[data-theme] .asas-folder-item.active { background: rgba(212,168,71,.1) !important; color: var(--ac) !important; }
/* History items */
#asas-app[data-theme] .asas-history-item { color: var(--t2) !important; }
#asas-app[data-theme] .asas-history-item:hover { background: var(--s2) !important; }
#asas-app[data-theme] .asas-history-item.active { background: var(--s3,rgba(212,168,71,.08)) !important; }
#asas-app[data-theme] .asas-hist-preview { color: var(--t2) !important; }
#asas-app[data-theme] .asas-hist-ts { color: var(--t3) !important; }
/* Light theme adjustments */
#asas-app[data-theme^="light-"] #asas-panel {
background: var(--sb, #f8f7f4) !important;
}
#asas-app[data-theme^="light-"] .asas-profile-name { color: var(--tx, #1a1a2e) !important; }
#asas-app[data-theme^="light-"] .asas-profile-email { color: var(--t3, #6b7280) !important; }
#asas-app[data-theme^="light-"] .asas-stat-card { background: var(--s2, rgba(0,0,0,.04)) !important; }
#asas-app[data-theme^="light-"] .asas-stat-val { color: var(--tx, #1a1a2e) !important; }
#asas-app[data-theme^="light-"] .asas-nav-link { color: var(--t2, #4a5568) !important; }
#asas-app[data-theme^="light-"] .asas-nav-link:hover{ background: var(--s2, rgba(0,0,0,.04)) !important; }
#asas-app[data-theme^="light-"] .asas-msg.ai .asas-msg-body {
background: transparent !important;
border: none !important;
color: var(--tx, #1a1a2e) !important;
}
#asas-app[data-theme^="light-"] .asas-msg.user .asas-msg-body {
background: transparent !important;
border: none !important;
color: var(--tx, #1a1a2e) !important;
}
/* Project context button — empty state animation */
.asas-project-btn-empty {
animation: asas-project-pulse 3s ease-in-out infinite;
}
.asas-project-btn-empty:hover {
animation: none !important;
background: rgba(212,168,71,.12) !important;
border-color: rgba(212,168,71,.5) !important;
border-style: solid !important;
transform: translateY(-1px);
}
@keyframes asas-project-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,71,.15); }
50% { box-shadow: 0 0 0 5px rgba(212,168,71,.0); border-color: rgba(212,168,71,.5); }
}
/* ═══ Export Offer Line — inline export buttons after AI response ════ */
.asas-export-offer {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.06);
}
.asas-export-offer-lbl {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text3, #6b7280);
margin-right: 2px;
flex-shrink: 0;
}
.asas-export-offer-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(212,168,71,.08);
border: 1px solid rgba(212,168,71,.22);
border-radius: 20px;
padding: 5px 13px;
font-size: 12px;
font-weight: 500;
color: var(--gold, #D4A847);
cursor: pointer;
font-family: var(--sans);
transition: background .13s, border-color .13s;
white-space: nowrap;
}
.asas-export-offer-btn:hover {
background: rgba(212,168,71,.16);
border-color: rgba(212,168,71,.45);
}
.asas-export-offer-btn:active {
background: rgba(212,168,71,.22);
}
/* Theme: light mode */
#asas-app[data-theme^="light-"] .asas-export-offer {
border-top-color: rgba(0,0,0,.08) !important;
}
#asas-app[data-theme^="light-"] .asas-export-offer-btn {
background: rgba(180,130,40,.08) !important;
color: #8a6010 !important;
border-color: rgba(180,130,40,.25) !important;
}
/* ═══ Mermaid error hint ════════════════════════════════════════════ */
.asas-mmd-error-hint {
background: rgba(231,76,60,.08);
border: 1px solid rgba(231,76,60,.25);
border-radius: 8px;
padding: 9px 14px;
margin: 6px 0;
font-size: 12.5px;
color: var(--text2, #8899b8);
line-height: 1.5;
}
.asas-mmd-error-hint strong { color: #e74c3c; }
.asas-mmd-error-hint a { color: var(--gold, #D4A847) !important; }
/* ═══ Slash autocomplete menu ═══════════════════════════════════════ */
.asas-slash-menu {
background: var(--navy2, #131c2e);
border: 1px solid rgba(212,168,71,.25);
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0,0,0,.55);
overflow: hidden;
max-height: 320px;
overflow-y: auto;
}
.asas-slash-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
cursor: pointer;
transition: background .1s;
border-bottom: 1px solid rgba(255,255,255,.04);
outline: none;
}
.asas-slash-item:last-child { border-bottom: none; }
.asas-slash-item:hover,
.asas-slash-item:focus { background: rgba(212,168,71,.1); }
.asas-slash-name {
font-size: 13px;
font-weight: 600;
color: var(--gold, #D4A847);
flex-shrink: 0;
min-width: 140px;
}
.asas-slash-desc {
font-size: 11.5px;
color: var(--text3, #6b7280);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ═══ PDF Drawing upload button ════════════════════════════════════ */
.asas-attach-drawing-pdf {
position: relative;
}
.asas-attach-drawing-pdf .asas-cad-badge {
background: #c0392b;
color: #fff;
}
/* ═══ Guided Workflow modal ═══════════════════════════════════════ */
#asas-wf-overlay{
position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
background:rgba(5,8,18,.72);backdrop-filter:blur(4px);padding:20px;
animation:asas-wf-fade .15s ease;
}
@keyframes asas-wf-fade{from{opacity:0}to{opacity:1}}
#asas-wf-modal{
width:100%;max-width:440px;max-height:88vh;display:flex;flex-direction:column;
background:var(--surface,#131c2e);border:1px solid var(--border,rgba(212,168,71,.25));
border-radius:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
animation:asas-wf-pop .18s cubic-bezier(.2,.8,.2,1);overflow:hidden;
}
@keyframes asas-wf-pop{from{transform:translateY(12px) scale(.98);opacity:.6}to{transform:none;opacity:1}}
.asas-wf-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:15px 18px;border-bottom:1px solid var(--border2,rgba(255,255,255,.06));
background:var(--navy2,#111827);
}
.asas-wf-title{font-weight:700;font-size:15px;color:var(--text,#e8eaf2);letter-spacing:-.01em}
.asas-wf-close{
background:none;border:none;color:var(--text2,#8899b8);font-size:24px;line-height:1;
cursor:pointer;width:30px;height:30px;border-radius:8px;flex-shrink:0;transition:background .12s,color .12s;
}
.asas-wf-close:hover{background:rgba(255,255,255,.06);color:var(--text,#e8eaf2)}
.asas-wf-body{padding:16px 18px;overflow-y:auto;flex:1}
.asas-wf-intro{font-size:12.5px;color:var(--text2,#8899b8);line-height:1.55;margin:0 0 16px}
.asas-wf-field{margin-bottom:14px}
.asas-wf-label{display:block;font-size:12px;font-weight:600;color:var(--text,#e8eaf2);margin-bottom:6px}
.asas-wf-req{color:var(--gold,#D4A847)}
.asas-wf-hint{font-size:11px;color:var(--text3,#4a5a7a);margin-bottom:6px}
.asas-wf-input{
width:100%;background:var(--navy,#0a0f1e);border:1px solid var(--border2,rgba(255,255,255,.1));
border-radius:9px;padding:9px 11px;color:var(--text,#e8eaf2);font-size:13px;font-family:inherit;
transition:border-color .12s,box-shadow .12s;outline:none;
}
.asas-wf-input::placeholder{color:var(--text3,#4a5a7a)}
.asas-wf-input:focus{border-color:var(--gold,#D4A847);box-shadow:0 0 0 3px var(--gold-glow,rgba(212,168,71,.12))}
.asas-wf-textarea{resize:vertical;min-height:62px;line-height:1.5}
select.asas-wf-input{cursor:pointer;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238899b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;padding-right:32px;
}
/* Dropdown options must be readable — native