:root {
    color-scheme: dark;
    --bg: #050b12;
    --bg-2: #07111b;
    --panel: rgba(8,18,29,.88);
    --line: rgba(255,255,255,.09);
    --line-strong: rgba(255,255,255,.15);
    --text: #eef6fb;
    --muted: #8fa1b2;
    --cyan: #27d7ee;
    --gold: #d9aa35;
    --violet: #9868ff;
    --danger: #ff6b6b;
    --header-h: 66px;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; min-height: 100%; overflow: hidden; }
html { background: var(--bg); scrollbar-gutter: stable; }
body {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 18% 8%, rgba(39,215,238,.08), transparent 28rem),
        radial-gradient(circle at 84% 20%, rgba(152,104,255,.08), transparent 26rem),
        radial-gradient(circle at 50% 110%, rgba(217,170,53,.05), transparent 30rem),
        linear-gradient(180deg, #06101a 0%, #050b12 58%, #04090f 100%);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
}
button, textarea { font: inherit; }
button { color: inherit; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.workspace-bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-h);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 clamp(16px, 3vw, 34px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(5,11,18,.88), rgba(5,11,18,.58));
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.workspace-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: .08em;
}
.workspace-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(39,215,238,.18));
}
.workspace-wordmark { font-weight: 900; font-size: .96rem; }
.workspace-ai { color: var(--cyan); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.workspace-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(238,246,251,.50);
    font-size: .75rem;
    white-space: nowrap;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7d8790;
    box-shadow: 0 0 0 4px rgba(125,135,144,.08);
}
.status-dot.online { background: #4cd27d; box-shadow: 0 0 0 4px rgba(76,210,125,.09), 0 0 14px rgba(76,210,125,.32); }
.status-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,107,107,.08); }

.conversation-canvas {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100dvh - var(--header-h));
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding: 18px 0 180px;
    perspective: 1200px;
}


