/* Konsilito «Ghost Agent» theme for the shared PWA — deep black, white line-mark,
   gold reserved for live states (mode, progress, done tasks, send) with a soft glow;
   light theme keeps the same mark and gold on warm off-white.
   Scoped to html[data-brand="konsilito"]; FreelanceAI is untouched. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

html[data-brand="konsilito"] {
    --ga-gold: #E0A52A;
    --ga-gold-2: #F5C35A;
    --ga-glow: 0 0 18px rgba(245, 166, 35, .35);

    --bg-primary: #050506;
    --bg-secondary: #08080A;
    --bg-card: #0F0F12;
    --bg-input: #0C0C0F;
    --bg-elevated: #15151A;
    --bg-sidebar: #08080A;
    --bg-hover: rgba(255,255,255,.035);
    --bg-active: rgba(255,255,255,.06);
    --border: #1C1C20;
    --border-strong: #2A2A30;
    --border-focus: var(--ga-gold);
    --accent: var(--ga-gold);
    --accent-hover: var(--ga-gold-2);
    --accent-dim: rgba(224,165,42,.12);
    --accent-glow: rgba(245,166,35,.25);
    --accent-link: var(--ga-gold-2);
    --accent-link-glow: rgba(245,166,35,.12);
    --text-primary: #F2F2F2;
    --text-secondary: #A2A2AC;
    --text-muted: #7F7F88;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --font-display: 'Inter', system-ui, sans-serif;
    --shadow-card: none;
    --user-fg: #F2F2F2;
}

html[data-brand="konsilito"][data-theme="light"] {
    --ga-gold: #D98F14;
    --ga-gold-2: #F5A623;
    --ga-glow: 0 0 14px rgba(217,143,20,.22);

    --bg-primary: #F7F7F5;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-input: #FFFFFF;
    --bg-elevated: #F1F1EE;
    --bg-sidebar: #FFFFFF;
    --bg-hover: rgba(20,20,20,.04);
    --bg-active: rgba(20,20,20,.07);
    --border: #E6E6E2;
    --border-strong: #D4D4CF;
    --accent: var(--ga-gold);
    --accent-hover: #C27F0F;
    --accent-dim: rgba(217,143,20,.12);
    --accent-glow: rgba(217,143,20,.2);
    --accent-link: #A86E0C;
    --accent-link-glow: rgba(217,143,20,.12);
    --text-primary: #17181A;
    --text-secondary: #6B6F76;
    --text-muted: #9A9AA0;
    --shadow-card: 0 1px 2px rgba(0,0,0,.06);
    --user-fg: #17181A;
}

/* ---- brand mark: white line glyph, no tile/border around it ---- */
html[data-brand="konsilito"] .sidebar-brand img,
html[data-brand="konsilito"] .chat-header-avatar,
html[data-brand="konsilito"] .login-avatar,
html[data-brand="konsilito"] #splash .splash-logo {
    border-radius: 0; box-shadow: none; background: transparent; object-fit: contain;
}
html[data-brand="konsilito"] .sidebar-brand img { width: 30px; height: 32px; }
html[data-brand="konsilito"] .chat-header-avatar { width: 30px; height: 32px; }
html[data-brand="konsilito"] .login-avatar { width: 240px; height: 240px; margin-bottom: 0; position: relative; z-index: 1; }
/* neon mark: white glyph on top, gold rim + warm halo are masked copies of the glyph underneath */
html[data-brand="konsilito"] .ga-mark { position: relative; display: inline-block; width: 240px; height: 240px; margin-bottom: 24px; line-height: 0; }
html[data-brand="konsilito"] .ga-mark::before, html[data-brand="konsilito"] .ga-mark::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; background: url('ghost-mark.png') center / contain no-repeat;
}
html[data-brand="konsilito"] .ga-mark::before { animation: kga-rim 5s ease-in-out infinite; }
html[data-brand="konsilito"] .ga-mark::after  { animation: kga-halo 5s ease-in-out infinite; }
html[data-brand="konsilito"][data-theme="light"] .ga-mark::before { opacity: .5; }
html[data-brand="konsilito"][data-theme="light"] .ga-mark::after { opacity: .6; }
@media (max-height: 700px) { html[data-brand="konsilito"] .login-avatar, html[data-brand="konsilito"] .ga-mark { width: 170px; height: 170px; } }
html[data-brand="konsilito"] #splash .splash-logo { width: 120px; height: 120px; filter: drop-shadow(var(--ga-glow)); }
html[data-brand="konsilito"][data-theme="light"] .sidebar-brand img,
html[data-brand="konsilito"][data-theme="light"] .chat-header-avatar,
html[data-brand="konsilito"][data-theme="light"] .login-avatar,
html[data-brand="konsilito"][data-theme="light"] #splash .splash-logo { content: url('ghost-mark-dark.png'); }