.conversation-canvas::-webkit-scrollbar { width: 10px; }
.conversation-canvas::-webkit-scrollbar-track { background: transparent; }
.conversation-canvas::-webkit-scrollbar-thumb {
    background: rgba(143,161,178,.18);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
.conversation-canvas::-webkit-scrollbar-thumb:hover { background: rgba(143,161,178,.30); background-clip: padding-box; }

.conversation-atmosphere {
    position: fixed;
    inset: var(--header-h) 0 0;
    pointer-events: none;
    overflow: hidden;
    opacity: .42;
    transition: opacity .8s ease;
}
.atmo { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .18; animation: drift 14s ease-in-out infinite alternate; }
.atmo-one { width: 32vw; height: 32vw; min-width: 280px; min-height: 280px; left: -8vw; top: 8%; background: rgba(39,215,238,.33); }
.atmo-two { width: 30vw; height: 30vw; min-width: 260px; min-height: 260px; right: -7vw; top: 18%; background: rgba(152,104,255,.28); animation-delay: -6s; }
.atmo-three { width: 24vw; height: 24vw; min-width: 220px; min-height: 220px; left: 39%; bottom: -14%; background: rgba(217,170,53,.16); animation-delay: -3s; }
@keyframes drift { to { transform: translate3d(3vw, 3vh, 0) scale(1.08); } }

.messages {
    position: relative;
    z-index: 5;
    width: min(960px, calc(100% - 34px));
    min-height: calc(100% - 118px);
    margin: 0 auto;
    padding: 20px 0 80px;
    opacity: .28;
    transform: translateY(18px) scale(.988);
    filter: saturate(.85);
    transition: opacity .72s cubic-bezier(.2,.72,.2,1), transform .72s cubic-bezier(.2,.72,.2,1), filter .72s ease;
}
body.chat-active .messages {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
}
body.chat-active .conversation-atmosphere { opacity: .24; }

.message {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    padding: 22px 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    animation: messageIn .42s cubic-bezier(.2,.72,.2,1) both;
}
.message.user { grid-template-columns: minmax(0, 1fr) 40px; }
.message.user .avatar { order: 2; }
.message.user .bubble { order: 1; justify-self: end; }
@keyframes messageIn {
    from { opacity: 0; transform: translateY(18px) scale(.992); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 950;
    font-size: .9rem;
    color: #06121b;
    background: linear-gradient(135deg, var(--gold), var(--cyan));
    box-shadow: 0 0 22px rgba(39,215,238,.12);
}
.message.user .avatar {
    color: var(--text);
    background: rgba(255,255,255,.055);
    border: 1px solid var(--line);
    box-shadow: none;
}

/* Miniature Syntecian particle cloud in the assistant avatar slot */
.message.assistant.is-thinking .avatar {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: visible;
    color: transparent;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    display: block;
}
.message.assistant.is-thinking .bubble {
    min-height: 40px;
    padding: 0;
}
.message.assistant.is-thinking .thinking-inline-label { display: none; }

.mini-voice-cloud {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: drop-shadow(0 0 7px rgba(39,215,238,.24));
    animation: miniVoiceCloudBreathe 1.55s ease-in-out infinite;
}
.mini-voice-cloud::before,
.mini-voice-cloud::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    pointer-events: none;
}
.mini-voice-cloud::before {
    background: radial-gradient(circle, rgba(39,215,238,.22), rgba(152,104,255,.10) 45%, transparent 72%);
    filter: blur(5px);
    animation: miniVoiceAura 1.3s ease-in-out infinite alternate;
}
.mini-voice-cloud::after {
    inset: 13px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
    filter: blur(3px);
}
.mini-voice-cloud .mini-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--p-size, 3px);
    height: var(--p-size, 3px);
    margin-left: calc(var(--p-size, 3px) / -2);
    margin-top: calc(var(--p-size, 3px) / -2);
    border-radius: 50%;
    background: var(--p-color, #27d7ee);
    box-shadow: 0 0 4px var(--p-color, #27d7ee), 0 0 9px rgba(39,215,238,.18);
    opacity: .9;
    transform-origin: 0 0;
    animation:
        miniVoiceOrbit var(--p-dur, 2.8s) linear infinite,
        miniVoicePulse var(--p-pulse, 1.2s) ease-in-out infinite;
    animation-delay: var(--p-delay, 0s);
}
@keyframes miniVoiceOrbit {
    from { transform: rotate(var(--p-angle, 0deg)) translateX(var(--p-radius, 10px)) scale(var(--p-scale,1)); }
    to { transform: rotate(calc(var(--p-angle, 0deg) + 360deg)) translateX(var(--p-radius, 10px)) scale(var(--p-scale,1)); }
}
@keyframes miniVoicePulse {
    0%,100% { opacity: .34; }
    50% { opacity: 1; }
}
@keyframes miniVoiceCloudBreathe {
    0%,100% { transform: translate(-50%, -50%) scale(.91); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes miniVoiceAura {
    from { opacity: .35; transform: scale(.82); }
    to { opacity: .85; transform: scale(1.22); }
}

    to { opacity: 1; transform: scale(1.18); }
}
.bubble {
    width: fit-content;
    max-width: min(780px, 92%);
    color: rgba(238,246,251,.91);
    line-height: 1.66;
    overflow-wrap: anywhere;
    padding: 1px 0;
}
.message.user .bubble {
    padding: 12px 15px;
    border: 1px solid rgba(39,215,238,.14);
    border-radius: 18px 18px 5px 18px;
    background: linear-gradient(180deg, rgba(39,215,238,.075), rgba(39,215,238,.035));
}
.bubble p { margin: 0 0 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble strong { color: #fff; }

/* Embedded activation layer */
.activation-overlay {
    position: fixed;
    z-index: 30;
    inset: var(--header-h) 0 0;
    display: grid;
    place-items: center;
    padding: 40px 24px 180px;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter: blur(0);
    transition:
        opacity .78s cubic-bezier(.2,.72,.2,1),
        transform .78s cubic-bezier(.2,.72,.2,1),
        filter .78s ease,
        visibility .78s step-end;
}
.activation-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 44%, rgba(15,31,45,.30), rgba(5,11,18,.56) 45%, rgba(5,11,18,.18) 72%, transparent 88%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: .92;
    transition: opacity .6s ease, backdrop-filter .6s ease;
}
.activation-content {
    position: relative;
    z-index: 3;
    width: min(720px, calc(100vw - 42px));
    text-align: center;
    transform: translateY(-3vh);
    transition: transform .72s cubic-bezier(.2,.72,.2,1), opacity .58s ease, filter .58s ease;
}
.activation-field {
    position: absolute;
    z-index: 1;
    width: min(610px, 78vw);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: .78;
    transform: translateY(-4vh) scale(.88);
    transition: opacity .65s ease, transform .8s cubic-bezier(.2,.72,.2,1);
}
.field-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.045);
    box-shadow: inset 0 0 60px rgba(39,215,238,.018);
}
.ring-one { inset: 4%; border-color: rgba(39,215,238,.11); animation: ringPulse 4.8s ease-in-out infinite; }
.ring-two { inset: 18%; border-style: dashed; border-color: rgba(152,104,255,.10); animation: ringRotate 22s linear infinite reverse; }
.ring-three { inset: 33%; border-color: rgba(217,170,53,.09); animation: ringPulse 4.8s ease-in-out infinite reverse; }
.field-sweep {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    overflow: hidden;
    opacity: .8;
    background: conic-gradient(from 0deg, transparent 0 76%, rgba(39,215,238,.0) 79%, rgba(39,215,238,.28) 84%, rgba(152,104,255,.18) 88%, transparent 91% 100%);
    mask-image: radial-gradient(circle, transparent 0 56%, #000 58% 60%, transparent 62%);
    animation: ringRotate 8.5s linear infinite;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes ringPulse { 50% { transform: scale(1.028); opacity: .62; } }

.presence-orbit {
    width: 96px;
    height: 96px;
    margin: 0 auto 28px;
    position: relative;
    border-radius: 29px;
    padding: 1px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 0 52px rgba(39,215,238,.10), 0 0 70px rgba(152,104,255,.07);
}
.presence-orbit::before {
    content: "";
    position: absolute;
    inset: -75%;
    z-index: -2;
    background: conic-gradient(from 0deg, transparent 0 70deg, var(--cyan) 105deg, var(--gold) 135deg, var(--violet) 165deg, transparent 210deg 360deg);
    animation: presenceSpin 5.4s linear infinite;
}
.presence-orbit::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: 28px;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.08), transparent 34%), rgba(6,14,23,.94);
}
@keyframes presenceSpin { to { transform: rotate(360deg); } }
.presence-core {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 950;
    background: linear-gradient(135deg, #fff, #b8ddff 36%, #5df0df 66%, #b897ff);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
.presence-kicker {
    color: var(--cyan);
    font-weight: 900;
    letter-spacing: .24em;
    font-size: .73rem;
    margin-bottom: 13px;
}
.activation-content h1 {
    margin: 0;
    font-size: clamp(2.2rem, 5.3vw, 4.7rem);
    line-height: .96;
    letter-spacing: -.05em;
    font-weight: 760;
}
.activation-content p {
    max-width: 610px;
    margin: 18px auto 0;
    color: var(--muted);
    line-height: 1.65;
    font-size: clamp(.98rem, 1.8vw, 1.09rem);
}
.activation-hint {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(238,246,251,.40);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.activation-hint span {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan));
    box-shadow: 0 0 8px rgba(39,215,238,.4);
    animation: hintPulse 1.9s ease-in-out infinite;
}
@keyframes hintPulse { 50% { width: 42px; opacity: .55; } }

/* Typing begins: overlay softens without vanishing abruptly. */
body.is-engaging .activation-overlay::before { opacity: .58; backdrop-filter: blur(1px); }
body.is-engaging .activation-content {
    transform: translateY(-6vh) scale(.965);
    opacity: .42;
    filter: blur(1.8px);
}
body.is-engaging .activation-field {
    opacity: .40;
    transform: translateY(-6vh) scale(1.03);
}
body.is-engaging .messages { opacity: .56; transform: translateY(8px) scale(.995); }

/* First send: the activation layer dissolves and chat becomes the surface. */
body.chat-active .activation-overlay {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.045);
    filter: blur(12px);
}
body.chat-active .activation-content { transform: translateY(-8vh) scale(.93); opacity: 0; }
body.chat-active .activation-field { transform: translateY(-8vh) scale(1.17); opacity: 0; }

.composer-dock {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(860px, calc(100% - 28px));
    padding: 1px;
    border-radius: 25px;
    overflow: hidden;
    z-index: 200;
    isolation: isolate;
    box-shadow: 0 24px 72px rgba(0,0,0,.48), 0 0 34px rgba(39,215,238,.08), 0 0 46px rgba(152,104,255,.055);
    transition: width .55s cubic-bezier(.2,.72,.2,1), bottom .55s ease, box-shadow .55s ease;
}
body.intro-mode .composer-dock { box-shadow: 0 24px 72px rgba(0,0,0,.52), 0 0 42px rgba(39,215,238,.11), 0 0 54px rgba(152,104,255,.07); }
body.is-engaging .composer-dock { width: min(900px, calc(100% - 28px)); }
body.chat-active .composer-dock { width: min(900px, calc(100% - 28px)); }
.composer-dock::before {
    content: "";
    position: absolute;
    inset: -180%;
    z-index: -2;
    background: conic-gradient(
        from 0deg,
        rgba(39,215,238,.05) 0deg,
        rgba(39,215,238,.08) 60deg,
        #27d7ee 88deg,
        #d9aa35 112deg,
        #9868ff 138deg,
        rgba(152,104,255,.08) 166deg,
        rgba(255,255,255,.03) 245deg,
        rgba(39,215,238,.05) 360deg
    );
    animation: composerOrbit 6s linear infinite;
}
.composer-dock::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(8,18,29,.91), rgba(5,12,20,.95));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}
@keyframes composerOrbit { to { transform: rotate(360deg); } }
.composer {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
    padding: 11px 11px 7px;
}
.composer textarea {
    min-height: 50px;
    max-height: 205px;
    resize: none;
    border: 1px solid rgba(255,255,255,.10);
    outline: none;
    border-radius: 17px;
    padding: 13px 15px;
    color: var(--text);
    background: rgba(3,9,15,.72);
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.024);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.composer textarea::placeholder { color: rgba(238,246,251,.42); }
.composer textarea:focus { border-color: rgba(39,215,238,.48); box-shadow: 0 0 0 3px rgba(39,215,238,.055); background: rgba(3,9,15,.83); }
.composer-tool,
.composer-send {
    border: 1px solid rgba(255,255,255,.10);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.composer-tool {
    width: 42px;
    height: 42px;
    align-self: center;
    border-radius: 14px;
    color: var(--cyan);
    font-size: 1.55rem;
    line-height: 1;
    background: rgba(255,255,255,.04);
}
.composer-tool:hover { transform: translateY(-1px); border-color: rgba(39,215,238,.34); }
.composer-send {
    min-width: 98px;
    height: 50px;
    border-radius: 16px;
    padding: 0 20px;
    color: #06121b;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), var(--cyan));
    box-shadow: 0 10px 25px rgba(39,215,238,.10);
}
.composer-send:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(39,215,238,.14); }
.composer-send:disabled { opacity: .56; cursor: wait; transform: none; }
.send-arrow { display: none; }
.composer-note {
    text-align: center;
    color: rgba(238,246,251,.30);
    font-size: .68rem;
    padding: 0 14px 9px;
}