/* ---- typography: spaced capitals like the wordmark ---- */
html[data-brand="konsilito"] .sidebar-brand { font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
html[data-brand="konsilito"] .chat-header h3,
html[data-brand="konsilito"] .login-title,
html[data-brand="konsilito"] #splash .splash-title { letter-spacing: .2em; font-weight: 600; }
html[data-brand="konsilito"] .login-subtitle,
html[data-brand="konsilito"] #splash .splash-sub { letter-spacing: .3em; color: var(--ga-gold); font-weight: 500; }
/* login screen: wordmark as on the brand sheet — big spaced KONSILITO over a gold horizon line, GHOST AGENT in gold, white tagline */
html[data-brand="konsilito"] .login-title {
    position: relative; display: inline-block; font-size: 44px; letter-spacing: .24em; line-height: 1.1;
    padding: 0 .1em 12px .24em; margin-bottom: 12px;
}
html[data-brand="konsilito"] .login-title::after {
    content: ''; position: absolute; left: -26%; right: -26%; bottom: 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, rgba(245,166,35,.55) 22%, #FFD27A 50%, rgba(245,166,35,.55) 78%, transparent 100%);
    box-shadow: 0 0 10px rgba(245,166,35,.9), 0 0 28px rgba(245,166,35,.55), 0 14px 60px 18px rgba(245,166,35,.16);
}
html[data-brand="konsilito"] .login-subtitle { font-size: 17px; letter-spacing: .4em; padding-left: .4em; margin-bottom: 14px; }
html[data-brand="konsilito"] .login-tagline { font-size: 16px; color: var(--text-primary); }
@media (max-height: 700px), (max-width: 420px) {
    html[data-brand="konsilito"] .login-title { font-size: 30px; letter-spacing: .2em; }
    html[data-brand="konsilito"] .login-subtitle { font-size: 13px; }
    html[data-brand="konsilito"] .login-tagline { font-size: 14px; }
}
html[data-brand="konsilito"] .tp-title { letter-spacing: .04em; }

/* ---- surfaces: flat, 1px borders, no card shadows in the dark theme ---- */
html[data-brand="konsilito"] .sidebar-item.active { background: var(--bg-card); border-color: var(--border); box-shadow: inset 3px 0 0 var(--ga-gold), var(--ga-glow); }
html[data-brand="konsilito"][data-theme="light"] .sidebar-item.active { box-shadow: inset 3px 0 0 var(--ga-gold); }
html[data-brand="konsilito"] .new-chat-btn { color: var(--text-primary); }
html[data-brand="konsilito"] .new-chat-btn:hover { background: var(--bg-elevated); color: var(--ga-gold); border-color: var(--border-strong); }

/* user bubble: graphite card instead of a solid gold block */
html[data-brand="konsilito"] .message.user {
    background: var(--bg-card); color: var(--user-fg);
    border: 1px solid var(--border); box-shadow: none;
}
html[data-brand="konsilito"][data-theme="light"] .message.user { background: #F1F1EE; border-color: #E6E6E2; }
html[data-brand="konsilito"] .message.user a { color: var(--accent-link); }
html[data-brand="konsilito"] .message.user .msg-time { color: var(--text-muted); }

/* mode / tier pills: gold text on a dark chip, not a filled yellow tab */
html[data-brand="konsilito"] .tier-tab.active,
html[data-brand="konsilito"] html[data-paid-only] .tier-tab[data-tier="payg"],
html[data-brand="konsilito"][data-paid-only] .tier-tab[data-tier="payg"] {
    background: var(--accent-dim); color: var(--ga-gold); box-shadow: none;
}
html[data-brand="konsilito"] .token-counter .tc-value,
html[data-brand="konsilito"] .token-counter .tc-icon { color: var(--ga-gold); }

/* the only glowing elements: send button, done task dots, progress bar, live status dot */
html[data-brand="konsilito"] .send-btn.active { background: var(--ga-gold); color: #050506; border-color: var(--ga-gold); box-shadow: var(--ga-glow); }
html[data-brand="konsilito"] .send-btn.active:hover { background: var(--ga-gold-2); }
html[data-brand="konsilito"] .tp-bar i { background: var(--ga-gold); box-shadow: var(--ga-glow); }
html[data-brand="konsilito"] .tp-stage .dot { box-shadow: var(--ga-glow); }
html[data-brand="konsilito"] .monitor-badge { box-shadow: var(--ga-glow); }

/* work card: file / command names in mono gold, statuses gold, the rest grey */
html[data-brand="konsilito"] .agent-panel code,
html[data-brand="konsilito"] .step-cmd,
html[data-brand="konsilito"] .step-file { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--ga-gold); }

/* input: rounder field, quiet focus ring */
html[data-brand="konsilito"] .chat-input,
html[data-brand="konsilito"] #message-input { border-radius: 18px; }
html[data-brand="konsilito"] .chat-input:focus,
html[data-brand="konsilito"] #message-input:focus { box-shadow: 0 0 0 2px var(--accent-dim); }

/* login screen: floating gold + silver glow over a slow-drifting dot grid */
html[data-brand="konsilito"] #login { background: var(--bg-primary); }
html[data-brand="konsilito"] #login::before {
    background:
        radial-gradient(circle at 22% 28%, rgba(245,166,35,.34) 0%, rgba(245,166,35,.10) 22%, transparent 42%),
        radial-gradient(circle at 78% 70%, rgba(214,220,232,.26) 0%, rgba(190,198,212,.08) 24%, transparent 44%),
        radial-gradient(circle at 60% 20%, rgba(232,236,244,.14) 0%, transparent 30%),
        radial-gradient(circle at 30% 80%, rgba(245,166,35,.16) 0%, transparent 32%);
    background-size: 100% 100%;
    opacity: 1; filter: blur(30px);
    inset: -20%; will-change: transform;
    animation: kga-login-drift 30s ease-in-out infinite alternate;
}
html[data-brand="konsilito"] #login::after {
    background:
        radial-gradient(ellipse at center, transparent 0%, var(--bg-primary) 78%),
        radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 26px 26px;
    animation: kga-login-grid 50s linear infinite;
}
html[data-brand="konsilito"][data-theme="light"] #login::before { opacity: .55; }
html[data-brand="konsilito"][data-theme="light"] #login::after {
    background:
        radial-gradient(ellipse at center, transparent 0%, var(--bg-primary) 78%),
        radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.2px) 0 0 / 26px 26px;
}
html[data-brand="konsilito"] .login-avatar { animation: kga-login-breathe 5s ease-in-out infinite; }
html[data-brand="konsilito"] .login-title { animation: kga-word 5s ease-in-out infinite; text-shadow: 0 0 4px rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.55), 0 0 36px rgba(232,236,244,.4), 0 0 80px rgba(245,166,35,.3); }
html[data-brand="konsilito"][data-theme="light"] .login-title { animation: none; text-shadow: 0 0 18px rgba(245,166,35,.35); }
html[data-brand="konsilito"] .login-title::after { animation: kga-line 5s ease-in-out infinite; }
html[data-brand="konsilito"] .login-subtitle { color: #F5B335; animation: kga-sub 5s ease-in-out infinite; text-shadow: 0 0 6px rgba(245,166,35,.9), 0 0 18px rgba(245,166,35,.7), 0 0 44px rgba(245,166,35,.4); }
@keyframes kga-login-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(6%, -4%) scale(1.08); }
    66%  { transform: translate(-5%, 5%) scale(1.02); }
    100% { transform: translate(3%, 7%) scale(1.1); }
}
@keyframes kga-login-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 26px 52px; } }
@keyframes kga-login-breathe {
    0%, 100% { filter: drop-shadow(0 0 .5px #FFFFFF) drop-shadow(0 0 40px rgba(245,150,30,.5)); }
    50%      { filter: drop-shadow(0 0 .8px #FFFFFF) drop-shadow(0 0 64px rgba(245,150,30,.65)); }
}
@keyframes kga-rim  { 0%, 100% { filter: brightness(.6) sepia(1) saturate(5) hue-rotate(-22deg) blur(1px) drop-shadow(0 0 2px #FFB040) drop-shadow(0 0 5px #FFA030) drop-shadow(0 0 12px rgba(250,140,30,.9)); }  50% { filter: brightness(.6) sepia(1) saturate(5) hue-rotate(-22deg) blur(1.5px) drop-shadow(0 0 3px #FFC060) drop-shadow(0 0 7px #FFA838) drop-shadow(0 0 18px rgba(250,140,30,1)); } }
@keyframes kga-halo { 0%, 100% { opacity: .85; filter: brightness(.6) sepia(1) saturate(5) hue-rotate(-22deg) blur(6px) drop-shadow(0 0 18px rgba(250,140,30,.9)) drop-shadow(0 0 40px rgba(236,120,16,.7)); } 50% { opacity: 1; filter: brightness(.6) sepia(1) saturate(5) hue-rotate(-22deg) blur(8px) drop-shadow(0 0 26px rgba(250,140,30,1)) drop-shadow(0 0 60px rgba(236,120,16,.8)); } }
@keyframes kga-line {
    0%, 100% { box-shadow: 0 0 10px rgba(245,166,35,.9), 0 0 28px rgba(245,166,35,.55), 0 14px 60px 18px rgba(245,166,35,.16); opacity: .9; }
    50%      { box-shadow: 0 0 14px rgba(245,166,35,1), 0 0 44px rgba(245,166,35,.75), 0 18px 80px 26px rgba(245,166,35,.24); opacity: 1; }
}
@keyframes kga-word {
    0%, 100% { text-shadow: 0 0 4px rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.55), 0 0 36px rgba(232,236,244,.4), 0 0 80px rgba(245,166,35,.3); }
    50%      { text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.7), 0 0 50px rgba(232,236,244,.5), 0 0 110px rgba(245,166,35,.45); }
}
@keyframes kga-sub {
    0%, 100% { text-shadow: 0 0 6px rgba(245,166,35,.9), 0 0 18px rgba(245,166,35,.7), 0 0 44px rgba(245,166,35,.4); }
    50%      { text-shadow: 0 0 8px rgba(245,166,35,1), 0 0 26px rgba(245,166,35,.9), 0 0 64px rgba(245,166,35,.55); }
}
@keyframes kga-btn {
    0%, 100% { box-shadow: 0 0 12px rgba(245,166,35,.55), 0 0 36px rgba(245,166,35,.3), inset 0 0 18px rgba(245,166,35,.12); }
    50%      { box-shadow: 0 0 18px rgba(245,166,35,.85), 0 0 60px rgba(245,166,35,.5), inset 0 0 24px rgba(245,166,35,.2); }
}
/* login buttons: black pill with a gold neon rim, white label (both themes) */
html[data-brand="konsilito"] .login-btn,
html[data-brand="konsilito"] .login-btn-tg {
    background: #050506; color: #FFFFFF; border: 2px solid #F5B335; border-radius: 999px; font-size: 16px;
    box-shadow: 0 0 12px rgba(245,166,35,.55), 0 0 36px rgba(245,166,35,.3), inset 0 0 18px rgba(245,166,35,.12);
    transition: border-color .2s, background .2s; animation: kga-btn 4s ease-in-out infinite;
}
html[data-brand="konsilito"] .login-btn:hover,
html[data-brand="konsilito"] .login-btn-tg:hover,
html[data-brand="konsilito"] .login-btn:active {
    background: #121014; color: #FFFFFF; border-color: #FFD27A; animation: none;
    box-shadow: 0 0 16px rgba(245,166,35,.8), 0 0 54px rgba(245,166,35,.45), inset 0 0 22px rgba(245,166,35,.18);
}
html[data-brand="konsilito"] .login-btn-tg svg { color: #F5B335; }

/* help widget keeps the brand black + gold */
html[data-brand="konsilito"] #fa-help { --fah-acc: var(--ga-gold); --fah-acc2: var(--ga-gold-2); --fah-glow: rgba(245,166,35,.35); }
html[data-brand="konsilito"][data-theme="light"] #fa-help { --fah-bg: #FFFFFF; --fah-bg2: #F7F7F5; --fah-user: #F1F1EE; }