@media (max-width: 720px) {
    :root { --header-h: 58px; }
    .workspace-bar { padding-inline: 13px; }
    .workspace-logo { width: 30px; height: 30px; }
    .workspace-wordmark { font-size: .83rem; }
    .workspace-status span:last-child { display: none; }
    .conversation-canvas { padding-bottom: 166px; }
    .messages { width: min(100% - 22px, 960px); padding-top: 8px; }
    .message { gap: 10px; grid-template-columns: 34px minmax(0,1fr); padding-block: 18px; }
    .message.user { grid-template-columns: minmax(0,1fr) 34px; }
    .avatar { width: 32px; height: 32px; border-radius: 10px; }
    .bubble { max-width: 96%; font-size: .96rem; }
    .activation-overlay { padding: 28px 18px 145px; }
    .activation-content { transform: translateY(-2vh); }
    .activation-field { width: min(560px, 118vw); opacity: .58; }
    .presence-orbit { width: 80px; height: 80px; margin-bottom: 22px; border-radius: 24px; }
    .presence-orbit::after { border-radius: 23px; }
    .activation-content h1 { font-size: clamp(2.05rem, 10vw, 3.15rem); }
    .activation-content p { max-width: 92%; font-size: .94rem; }
    .activation-hint { margin-top: 20px; }
    .composer-dock { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 18px); }
    body.is-engaging .composer-dock,
    body.chat-active .composer-dock { width: calc(100% - 18px); }
    .composer { grid-template-columns: 40px minmax(0,1fr) 46px; gap: 7px; padding: 9px 9px 6px; }
    .composer-tool { width: 40px; height: 40px; }
    .composer-send { min-width: 46px; width: 46px; padding: 0; }
    .send-label { display: none; }
    .send-arrow { display: inline; font-size: 1.15rem; }
    .composer-note { font-size: .61rem; padding-bottom: 7px; }
}

@media (max-width: 430px) {
    .workspace-ai { display: none; }
    .activation-content h1 { font-size: 2.25rem; }
    .activation-content p { font-size: .9rem; }
    .composer-note { display: none; }
    .composer { padding-bottom: 9px; }
}


/* Syntecian input tools + dedicated voice conversation */
.composer-tools-wrap { position: relative; align-self: center; width: 42px; height: 42px; }
.composer-tools-wrap .composer-tool { position: relative; z-index: 2; }
.input-tools-menu {
    position: fixed;
    left: 18px;
    top: 18px;
    width: 270px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 19px;
    background: linear-gradient(180deg, rgba(8,18,29,.97), rgba(4,10,17,.985));
    box-shadow: 0 22px 70px rgba(0,0,0,.52), 0 0 34px rgba(39,215,238,.08);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.98);
    transform-origin: bottom left;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 1000;
}
.input-tools-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.tool-menu-divider { height: 1px; margin: 5px 2px 8px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
.input-tool-coming { padding: 5px 7px; color: rgba(238,246,251,.34); font-size: .68rem; letter-spacing: .06em; }
.input-tool-heading { color: rgba(238,246,251,.78); text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; }

/* Composer now has a dedicated voice control to the right of Send. */
.composer { grid-template-columns: 42px minmax(0, 1fr) auto 50px; }
.composer-voice {
    width: 50px;
    height: 50px;
    align-self: end;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.18);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.composer-voice:hover {
    transform: translateY(-1px);
    border-color: rgba(39,215,238,.48);
    box-shadow: 0 0 0 4px rgba(39,215,238,.045), 0 10px 28px rgba(39,215,238,.12);
}
.voice-mic-icon {
    position: relative;
    display: block;
    width: 13px;
    height: 19px;
    border: 2px solid currentColor;
    border-radius: 8px;
}
.voice-mic-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 21px;
    height: 13px;
    transform: translateX(-50%);
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}
.voice-mic-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 2px;
    height: 5px;
    transform: translateX(-50%);
    background: currentColor;
    box-shadow: -5px 5px 0 -1px currentColor, 5px 5px 0 -1px currentColor;
}

.voice-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease, visibility .32s ease;
}
.voice-mode-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.voice-mode-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(39,215,238,.10), transparent 34%),
        radial-gradient(circle at 58% 42%, rgba(152,104,255,.09), transparent 42%),
        rgba(2,7,12,.78);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.voice-mode-panel {
    position: relative;
    width: min(560px, calc(100vw - 30px));
    min-height: 560px;
    padding: 50px 34px 30px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 32px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(180deg, rgba(8,18,30,.90), rgba(3,9,16,.96));
    box-shadow: 0 40px 110px rgba(0,0,0,.58), 0 0 70px rgba(39,215,238,.10), 0 0 90px rgba(152,104,255,.07);
    transform: translateY(18px) scale(.96);
    transition: transform .38s cubic-bezier(.2,.75,.2,1);
}
.voice-mode-overlay.is-open .voice-mode-panel { transform: translateY(0) scale(1); }
.voice-mode-panel::before {
    content: "";
    position: absolute;
    inset: -130%;
    z-index: -2;
    background: conic-gradient(from 0deg, transparent 0 60deg, rgba(39,215,238,.72) 82deg, rgba(217,170,53,.55) 100deg, rgba(152,104,255,.70) 122deg, transparent 152deg 360deg);
    animation: voicePanelOrbit 7s linear infinite;
}
.voice-mode-panel::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: 31px;
    background: linear-gradient(180deg, rgba(8,18,30,.98), rgba(3,9,16,.99));
}
@keyframes voicePanelOrbit { to { transform: rotate(360deg); } }
.voice-mode-close {
    position: absolute;
    right: 17px;
    top: 15px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    color: rgba(238,246,251,.72);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}
.voice-visual {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 4px auto 24px;
    display: grid;
    place-items: center;
    isolation: isolate;
}
.voice-particles-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 0 40px rgba(39,215,238,.18)) drop-shadow(0 0 70px rgba(152,104,255,.12));
}
.voice-cloud-halo {
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 28%),
        radial-gradient(circle at 28% 30%, rgba(39,215,238,.18), transparent 42%),
        radial-gradient(circle at 72% 66%, rgba(152,104,255,.18), transparent 46%);
    opacity: calc(.45 + var(--voice-energy, .08) * .55);
    transform: scale(calc(.94 + var(--voice-energy, .08) * .14));
    filter: blur(calc(18px + var(--voice-energy, .08) * 10px));
    transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}
.voice-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 30%), linear-gradient(145deg, rgba(39,215,238,.34), rgba(152,104,255,.30));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 0 35px rgba(39,215,238,.10), 0 0 calc(40px + var(--voice-energy, .08) * 44px) rgba(39,215,238,.16);
    z-index: 2;
    transform: translate(-50%, -50%) scale(calc(1 + var(--voice-energy, .08) * .10));
    transition: transform .18s ease, box-shadow .18s ease, background .22s ease;
}
.voice-core::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 38px;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 0 0 1px rgba(39,215,238,.06), 0 0 24px rgba(39,215,238,.10);
    opacity: calc(.45 + var(--voice-energy, .08) * .45);
}
.voice-core-mark { font-weight: 900; font-size: 2rem; color: #eefcff; text-shadow: 0 0 18px rgba(39,215,238,.6); }
.voice-mode-overlay[data-voice-state="listening"] .voice-core {
    box-shadow: inset 0 0 35px rgba(39,215,238,.14), 0 0 calc(55px + var(--voice-energy, .08) * 85px) rgba(39,215,238,.20);
}
.voice-mode-overlay[data-voice-state="thinking"] .voice-core {
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 30%), linear-gradient(145deg, rgba(152,104,255,.40), rgba(39,215,238,.22));
}
.voice-mode-overlay[data-voice-state="speaking"] .voice-core {
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.25), transparent 30%), linear-gradient(145deg, rgba(152,104,255,.44), rgba(39,215,238,.38));
    box-shadow: inset 0 0 35px rgba(152,104,255,.14), 0 0 calc(65px + var(--voice-energy, .08) * 120px) rgba(152,104,255,.22);
}
.voice-mode-overlay[data-voice-state="paused"] .voice-cloud-halo,
.voice-mode-overlay[data-voice-state="error"] .voice-cloud-halo {
    opacity: .24;
}
.voice-mode-overlay[data-voice-state="error"] .voice-core {
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), transparent 30%), linear-gradient(145deg, rgba(255,107,107,.42), rgba(152,104,255,.26));
}
.voice-mode-overlay[data-voice-state="paused"] .voice-core {
    box-shadow: inset 0 0 25px rgba(255,255,255,.04), 0 0 32px rgba(255,255,255,.06);
}
.voice-mode-kicker { color: rgba(39,215,238,.72); font-size: .68rem; letter-spacing: .22em; font-weight: 800; }
.voice-mode-panel h2 { margin: 9px 0 9px; color: var(--text); font-size: clamp(1.7rem, 4vw, 2.3rem); }
.voice-mode-status { margin: 0 auto; color: rgba(238,246,251,.66); min-height: 26px; }
.voice-mode-transcript {
    margin: 16px auto 0;
    min-height: 48px;
    max-width: 440px;
    color: rgba(238,246,251,.38);
    font-size: .94rem;
    line-height: 1.55;
    transition: color .2s ease;
}
.voice-mode-transcript.has-text { color: rgba(238,246,251,.86); }
.voice-mode-controls { display: flex; justify-content: center; gap: 10px; margin-top: 21px; flex-wrap: wrap; }
.voice-mode-controls button { border-radius: 14px; padding: 11px 16px; cursor: pointer; font-weight: 760; }
.voice-control-secondary { color: var(--text); border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.04); }
.voice-control-end { color: #06121b; border: 1px solid rgba(39,215,238,.28); background: linear-gradient(135deg, var(--gold), var(--cyan)); }
.voice-mode-note { margin: 20px auto 0; max-width: 430px; color: rgba(238,246,251,.28); font-size: .68rem; line-height: 1.55; }
body.voice-mode-open { overflow: hidden; }
body.voice-mode-open .composer-voice { color: #06121b; background: var(--cyan); box-shadow: 0 0 0 5px rgba(39,215,238,.06), 0 0 34px rgba(39,215,238,.28); }

@media (max-width: 720px) {
    .composer-tools-wrap { width: 40px; height: 40px; }
    .input-tools-menu { width: min(270px, calc(100vw - 24px)); }
    .composer { grid-template-columns: 40px minmax(0,1fr) 46px 46px; }
    .composer-voice { width: 46px; height: 50px; }
    .voice-mode-panel { min-height: min(590px, calc(100dvh - 28px)); padding: 44px 20px 24px; border-radius: 27px; }
    .voice-visual { width: 232px; height: 232px; }
    .voice-core { width: 82px; height: 82px; border-radius: 26px; }
}
@media (max-width: 430px) {
    .composer { grid-template-columns: 38px minmax(0,1fr) 44px 44px; gap: 6px; }
    .composer-voice { width: 44px; height: 48px; }
    .voice-mode-overlay { padding: 9px; }
    .voice-mode-panel { width: calc(100vw - 18px); }
}


/* Syntecian Local AI model loader */
.local-model-loader {
    position: fixed;
    inset: 0;
    z-index: 1850;
    display: grid;
    place-items: center;
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
.local-model-loader.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.local-model-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2,7,12,.76);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.local-model-loader-card {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 30px));
    padding: 36px 30px 28px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.10);
    text-align: center;
    background: linear-gradient(180deg, rgba(8,18,30,.96), rgba(3,9,16,.985));
    box-shadow: 0 36px 100px rgba(0,0,0,.55), 0 0 70px rgba(39,215,238,.08), 0 0 85px rgba(152,104,255,.06);
    overflow: hidden;
}
.local-model-loader-card::before {
    content: "";
    position: absolute;
    inset: -120%;
    background: conic-gradient(from 0deg, transparent 0 58deg, rgba(39,215,238,.55) 78deg, rgba(152,104,255,.50) 105deg, rgba(217,170,53,.42) 126deg, transparent 148deg 360deg);
    animation: localLoaderOrbit 8s linear infinite;
    z-index: -2;
}
.local-model-loader-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 27px;
    background: linear-gradient(180deg, rgba(8,18,30,.985), rgba(3,9,16,.995));
    z-index: -1;
}
@keyframes localLoaderOrbit { to { transform: rotate(360deg); } }
.local-loader-orb { width: 82px; height: 82px; margin: 0 auto 18px; position: relative; }
.local-loader-orb span { position:absolute; inset:50%; width:12px; height:12px; border-radius:50%; transform-origin:0 0; box-shadow:0 0 22px currentColor; }
.local-loader-orb span:nth-child(1){ color:var(--cyan); background:var(--cyan); animation:localOrb1 1.9s linear infinite; }
.local-loader-orb span:nth-child(2){ color:var(--violet); background:var(--violet); animation:localOrb2 2.4s linear infinite; }
.local-loader-orb span:nth-child(3){ color:var(--gold); background:var(--gold); animation:localOrb3 3s linear infinite; }
@keyframes localOrb1 { to { transform:rotate(360deg) translateX(32px); } from { transform:rotate(0deg) translateX(32px); } }
@keyframes localOrb2 { to { transform:rotate(-360deg) translateX(24px); } from { transform:rotate(0deg) translateX(24px); } }
@keyframes localOrb3 { to { transform:rotate(360deg) translateX(16px); } from { transform:rotate(0deg) translateX(16px); } }
.local-loader-kicker { color:rgba(39,215,238,.72); font-size:.66rem; letter-spacing:.21em; font-weight:850; }
.local-model-loader h2 { margin:9px 0 10px; font-size:clamp(1.55rem,4vw,2.1rem); }
.local-model-loader p { margin:0; color:rgba(238,246,251,.62); line-height:1.55; }
.local-model-progress { height:8px; margin:21px 0 16px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.05); }
.local-model-progress span { display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--gold)); box-shadow:0 0 20px rgba(39,215,238,.25); transition:width .22s ease; }
.local-model-footnote { font-size:.70rem; color:rgba(238,246,251,.30)!important; }

.local-model-ready .status-dot { background:#4cd27d; box-shadow:0 0 0 4px rgba(76,210,125,.09),0 0 16px rgba(76,210,125,.34); }
.local-model-loading .status-dot { background:var(--cyan); box-shadow:0 0 0 4px rgba(39,215,238,.08),0 0 16px rgba(39,215,238,.32); animation:localStatusPulse 1s ease-in-out infinite alternate; }
.local-model-error .status-dot { background:var(--danger); box-shadow:0 0 0 4px rgba(255,107,107,.08),0 0 16px rgba(255,107,107,.22); }
@keyframes localStatusPulse { to { opacity:.45; transform:scale(.82); } }


/* Syntecian browser voice selector */
.voice-picker {
    width: min(440px, 100%);
    margin: 16px auto 0;
    text-align: left;
}
.voice-picker label {
    display: block;
    margin: 0 0 7px 2px;
    color: rgba(238,246,251,.62);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.voice-picker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}
.voice-picker select {
    width: 100%;
    min-width: 0;
    height: 43px;
    padding: 0 38px 0 13px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    outline: none;
    cursor: pointer;
    color-scheme: dark;
}
.voice-picker select:focus {
    border-color: rgba(39,215,238,.50);
    box-shadow: 0 0 0 4px rgba(39,215,238,.06);
}
.voice-picker select option { background: #07111b; color: #eef6fb; }
.voice-preview-button {
    height: 43px;
    padding: 0 14px;
    border: 1px solid rgba(39,215,238,.25);
    border-radius: 13px;
    color: var(--cyan);
    background: rgba(39,215,238,.06);
    cursor: pointer;
    font-weight: 760;
}
.voice-preview-button:hover {
    border-color: rgba(39,215,238,.48);
    background: rgba(39,215,238,.10);
}
.voice-picker-note {
    margin: 6px 2px 0;
    color: rgba(238,246,251,.28);
    font-size: .64rem;
}
@media (max-width: 430px) {
    .voice-picker-row { grid-template-columns: 1fr; }
    .voice-preview-button { width: 100%; }
}


/* Syntecian multimodal intake */
.attachment-tray {
    display: none;
    gap: 8px;
    padding: 10px 10px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.attachment-tray.has-files { display: flex; }
.attachment-chip {
    flex: 0 0 auto;
    width: min(260px, 72vw);
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 28px;
    align-items: center;
    gap: 9px;
    padding: 7px 7px 7px 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(7,16,25,.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.attachment-chip img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
}
.attachment-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(39,215,238,.14), rgba(152,104,255,.12));
    border: 1px solid rgba(39,215,238,.12);
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 900;
}
.attachment-meta { min-width: 0; display: grid; gap: 3px; }
.attachment-meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(238,246,251,.9);
    font-size: .72rem;
}
.attachment-meta small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(238,246,251,.43);
    font-size: .61rem;
}
.attachment-remove {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    color: rgba(238,246,251,.62);
    cursor: pointer;
    font-size: 1rem;
}
.attachment-remove:hover { background: rgba(255,107,107,.13); color: #fff; }

.input-tool-action {
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.input-tool-action:hover { background: rgba(39,215,238,.07); }
.input-tool-action.is-coming { opacity: .38; cursor: default; }
.input-tool-action span:last-child { min-width: 0; display: grid; gap: 2px; }
.input-tool-action strong { color: rgba(238,246,251,.9); font-size: .72rem; }
.input-tool-action small { color: rgba(238,246,251,.42); font-size: .61rem; line-height: 1.35; }
.input-tool-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(39,215,238,.11);
    background: rgba(39,215,238,.05);
    color: var(--cyan);
    font-weight: 900;
    font-size: .82rem;
}
.input-tool-heading { padding: 3px 7px 7px; font-size: .68rem; font-weight: 900; letter-spacing: .1em; color: rgba(238,246,251,.62); text-transform: uppercase; }
.composer.is-file-dragover { box-shadow: inset 0 0 0 1px rgba(39,215,238,.45), 0 0 28px rgba(39,215,238,.09); border-radius: 16px; }

@media (max-width: 640px) {
    .attachment-chip { width: min(235px, 76vw); }
    .attachment-tray { padding-top: 8px; }
}


/* Syntecian persistent local workspace */
.local-folder-strip {
    margin: 0 10px 8px;
    min-height: 50px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto 30px;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border: 1px solid rgba(39,215,238,.14);
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(39,215,238,.065), rgba(152,104,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.local-folder-strip[hidden] { display: none !important; }
.local-folder-strip-icon { width: 34px; height: 34px; display:grid; place-items:center; border-radius:10px; color:var(--cyan); background:rgba(39,215,238,.08); }
.local-folder-strip-meta { min-width:0; display:grid; gap:2px; text-align:left; }
.local-folder-strip-meta strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; color:rgba(238,246,251,.92); }
.local-folder-strip-meta small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.61rem; color:rgba(238,246,251,.45); }
.local-folder-browse { border:1px solid rgba(39,215,238,.18); border-radius:10px; padding:8px 11px; background:rgba(39,215,238,.07); color:rgba(238,246,251,.88); cursor:pointer; font-size:.66rem; }
.local-folder-browse:hover { border-color:rgba(39,215,238,.45); background:rgba(39,215,238,.11); }
.local-folder-disconnect { width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.05); color:rgba(238,246,251,.56); cursor:pointer; font-size:1rem; }
.local-folder-disconnect:hover { background:rgba(255,107,107,.13); color:#fff; }
.local-folder-overlay { position:fixed; inset:0; z-index:2300; display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease, visibility .24s ease; }
.local-folder-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.local-folder-backdrop { position:absolute; inset:0; background:rgba(2,7,12,.80); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.local-folder-panel { position:relative; width:min(720px,calc(100vw - 28px)); max-height:min(760px,calc(100dvh - 34px)); display:grid; grid-template-rows:auto auto auto auto minmax(160px,1fr) auto; gap:12px; padding:28px; border:1px solid rgba(255,255,255,.09); border-radius:28px; overflow:hidden; background:linear-gradient(180deg,rgba(8,18,30,.97),rgba(3,9,16,.99)); box-shadow:0 40px 110px rgba(0,0,0,.58),0 0 70px rgba(39,215,238,.08); }
.local-folder-close { position:absolute; top:15px; right:15px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.055); color:rgba(238,246,251,.66); cursor:pointer; font-size:1.2rem; }
.local-folder-kicker { color:var(--cyan); letter-spacing:.16em; font-size:.62rem; font-weight:800; }
.local-folder-panel h2 { margin:0; color:#fff; font-size:1.45rem; }
.local-folder-panel p { margin:0; color:rgba(238,246,251,.46); font-size:.76rem; }
.local-folder-search { width:100%; border:1px solid rgba(255,255,255,.09); border-radius:13px; padding:12px 14px; outline:0; background:rgba(255,255,255,.035); color:#fff; font:inherit; }
.local-folder-search:focus { border-color:rgba(39,215,238,.38); box-shadow:0 0 0 3px rgba(39,215,238,.05); }
.local-folder-file-list { overflow:auto; display:grid; align-content:start; gap:6px; padding-right:3px; scrollbar-width:thin; }
.local-folder-file { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border:1px solid transparent; border-radius:12px; text-align:left; background:rgba(255,255,255,.025); color:inherit; cursor:pointer; }
.local-folder-file:hover { border-color:rgba(39,215,238,.18); background:rgba(39,215,238,.055); }
.local-folder-file-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:linear-gradient(135deg,rgba(39,215,238,.12),rgba(152,104,255,.10)); color:var(--cyan); font-size:.65rem; font-weight:900; }
.local-folder-file > span:last-child { min-width:0; display:grid; gap:2px; }
.local-folder-file strong,.local-folder-file small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.local-folder-file strong { color:rgba(238,246,251,.9); font-size:.72rem; }
.local-folder-file small { color:rgba(238,246,251,.38); font-size:.6rem; }
.local-folder-empty { padding:28px 12px; text-align:center; color:rgba(238,246,251,.4); font-size:.75rem; }
.local-folder-panel-actions { display:flex; justify-content:flex-end; gap:9px; }
@media (max-width:600px) { .local-folder-panel{padding:24px 18px 18px;border-radius:22px}.local-folder-strip{grid-template-columns:34px minmax(0,1fr) 30px}.local-folder-browse{display:none}.local-folder-panel-actions{display:grid;grid-template-columns:1fr 1fr}.local-folder-panel-actions button{width:100%} }