@import url("sidebar.css");
@import url("variables.css");
@import url("base.css");
@import url("layout.css");
@import url("components.css");
@import url("animations.css");
@import url("topbar.css");
@import url("chat.css");
@import url("messages.css");
@import url("hero.css");
@import url("project.css");
@import url("toast.css");
@import url("mobile.css");

.user{

margin:18px 0;

padding:16px;

background:#1d2433;

border-radius:18px;

align-self:flex-end;

max-width:70%;

}

.assistant{

margin:18px 0;

padding:16px;

background:#111827;

border-radius:18px;

border:1px solid rgba(198,166,107,.15);

max-width:70%;

white-space:pre-wrap;

}

#chatWindow{

display:flex;

flex-direction:column;

}

#uploadBtn{

cursor:pointer;

font-size:22px;

padding:10px;

border-radius:12px;

transition:.25s;

}

#uploadBtn:hover{

background:#1d1d1d;

}

.popup-panel{

position:fixed;

top:90px;

right:30px;

width:320px;

background:#171717;

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

padding:20px;

display:none;

z-index:9999;

box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.popup-panel h3{

margin-bottom:15px;

}

.popup-panel button{

margin-top:20px;

width:100%;

padding:10px;

border:none;

border-radius:10px;

cursor:pointer;

}

.light-mode{

background:#ececec;
color:#111;

}

.light-mode .workspace{

background:#ffffff;

}

.light-mode .sidebar{

background:#f5f5f5;

}

.light-mode .command-bar{

background:#ffffff;

}

.light-mode input{

color:#111;

}

.command-palette{

position:fixed;

inset:0;

background:rgba(0,0,0,.55);

display:none;

justify-content:center;

align-items:flex-start;

padding-top:120px;

z-index:99999;

backdrop-filter:blur(8px);

}

.command-box{

width:650px;

background:#171717;

border-radius:18px;

overflow:hidden;

border:1px solid #303030;

}

#commandSearch{

width:100%;

padding:22px;

font-size:18px;

background:#171717;

color:white;

border:none;

outline:none;

}

.command-item{

padding:18px 22px;

cursor:pointer;

transition:.2s;

}

.command-item:hover{

background:#262626;

}

/* ===========================
   AP Synapse Final Polish
=========================== */

*{
scroll-behavior:smooth;
}

::selection{
background:#c6a66b;
color:#111;
}

button{
transition:.25s ease;
}

button:hover{
transform:translateY(-2px);
}

button:active{
transform:scale(.96);
}

input,
textarea{
transition:.25s ease;
}

input:focus,
textarea:focus{
outline:none;
box-shadow:0 0 0 2px rgba(198,166,107,.35);
}

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#101114;
}

::-webkit-scrollbar-thumb{
background:#3a3a3a;
border-radius:50px;
}

::-webkit-scrollbar-thumb:hover{
background:#c6a66b;
}

img{
user-select:none;
-webkit-user-drag:none;
}

.card,
.project-card,
.prompt-chip,
.message-body,
.command-bar{
transition:.3s ease;
}

.project-card:hover,
.prompt-chip:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.fade-in{
animation:fadeIn .45s ease;
}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(15px);
}

to{
opacity:1;
transform:none;
}

}

/* ==========================
Assistant Dashboard
========================== */

.assistant-page{

display:flex;

flex-direction:column;

gap:30px;

width:100%;

height:100%;

overflow:auto;

}

.assistant-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.assistant-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:22px;

}

.assistant-card{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:26px;

backdrop-filter:blur(18px);

transition:.3s;

}

.assistant-card:hover{

transform:translateY(-6px);

border-color:rgba(198,166,107,.35);

box-shadow:0 20px 45px rgba(198,166,107,.12);

}

.primary-btn{

padding:14px 24px;

border:none;

border-radius:16px;

background:var(--accent);

font-weight:700;

cursor:pointer;

}

.quick-action{

width:100%;

margin-top:10px;

padding:12px;

border-radius:14px;

border:none;

cursor:pointer;

}

/* ===========================
Code Studio
=========================== */

.code-toolbar{

display:flex;

gap:12px;

margin-bottom:18px;

flex-wrap:wrap;

}

.code-toolbar button{

padding:12px 18px;

border:none;

border-radius:14px;

cursor:pointer;

}

.code-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:20px;

}

.code-editor textarea{

width:100%;

height:600px;

background:#0b0f18;

color:#f8f8f8;

border-radius:18px;

padding:20px;

font-family:Consolas,monospace;

font-size:15px;

border:1px solid rgba(255,255,255,.08);

resize:none;

}

.code-ai{

padding:24px;

border-radius:20px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

}

/* =========================================================
   AP SYNAPSE — CLEAN CHAT LAYOUT
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.app {
    width: 100%;
    height: 100vh;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.workspace {
    flex: 1 1 0;
    width: 0;
    height: 100vh;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.workspace-content {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.conversation {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* =========================================================
   CHAT — THE ONLY VERTICAL SCROLL CONTAINER
   ========================================================= */

#chatWindow {
    flex: 1 1 0;

    width: 100%;
    height: 0;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow-y: scroll !important;
    overflow-x: hidden !important;

    padding: 30px 40px;

    scroll-behavior: auto;

    overscroll-behavior: auto;
}

/* Messages must be allowed to grow vertically */

#chatWindow .message {
    flex: 0 0 auto;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    min-height: fit-content;
}

/* Message contents */

#chatWindow .message-body {
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;

    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Code */

#chatWindow pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Images */

#chatWindow img {
    max-width: 100%;
    height: auto;
}

/* Thinking stays inside conversation */

#thinking {
    flex: 0 0 auto;
}

/* Hero does not steal chat height */

#heroScreen {
    flex: 0 0 auto;
}

/* Command bar remains fixed at bottom of workspace */

.command-section {
    flex: 0 0 auto;
}

/* =========================================================
   AP SYNAPSE — FULL SCREEN WORKSPACE FIX
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    min-height: 100vh;
}

.app {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;
    min-width: 0;
    min-height: 0;

    display: flex;

    overflow: hidden;
}

.sidebar {
    flex: 0 0 auto;
    height: 100vh;
    min-height: 0;
}

.workspace {
    position: relative;

    flex: 1 1 auto;

    width: auto;
    height: 100vh;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.topbar {
    flex: 0 0 auto;
    width: 100%;
}

.workspace-content {
    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.conversation {
    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#chatWindow {
    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 30px 40px;

    display: flex;
    flex-direction: column;

    scroll-behavior: auto;
}

.command-section {
    flex: 0 0 auto;

    width: 100%;

    position: relative;
    z-index: 20;
}

.command-bar {
    width: 100%;
    box-sizing: border-box;
}

#heroScreen {
    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;
}

.projects-page {
    flex: 1 1 0;

    width: 100%;
    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;
}

/* =========================================================
   AP SYNAPSE — CLEAN WORKSPACE LAYOUT
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* APP */
.app {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* WORKSPACE */
.workspace {
    position: relative;

    width: calc(100vw - 280px);
    height: 100vh;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* TOP BAR */
.topbar {
    flex: 0 0 auto;
    width: 100%;
}

/* EVERYTHING BELOW TOPBAR */
.workspace-content {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 0;

    flex: 1 1 auto;

    box-sizing: border-box;

    padding: 0;

    overflow: hidden;
}

/* =========================================================
   AP SYNAPSE — FULL WORKSPACE PAGES
   ========================================================= */

#codeStudioPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#canvasPage {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 40px 6% 80px;

    margin: 0;
}

/* ASSISTANT PAGE */
#assistantPage {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* CHAT AREA */
#chatWindow {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 30px 8% 150px 8%;

    scroll-behavior: auto;
}

/* CHAT MESSAGES */
#chatWindow .message {
    width: 100%;
    max-width: 100%;

    flex: 0 0 auto;

    box-sizing: border-box;
}

/* MESSAGE CONTENT */
#chatWindow .message-body {
    min-width: 0;
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: break-word;
}

/* CODE */
#chatWindow pre {
    max-width: 100%;
    overflow-x: auto;
}

/* IMAGES */
#chatWindow img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   COMMAND BAR — ASSISTANT ONLY
   ========================================================= */

.command-section {
    display: block;
}

body[data-page="projects"] .command-section,
body[data-page="knowledge"] .command-section,
body[data-page="documents"] .command-section,
body[data-page="automation"] .command-section,
body[data-page="codestudio"] .command-section,
body[data-page="canvas"] .command-section {
    display: none !important;
}

/* =========================================================
   COMMAND BAR — ALWAYS AT BOTTOM
   ========================================================= */

.command-section {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    box-sizing: border-box;

    padding: 15px 8% 20px;

    z-index: 1000;
}

/* COMMAND BAR ITSELF */
.command-bar {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    box-sizing: border-box;
}

/* =========================================================
   HERO / WELCOME SCREEN
   ========================================================= */

#heroScreen {
    width: 100%;
    height: 100%;

    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    padding-bottom: 40px;
}

/* =========================================================
   OTHER WORKSPACE PAGES
   ========================================================= */

.projects-page {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    padding-bottom: 130px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .workspace {
        width: 100%;
    }

    .command-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    #chatWindow {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 150px;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL WORKSPACE PAGE FIX
   ========================================================= */

/* Keep the whole application inside the viewport */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Main application */
.app {
    width: 100%;
    height: 100vh;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* Main workspace */
.workspace {
    flex: 1 1 auto;
    width: 0;
    height: 100vh;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* Top bar stays fixed */
.topbar {
    flex: 0 0 auto;
}

/* Area underneath topbar */
.workspace-content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* =========================================================
   AP SYNAPSE — FINAL GLOBAL SCROLL FIX
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;
}

/* Main application */
.app {
    width: 100%;
    height: 100vh;

    min-height: 0;

    display: flex;

    overflow: hidden;
}

/* Sidebar gets its own scroll */
.sidebar {
    height: 100vh;
    min-height: 0;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Main workspace */
.workspace {
    flex: 1 1 auto;

    height: 100vh;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* Everything inside workspace */
.workspace-content {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    overflow: auto !important;
}

/* Assistant page */
.assistant-page {
    width: 100%;
    min-height: 100%;

    box-sizing: border-box;

    overflow: visible !important;
}

/* Other workspace pages */
.workspace-page,
.page,
.content-page {
    width: 100%;
    min-height: 100%;

    box-sizing: border-box;

    overflow: visible !important;
}

/* Chat itself */
.conversation {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* Actual conversation scroll */
#chatWindow {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scroll-behavior: auto !important;

    overscroll-behavior: auto !important;
}

/* Command/input bar stays fixed within layout */
.command-section {
    flex: 0 0 auto;
}

/* =========================================================
   ALL WORKSPACE PAGES
   ========================================================= */

.projects-page,
#assistantPage,
#codeStudioPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#canvasPage {

    width: 100%;
    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    /* IMPORTANT: start content from TOP */
    justify-content: flex-start !important;
    align-items: stretch !important;

    /* Do NOT vertically center page content */
    place-content: flex-start !important;
    align-content: flex-start !important;

}

/* =========================================================
   PROJECT / CODE / KNOWLEDGE / DOCUMENT PAGES
   ========================================================= */

.projects-page {

    flex: 1 1 auto;

    height: 100%;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;

    padding: 40px;

    scroll-behavior: auto;

}

/* Make page content begin at the top */
.projects-page > * {

    flex-shrink: 0;

}

/* =========================================================
   PAGE HEADERS
   ========================================================= */

.projects-page .projects-header {

    width: 100%;

    margin-top: 0 !important;
    padding-top: 0 !important;

    box-sizing: border-box;

    align-self: flex-start;

}

/* =========================================================
   PROJECT GRIDS
   ========================================================= */

.projects-page .projects-grid {

    width: 100%;

    margin-top: 30px;

    align-self: flex-start;

}

/* =========================================================
   ASSISTANT CHAT
   ========================================================= */

#assistantPage.conversation {

    flex: 1 1 auto;

    width: 100%;
    height: 100%;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

}

/* Actual chat scrolling */
#assistantPage #chatWindow {

    flex: 1 1 auto;

    width: 100%;

    min-width: 0;
    min-height: 0;

    height: auto;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;

    padding: 32px 40px;

}

/* =========================================================
   COMMAND BAR
   ========================================================= */

.command-section {

    flex: 0 0 auto;

    width: 100%;

}

/* =========================================================
   PREVENT OLD CENTERING RULES
   ========================================================= */

.projects-page,
.projects-page *,
#codeStudioPage,
#codeStudioPage *,
#projectsPage,
#projectsPage *,
#knowledgePage,
#knowledgePage *,
#documentsPage,
#documentsPage *,
#automationPage,
#automationPage *,
#canvasPage,
#canvasPage * {

    box-sizing: border-box;

}

/* =========================================================
   SCROLLBAR
   ========================================================= */

.projects-page::-webkit-scrollbar,
#chatWindow::-webkit-scrollbar {

    width: 8px;

}

.projects-page::-webkit-scrollbar-track,
#chatWindow::-webkit-scrollbar-track {

    background: transparent;

}

.projects-page::-webkit-scrollbar-thumb,
#chatWindow::-webkit-scrollbar-thumb {

    background: #3a3a3a;

    border-radius: 20px;

}

.projects-page::-webkit-scrollbar-thumb:hover,
#chatWindow::-webkit-scrollbar-thumb:hover {

    background: #c6a66b;

}

/* =========================================================
   AP SYNAPSE — FINAL PREMIUM HOME COMPOSITION
   ========================================================= */

/* ---------- SIDEBAR HISTORY ---------- */

.history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.history-list::-webkit-scrollbar {
    width: 4px;
}

.history-list::-webkit-scrollbar-thumb {
    background: rgba(198,166,107,.35);
    border-radius: 20px;
}

.history-empty {
    padding: 10px 12px;
    color: rgba(255,255,255,.35);
    font-size: 12px;
}

.history-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 34px 11px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s ease;
    color: rgba(255,255,255,.72);
}

.history-item:hover {
    background: rgba(198,166,107,.07);
    color: #fff;
}

.history-item.active {
    background: rgba(198,166,107,.11);
    border: 1px solid rgba(198,166,107,.18);
}

.history-item-content {
    min-width: 0;
}

.history-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-preview {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-time {
    margin-top: 5px;
    font-size: 10px;
    color: rgba(198,166,107,.65);
}

.history-delete {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px !important;
    height: 22px;
    padding: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.25);
    border: none;
    opacity: 0;
}

.history-item:hover .history-delete {
    opacity: 1;
}

.history-delete:hover {
    color: #fff !important;
    transform: translateY(-50%) !important;
}


/* =========================================================
   HOME SCREEN
   ========================================================= */

#assistantPage {
    position: relative;
    overflow: hidden;
}

#heroScreen {
    position: absolute !important;
    inset: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 50px 120px;
    box-sizing: border-box;

    overflow: hidden;
}


/* ---------- HERO CONTAINER ---------- */

#heroScreen .hero-container {
    width: min(900px, 90%);
    max-width: 900px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin: 0 auto;

    transform: translateY(-15px);
}


/* ---------- BADGE ---------- */

#heroScreen .hero-badge {
    display: inline-flex;
    align-items: center;

    padding: 7px 14px;

    border-radius: 999px;

    background: rgba(198,166,107,.07);
    border: 1px solid rgba(198,166,107,.25);

    color: #c6a66b;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    margin-bottom: 20px;
}


/* ---------- MAIN TITLE ---------- */

#heroScreen .hero-title {
    margin: 0;

    max-width: 850px;

    font-size: clamp(52px, 5.5vw, 82px);
    line-height: .98;
    letter-spacing: -4px;
    font-weight: 700;

    color: #f5f5f5;
}

#heroScreen .hero-title span {
    color: rgba(255,255,255,.52);
}


/* ---------- DESCRIPTION ---------- */

#heroScreen .hero-description {
    max-width: 650px;

    margin: 24px auto 0;

    font-size: 15px;
    line-height: 1.7;

    color: rgba(255,255,255,.48);
}


/* ---------- PROMPT CHIPS ---------- */

#heroScreen .hero-prompt {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;
}

#heroScreen .prompt-chip {
    padding: 8px 13px;

    border-radius: 999px;

    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);

    color: rgba(255,255,255,.58);

    font-size: 11px;

    transition: .2s ease;
}

#heroScreen .prompt-chip:hover {
    background: rgba(198,166,107,.09);
    border-color: rgba(198,166,107,.28);
    color: #d7bd87;
    transform: translateY(-2px);
}


/* ---------- REMOVE OLD CHILDISH STATS ---------- */

#heroScreen .hero-stats {
    display: none !important;
}


/* =========================================================
   COMMAND BAR
   ========================================================= */

.command-section {
    position: relative;
    z-index: 50;

    padding: 0 42px 28px;

    background: transparent;
}

.command-bar {
    width: min(1050px, 100%);
    margin: 0 auto;

    min-height: 64px;

    box-sizing: border-box;

    border-radius: 22px;

    background: rgba(20,21,24,.88);

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 18px 50px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}


/* ---------- COMMAND INPUT ---------- */

#userInput {
    color: #f5f5f5;
}

#userInput::placeholder {
    color: rgba(255,255,255,.36);
}


/* ---------- SEND BUTTON ---------- */

#sendBtn {
    background: #c6a66b !important;
    color: #111 !important;

    border: none !important;

    box-shadow:
        0 8px 25px rgba(198,166,107,.18);
}

#sendBtn:hover {
    background: #d6b979 !important;
}


/* =========================================================
   TOPBAR BALANCE
   ========================================================= */

.topbar {
    padding-left: 36px;
    padding-right: 36px;
}

.workspace-title {
    flex-shrink: 0;
}

.workspace-title h1 {
    letter-spacing: -1px;
}

.topbar-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.global-search {
    width: min(650px, 100%);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    #heroScreen {
        padding:
            30px
            20px
            110px;
    }

    #heroScreen .hero-title {
        font-size: clamp(42px, 11vw, 60px);
        letter-spacing: -2.5px;
    }

    #heroScreen .hero-description {
        font-size: 14px;
    }

    .command-section {
        padding: 0 14px 14px;
    }

    .command-bar {
        border-radius: 18px;
    }

    .topbar {
        padding-left: 18px;
        padding-right: 18px;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL STABLE APP LAYOUT
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;

    overflow: hidden;
}

.app {
    width: 100%;
    height: 100vh;

    min-height: 0;

    display: flex;

    overflow: hidden;
}

.sidebar {
    flex: 0 0 auto;

    height: 100vh;

    min-height: 0;

    overflow: hidden;
}

.workspace {
    flex: 1 1 auto;

    width: 0;
    height: 100vh;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.topbar {
    flex: 0 0 auto;
}

.workspace-content {
    position: relative;

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;
}

/* -----------------------------------------
   HOME
----------------------------------------- */

#heroScreen {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}

/* -----------------------------------------
   CHAT
----------------------------------------- */

#chatWindow {
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scroll-behavior: auto;

    padding:
        32px
        clamp(20px, 5vw, 80px)
        130px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

/* -----------------------------------------
   COMMAND BAR
----------------------------------------- */

.command-section {
    flex: 0 0 auto;

    position: relative;

    z-index: 50;

    width: 100%;

    box-sizing: border-box;

    padding:
        12px
        clamp(14px, 4vw, 50px)
        18px;
}

/* -----------------------------------------
   HISTORY
----------------------------------------- */

.recent-group {
    min-height: 0;
}

.history-list {
    display: flex;

    flex-direction: column;

    gap: 5px;

    max-height: min(300px, 34vh);

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 5px;
}

.history-list::-webkit-scrollbar {
    width: 4px;
}

.history-list::-webkit-scrollbar-track {
    background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
    background: rgba(198,166,107,.28);

    border-radius: 20px;
}

.history-item {
    flex: 0 0 auto;

    width: 100%;

    box-sizing: border-box;
}

/* -----------------------------------------
   NEVER LET WORKSPACE PAGES BREAK VIEWPORT
----------------------------------------- */

.projects-page {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 32px clamp(20px, 5vw, 70px) 120px;
}

/* =========================================================
   AP SYNAPSE — FINAL SCROLL SYSTEM
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    min-height: 100vh;
}

/* Main application shell */
.app,
.app-container,
.workspace,
.main-content {
    min-height: 0;
}

/* Chat area */
#chatWindow {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: auto;
    overscroll-behavior: contain;
}

/* History/sidebar */
.sidebar,
.sidebar-content,
.history-list {
    min-height: 0;
}

.history-list {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Home screen should NOT create another page-level scrollbar */
#heroScreen {
    min-height: 0;
    overflow: hidden;
}

/* =========================================================
   AP SYNAPSE — FINAL SCROLL + HISTORY STABILITY FIX
   DO NOT ADD MORE LAYOUT RULES AFTER THIS BLOCK
   ========================================================= */

/* ---------- GLOBAL APP ---------- */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

.app {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    display: flex;
    overflow: hidden !important;
}


/* ---------- SIDEBAR ---------- */

.sidebar {
    flex: 0 0 auto;
    height: 100vh;
    min-height: 0;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}

/* If sidebar has a content wrapper */
.sidebar-content {
    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* ---------- HISTORY ---------- */

.recent-group {
    min-height: 0;
    flex: 0 0 auto;
}

.history-list {
    display: flex !important;
    flex-direction: column !important;

    width: 100%;

    min-height: 0;
    max-height: 34vh;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;

    padding-right: 5px;
}

.history-list::-webkit-scrollbar {
    width: 5px;
}

.history-list::-webkit-scrollbar-track {
    background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
    background: rgba(198,166,107,.35);
    border-radius: 20px;
}

.history-item {
    flex: 0 0 auto !important;
    width: 100%;
    box-sizing: border-box;
}


/* ---------- MAIN WORKSPACE ---------- */

.workspace {
    flex: 1 1 0 !important;

    width: 0 !important;
    height: 100vh;

    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}

.topbar {
    flex: 0 0 auto !important;
}

.workspace-content {
    flex: 1 1 0 !important;

    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* =========================================================
   ASSISTANT
   ========================================================= */

#assistantPage {
    flex: 1 1 0 !important;

    width: 100%;
    height: auto !important;

    min-width: 0;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    position: relative;
}


/* =========================================================
   CHAT — ONLY CHAT SCROLLS
   ========================================================= */

#chatWindow {
    flex: 1 1 0 !important;

    width: 100%;

    height: auto !important;

    min-width: 0;
    min-height: 0 !important;

    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding:
        32px
        clamp(20px, 5vw, 80px)
        150px;

    scroll-behavior: auto !important;
    overscroll-behavior: contain;
}

#chatWindow .message {
    flex: 0 0 auto !important;

    width: 100%;
    max-width: 100%;

    min-height: fit-content;

    box-sizing: border-box;
}

#chatWindow .message-body {
    min-width: 0;
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: break-word;
}

#chatWindow pre {
    max-width: 100%;
    overflow-x: auto;
}

#chatWindow img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   COMMAND BAR
   ========================================================= */

.command-section {
    flex: 0 0 auto !important;

    position: relative !important;

    width: 100%;

    z-index: 100;

    box-sizing: border-box;
}


/* =========================================================
   HERO
   ========================================================= */

/*
   IMPORTANT:
   Hero is NOT allowed to become another scrolling page.
*/

#heroScreen {
    position: relative !important;

    inset: auto !important;

    flex: 1 1 0 !important;

    width: 100%;
    height: auto !important;

    min-width: 0;
    min-height: 0 !important;

    box-sizing: border-box;

    overflow: hidden !important;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   OTHER PAGES
   ========================================================= */

#codeStudioPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#canvasPage,
.projects-page {

    flex: 1 1 0 !important;

    width: 100%;
    height: auto !important;

    min-width: 0;
    min-height: 0 !important;

    box-sizing: border-box;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 40px clamp(20px, 5vw, 70px) 120px;

    align-content: flex-start !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

    #chatWindow {
        padding:
            24px
            18px
            140px;
    }

    #heroScreen {
        padding:
            25px
            18px
            30px;
    }

    .history-list {
        max-height: 30vh;
    }

}

/* =========================================================
   AP SYNAPSE — HISTORY VISIBILITY FINAL
   ========================================================= */

.sidebar .recent-group {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar .history-list {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    flex-direction: column !important;

    width: 100% !important;
    min-height: 20px !important;

    max-height: 34vh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.sidebar .history-item,
.sidebar .history-empty {
    display: block !important;
    visibility: visible !important;
}

.sidebar .history-item {
    flex-shrink: 0 !important;
}

/* =========================================================
   AP SYNAPSE — FINAL INTELLIGENCE DASHBOARD
   ========================================================= */

#heroScreen .hero-container {
    width: min(1050px, 94%);
    max-width: 1050px;
    transform: none;
}

/* ---------- CONSOLE ---------- */

#heroScreen .intelligence-console {
    width: 100%;
    margin-top: 42px !important;
    padding: 25px;
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    border: 1px solid rgba(198,166,107,.18);

    box-shadow:
        0 25px 80px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.console-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.console-heading-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #c6a66b;

    background: rgba(198,166,107,.08);
    border: 1px solid rgba(198,166,107,.18);
}

.console-heading h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
}

.console-heading p {
    margin: 4px 0 0;
    font-size: 11px;
    color: rgba(255,255,255,.38);
}


/* ---------- ACTION GRID ---------- */

#heroScreen .console-actions {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 10px;
}

#heroScreen .console-action {
    position: relative;

    min-height: 88px;

    padding: 16px;

    border-radius: 16px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    border: 1px solid rgba(255,255,255,.075);

    color: white;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

#heroScreen .console-action strong {
    margin-bottom: 10px;

    color: #c6a66b;

    font-size: 20px;
    font-weight: 500;
}

#heroScreen .console-action span {
    font-size: 13px;
    font-weight: 600;
}

#heroScreen .console-action small {
    margin-top: 4px;

    color: rgba(255,255,255,.35);

    font-size: 10px;
}

#heroScreen .console-action:hover {
    transform: translateY(-3px);

    border-color:
        rgba(198,166,107,.35);

    background:
        linear-gradient(
            145deg,
            rgba(198,166,107,.08),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 15px 35px rgba(0,0,0,.22);
}

#heroScreen .console-action:active {
    transform: scale(.985);
}


/* ---------- RECENT INTELLIGENCE ---------- */

.recent-intelligence {
    width: 100%;
    margin-top: 22px;
    padding: 22px;

    border-radius: 22px;

    background: rgba(255,255,255,.018);

    border: 1px solid rgba(255,255,255,.065);

    box-sizing: border-box;
}

.recent-intelligence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 16px;
}

.recent-kicker {
    display: block;

    color: #c6a66b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.recent-intelligence-header h2 {
    margin: 5px 0 0;

    font-size: 15px;
    font-weight: 600;

    color: rgba(255,255,255,.85);
}

#viewAllHistoryBtn {
    border: none;
    background: transparent;

    color: rgba(255,255,255,.45);

    font-size: 11px;

    cursor: pointer;
}

#viewAllHistoryBtn:hover {
    color: #c6a66b;
}


/* ---------- RECENT CARDS ---------- */

.recent-intelligence-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.recent-card {
    min-width: 0;

    padding: 15px;

    border-radius: 15px;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.06);

    cursor: pointer;

    transition: .25s ease;
}

.recent-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(198,166,107,.28);

    background:
        rgba(198,166,107,.045);
}

.recent-card-title {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 12px;
    font-weight: 600;

    color: rgba(255,255,255,.8);
}

.recent-card-meta {
    margin-top: 7px;

    font-size: 10px;

    color: rgba(255,255,255,.32);
}

.recent-card-action {
    margin-top: 13px;

    color: #c6a66b;

    font-size: 10px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

    #heroScreen .console-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .recent-intelligence-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 550px) {

    #heroScreen .console-actions {
        grid-template-columns: 1fr !important;
    }

    .recent-intelligence-grid {
        grid-template-columns: 1fr;
    }

    #heroScreen .intelligence-console,
    .recent-intelligence {
        padding: 18px;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL PERFECT SCREEN FIT
   HOME / ASSISTANT
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.workspace {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

/* Main assistant area */
#assistantPage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* =========================================================
   HERO — FIT EXACTLY INSIDE AVAILABLE SPACE
   ========================================================= */

#heroScreen {
    position: relative !important;
    inset: auto !important;

    width: 100%;
    flex: 1 1 auto;

    min-height: 0;
    height: auto;

    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    padding: 20px 30px 20px !important;
}

/* Hero content */
#heroScreen .hero-container {
    width: min(850px, 90%);
    max-width: 850px;

    margin: 0 auto !important;

    flex: 0 1 auto;

    transform: none !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* Badge */
#heroScreen .hero-badge {
    margin-bottom: 12px !important;

    padding: 6px 12px;

    font-size: 9px;
    letter-spacing: 2.5px;
}

/* Main title */
#heroScreen .hero-title {
    margin: 0 !important;

    width: 100%;
    max-width: 820px;

    font-size: clamp(38px, 4.2vw, 62px) !important;

    line-height: .98 !important;
    letter-spacing: -3px !important;

    font-weight: 700;
}

/* Description */
#heroScreen .hero-description {
    max-width: 600px;

    margin: 16px auto 0 !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Prompt chips */
#heroScreen .hero-prompt {
    margin-top: 16px !important;

    gap: 6px;

    max-width: 650px;
}

#heroScreen .prompt-chip {
    padding: 6px 10px;

    font-size: 10px;
}

/* =========================================================
   COMMAND BAR — FIT AT BOTTOM
   ========================================================= */

.command-section {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    flex: 0 0 auto;

    width: 100%;

    box-sizing: border-box;

    padding:
        8px
        clamp(18px, 4vw, 50px)
        14px !important;

    z-index: 100;
}

.command-bar {
    width: min(1000px, 100%);

    min-height: 58px !important;

    margin: 0 auto;

    border-radius: 18px;
}

/* =========================================================
   DESKTOP HEIGHT CONTROL
   ========================================================= */

@media (min-width: 1000px) {

    #heroScreen .hero-container {
        max-width: 800px;
    }

    #heroScreen .hero-title {
        font-size: clamp(42px, 4vw, 60px) !important;
    }

}

/* =========================================================
   SHORT LAPTOP SCREENS
   ========================================================= */

@media (max-height: 800px) {

    #heroScreen {
        padding:
            12px
            24px
            12px !important;
    }

    #heroScreen .hero-badge {
        margin-bottom: 8px !important;
    }

    #heroScreen .hero-title {
        font-size: clamp(34px, 4vw, 52px) !important;
    }

    #heroScreen .hero-description {
        margin-top: 10px !important;
        font-size: 12px !important;
    }

    #heroScreen .hero-prompt {
        margin-top: 10px !important;
    }

    #heroScreen .prompt-chip {
        padding: 5px 9px;
        font-size: 9px;
    }

    .command-section {
        padding-bottom: 10px !important;
    }

    .command-bar {
        min-height: 54px !important;
    }

}

/* =========================================================
   VERY SHORT SCREENS
   ========================================================= */

@media (max-height: 650px) {

    #heroScreen .hero-title {
        font-size: 38px !important;
    }

    #heroScreen .hero-description {
        display: none;
    }

    #heroScreen .hero-prompt {
        display: none;
    }

    #heroScreen .hero-badge {
        margin-bottom: 7px !important;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    #heroScreen {
        padding:
            20px
            16px
            15px !important;
    }

    #heroScreen .hero-container {
        width: 100%;
    }

    #heroScreen .hero-title {
        font-size:
            clamp(34px, 10vw, 52px) !important;

        letter-spacing: -2px !important;
    }

    #heroScreen .hero-description {
        font-size: 12px !important;
    }

    .command-section {
        padding:
            7px
            12px
            10px !important;
    }

    .command-bar {
        min-height: 55px !important;
        border-radius: 16px;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT FIT
   HOME + SIDEBAR HISTORY
   FINAL POLISH OVERRIDE
   ========================================================= */

/* ---------------------------------------------------------
   1. APP SHELL
--------------------------------------------------------- */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

.app {
    width: 100vw;
    height: 100vh;
    min-height: 0;

    display: flex;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   2. SIDEBAR — CLEAN VERTICAL SYSTEM
--------------------------------------------------------- */

.sidebar {
    width: 272px;
    height: 100vh;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden !important;

    box-sizing: border-box;
}


/* Sidebar main content */

.sidebar-content {
    min-height: 0;

    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    overflow: hidden;
}


/* ---------------------------------------------------------
   3. HISTORY — NEVER OVERLAP WORKSPACE
--------------------------------------------------------- */

.recent-group {
    flex: 0 0 auto;

    width: 100%;
    min-height: 0;

    box-sizing: border-box;
}


/* History container */

.history-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 5px;

    max-height: 235px;
    min-height: 0;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box;

    padding-right: 5px;
}


/* Individual history items */

.history-item {
    flex: 0 0 auto;

    width: 100%;
    min-height: 54px;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   4. WORKSPACE NAVIGATION
--------------------------------------------------------- */

/* Keep Workspace below history */

.sidebar .workspace-nav,
.sidebar nav {
    position: relative;

    flex: 0 0 auto;

    width: 100%;

    margin-top: 18px;

    box-sizing: border-box;

    z-index: 5;
}


/* Navigation links */

.sidebar nav a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 40px;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   5. SIDEBAR BOTTOM AREA
--------------------------------------------------------- */

.sidebar > *:last-child {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   6. MAIN WORKSPACE
--------------------------------------------------------- */

.workspace {
    flex: 1 1 0;

    width: auto;
    height: 100vh;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   7. TOPBAR
--------------------------------------------------------- */

.topbar {
    flex: 0 0 auto;

    width: 100%;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   8. WORKSPACE CONTENT
--------------------------------------------------------- */

.workspace-content {
    position: relative;

    flex: 1 1 0;

    width: 100%;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden !important;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   9. ASSISTANT PAGE
--------------------------------------------------------- */

#assistantPage {
    position: relative;

    flex: 1 1 0;

    width: 100%;
    height: auto;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden !important;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   10. HOME SCREEN
--------------------------------------------------------- */

/*
   IMPORTANT:
   Remove the old absolute positioning.
   Hero now occupies ONLY the available area
   underneath the topbar.
*/

#heroScreen {
    position: relative !important;

    inset: auto !important;

    flex: 1 1 0;

    width: 100%;
    height: auto;

    min-width: 0;
    min-height: 0;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    box-sizing: border-box;

    overflow: hidden !important;

    padding:
        28px
        clamp(24px, 5vw, 70px)
        115px !important;
}


/* ---------------------------------------------------------
   11. HERO CONTENT
--------------------------------------------------------- */

#heroScreen .hero-container {
    width: min(900px, 92%);

    flex: 0 1 auto;

    margin: 0 auto !important;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    transform: none !important;
}


/* Badge */

#heroScreen .hero-badge {
    margin-bottom: 14px;
}


/* Main title */

#heroScreen .hero-title {
    font-size: clamp(44px, 5vw, 72px);

    line-height: .98;

    letter-spacing: -3px;

    margin: 0;
}


/* Description */

#heroScreen .hero-description {
    margin-top: 18px;

    font-size: 14px;

    line-height: 1.55;
}


/* Chips */

#heroScreen .hero-prompt {
    margin-top: 18px;
}


/* ---------------------------------------------------------
   12. RECENT INTELLIGENCE PANEL
--------------------------------------------------------- */

#heroScreen .intelligence-console {
    width: min(900px, 92%);

    flex: 0 1 auto;

    margin:
        26px
        auto
        0 !important;

    padding:
        22px
        24px;

    box-sizing: border-box;

    max-height: 210px;

    overflow: hidden;
}


/* Console heading */

#heroScreen .intelligence-console h2 {
    font-size: 20px;
}


/* Console description */

#heroScreen .intelligence-console > p {
    margin:
        6px
        0
        16px;

    font-size: 12px;
}


/* Console cards */

#heroScreen .console-actions {
    gap: 8px;
}


/* Console buttons */

#heroScreen .console-action {
    padding: 13px;

    min-height: 62px;
}


/* ---------------------------------------------------------
   13. COMMAND BAR
--------------------------------------------------------- */

.command-section {
    position: absolute !important;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;

    flex: 0 0 auto;

    padding:
        10px
        clamp(20px, 5vw, 60px)
        18px;

    box-sizing: border-box;

    z-index: 100;
}


/* Command bar */

.command-bar {
    width: min(1050px, 100%);

    min-height: 60px;

    margin: 0 auto;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   14. RESPONSIVE FIT
--------------------------------------------------------- */

@media (max-height: 800px) {

    #heroScreen {
        padding-top: 15px !important;
        padding-bottom: 100px !important;
    }

    #heroScreen .hero-badge {
        margin-bottom: 9px;
    }

    #heroScreen .hero-title {
        font-size: clamp(38px, 4.5vw, 58px);
    }

    #heroScreen .hero-description {
        margin-top: 12px;
    }

    #heroScreen .hero-prompt {
        margin-top: 12px;
    }

    #heroScreen .intelligence-console {
        margin-top: 18px !important;

        padding: 17px 20px;

        max-height: 170px;
    }

    #heroScreen .intelligence-console > p {
        margin-bottom: 10px;
    }

    #heroScreen .console-action {
        padding: 10px;
        min-height: 52px;
    }
}


/* ---------------------------------------------------------
   15. VERY SHORT LAPTOP SCREENS
--------------------------------------------------------- */

@media (max-height: 700px) {

    #heroScreen {
        justify-content: flex-start !important;

        padding-top: 18px !important;
        padding-bottom: 90px !important;
    }

    #heroScreen .hero-title {
        font-size: 42px;
    }

    #heroScreen .hero-description {
        font-size: 12px;
        margin-top: 9px;
    }

    #heroScreen .hero-prompt {
        display: none;
    }

    #heroScreen .intelligence-console {
        margin-top: 14px !important;

        padding: 14px 18px;

        max-height: 145px;
    }
}


/* ---------------------------------------------------------
   16. SIDEBAR HISTORY SCROLLBAR
--------------------------------------------------------- */

.history-list::-webkit-scrollbar {
    width: 4px;
}

.history-list::-webkit-scrollbar-track {
    background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
    background: rgba(198,166,107,.30);

    border-radius: 20px;
}

.history-list::-webkit-scrollbar-thumb:hover {
    background: #c6a66b;
}

/* =========================================================
   AP SYNAPSE — FINAL CLEAN VIEWPORT SYSTEM
   DO NOT ADD MORE LAYOUT OVERRIDES AFTER THIS
   ========================================================= */

/* ---------- GLOBAL ---------- */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
}

* {
    box-sizing: border-box;
}


/* =========================================================
   APP
   ========================================================= */

.app {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

    overflow: hidden !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    position: relative !important;

    flex: 0 0 272px !important;

    width: 272px !important;
    height: 100vh !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   HISTORY
   ========================================================= */

.history-list {
    position: relative !important;

    width: 100% !important;

    max-height: 220px !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 4px !important;

    padding-right: 5px !important;

    box-sizing: border-box !important;
}

.history-item {
    position: relative !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    min-height: 48px !important;

    box-sizing: border-box !important;
}

.history-title {
    max-width: calc(100% - 20px) !important;
}

.history-preview {
    max-width: calc(100% - 20px) !important;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.workspace {
    position: relative !important;

    flex: 1 1 auto !important;

    width: auto !important;
    height: 100vh !important;

    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    position: relative !important;

    flex: 0 0 82px !important;

    width: 100% !important;
    height: 82px !important;

    z-index: 20 !important;
}


/* =========================================================
   CONTENT AREA
   ========================================================= */

.workspace-content {
    position: relative !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}


/* =========================================================
   ASSISTANT
   ========================================================= */

#assistantPage {
    position: relative !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}


/* =========================================================
   HERO — NORMAL FLOW
   ========================================================= */

#heroScreen {
    position: relative !important;

    inset: auto !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    overflow: hidden !important;

    padding:
        20px 35px 100px !important;

    transform: none !important;
}


/* =========================================================
   HERO CONTAINER
   ========================================================= */

#heroScreen .hero-container {
    width: min(760px, 90%) !important;

    max-width: 760px !important;

    margin: 0 auto !important;

    transform: none !important;

    flex: 0 0 auto !important;
}


/* =========================================================
   HERO BADGE
   ========================================================= */

#heroScreen .hero-badge {
    font-size: 9px !important;

    padding: 5px 11px !important;

    margin-bottom: 12px !important;

    letter-spacing: 2.5px !important;
}


/* =========================================================
   HERO TITLE — MUCH SMALLER
   ========================================================= */

#heroScreen .hero-title {
    width: 100% !important;

    max-width: 760px !important;

    margin: 0 !important;

    font-size: clamp(34px, 3.4vw, 52px) !important;

    line-height: 1.02 !important;

    letter-spacing: -2.5px !important;

    font-weight: 700 !important;
}


/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

#heroScreen .hero-description {
    max-width: 560px !important;

    margin:
        14px auto 0 !important;

    font-size: 12px !important;

    line-height: 1.5 !important;
}


/* =========================================================
   PROMPTS
   ========================================================= */

#heroScreen .hero-prompt {
    margin-top: 14px !important;

    gap: 6px !important;
}

#heroScreen .prompt-chip {
    padding: 6px 10px !important;

    font-size: 10px !important;
}


/* =========================================================
   RECENT INTELLIGENCE
   ========================================================= */

#heroScreen .intelligence-console {
    width: min(760px, 90%) !important;

    max-width: 760px !important;

    margin:
        22px auto 0 !important;

    padding:
        17px 18px !important;

    max-height: 150px !important;

    overflow: hidden !important;

    border-radius: 18px !important;
}


/* Console heading */

#heroScreen .intelligence-console h2 {
    margin: 0 !important;

    font-size: 17px !important;
}


/* Console text */

#heroScreen .intelligence-console > p {
    margin:
        4px 0 12px !important;

    font-size: 10px !important;
}


/* Console buttons */

#heroScreen .console-actions {
    gap: 7px !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
}

#heroScreen .console-action {
    min-height: 45px !important;

    padding: 9px !important;

    border-radius: 11px !important;
}

#heroScreen .console-action span {
    font-size: 11px !important;
}

#heroScreen .console-action small {
    font-size: 8px !important;

    margin-top: 2px !important;
}


/* =========================================================
   COMMAND BAR
   CRITICAL FIX:
   FIXED TO BOTTOM OF WORKSPACE, NOT TOP
   ========================================================= */

.command-section {
    position: fixed !important;

    left: 272px !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: auto !important;

    padding:
        10px 30px 15px !important;

    z-index: 999 !important;

    pointer-events: none !important;
}

.command-bar {
    width: min(900px, 100%) !important;

    min-height: 58px !important;

    margin: 0 auto !important;

    pointer-events: auto !important;
}


/* =========================================================
   SHORT SCREEN
   ========================================================= */

@media (max-height: 800px) {

    #heroScreen {
        padding:
            10px 25px 90px !important;
    }

    #heroScreen .hero-title {
        font-size:
            clamp(31px, 3vw, 45px) !important;
    }

    #heroScreen .hero-description {
        margin-top: 10px !important;
    }

    #heroScreen .hero-prompt {
        margin-top: 9px !important;
    }

    #heroScreen .intelligence-console {
        margin-top: 15px !important;

        padding: 14px 16px !important;

        max-height: 125px !important;
    }

    #heroScreen .intelligence-console > p {
        display: none !important;
    }
}


/* =========================================================
   VERY SHORT SCREEN
   ========================================================= */

@media (max-height: 680px) {

    #heroScreen {
        justify-content: flex-start !important;

        padding-top: 15px !important;
    }

    #heroScreen .hero-title {
        font-size: 36px !important;
    }

    #heroScreen .hero-description {
        display: none !important;
    }

    #heroScreen .hero-prompt {
        display: none !important;
    }

    #heroScreen .intelligence-console {
        margin-top: 12px !important;

        max-height: 115px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .sidebar {
        flex-basis: 240px !important;
        width: 240px !important;
    }

    .command-section {
        left: 240px !important;

        padding:
            8px 12px 12px !important;
    }

    #heroScreen .console-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================
   AP SYNAPSE — SETTINGS
========================================= */

.settings-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    width: min(1100px, 100%);

    margin-top: 32px;

}


.settings-card {

    display: flex;

    gap: 18px;

    padding: 24px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    backdrop-filter: blur(16px);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;

}


.settings-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(198,166,107,.35);

}


.settings-card-icon {

    width: 46px;

    height: 46px;

    min-width: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: rgba(198,166,107,.10);

    border:
        1px solid rgba(198,166,107,.20);

    font-weight: 700;

    color: #c6a66b;

}


.settings-card-content {

    flex: 1;

}


.settings-card h2 {

    margin: 0 0 7px;

    font-size: 17px;

}


.settings-card p {

    margin: 0 0 18px;

    color: rgba(255,255,255,.55);

    font-size: 13px;

    line-height: 1.5;

}


.settings-control {

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.05);

    color: white;

    border-radius: 11px;

    padding: 10px 14px;

    cursor: pointer;

    transition: .2s ease;

}


.settings-control:hover {

    background: rgba(198,166,107,.12);

    border-color: rgba(198,166,107,.35);

}


.settings-select {

    width: 100%;

    max-width: 220px;

    padding: 11px 13px;

    border-radius: 11px;

    background: #171717;

    color: white;

    border: 1px solid rgba(255,255,255,.10);

    outline: none;

}


.settings-system {

    width: min(1100px, 100%);

    margin-top: 22px;

    padding: 22px 24px;

    display: flex;

    align-items: center;

    gap: 30px;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.025);

}


.settings-system span {

    font-size: 11px;

    letter-spacing: 1.5px;

    color: #c6a66b;

}


.settings-system h2 {

    margin: 5px 0 0;

    font-size: 16px;

}


.system-status {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

}


.status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #5fd68a;

    box-shadow: 0 0 10px rgba(95,214,138,.5);

}


.system-version {

    font-size: 12px;

    color: rgba(255,255,255,.45);

}


@media (max-width: 800px) {

    .settings-grid {

        grid-template-columns: 1fr;

    }

    .settings-system {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }

    .system-status {

        margin-left: 0;

    }

}

/* =========================================================
   AP SYNAPSE — EMERGENCY HERO CONSOLE RESTORE
   ========================================================= */

#heroScreen .console-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

#heroScreen .console-action {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 90px !important;

    padding: 16px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    border-radius: 15px !important;

    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;

    color: white !important;

    cursor: pointer !important;

    text-align: left !important;
}

#heroScreen .console-action strong {
    display: block !important;
    font-size: 20px !important;
    margin-bottom: 8px !important;
}

#heroScreen .console-action span {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

#heroScreen .console-action small {
    display: block !important;
    margin-top: 5px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.42) !important;
}

#heroScreen .console-action:hover {
    transform: translateY(-2px) !important;
    background: rgba(198,166,107,0.08) !important;
    border-color: rgba(198,166,107,0.32) !important;
}

/* Prevent generic button rules from destroying console layout */
#heroScreen button {
    box-sizing: border-box;
}

/* Mobile */
@media (max-width: 700px) {

    #heroScreen .console-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

@media (max-width: 430px) {

    #heroScreen .console-actions {
        grid-template-columns: 1fr !important;
    }

}

/* ==========================================
   AP SYNAPSE — EMERGENCY LAYOUT RESTORE
   ========================================== */

.background {
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
}

#intelligence-field {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.app {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100vh !important;
}

.sidebar {
    position: relative !important;
    z-index: 20 !important;
}

.workspace {
    position: relative !important;
    z-index: 10 !important;
    min-height: 100vh !important;
}

.topbar {
    position: relative !important;
    z-index: 30 !important;
}

#assistantPage {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#heroScreen {
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    width: 100% !important;
    min-height: 650px !important;
    height: auto !important;

    align-items: flex-start !important;
    justify-content: center !important;

    padding: 80px 40px 180px !important;
    box-sizing: border-box !important;

    overflow: visible !important;
}

#heroScreen .hero-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: min(1000px, 90%) !important;
    margin: 0 auto !important;

    position: relative !important;
    z-index: 20 !important;
}

#heroScreen .hero-badge,
#heroScreen .hero-title,
#heroScreen .hero-description,
#heroScreen .intelligence-console,
#heroScreen .recent-intelligence {
    visibility: visible !important;
    opacity: 1 !important;
}

#heroScreen .hero-badge {
    display: inline-flex !important;
}

#heroScreen .hero-title {
    display: block !important;
}

#heroScreen .hero-description {
    display: block !important;
}

#heroScreen .intelligence-console {
    display: block !important;
}

#heroScreen .console-actions {
    display: grid !important;
}

#heroScreen .recent-intelligence {
    display: block !important;
}

#chatWindow {
    position: relative !important;
    z-index: 30 !important;
}

/* Keep floating command bar above everything */
.command-section {
    position: fixed !important;
    z-index: 1000 !important;
}

/* Prevent accidental global hiding */
.hero-screen,
.hero-container,
.hero-title,
.hero-description,
.intelligence-console,
.recent-intelligence {
    visibility: visible;
}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT STABILIZER
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden !important;
}

.app {
    width: 100%;
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    overflow: hidden !important;
}

.workspace {
    position: relative !important;
    width: calc(100% - 280px) !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.workspace-content {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.conversation {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* HERO */
#heroScreen {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 30px 120px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 5 !important;
}

#heroScreen .hero-container {
    position: relative !important;

    width: min(900px, 100%) !important;
    max-width: 900px !important;

    margin: 35px auto 0 !important;
    padding: 0 !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    transform: none !important;
}

/* CHAT */
#chatWindow {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 30px 30px 130px !important;
    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 10 !important;
}

/* COMMAND BAR */
.command-section {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 100 !important;

    margin: 0 !important;
}

/* PREVENT OLD HERO POSITIONING */
.hero-screen,
.hero-container {
    transform-origin: center top !important;
}

/* =========================================================
   AP SYNAPSE — FINAL EMERGENCY LAYOUT FIX
   Restores hero/content to the visible workspace
   ========================================================= */

.workspace {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.workspace-content {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

.conversation {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* HERO — force it back into the actual viewport */
#heroScreen {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 28px 40px 120px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    transform: none !important;
    top: 0 !important;
    left: 0 !important;
}

/* HERO CONTENT */
#heroScreen .hero-container {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    transform: none !important;

    margin: 0 auto !important;

    width: min(100%, 1050px) !important;
    max-width: 1050px !important;

    height: auto !important;
    min-height: 0 !important;

    box-sizing: border-box !important;
}

/* Keep everything visually compact */
#heroScreen .hero-title {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

#heroScreen .hero-description {
    margin-bottom: 24px !important;
}

#heroScreen .quick-actions {
    width: 100% !important;
    margin-top: 0 !important;
}

#heroScreen .recent-intelligence {
    width: 100% !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
}

/* Chat stays inside workspace */
#chatWindow {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Don't allow the hidden hero to interfere with chat */
body.chat-active #heroScreen {
    pointer-events: none !important;
}

/* COMMAND BAR stays above content */
.command-section {
    position: relative !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT POSITION RESET
   ========================================================= */

.workspace,
.workspace-content,
.conversation,
#assistantPage {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    transform: none !important;
}

.workspace {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.workspace-content {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#assistantPage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* HERO */
#heroScreen {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 30px 40px 110px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    transform: none !important;
}

#heroScreen .hero-container {
    position: relative !important;

    width: min(100%, 1050px) !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    top: auto !important;
    left: auto !important;

    transform: none !important;
}

/* CHAT */
#chatWindow {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* COMMAND BAR */
.command-section {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 999 !important;
}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT POSITION FIX
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app {
    width: 100%;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

.workspace {
    position: relative !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.workspace-content {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: calc(100vh - 80px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.conversation {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}

#heroScreen {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#heroScreen .hero-container {
    position: relative !important;
    top: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT ALIGNMENT FIX
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}

.workspace {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;

    height: 100vh !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
}

.topbar {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
}

.workspace-content {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;
    transform: none !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;

    margin: 0 !important;
}

.conversation {
    position: relative !important;

    top: 0 !important;
    left: 0 !important;
    transform: none !important;

    min-height: 0 !important;
}

/* =====================================================
   AP SYNAPSE — FINAL VIEWPORT EMERGENCY FIX
   ===================================================== */

html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.app {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

.workspace {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    flex: 1 1 auto !important;
    transform: none !important;
    overflow: hidden !important;
}

.topbar {
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
}

.workspace-content {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: calc(100vh - 82px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 82px) !important;
    overflow: hidden !important;
}

.conversation {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

#heroScreen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

#heroScreen .hero-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT POSITION FIX
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    overflow: hidden !important;
}

.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
}

.workspace {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 290px !important;
    width: calc(100% - 290px) !important;
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    overflow: hidden !important;
}

.topbar {
    position: relative !important;
    top: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.workspace-content {
    position: relative !important;
    top: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.conversation {
    position: relative !important;
    top: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#heroScreen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#heroScreen .hero-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
}

#chatWindow {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT LOCK
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.app {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    overflow: hidden !important;
}

.workspace {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.workspace-content {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.conversation {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

#heroScreen {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}
/* =========================================================
   FINAL UI FIX — FULL SCREEN + LEFT ALIGNMENT + CLICKABLE
   Paste at the VERY BOTTOM of main.css
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ---------- APP / MAIN WRAPPER ---------- */

#root,
#__next,
.app,
.app-container,
.main-container,
.page-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ---------- SIDEBAR / LEFT PANEL ---------- */

aside,
.sidebar,
.side-bar,
nav.sidebar {
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  min-width: 0;
}

/* ---------- MAIN CONTENT ---------- */

main,
.main,
.main-content,
.content,
.content-area {
  min-width: 0;
  max-width: 100%;
}

/* Prevent content from forcing the entire page wider */
img,
video,
canvas,
iframe {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- FLEX ITEMS ---------- */

.flex,
.row,
.layout,
.workspace,
.dashboard,
.app-layout {
  min-width: 0;
}

.flex > *,
.row > *,
.layout > *,
.workspace > *,
.dashboard > *,
.app-layout > * {
  min-width: 0;
}

/* ---------- BUTTONS / LINKS MUST BE CLICKABLE ---------- */

button,
a,
input,
textarea,
select,
[role="button"] {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

button,
[role="button"] {
  cursor: pointer;
}

/* Don't allow decorative layers to block clicks */
body::before,
body::after,
.app::before,
.app::after,
.main-container::before,
.main-container::after,
.main-content::before,
.main-content::after,
.content::before,
.content::after {
  pointer-events: none;
}

/* ---------- COMMON OVERLAY / BACKGROUND FIX ---------- */

.background,
.bg,
.background-layer,
.gradient-layer,
.glow,
.glow-layer,
.noise,
.noise-layer,
.grid-background,
.animated-background,
.intelligence-field {
  pointer-events: none;
}

/* ---------- CARDS / PANELS ---------- */

.card,
.panel,
.section,
.widget,
.modal,
.dropdown,
.menu,
.popover {
  max-width: 100%;
  min-width: 0;
}

/* ---------- TEXT ---------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ---------- MOBILE / SMALL SCREEN ---------- */

@media (max-width: 900px) {

  body {
    overflow-x: hidden;
  }

  .app-layout,
  .layout,
  .workspace,
  .dashboard {
    width: 100%;
    max-width: 100%;
  }

  aside,
  .sidebar {
    max-width: 100%;
  }

  main,
  .main-content,
  .content-area {
    width: 100%;
    max-width: 100%;
  }
}

/* ---------- LARGE SCREEN ---------- */

@media (min-width: 1400px) {

  .main-content,
  .content-area,
  main {
    min-width: 0;
  }
}

/* ---------- SAFETY: NEVER LET A CHILD BREAK SCREEN WIDTH ---------- */

* {
  max-width: 100%;
}

/* Allow normal full-width layout elements */
html,
body,
#root,
#__next {
  max-width: none;
}

/* =========================================================
   AP SYNAPSE — FULL SCREEN LAYOUT OVERRIDE
   ========================================================= */

html,
body {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  overflow-x: hidden !important;
}

/* Main application should occupy the entire viewport */
#root,
#__next {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Common app-level containers */
.app,
.app-container,
.app-layout,
.layout,
.dashboard,
.workspace {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

/* Sidebar stays on the left */
.sidebar,
.side-bar,
aside {
  flex-shrink: 0 !important;
}

/* Main area uses remaining screen */
main,
.main,
.main-content,
.content-area {
  min-width: 0 !important;
  max-width: none !important;
}

/* Remove accidental horizontal offsets */
main,
.main,
.main-content,
.content-area,
.workspace,
.dashboard {
  margin-left: 0 !important;
}

/* Don't let invisible layers cover buttons */
[class*="background"],
[class*="overlay"],
[class*="gradient"],
[class*="glow"],
[class*="noise"],
canvas {
  pointer-events: none !important;
}

/* Actual interface elements remain clickable */
button,
a,
input,
textarea,
select,
[role="button"],
[role="link"] {
  pointer-events: auto !important;
  position: relative;
  z-index: 20;
}

/* Make buttons visibly clickable */
button,
[role="button"] {
  cursor: pointer !important;
}

/* Prevent oversized children from creating weird positioning */
img,
video,
iframe {
  max-width: 100% !important;
}

/* Mobile */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  #root,
  .app,
  .app-container,
  .app-layout,
  .layout {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   AP SYNAPSE — FINAL POSITION + CLICK FIX
   ========================================================= */

/* ---------- FULL VIEWPORT ---------- */

html,
body {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* ---------- ROOT ---------- */

#root,
#__next {
  width: 100vw !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- APP SHELL ---------- */

.app,
.app-container,
.app-layout,
.layout,
.dashboard,
.workspace {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

/* ---------- REMOVE ACCIDENTAL LEFT OFFSET ---------- */

main,
.main,
.main-content,
.content,
.content-area,
.workspace-content {
  margin-left: 0 !important;
  transform: none !important;
}

/* ---------- FLEX / GRID SPACE ---------- */

.app-layout,
.layout,
.workspace,
.dashboard {
  box-sizing: border-box !important;
}

/* Let the main section actually take remaining space */
.app-layout > main,
.app-layout > .main,
.app-layout > .main-content,
.layout > main,
.layout > .main,
.layout > .main-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ---------- SIDEBAR ---------- */

.sidebar,
.side-bar,
aside {
  flex: 0 0 auto !important;
  z-index: 1000 !important;
}

/* ---------- CLICK FIX ---------- */

/*
   Decorative elements must NEVER capture clicks.
*/

canvas,
[class*="background"],
[class*="Background"],
[class*="overlay"],
[class*="Overlay"],
[class*="gradient"],
[class*="Gradient"],
[class*="glow"],
[class*="Glow"],
[class*="noise"],
[class*="Noise"],
[class*="particles"],
[class*="Particles"],
[class*="neural"],
[class*="Neural"] {
  pointer-events: none !important;
}

/*
   Real interface elements get the click layer.
*/

button,
a,
input,
textarea,
select,
option,
label,
[role="button"],
[role="link"],
[role="menuitem"],
[role="tab"],
[role="checkbox"],
[role="switch"] {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1001 !important;
}

/* ---------- SIDEBAR INTERACTION ---------- */

.sidebar *,
.side-bar *,
aside * {
  pointer-events: auto !important;
}

/* ---------- HEADER INTERACTION ---------- */

header,
header *,
.navbar,
.navbar * {
  pointer-events: auto !important;
}

/* ---------- DROPDOWNS / MENUS ---------- */

.dropdown,
.dropdown-menu,
.menu,
.menu-container,
.popover,
[role="menu"] {
  z-index: 5000 !important;
  pointer-events: auto !important;
}

/* ---------- MODALS ---------- */

.modal,
.modal *,
[role="dialog"],
[role="dialog"] * {
  pointer-events: auto !important;
}

/* ---------- BUTTON FEEDBACK ---------- */

button,
[role="button"] {
  cursor: pointer !important;
  user-select: none !important;
}

/* ---------- DON'T LET TEXT SELECTION BLOCK BUTTONS ---------- */

button *,
[role="button"] * {
  pointer-events: none !important;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

  #root,
  #__next,
  .app,
  .app-container,
  .app-layout,
  .layout {
    width: 100vw !important;
    min-width: 100vw !important;
  }

  main,
  .main,
  .main-content,
  .content,
  .content-area {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== SIDEBAR CLICK FIX ===== */

.sidebar,
.side-bar,
aside {
  position: relative !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.sidebar *,
.side-bar *,
aside * {
  pointer-events: auto !important;
}

/* Sidebar buttons and links */
.sidebar button,
.sidebar a,
.sidebar [role="button"],
.side-bar button,
.side-bar a,
.side-bar [role="button"],
aside button,
aside a,
aside [role="button"] {
  position: relative !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Keep decorative layers away from clicks */
canvas,
.sidebar canvas,
.side-bar canvas,
aside canvas {
  pointer-events: none !important;
}

/* =========================================
   AP SYNAPSE — FINAL TRUE CENTER
   ========================================= */

.workspace-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#assistantPage {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#heroScreen {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#heroScreen .hero-container {
    width: 100% !important;
    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 55px 24px 40px !important;
    box-sizing: border-box !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
}

#heroScreen .recent-intelligence {
    width: 100% !important;
    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    margin-top: 35px !important;
    margin-bottom: 140px !important;

    box-sizing: border-box !important;
}

/* =========================================
   AP SYNAPSE — FINAL WORKSPACE WIDTH FIX
   ========================================= */

.app {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.workspace {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;

    width: calc(100vw - 290px) !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.workspace-content {
    width: 100% !important;
    box-sizing: border-box !important;
}

#assistantPage,
#heroScreen {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================
   AP SYNAPSE — CLEAN LAYOUT RESET
   ========================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app {
    position: relative !important;
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 290px !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 10000 !important;
}

.workspace {
    position: fixed !important;
    inset: 0 0 0 290px !important;
    width: auto !important;
    height: 100vh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.topbar {
    flex: 0 0 82px !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.workspace-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#assistantPage {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#heroScreen {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#heroScreen .hero-container {
    width: min(760px, calc(100% - 48px)) !important;
    margin: 0 auto !important;
    padding: 55px 0 140px !important;
    box-sizing: border-box !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
}

/* =========================================
   AP SYNAPSE — WORKSPACE PAGES
   ========================================= */

.projects-page {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 48px 50px 140px !important;

    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.projects-page .projects-header {
    position: relative !important;
    top: auto !important;
    margin: 0 0 35px !important;
}

.projects-page .projects-grid {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
}

/* =========================================
   AP SYNAPSE — FULL WORKSPACE PAGE SYSTEM
   ========================================= */

.workspace-content {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Every workspace page occupies the complete content viewport */

.workspace-content > section {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Assistant */

#assistantPage {
    padding: 0 !important;
}

/* All application pages */

#projectsPage,
#codeStudioPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#canvasPage {
    padding: 55px 60px 140px !important;
}

/* Page header */

.projects-page .projects-header {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto 40px !important;
}

/* Page grid */

.projects-page .projects-grid {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

/* Cards */

.projects-page .project-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 800px) {

    #projectsPage,
    #codeStudioPage,
    #workspacePage,
    #knowledgePage,
    #documentsPage,
    #automationPage,
    #canvasPage {
        padding: 35px 25px 120px !important;
    }

    .projects-page .projects-grid {
        grid-template-columns: 1fr !important;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL VIEWPORT / PAGE LAYOUT FIX
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.app {
    position: relative !important;
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 290px !important;
    height: 100vh !important;
    z-index: 1000 !important;
}

.workspace {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: calc(100vw - 290px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.topbar {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 100 !important;
}

.workspace-content {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.workspace-content > section {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#assistantPage {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

#heroScreen {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

.projects-page {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.command-section {
    position: fixed !important;
    left: 290px !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 500 !important;
}

/* AP Synapse SEO accessibility content — do not occupy layout space */
.ap-synapse-seo {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =====================================================
   AP SYNAPSE — STOP WORKSPACE FLEX WRAP
   ===================================================== */

.app {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 290px !important;
    height: 100vh !important;
    z-index: 1000 !important;
}

.workspace {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;

    margin-left: 290px !important;

    width: calc(100vw - 290px) !important;
    max-width: calc(100vw - 290px) !important;

    height: 100vh !important;
    min-height: 100vh !important;

    flex: 1 1 auto !important;
    flex-basis: 0 !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}

/* =====================================================
   AP SYNAPSE — PAGE STACK
   ===================================================== */

.workspace-content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Every workspace page occupies the SAME content area */
.workspace-content > .conversation,
.workspace-content > .projects-page {
    width: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Hidden pages must truly disappear */
.workspace-content > section[style*="display:none"] {
    display: none !important;
}

/* Active pages */
.workspace-content > .projects-page {
    padding: 40px 50px 120px !important;
}

/* Assistant */
.workspace-content > #assistantPage {
    padding: 0 !important;
}

/* =========================================
   AP SYNAPSE — PAGE SYSTEM FINAL FIX
========================================= */

.workspace-content {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Every internal page occupies the SAME workspace */
.workspace-content > section {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Assistant */
#assistantPage {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - 82px) !important;
}

/* Other pages */
#codeStudioPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#settingsPage,
#canvasPage {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - 82px) !important;
    padding: 48px 56px 120px !important;
    box-sizing: border-box !important;
}

/* Page content stays inside the middle area */
.projects-header,
.projects-grid {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Prevent pages from appearing underneath the sidebar */
.workspace {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Don't let hidden pages occupy layout space */
.workspace-content > section[style*="display: none"] {
    display: none !important;
}

/* =========================================
   AP SYNAPSE — PAGE LAYOUT FINAL FIX
   ========================================= */

.workspace {
    position: relative !important;
    top: 0 !important;
    left: 290px !important;
    width: calc(100% - 290px) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.workspace-content {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - 82px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.workspace-content > section {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

#assistantPage,
#codeStudioPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#settingsPage,
#canvasPage {
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

#assistantPage {
    min-height: calc(100vh - 82px) !important;
}

.projects-page {
    min-height: calc(100vh - 82px) !important;
    padding: 50px 60px !important;
    box-sizing: border-box !important;
}

.workspace-content > section[style*="display: none"] {
    display: none !important;
}

.workspace-content > .projects-page {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

/* =========================================================
   AP SYNAPSE — FINAL PAGE STACK FIX
   All workspace pages occupy the same content viewport.
   ========================================================= */

.workspace {
    position: relative !important;
}

.workspace-content {
    position: relative !important;
    width: 100% !important;
    height: calc(100vh - 82px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Every page uses the SAME workspace position */
.workspace-content > section {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    transform: none !important;
}

/* Hidden pages stay completely hidden */
.workspace-content > section[style*="display: none"] {
    display: none !important;
}

/* Visible pages */
.workspace-content > section:not([style*="display: none"]) {
    display: block !important;
    z-index: 10 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Assistant */
#assistantPage {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* All secondary pages */
#projectsPage,
#codeStudioPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#canvasPage,
#settingsPage {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* Prevent old positioning rules from pushing pages downward */
.projects-page {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

/* Page content gets its own scroll */
.projects-page .projects-header,
.projects-page .projects-grid {
    position: relative !important;
}

/* =========================================================
   AP SYNAPSE — DEFINITIVE WORKSPACE PAGE OVERLAY FIX
   ========================================================= */

.workspace-content {
    position: relative !important;
    width: 100% !important;
    height: calc(100vh - 82px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ALL workspace pages */
.workspace-content > section {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    transform: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Hidden */
.workspace-content > section[style*="display: none"] {
    display: none !important;
}

/* Visible */
.workspace-content > section:not([style*="display: none"]) {
    display: block !important;
    top: 0 !important;
    left: 0 !important;
}

/* Explicitly eliminate old flow positioning */
#assistantPage,
#codeStudioPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#canvasPage,
#settingsPage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    transform: none !important;
}

/* AP SYNAPSE — PAGE VISIBILITY CONTROL */

.workspace-content {
    position: relative !important;
    overflow: hidden !important;
}

.workspace-content > section {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
}

.workspace-content > section[hidden] {
    display: none !important;
}

/* =========================================================
   AP SYNAPSE — ASSISTANT WELCOME LAYER FIX
   ========================================================= */

/* Assistant is a normal page, not a permanent overlay */
#assistantPage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
}

/* Welcome screen stays inside Assistant */
#assistantPage #heroScreen {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    z-index: 1 !important;
}

/* Other pages must sit above Assistant when active */
#codeStudioPage,
#canvasPage,
#automationPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#settingsPage {
    z-index: 20 !important;
}

/* Hidden Assistant means EVERYTHING inside it is hidden */
#assistantPage[hidden],
#assistantPage[hidden] #heroScreen,
#assistantPage[hidden] .hero-container,
#assistantPage[hidden] .chat-window {
    display: none !important;
}

/* =========================================================
   AP SYNAPSE — SINGLE PAGE WORKSPACE SYSTEM
========================================================= */

.workspace-content {
    position: relative;
    overflow: hidden;
}

.workspace-content > section {
    box-sizing: border-box;
}

/* Pages are independent screens */
.workspace-content > section {
    width: 100%;
}

/* Hidden pages must truly disappear */
.workspace-content > section[aria-hidden="true"] {
    display: none !important;
}

/* Assistant screen */
#assistantPage {
    position: absolute;
    inset: 0;
    overflow-y: auto;
}

/* All other workspace screens */
#codeStudioPage,
#projectsPage,
#workspacePage,
#knowledgePage,
#documentsPage,
#automationPage,
#canvasPage,
#settingsPage {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 40px;
}

/* Never allow inactive screens to remain visible */
.workspace-content > section:not([aria-hidden="false"]) {
    display: none !important;
}

/* =====================================================
   AP SYNAPSE — WORKSPACE PAGE STACK
===================================================== */

.workspace-content {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Every workspace page occupies exactly the same screen */
.workspace-content > section {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Router-controlled hidden pages */
.workspace-content > section[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Active page */
.workspace-content > section[aria-hidden="false"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* =========================================================
   AP SYNAPSE — FINAL SIDEBAR STRUCTURE POLISH
   DO NOT TOUCH ROUTING
========================================================= */

/* Sidebar itself */
.sidebar {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header remains fixed-size */
.sidebar-header {
    flex: 0 0 auto;
}

/* Recent section gets its own controlled area */
.sidebar .recent-group {
    flex: 0 0 105px;
    min-height: 105px;
    max-height: 105px;
    overflow: hidden;
    position: relative;
}

/* History itself becomes scrollable INSIDE recent area */
.sidebar .recent-group .history-list {
    height: 58px;
    max-height: 58px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

/* Make history items compact */
.sidebar .recent-group .history-list > * {
    margin-bottom: 6px;
}

/* Workspace navigation must NEVER be covered by history */
.sidebar > .sidebar-group:not(.recent-group) {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
}

/* Workspace heading */
.sidebar > .sidebar-group:not(.recent-group) h4 {
    margin-bottom: 10px;
}

/* Workspace links */
.sidebar > .sidebar-group:not(.recent-group) nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Footer pushed to bottom */
.sidebar .sidebar-footer {
    margin-top: auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
}

/* Hide ugly scrollbar in history */
.sidebar .recent-group .history-list::-webkit-scrollbar {
    width: 4px;
}

.sidebar .recent-group .history-list::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar .recent-group .history-list::-webkit-scrollbar-thumb {
    background: rgba(198, 166, 107, 0.35);
    border-radius: 10px;
}

/* Firefox */
.sidebar .recent-group .history-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(198, 166, 107, 0.35) transparent;
}

/* =========================================================
   AP SYNAPSE — PREMIUM WELCOME HERO
========================================================= */

.hero-screen {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 82px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    padding: 70px 55px 150px;
    box-sizing: border-box;
}

/* Hero content */
.hero-container {
    width: min(1050px, 100%);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 3;
}

/* Small premium identity line */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 15px;
    margin-bottom: 25px;

    border: 1px solid rgba(198, 166, 107, 0.35);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(198, 166, 107, 0.08),
            rgba(255, 255, 255, 0.025)
        );

    color: #c6a66b;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;

    box-shadow:
        0 0 25px rgba(198, 166, 107, 0.04);

    text-transform: uppercase;
}

/* Main title */
.hero-title {
    margin: 0 auto;
    max-width: 1000px;

    display: flex;
    flex-direction: column;

    font-size: clamp(52px, 6vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.055em;

    font-weight: 700;
}

/* First line */
.hero-title-main {
    color: #f5f5f2;

    text-shadow:
        0 0 35px rgba(255, 255, 255, 0.035);
}

/* Second line */
.hero-title-accent {
    margin-top: 8px;

    background:
        linear-gradient(
            100deg,
            #777777 0%,
            #d4d4d0 38%,
            #ffffff 50%,
            #888888 72%,
            #5d5d5d 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter:
        drop-shadow(0 0 25px rgba(198, 166, 107, 0.08));
}

/* Description */
.hero-description {
    max-width: 650px;

    margin: 28px auto 0;

    color: rgba(235, 235, 230, 0.62);

    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* Capability strip */
.hero-capabilities {
    margin: 28px auto 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.hero-capabilities span {
    padding: 8px 13px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.025);

    color: rgba(235, 235, 230, 0.55);

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.hero-capabilities span:hover {
    border-color: rgba(198, 166, 107, 0.35);

    background:
        rgba(198, 166, 107, 0.07);

    color: #d9c08b;

    transform: translateY(-2px);
}

/* =========================================================
   RECENT INTELLIGENCE — PREMIUM CENTER CARD
========================================================= */

.recent-intelligence {
    width: min(900px, 100%);

    margin: 65px auto 0;

    padding: 25px;

    border:
        1px solid rgba(255, 255, 255, 0.075);

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    position: relative;
    z-index: 4;
}

/* Header */
.recent-intelligence-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.recent-kicker {
    color: #c6a66b;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.recent-intelligence-header h2 {
    margin: 6px 0 0;

    color: #eeeeea;

    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* View all */
#viewAllHistoryBtn {
    border: none;
    background: transparent;

    color: rgba(255, 255, 255, 0.45);

    font-size: 11px;

    cursor: pointer;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

#viewAllHistoryBtn:hover {
    color: #c6a66b;
    transform: translateX(3px);
}

/* Recent cards */
.recent-intelligence-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.recent-intelligence-grid > * {
    min-width: 0;
}

/* Responsive */
@media (max-width: 1000px) {

    .recent-intelligence-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .hero-screen {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero-title {
        font-size: 48px;
    }

    .recent-intelligence-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   AP SYNAPSE — HERO ACTION CLICK FIX
   DO NOT CHANGE DESIGN
========================================================= */

.hero-screen,
.hero-container,
.hero-actions {
    position: relative;
}

.hero-screen {
    z-index: 10;
}

.hero-container {
    z-index: 11;
}

.hero-actions {
    z-index: 100;
    pointer-events: auto;
}

.hero-action-btn {
    position: relative;
    z-index: 101;
    pointer-events: auto;
    cursor: pointer;
}

/* Background layers must NEVER block UI clicks */

.background,
#intelligence-field {
    pointer-events: none !important;
}

/* AP SYNAPSE — HERO BUTTON CLICK FIX */

.hero-screen,
.hero-container,
.hero-actions {
    position: relative;
}

.hero-screen {
    z-index: 10;
}

.hero-container {
    z-index: 11;
}

.hero-actions {
    z-index: 100;
    pointer-events: auto;
}

.hero-action-btn {
    position: relative;
    z-index: 101;
    pointer-events: auto;
    cursor: pointer;
}

.background,
#intelligence-field {
    pointer-events: none !important;
}

/* =========================================================
   AP SYNAPSE — WELCOME ACTION LAYER
   Fixes chatWindow blocking hero buttons
========================================================= */

#chatWindow {
    position: absolute !important;
    z-index: 1 !important;
}

#heroScreen {
    position: relative !important;
    z-index: 100 !important;
}

#heroScreen .hero-container {
    position: relative !important;
    z-index: 101 !important;
}

#heroScreen .hero-actions {
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

#heroScreen .hero-action-btn {
    position: relative !important;
    z-index: 1001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* =========================================================
   AP SYNAPSE — FINAL HERO POLISH
   ========================================================= */

/* ---------- HERO TITLE ---------- */

.hero-title {
    color: #f5f5f5 !important;
    font-size: clamp(46px, 5vw, 78px) !important;
    font-weight: 650 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.055em !important;
    text-align: center !important;
    max-width: 1100px !important;
    margin: 28px auto 18px !important;
    text-wrap: balance;
}

/* Make EVERY word in the title equally important */
.hero-title,
.hero-title span {
    color: #f5f5f5 !important;
    font-weight: 650 !important;
}

/* Remove the old visual difference between
   "The Intelligence" and "Operating System" */
.hero-title span {
    display: inline !important;
    background: none !important;
    -webkit-text-fill-color: #f5f5f5 !important;
}


/* ---------- HERO DESCRIPTION ---------- */

.hero-description {
    color: rgba(245, 245, 245, 0.62) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    letter-spacing: -0.01em !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    text-align: center !important;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.hero-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 28px auto 0 !important;
}


/* Premium action button */

.hero-action-btn {
    position: relative !important;

    min-width: 116px !important;
    height: 48px !important;

    padding: 0 20px !important;

    border-radius: 14px !important;

    border: 1px solid rgba(198, 166, 107, 0.28) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        ) !important;

    color: rgba(245,245,245,0.86) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    letter-spacing: -0.01em !important;

    cursor: pointer !important;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}


/* subtle premium highlight */

.hero-action-btn::before {
    content: "" !important;

    position: absolute !important;
    inset: 1px !important;

    border-radius: 13px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            transparent 45%
        ) !important;

    pointer-events: none !important;
}


/* Hover */

.hero-action-btn:hover {
    transform: translateY(-3px) !important;

    color: #ffffff !important;

    border-color: rgba(198, 166, 107, 0.62) !important;

    background:
        linear-gradient(
            180deg,
            rgba(198,166,107,0.13),
            rgba(255,255,255,0.035)
        ) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.28),
        0 0 0 1px rgba(198,166,107,0.06) !important;
}


/* Click */

.hero-action-btn:active {
    transform: translateY(-1px) scale(0.98) !important;
}


/* Keyboard accessibility */

.hero-action-btn:focus-visible {
    outline: none !important;

    border-color: rgba(198,166,107,0.85) !important;

    box-shadow:
        0 0 0 3px rgba(198,166,107,0.14) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .hero-title {
        font-size: clamp(38px, 9vw, 58px) !important;
    }

    .hero-action-btn {
        min-width: 105px !important;
        height: 46px !important;
        padding: 0 16px !important;
    }

    .hero-actions {
        gap: 9px !important;
    }
}

/* =====================================================
   AP SYNAPSE — ADVANCED SETTINGS
===================================================== */

#advancedSettings {
    width: min(1100px, 100%);
    margin: 45px auto;
    padding-bottom: 60px;
}

.advanced-settings-header {
    margin-bottom: 28px;
}

.advanced-settings-header h2 {
    font-size: 28px;
    margin: 10px 0;
}

.advanced-settings-header p {
    color: var(--text-secondary);
}

.advanced-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.advanced-settings-card {
    padding: 24px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(20px);
}

.advanced-settings-card h3 {
    margin: 0 0 20px;
    font-size: 18px;
}

.advanced-settings-card label {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 15px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.advanced-settings-card select,
.advanced-settings-card input[type="range"] {
    width: 100%;
}

.advanced-settings-card select {
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.25);
    color: var(--text);
}

.advanced-settings-card button {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    margin-top: 9px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.025);
    color: var(--text);
    cursor: pointer;
    transition: .2s ease;
}

.advanced-settings-card button:hover {
    transform: translateY(-2px);
    border-color: rgba(198,166,107,.45);
}

.advanced-settings-card button.setting-enabled {
    background: rgba(198,166,107,.10);
    border-color: rgba(198,166,107,.38);
}

.advanced-settings-card button.setting-enabled::after {
    content: "  ON";
    float: right;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.advanced-settings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    color: var(--text-secondary);
    font-size: 12px;
}

#resetAdvancedSettings {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
}

.animations-disabled *,
.animations-disabled *::before,
.animations-disabled *::after {
    animation: none !important;
}

.compact-mode .advanced-settings-card {
    padding: 17px;
}

@media (max-width: 800px) {

    .advanced-settings-grid {
        grid-template-columns: 1fr;
    }

    .advanced-settings-footer {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* =====================================================
   AP SYNAPSE — ULTIMATE CONTROL CENTER UI
===================================================== */

#ultimateSettings {
    width: min(1120px, 100%);
    margin: 50px auto 80px;
}

.ultimate-settings-heading {
    margin-bottom: 35px;
}

.ultimate-settings-heading h2 {
    font-size: 32px;
    margin: 12px 0 8px;
    letter-spacing: -1px;
}

.ultimate-settings-heading p {
    max-width: 700px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.ultimate-settings-section {
    margin-bottom: 28px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: rgba(255,255,255,.025);
    backdrop-filter: blur(24px);
}

.ultimate-section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}

.ultimate-section-title > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(198,166,107,.09);
    border: 1px solid rgba(198,166,107,.20);
    font-size: 20px;
}

.ultimate-section-title h3 {
    margin: 0 0 4px;
    font-size: 19px;
}

.ultimate-section-title p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.ultimate-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ultimate-setting {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    border-radius: 17px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.025);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.ultimate-setting:hover {
    transform: translateY(-2px);
    border-color: rgba(198,166,107,.35);
    background: rgba(198,166,107,.055);
}

.ultimate-setting-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ultimate-setting-main strong {
    font-size: 14px;
}

.ultimate-setting-main small {
    color: var(--text-secondary);
    line-height: 1.45;
    font-size: 11px;
}

.ultimate-switch {
    min-width: 42px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    color: var(--text-secondary);
}

.ultimate-setting.enabled {
    border-color: rgba(198,166,107,.38);
    background: rgba(198,166,107,.07);
}

.ultimate-setting.enabled
.ultimate-switch {
    border-color: rgba(198,166,107,.55);
    color: var(--accent);
    background: rgba(198,166,107,.10);
}

.ultimate-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
}

.ultimate-settings-actions button {
    padding: 12px 17px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.035);
    color: var(--text);
    cursor: pointer;
}

.ultimate-settings-actions button:hover {
    border-color: rgba(198,166,107,.4);
}

#resetUltimateSettings {
    color: var(--accent);
}

.animations-disabled *,
.animations-disabled *::before,
.animations-disabled *::after {
    animation: none !important;
    transition: none !important;
}

.focus-mode .sidebar {
    opacity: .35;
}

.focus-mode .sidebar:hover {
    opacity: 1;
}

@media (max-width: 850px) {

    .ultimate-settings-grid {
        grid-template-columns: 1fr;
    }

    .ultimate-settings-section {
        padding: 20px;
    }

    .ultimate-settings-actions {
        flex-direction: column;
    }

}

/* ==========================================================
   AP SYNAPSE — PROJECTS / DOCUMENTS / PROFILE UPGRADE
========================================================== */

.project-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 25px 0;
}

.project-stat-card {
    padding: 22px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    backdrop-filter: blur(18px);
}

.project-stat-card span {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    opacity: .5;
    margin-bottom: 8px;
}

.project-stat-card strong {
    font-size: 30px;
}

.project-dashboard-toolbar,
.document-toolbar {
    display: flex;
    gap: 12px;
    margin: 20px 0;
}

.project-dashboard-toolbar input,
.project-dashboard-toolbar select,
.document-toolbar input {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.035);
    color: inherit;
    padding: 13px 16px;
    border-radius: 14px;
    outline: none;
}

.project-dashboard-toolbar input,
.document-toolbar input {
    flex: 1;
}

.project-dashboard-toolbar select {
    min-width: 170px;
}

.project-card {
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    border-color: rgba(198,166,107,.35);
    background: rgba(255,255,255,.045);
}

.project-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-status {
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
}

.project-status.completed {
    opacity: .55;
}

.delete-dashboard-project {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .45;
    cursor: pointer;
    font-size: 20px;
}

.project-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.project-card-actions button,
.project-card > button,
.document-upload-zone button,
.document-toolbar button {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: inherit;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: .2s ease;
}

.project-card-actions button:hover,
.project-card > button:hover,
.document-upload-zone button:hover,
.document-toolbar button:hover {
    transform: translateY(-1px);
    border-color: rgba(198,166,107,.45);
}

.document-upload-zone {
    padding: 45px 25px;
    margin: 25px 0;
    text-align: center;
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 24px;
    background: rgba(255,255,255,.025);
    transition: .25s ease;
}

.document-upload-zone.dragover {
    border-color: rgba(198,166,107,.7);
    background: rgba(198,166,107,.06);
    transform: scale(1.01);
}

.document-upload-icon {
    width: 60px;
    height: 60px;
    margin: auto auto 15px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(198,166,107,.1);
    font-size: 28px;
}

.document-upload-zone h2 {
    margin-bottom: 8px;
}

.document-upload-zone p {
    opacity: .55;
    margin-bottom: 20px;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.profile-details > div {
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}

.profile-details span {
    display: block;
    font-size: 11px;
    opacity: .5;
    margin-bottom: 5px;
}

.profile-details strong {
    font-size: 14px;
}

.profile-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.profile-capabilities span {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(198,166,107,.08);
    border: 1px solid rgba(198,166,107,.15);
}

@media (max-width: 700px) {

    .project-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .project-dashboard-toolbar,
    .document-toolbar {
        flex-direction: column;
    }

    .profile-details {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   AP SYNAPSE — DOCUMENT INTELLIGENCE
===================================================== */

.document-workspace {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.document-upload-card,
.document-current-card,
.document-ask-card,
.document-answer-card {
    border: 1px solid rgba(198,166,107,.18);
    background: rgba(20,20,20,.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

.document-upload-card {
    text-align: center;
    padding: 42px 28px;
}

.document-upload-icon,
.document-file-icon {
    font-size: 34px;
    margin-bottom: 12px;
}

.document-upload-card h2,
.document-ask-card h2 {
    margin: 0 0 8px;
}

.document-upload-card p {
    opacity: .65;
    margin-bottom: 22px;
}

.document-primary-btn {
    border: 0;
    border-radius: 14px;
    padding: 13px 20px;
    background: #c6a66b;
    color: #111;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
}

.document-primary-btn:hover {
    transform: translateY(-2px);
}

.document-primary-btn:disabled {
    opacity: .5;
    cursor: wait;
}

.document-status {
    margin-top: 18px;
    font-size: 14px;
    opacity: .7;
}

.document-current-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.document-file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.document-file-info span {
    font-size: 13px;
    opacity: .6;
}

.document-remove-btn {
    border: 1px solid rgba(255,255,255,.12);
    background: transparent;
    color: inherit;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
}

.document-ask-header,
.document-answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.document-ready-badge {
    color: #8fd18f;
    font-size: 13px;
}

.document-question-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-question-row textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 110px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: rgba(0,0,0,.25);
    color: inherit;
    padding: 16px;
    font: inherit;
    outline: none;
}

.document-question-row textarea:focus {
    border-color: rgba(198,166,107,.55);
}

.document-answer-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.document-answer-header span {
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 700;
    color: #c6a66b;
}

.document-answer-header button {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.document-answer {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.document-answer pre {
    overflow-x: auto;
    border-radius: 14px;
    padding: 16px;
}

.document-answer code {
    font-family: monospace;
}

@media (max-width: 700px) {

    .document-upload-card,
    .document-current-card,
    .document-ask-card,
    .document-answer-card {
        padding: 20px;
        border-radius: 18px;
    }

    .document-current-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE RESPONSIVE SYSTEM
   Mobile: 320px → 430px+
   Desktop design remains untouched
   ========================================================= */

@media (max-width: 768px) {

    /* ---------- GLOBAL ---------- */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
        height: auto;
    }

    button,
    input,
    textarea,
    select {
        max-width: 100%;
        font: inherit;
    }

    button,
    [role="button"] {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* ---------- APP SHELL ---------- */

    #app,
    .app,
    .app-container,
    .app-shell,
    .main-app {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    /* ---------- SIDEBAR ---------- */

    .sidebar {
        width: min(84vw, 320px);
        max-width: 320px;
        min-width: 0;
        z-index: 1000;
    }

    .sidebar *,
    .sidebar button,
    .sidebar a {
        max-width: 100%;
    }

    /* Prevent desktop sidebar from crushing content */
    .sidebar.open + .main-content,
    .sidebar.open ~ .main-content {
        width: 100%;
        min-width: 0;
    }

    /* ---------- TOPBAR ---------- */

    .topbar,
    .top-bar,
    header.topbar {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .topbar > *,
    .top-bar > * {
        min-width: 0;
    }

    .topbar-title,
    .topbar .title,
    .top-bar .title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---------- MAIN CONTENT ---------- */

    .main-content,
    .main,
    .content,
    .workspace,
    .workspace-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ---------- HERO ---------- */

    .hero,
    .hero-section,
    .hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero {
        padding:
            32px
            max(18px, env(safe-area-inset-right))
            24px
            max(18px, env(safe-area-inset-left));
    }

    .hero h1,
    .hero-title {
        font-size: clamp(2rem, 9vw, 3.2rem);
        line-height: 1.05;
        letter-spacing: -0.04em;
        overflow-wrap: anywhere;
    }

    .hero p,
    .hero-description {
        max-width: 100%;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* ---------- CHAT AREA ---------- */

    .chat,
    .chat-container,
    .chat-area,
    .conversation,
    .messages {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .message,
    .message-container,
    .user-message,
    .assistant-message,
    .message-content {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .message-content pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .message-content code {
        overflow-wrap: anywhere;
    }

    /* ---------- COMPOSER ---------- */

    .composer,
    .chat-composer,
    .input-container,
    .message-input-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    textarea,
    .chat-input,
    .message-input,
    .composer textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 16px; /* prevents iOS zoom */
        line-height: 1.45;
    }

    .composer {
        padding:
            8px
            max(12px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    .composer button,
    .chat-composer button,
    .send-button {
        min-width: 42px;
        min-height: 42px;
        flex-shrink: 0;
    }

    /* ---------- WORKSPACE PANELS ---------- */

    .workspace-panel,
    .panel,
    .workspace-card,
    .tool-panel,
    .content-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .workspace-grid,
    .dashboard-grid,
    .cards-grid,
    .tool-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
    }

    /* ---------- BUTTONS ---------- */

    .actions,
    .button-row,
    .toolbar,
    .topbar-actions {
        min-width: 0;
        max-width: 100%;
    }

    .actions button,
    .button-row button,
    .toolbar button {
        min-height: 42px;
    }

    /* ---------- MODALS ---------- */

    .modal,
    .modal-content,
    .dialog,
    .command-palette {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        min-width: 0;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* ---------- SETTINGS ---------- */

    .settings,
    .settings-panel,
    .settings-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ---------- TABLES ---------- */

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- FORMS ---------- */

    form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    input,
    textarea,
    select {
        min-width: 0;
    }

    /* ---------- MOBILE TYPOGRAPHY ---------- */

    h1 {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }

    h2 {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    h3 {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }

    /* ---------- MOBILE SCROLL ---------- */

    .scroll-area,
    .messages,
    .workspace-content {
        -webkit-overflow-scrolling: touch;
    }
}


/* =========================================================
   SMALL PHONES — 320px–380px
   ========================================================= */

@media (max-width: 380px) {

    .hero {
        padding-top: 24px;
        padding-bottom: 20px;
    }

    .hero h1,
    .hero-title {
        font-size: 2rem;
    }

    .topbar,
    .top-bar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .composer {
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar {
        width: min(88vw, 300px);
    }
}


/* =========================================================
   STANDARD PHONES — 381px–430px
   ========================================================= */

@media (min-width: 381px) and (max-width: 430px) {

    .hero {
        padding-left: 20px;
        padding-right: 20px;
    }

    .composer {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* =========================================================
   LANDSCAPE PHONES
   ========================================================= */

@media (max-width: 768px) and (orientation: landscape) {

    .hero {
        padding-top: 20px;
        padding-bottom: 16px;
    }

    .modal,
    .command-palette {
        max-height: calc(100dvh - 16px);
    }
}


/* =========================================================
   VERY SHORT SCREENS
   ========================================================= */

@media (max-width: 768px) and (max-height: 600px) {

    .hero {
        padding-top: 16px;
        padding-bottom: 12px;
    }
}


/* =========================================================
   SAFE AREA — MODERN PHONES
   ========================================================= */

@supports (padding: env(safe-area-inset-bottom)) {

    .app,
    .app-shell {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .sidebar {
        padding-left: env(safe-area-inset-left);
    }
}


/* =========================================================
   ACCESSIBILITY / TOUCH
   ========================================================= */

@media (max-width: 768px) {

    button,
    a,
    input,
    select,
    textarea {
        -webkit-tap-highlight-color: transparent;
    }

    :focus-visible {
        outline-offset: 3px;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE EXPERIENCE
   Premium mobile workspace
   ========================================================= */

@media (max-width: 800px) {

    /* -----------------------------------------------------
       GLOBAL MOBILE FOUNDATION
       ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    * {
        box-sizing: border-box;
    }

    .app {
        width: 100%;
        min-width: 0;
        min-height: 100dvh;
        display: flex;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       SIDEBAR
       Mobile = hidden, workspace gets full width
       ----------------------------------------------------- */

    .sidebar {
        display: none !important;
    }


    /* -----------------------------------------------------
       MAIN WORKSPACE
       ----------------------------------------------------- */

    .workspace {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       TOPBAR
       ----------------------------------------------------- */

    .topbar {
        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 72px !important;

        display: grid !important;

        grid-template-columns: minmax(0, 1fr) auto !important;

        grid-template-areas:
            "left right"
            "center center" !important;

        gap: 10px !important;

        padding:
            12px
            14px
            11px
            14px !important;

        position: relative;
        z-index: 100;

        background: rgba(10,11,13,.94) !important;

        border-bottom:
            1px solid rgba(255,255,255,.07) !important;

        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }


    .topbar-left {
        grid-area: left !important;
        min-width: 0 !important;
    }


    .workspace-title {
        min-width: 0;
        max-width: 100%;
    }


    .workspace-badge {
        margin-bottom: 3px !important;

        font-size: 8px !important;

        letter-spacing: 1.5px !important;

        white-space: nowrap;
    }


    .workspace-title h1 {
        max-width: 100%;

        font-size: 16px !important;

        line-height: 1.2 !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .workspace-title p {
        margin-top: 3px !important;

        font-size: 9px !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* -----------------------------------------------------
       TOP RIGHT
       ----------------------------------------------------- */

    .topbar-right {
        grid-area: right !important;

        min-width: 0 !important;

        display: flex !important;

        align-items: center;

        justify-content: flex-end;

        gap: 6px !important;
    }


    .top-icon {
        width: 38px !important;
        height: 38px !important;

        flex: 0 0 38px;

        border-radius: 11px !important;

        font-size: 14px !important;
    }


    .profile-button {
        width: 40px !important;
        height: 40px !important;

        flex: 0 0 40px;

        border-radius: 12px !important;

        font-size: 11px !important;
    }


    /* -----------------------------------------------------
       GLOBAL SEARCH
       ----------------------------------------------------- */

    .topbar-center {
        grid-area: center !important;

        width: 100% !important;

        min-width: 0 !important;

        display: block !important;
    }


    .global-search {
        width: 100% !important;

        max-width: none !important;

        height: 42px !important;

        min-height: 42px !important;

        padding: 0 12px !important;

        gap: 9px !important;

        border-radius: 12px !important;
    }


    .search-icon {
        font-size: 19px !important;
    }


    .global-search input {
        min-width: 0 !important;

        width: 100% !important;

        font-size: 12px !important;
    }


    .shortcut {
        display: none !important;
    }


    /* -----------------------------------------------------
       WORKSPACE CONTENT
       ----------------------------------------------------- */

    .workspace-content {
        width: 100% !important;

        min-width: 0 !important;

        height: calc(
            100dvh - 138px
        );

        min-height: 0;

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        padding-bottom: 120px !important;
    }


    /* -----------------------------------------------------
       CONVERSATION
       ----------------------------------------------------- */

    .conversation {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        padding: 0 !important;

        margin: 0 !important;
    }


    .chat-window {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding:
            12px
            12px
            150px !important;

        overflow-x: hidden !important;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-screen {
        width: 100% !important;

        min-width: 0 !important;

        padding:
            36px
            16px
            120px !important;

        overflow: hidden;
    }


    .hero-container {
        width: 100% !important;

        max-width: 680px;

        margin: 0 auto;

        text-align: center;
    }


    .hero-badge {
        font-size: 8px !important;

        letter-spacing: 2px !important;

        margin-bottom: 16px !important;
    }


    .hero-title {
        width: 100% !important;

        margin: 0 !important;

        font-size:
            clamp(
                34px,
                10vw,
                52px
            ) !important;

        line-height: 1.02 !important;

        letter-spacing: -.045em !important;

        overflow-wrap: normal;

        word-break: normal;
    }


    .hero-title-main,
    .hero-title-accent {
        display: block;
    }


    .hero-description {
        max-width: 320px;

        margin:
            16px
            auto
            0 !important;

        font-size: 13px !important;

        line-height: 1.55 !important;
    }


    /* -----------------------------------------------------
       HERO ACTIONS
       ----------------------------------------------------- */

    .hero-actions {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px !important;

        margin-top: 24px !important;
    }


    .hero-action-btn {
        width: 100% !important;

        min-width: 0 !important;

        height: 44px !important;

        padding: 0 10px !important;

        border-radius: 12px !important;

        font-size: 12px !important;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       RECENT INTELLIGENCE
       ----------------------------------------------------- */

    .recent-intelligence {
        width: 100% !important;

        margin-top: 42px !important;
    }


    .recent-intelligence-header {
        width: 100% !important;

        display: flex !important;

        align-items: flex-end;

        justify-content: space-between;

        gap: 12px;

        text-align: left;
    }


    .recent-intelligence-header h2 {
        margin-top: 5px !important;

        font-size: 17px !important;

        line-height: 1.25 !important;
    }


    .recent-intelligence-header button {
        flex: 0 0 auto;

        font-size: 10px !important;

        white-space: nowrap;
    }


    .recent-intelligence-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 10px !important;

        margin-top: 16px !important;
    }


    /* -----------------------------------------------------
       ALL OTHER PAGES
       ----------------------------------------------------- */

    .projects-page {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        padding:
            24px
            14px
            120px !important;

        overflow-x: hidden;
    }


    .projects-header {
        width: 100% !important;

        min-width: 0 !important;
    }


    .projects-header h1 {
        font-size:
            clamp(
                26px,
                8vw,
                38px
            ) !important;

        line-height: 1.1 !important;

        overflow-wrap: anywhere;
    }


    .projects-header p {
        max-width: 100% !important;

        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    /* -----------------------------------------------------
       PROJECTS
       ----------------------------------------------------- */

    .project-dashboard-stats {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 7px !important;
    }


    .project-stat-card {
        min-width: 0 !important;

        padding: 12px 8px !important;

        border-radius: 12px !important;

        text-align: center;
    }


    .project-stat-card span {
        font-size: 8px !important;

        letter-spacing: .7px;
    }


    .project-stat-card strong {
        display: block;

        margin-top: 4px;

        font-size: 19px !important;
    }


    .project-dashboard-toolbar {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        gap: 8px !important;

        margin-top: 14px !important;
    }


    .project-dashboard-toolbar input,
    .project-dashboard-toolbar select {
        min-width: 0 !important;

        width: 100% !important;

        height: 42px !important;
    }


    .projects-grid {
        width: 100% !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 10px !important;
    }


    .project-card {
        width: 100% !important;

        min-width: 0 !important;

        padding: 16px !important;

        border-radius: 16px !important;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       CODE STUDIO / AUTOMATION
       ----------------------------------------------------- */

    #codeStudioInput,
    #automationInput {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 180px !important;

        padding: 14px !important;

        font-size: 13px !important;

        line-height: 1.55 !important;
    }


    #codeStudioOutput,
    #automationResult {
        width: 100% !important;

        min-width: 0 !important;

        padding: 14px !important;

        font-size: 12px !important;

        overflow-x: auto !important;
    }


    /* -----------------------------------------------------
       DOCUMENTS
       ----------------------------------------------------- */

    .document-workspace {
        width: 100% !important;

        min-width: 0 !important;
    }


    .document-upload-card,
    .document-current-card,
    .document-ask-card,
    .document-answer-card {
        width: 100% !important;

        min-width: 0 !important;

        padding: 16px !important;

        border-radius: 16px !important;
    }


    .document-question-row {
        display: flex !important;

        flex-direction: column !important;

        gap: 10px !important;
    }


    #documentQuestionInput {
        width: 100% !important;

        min-height: 110px !important;
    }


    .document-primary-btn {
        width: 100% !important;

        min-height: 44px !important;
    }


    /* -----------------------------------------------------
       KNOWLEDGE
       ----------------------------------------------------- */

    #knowledgeSearch {
        width: 100% !important;

        max-width: none !important;

        font-size: 13px !important;
    }


    #knowledgeInput {
        width: 100% !important;

        max-width: none !important;

        min-height: 130px !important;

        font-size: 13px !important;
    }


    /* -----------------------------------------------------
       CANVAS
       ----------------------------------------------------- */

    #apCanvas {
        width: 100% !important;

        height: auto !important;

        min-height: 300px;

        max-height: 55vh;

        margin: 14px auto !important;

        border-radius: 14px !important;
    }


    .workspace-toolbox {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 7px;
    }


    .workspace-toolbox button {
        min-width: 0;

        height: 40px;

        padding: 0 5px;

        border-radius: 10px;
    }


    /* -----------------------------------------------------
       SETTINGS
       ----------------------------------------------------- */

    .settings-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 10px !important;
    }


    .settings-card {
        width: 100% !important;

        min-width: 0 !important;

        padding: 16px !important;

        border-radius: 16px !important;
    }


    .settings-card-content {
        min-width: 0 !important;
    }


    .settings-card-content h2 {
        font-size: 15px !important;
    }


    .settings-card-content p {
        font-size: 11px !important;

        line-height: 1.5 !important;
    }


    .settings-control,
    .settings-select {
        width: 100% !important;

        min-height: 42px !important;
    }


    .settings-system {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 10px !important;

        padding: 16px !important;
    }


    /* -----------------------------------------------------
       COMMAND BAR
       ----------------------------------------------------- */

    .command-section {
        position: fixed !important;

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        width: 100% !important;

        z-index: 500 !important;

        padding:
            8px
            10px
            calc(8px + env(safe-area-inset-bottom))
            !important;

        background:
            linear-gradient(
                180deg,
                rgba(10,11,13,0),
                rgba(10,11,13,.96) 28%
            ) !important;

        pointer-events: none;
    }


    .command-bar {
        pointer-events: auto;

        width: 100% !important;

        min-width: 0 !important;

        max-width: 760px;

        margin: 0 auto;

        min-height: 52px !important;

        height: auto !important;

        padding: 6px !important;

        display: flex !important;

        align-items: center;

        gap: 4px !important;

        border-radius: 17px !important;

        background:
            rgba(22,23,26,.96) !important;

        border:
            1px solid rgba(255,255,255,.09) !important;

        box-shadow:
            0 12px 40px rgba(0,0,0,.45),
            0 0 0 1px rgba(198,166,107,.025);

        backdrop-filter: blur(24px);

        -webkit-backdrop-filter: blur(24px);
    }


    #userInput {
        flex: 1 1 auto !important;

        min-width: 0 !important;

        width: 100% !important;

        height: 40px !important;

        padding: 0 9px !important;

        font-size: 13px !important;

        line-height: 1.3 !important;
    }


    #userInput::placeholder {
        font-size: 12px;
    }


    #attachBtn,
    #imageGenBtn,
    #voiceBtn,
    #speakBtn,
    #webBtn,
    #deepThinkBtn,
    #stopBtn,
    #sendBtn {
        flex: 0 0 36px !important;

        width: 36px !important;

        min-width: 36px !important;

        height: 36px !important;

        padding: 0 !important;

        border-radius: 11px !important;

        font-size: 14px !important;
    }


    /* Hide secondary tools on very narrow phones.
       They remain available through desktop/tablet. */

    @media (max-width: 430px) {

    /* AP SYNAPSE — FULL MOBILE INTELLIGENCE BAR */

    #attachBtn,
    #imageGenBtn,
    #voiceBtn,
    #speakBtn,
    #webBtn,
    #deepThinkBtn,
    #stopBtn,
    #sendBtn {
        display: flex !important;
        flex: 0 0 31px !important;
        width: 31px !important;
        min-width: 31px !important;
        height: 34px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    #userInput {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }

}


    /* -----------------------------------------------------
       MODALS / POPUPS
       ----------------------------------------------------- */

    .popup-panel,
    .project-modal,
    .project-box {
        max-width: calc(100vw - 24px) !important;
    }


    .popup-panel {
        width: calc(100vw - 24px) !important;

        max-height: calc(100dvh - 24px) !important;

        overflow-y: auto !important;

        border-radius: 18px !important;
    }


    .project-box {
        width: calc(100vw - 28px) !important;

        max-height: calc(100dvh - 28px) !important;

        overflow-y: auto !important;
    }


    /* -----------------------------------------------------
       PROFILE
       ----------------------------------------------------- */

    .profile-hero {
        min-width: 0 !important;
    }


    .profile-details {
        width: 100% !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .profile-capabilities {
        display: flex !important;

        flex-wrap: wrap !important;

        gap: 6px !important;
    }


    /* -----------------------------------------------------
       IMAGE VIEWER
       ----------------------------------------------------- */

    .image-viewer {
        width: 100vw !important;

        height: 100dvh !important;

        padding: 12px !important;
    }


    .image-viewer img {
        max-width: 100% !important;

        max-height: 90dvh !important;

        object-fit: contain;
    }


    /* -----------------------------------------------------
       COMMAND PALETTE
       ----------------------------------------------------- */

    .command-palette {
        padding: 12px !important;
    }


    .command-box {
        width: min(
            100%,
            620px
        ) !important;

        max-height: 80dvh !important;

        border-radius: 18px !important;
    }


    #commandSearch {
        width: 100% !important;

        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       TOUCH OPTIMIZATION
       ----------------------------------------------------- */

    button,
    a,
    input,
    textarea,
    select {
        -webkit-tap-highlight-color: transparent;
    }


    button,
    a {
        touch-action: manipulation;
    }


    input,
    textarea,
    select {
        font-size: 16px;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .topbar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .workspace-content {
        height: calc(100dvh - 134px);
    }

    .hero-screen {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero-title {
        font-size: 32px !important;
    }

    .hero-actions {
        gap: 6px !important;
    }

    .hero-action-btn {
        height: 42px !important;
        font-size: 11px !important;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE EXPERIENCE
   Optimized for phones: 320px–600px
   ========================================================= */

@media (max-width: 800px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    .app {
        width: 100%;
        min-width: 0;
        height: 100dvh;
        display: block;
        overflow: hidden;
    }

    /* =========================
       SIDEBAR
       ========================= */

    .sidebar {
        display: none !important;
    }

    /* =========================
       WORKSPACE
       ========================= */

    .workspace {
        width: 100%;
        min-width: 0;
        height: 100dvh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /* =========================
       TOPBAR
       ========================= */

    .topbar {
        width: 100%;
        min-width: 0;
        height: 64px;
        min-height: 64px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        box-sizing: border-box;
    }

    .topbar-left {
        min-width: 0;
        flex: 1;
    }

    .workspace-title {
        min-width: 0;
    }

    .workspace-badge {
        font-size: 7px;
        letter-spacing: 1.5px;
        margin-bottom: 3px;
    }

    .workspace-title h1 {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        line-height: 1.15;
    }

    .workspace-title p {
        display: none;
    }

    /* Hide desktop global search */
    .topbar-center {
        display: none !important;
    }

    .topbar-right {
        flex: 0 0 auto;
        gap: 6px;
    }

    .top-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        border-radius: 11px;
        font-size: 14px;
    }

    .profile-button {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        border-radius: 11px;
        font-size: 10px;
    }

    /* =========================
       CONTENT
       ========================= */

    .workspace-content {
        width: 100%;
        min-width: 0;
        height: calc(100dvh - 64px);
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding-bottom: 100px;
    }

    .conversation,
    .projects-page {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* =========================
       HERO
       ========================= */

    .hero-screen {
        width: 100%;
        min-height: calc(100dvh - 64px);
        box-sizing: border-box;
        padding: 38px 18px 120px;
    }

    .hero-container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .hero-badge {
        font-size: 9px;
        letter-spacing: 2px;
        margin-bottom: 14px;
    }

    .hero-title {
        margin: 0;
        max-width: 100%;
        font-size: clamp(34px, 10vw, 48px);
        line-height: 1.02;
        letter-spacing: -1.8px;
    }

    .hero-title-main,
    .hero-title-accent {
        display: block;
    }

    .hero-description {
        max-width: 310px;
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* =========================
       HERO ACTIONS
       ========================= */

    .hero-actions {
        width: 100%;
        margin-top: 28px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hero-action-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 10px 8px;
        border-radius: 12px;
        font-size: 12px;
        box-sizing: border-box;
    }

    /* =========================
       RECENT INTELLIGENCE
       ========================= */

    .recent-intelligence {
        width: 100%;
        margin-top: 48px;
    }

    .recent-intelligence-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
    }

    .recent-kicker {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .recent-intelligence-header h2 {
        margin-top: 5px;
        font-size: 18px;
        line-height: 1.25;
    }

    .recent-intelligence-header button {
        flex: 0 0 auto;
        font-size: 10px;
        white-space: nowrap;
    }

    .recent-intelligence-grid {
        width: 100%;
        margin-top: 18px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* =========================
       CHAT
       ========================= */

    .chat-window {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 16px 14px 120px;
        overflow-x: hidden;
    }

    /* Prevent long code/text from breaking screen */
    .chat-window pre,
    .chat-window code {
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }

    .chat-window img {
        max-width: 100%;
        height: auto;
    }

    /* =========================
       COMMAND BAR
       ========================= */

    .command-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        width: 100%;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        background: linear-gradient(
            to top,
            rgba(10,11,13,.98),
            rgba(10,11,13,.92),
            rgba(10,11,13,0)
        );
    }

    .command-bar {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        height: auto;
        padding: 6px;
        display: flex;
        align-items: center;
        gap: 5px;
        box-sizing: border-box;
        border-radius: 17px;
    }

    #userInput {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: 40px;
        padding: 0 10px;
        font-size: 14px;
        box-sizing: border-box;
    }

    #attachBtn,
    #imageGenBtn,
    #voiceBtn,
    #speakBtn,
    #webBtn,
    #deepThinkBtn,
    #stopBtn,
    #sendBtn {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 10px;
        font-size: 14px;
    }

    /* Hide secondary controls on very narrow screens */
    @media (max-width: 390px) {

        #speakBtn,
        #webBtn {
            display: none;
        }

    }

    /* =========================
       ALL DASHBOARD PAGES
       ========================= */

    .projects-page {
        padding: 24px 16px 120px;
        box-sizing: border-box;
    }

    .projects-header {
        width: 100%;
        max-width: 100%;
    }

    .projects-header h1 {
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.8px;
        overflow-wrap: anywhere;
    }

    .projects-header p {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.6;
    }

    /* =========================
       PROJECTS
       ========================= */

    .project-dashboard-stats {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .project-stat-card {
        min-width: 0;
        padding: 12px 7px;
        box-sizing: border-box;
    }

    .project-stat-card span {
        font-size: 7px;
    }

    .project-stat-card strong {
        font-size: 20px;
    }

    .project-dashboard-toolbar {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .projects-grid {
        width: 100%;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .project-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 18px;
    }

    /* =========================
       FORMS / INPUTS
       ========================= */

    input,
    textarea,
    select,
    button {
        max-width: 100%;
    }

    textarea {
        font-size: 14px !important;
        line-height: 1.5;
    }

    /* =========================
       DOCUMENTS
       ========================= */

    .document-workspace {
        width: 100%;
        min-width: 0;
    }

    .document-upload-card,
    .document-current-card,
    .document-ask-card,
    .document-answer-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .document-question-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .document-question-row textarea {
        width: 100%;
    }

    .document-primary-btn {
        width: 100%;
        min-height: 44px;
    }

    .document-current-card {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .document-file-info {
        min-width: 0;
        flex: 1;
    }

    .document-file-info strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* =========================
       SETTINGS
       ========================= */

    .settings-grid {
        width: 100%;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .settings-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .settings-system {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* =========================
       CANVAS
       ========================= */

    #apCanvas {
        width: 100% !important;
        max-width: 100% !important;
        height: 55vh !important;
        min-height: 300px;
        box-sizing: border-box;
    }

    .workspace-toolbox {
        width: 100%;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .workspace-toolbox button {
        flex: 0 0 auto;
    }

    /* =========================
       POPUPS
       ========================= */

    .popup-panel {
        width: calc(100% - 24px) !important;
        max-width: 520px;
        max-height: calc(100dvh - 24px);
        margin: 12px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .profile-details {
        grid-template-columns: 1fr 1fr !important;
    }

    .profile-capabilities {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* =========================
       MODAL
       ========================= */

    .project-modal {
        padding: 12px;
        box-sizing: border-box;
    }

    .project-box {
        width: 100%;
        max-width: 500px;
        box-sizing: border-box;
        padding: 20px;
    }

    .project-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* =========================
       COMMAND PALETTE
       ========================= */

    .command-palette {
        padding: 12px;
        box-sizing: border-box;
    }

    .command-box {
        width: 100%;
        max-width: 520px;
        box-sizing: border-box;
    }

    /* =========================
       IMAGE VIEWER
       ========================= */

    .image-viewer img {
        max-width: 94vw;
        max-height: 82vh;
        object-fit: contain;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .topbar-right {
        gap: 4px;
    }

    .top-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .profile-button {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .hero-screen {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-actions {
        gap: 6px;
    }

    .hero-action-btn {
        min-height: 42px;
        font-size: 11px;
    }

    .command-section {
        padding-left: 6px;
        padding-right: 6px;
    }

}

/* =========================================================
   AP SYNAPSE — MOBILE EXPERIENCE v3
   Desktop layout remains untouched.
   ========================================================= */

@media (max-width: 768px) {

    /* ---------- GLOBAL MOBILE RESET ---------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow-x: hidden !important;
    }

    body {
        position: relative;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        min-width: 0;
    }


    /* ---------- MAIN APP ---------- */

    .app {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }


    /* =====================================================
       MOBILE SIDEBAR
       ===================================================== */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;

        width: min(82vw, 310px) !important;
        height: 100dvh !important;

        z-index: 10000 !important;

        transform: translateX(-105%) !important;

        transition:
            transform .28s cubic-bezier(.22,1,.36,1),
            box-shadow .28s ease !important;

        padding:
            max(20px, env(safe-area-inset-top))
            18px
            max(20px, env(safe-area-inset-bottom))
            18px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: rgba(14,16,20,.97) !important;
        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;

        border-right: 1px solid rgba(198,166,107,.18) !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;

        box-shadow:
            30px 0 80px rgba(0,0,0,.55) !important;
    }


    /* ---------- MOBILE SIDEBAR BUTTON ---------- */

    .mobile-menu-button {
        position: fixed !important;

        top: calc(env(safe-area-inset-top) + 14px);
        left: 14px;

        width: 46px;
        height: 46px;

        display: flex !important;
        align-items: center;
        justify-content: center;

        z-index: 11000 !important;

        border: 1px solid rgba(198,166,107,.25);
        border-radius: 14px;

        background: rgba(18,20,24,.88);

        color: var(--text, #fff);

        font-size: 21px;

        cursor: pointer;

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        box-shadow:
            0 10px 30px rgba(0,0,0,.25);

        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-button:active {
        transform: scale(.94);
    }


    /* ---------- SIDEBAR OVERLAY ---------- */

    .mobile-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        z-index: 9999 !important;

        background: rgba(0,0,0,.48);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mobile-sidebar-overlay.visible {
        opacity: 1;
        visibility: visible;
    }


    /* =====================================================
       WORKSPACE
       ===================================================== */

    .workspace {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;

        height: 100dvh !important;

        padding:
            calc(76px + env(safe-area-inset-top))
            14px
            calc(92px + env(safe-area-inset-bottom))
            14px !important;

        overflow: hidden !important;
    }


    /* =====================================================
       TOP BAR
       ===================================================== */

    .topbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 56px !important;

        margin: 0 0 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .topbar-left {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .workspace-title {
        width: 100% !important;
        min-width: 0 !important;
    }

    .workspace-title h1,
    #greeting {
        margin: 0 !important;

        font-size: 20px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .workspace-title p {
        margin: 4px 0 0 !important;

        font-size: 12px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .workspace-badge {
        display: inline-flex !important;

        font-size: 8px !important;
        letter-spacing: 1.5px !important;
    }


    /* Hide desktop search/actions on small screens */

    .topbar-center,
    .topbar-right {
        display: none !important;
    }


    /* =====================================================
       CONTENT
       ===================================================== */

    .workspace-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 1 !important;

        display: flex !important;

        overflow: hidden !important;
    }

    .conversation {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 100% !important;

        overflow: hidden !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero-screen {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        padding: 12px 4px 24px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .hero-container {
        width: 100% !important;
        max-width: 520px !important;

        min-width: 0 !important;

        margin: auto !important;

        gap: 14px !important;

        text-align: center !important;
    }

    .hero-badge {
        margin-bottom: 4px !important;

        padding: 5px 13px !important;

        font-size: 9px !important;
        letter-spacing: 1.7px !important;
    }

    .hero-title {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        font-size: clamp(30px, 8vw, 42px) !important;

        line-height: 1.05 !important;

        letter-spacing: -1.5px !important;

        overflow-wrap: anywhere !important;
    }

    .hero-description {
        width: 100% !important;
        max-width: 390px !important;

        margin: 0 auto !important;

        font-size: 13px !important;

        line-height: 1.55 !important;
    }


    /* =====================================================
       PROMPT CHIPS
       ===================================================== */

    .hero-prompt {
        width: 100% !important;
        max-width: 430px !important;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 9px !important;

        margin: 4px auto 0 !important;
    }

    .prompt-chip {
        width: 100% !important;
        min-width: 0 !important;

        height: 46px !important;

        padding: 0 8px !important;

        border-radius: 14px !important;

        font-size: 12px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* =====================================================
       CHAT
       ===================================================== */

    #chatWindow {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        height: 100% !important;

        padding: 0 2px 12px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .message {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .message-body {
        min-width: 0 !important;
        max-width: calc(100vw - 72px) !important;

        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }


    /* =====================================================
       PROJECT / WORKSPACE PAGES
       ===================================================== */

    .projects-page {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding: 4px 0 20px !important;
    }

    .projects-header {
        width: 100% !important;
        min-width: 0 !important;

        text-align: center !important;
    }

    .projects-header h1 {
        font-size: 27px !important;

        overflow-wrap: anywhere !important;
    }

    .projects-header p {
        max-width: 380px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .projects-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }

    .project-card {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        overflow-wrap: anywhere !important;
    }


    /* =====================================================
       COMMAND BAR
       ===================================================== */

    .command-section {
        position: fixed !important;

        left: 10px !important;
        right: 10px !important;

        bottom: calc(10px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;

        z-index: 9000 !important;
    }

    .command-bar {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        min-height: 58px !important;

        padding: 7px 8px 7px 14px !important;

        border-radius: 19px !important;

        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        overflow: hidden !important;
    }

    #userInput {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 42px !important;

        font-size: 13px !important;
    }

    #attachBtn,
    #imageGenBtn,
    #voiceBtn,
    #speakBtn,
    #webBtn,
    #deepThinkBtn,
    #stopBtn {
        flex: 0 0 32px !important;

        width: 32px !important;
        min-width: 32px !important;

        height: 38px !important;

        padding: 0 !important;

        border-radius: 10px !important;

        font-size: 15px !important;
    }

    #sendBtn {
        flex: 0 0 42px !important;

        width: 42px !important;
        min-width: 42px !important;

        height: 42px !important;

        border-radius: 13px !important;

        font-size: 19px !important;
    }


    /* =====================================================
       MOBILE MODALS / POPUPS
       ===================================================== */

    .project-modal,
    .popup-panel,
    .command-palette,
    .image-viewer {
        max-width: 100vw !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

    .workspace {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .hero-title {
        font-size: 29px !important;
    }

    .hero-description {
        font-size: 12px !important;
    }

    .hero-prompt {
        gap: 7px !important;
    }

    .prompt-chip {
        height: 43px !important;
        font-size: 11px !important;
    }

    #attachBtn,
    #imageGenBtn,
    #voiceBtn,
    #speakBtn,
    #webBtn,
    #deepThinkBtn,
    #stopBtn {
        display: none !important;
    }

    #sendBtn {
        flex-basis: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
    }

}

/* =========================================================
   AP SYNAPSE — PREMIUM MOBILE NAVIGATION
   FINAL SINGLE SOURCE OF TRUTH
   ========================================================= */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* -------------------------
       MOBILE MENU BUTTON
       ------------------------- */

    .mobile-menu-button {
        position: fixed !important;

        top: 14px !important;
        left: 14px !important;

        width: 48px !important;
        height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(198,166,107,.42) !important;
        border-radius: 14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(31,34,39,.98),
                rgba(14,16,20,.98)
            ) !important;

        color: #f5f5f3 !important;

        font-size: 24px !important;
        line-height: 1 !important;

        cursor: pointer !important;

        z-index: 2147483646 !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,.38),
            inset 0 1px 0 rgba(255,255,255,.05) !important;

        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease !important;
    }

    .mobile-menu-button:active {
        transform: scale(.94) !important;
    }

    /* -------------------------
       BACKDROP
       ------------------------- */

    .mobile-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        background: rgba(0,0,0,.58) !important;

        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 2147483640 !important;

        transition:
            opacity .25s ease,
            visibility .25s ease !important;
    }

    .mobile-sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* -------------------------
       SIDEBAR DRAWER
       ------------------------- */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(326px, 88vw) !important;
        height: 100dvh !important;

        max-height: 100dvh !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        background:
            linear-gradient(
                180deg,
                rgba(20,22,27,.995),
                rgba(10,12,16,.995)
            ) !important;

        border-right: 1px solid rgba(198,166,107,.20) !important;

        box-shadow:
            18px 0 60px rgba(0,0,0,.55) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transform: translateX(-105%) !important;

        visibility: hidden !important;
        opacity: 1 !important;

        pointer-events: none !important;

        z-index: 2147483645 !important;

        transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            visibility 0s linear .28s !important;

        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            visibility 0s linear 0s !important;
    }

    /* Sidebar content spacing */

    .sidebar-header {
        padding:
            76px 18px 18px 18px !important;
    }

    .sidebar-group {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .sidebar-footer {
        margin-top: auto !important;
        padding: 14px !important;
    }

    /* Prevent desktop app from shifting */

    .app,
    .workspace,
    .workspace-content,
    main {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile open state */

    body.ap-mobile-nav-open {
        overflow: hidden !important;
        touch-action: none !important;
    }
}

@media (max-width: 767px) {
    button.mobile-menu-button {
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        right: auto !important;
        bottom: auto !important;

        width: 48px !important;
        height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        z-index: 2147483647 !important;

        box-sizing: border-box !important;

        border: 1px solid rgba(198,166,107,.5) !important;
        border-radius: 14px !important;

        background: #111418 !important;
        color: #f5f5f3 !important;

        font-size: 24px !important;
        line-height: 1 !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE NAVIGATION
   SINGLE SOURCE OF TRUTH
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- MOBILE MENU BUTTON ---------- */

    .mobile-menu-button {
        position: fixed !important;

        top: calc(14px + env(safe-area-inset-top)) !important;
        left: 14px !important;

        right: auto !important;
        bottom: auto !important;

        width: 48px !important;
        height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        z-index: 2147483647 !important;

        border: 1px solid rgba(198,166,107,.48) !important;
        border-radius: 15px !important;

        background:
            linear-gradient(
                145deg,
                rgba(31,34,39,.98),
                rgba(12,14,18,.98)
            ) !important;

        color: #f5f5f3 !important;

        font-size: 24px !important;
        line-height: 1 !important;

        cursor: pointer !important;

        box-shadow:
            0 12px 32px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.06) !important;

        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;

        transform: none !important;

        transition:
            transform .2s ease,
            border-color .2s ease,
            background .2s ease !important;
    }

    .mobile-menu-button:hover {
        border-color: rgba(198,166,107,.78) !important;
    }

    .mobile-menu-button:active {
        transform: scale(.94) !important;
    }


    /* ---------- BACKDROP ---------- */

    .mobile-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        background: rgba(0,0,0,.56) !important;

        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 2147483640 !important;

        transition:
            opacity .25s ease,
            visibility .25s ease !important;
    }

    .mobile-sidebar-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* ---------- SIDEBAR ---------- */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(326px, 88vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        box-sizing: border-box !important;

        background:
            linear-gradient(
                180deg,
                rgba(18,21,26,.99) 0%,
                rgba(10,12,16,.995) 100%
            ) !important;

        border-right:
            1px solid rgba(198,166,107,.20) !important;

        box-shadow:
            24px 0 70px rgba(0,0,0,.62) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translate3d(-105%,0,0) !important;

        visibility: hidden !important;
        opacity: 1 !important;

        pointer-events: none !important;

        z-index: 2147483645 !important;

        transition:
            transform .32s cubic-bezier(.22,1,.36,1),
            visibility 0s linear .32s !important;

        scrollbar-width: thin;
    }


    /* THE ONLY OPEN STATE */

    .sidebar.mobile-open {
        transform: translate3d(0,0,0) !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transition:
            transform .32s cubic-bezier(.22,1,.36,1),
            visibility 0s linear 0s !important;
    }


    /* ---------- SIDEBAR HEADER ---------- */

    .sidebar-header {
        flex: 0 0 auto !important;

        padding:
            calc(18px + env(safe-area-inset-top))
            18px
            16px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.025),
                transparent
            ) !important;
    }


    /* ---------- BRAND ---------- */

    .sidebar .brand {
        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        min-width: 0 !important;

        margin-bottom: 18px !important;
    }

    .sidebar .brand-mark {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 13px !important;

        border:
            1px solid rgba(198,166,107,.52) !important;

        background:
            linear-gradient(
                145deg,
                rgba(198,166,107,.16),
                rgba(198,166,107,.04)
            ) !important;

        color: #d8bd7d !important;

        font-weight: 700 !important;

        letter-spacing: -.5px !important;

        box-shadow:
            0 8px 24px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    .sidebar .brand-text {
        min-width: 0 !important;
    }

    .sidebar .brand-text h2 {
        margin: 0 !important;

        color: #f5f5f3 !important;

        font-size: 16px !important;

        line-height: 1.2 !important;

        font-weight: 650 !important;

        white-space: nowrap !important;
    }

    .sidebar .brand-text span {
        display: block !important;

        margin-top: 4px !important;

        color: rgba(245,245,243,.48) !important;

        font-size: 10px !important;

        letter-spacing: .8px !important;

        white-space: nowrap !important;
    }


    /* ---------- NEW CHAT ---------- */

    .sidebar .new-chat-btn {
        width: 100% !important;

        min-height: 46px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 9px !important;

        margin: 0 0 12px !important;

        padding: 0 14px !important;

        border-radius: 13px !important;

        border:
            1px solid rgba(198,166,107,.36) !important;

        background:
            linear-gradient(
                135deg,
                rgba(198,166,107,.15),
                rgba(198,166,107,.05)
            ) !important;

        color: #f5f5f3 !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        cursor: pointer !important;
    }

    .sidebar .new-chat-btn span:first-child {
        color: #d9bc78 !important;

        font-size: 20px !important;

        line-height: 1 !important;
    }


    /* ---------- SEARCH ---------- */

    .sidebar-search {
        width: 100% !important;

        margin: 0 !important;
    }

    .sidebar-search input {
        width: 100% !important;

        height: 42px !important;

        box-sizing: border-box !important;

        border-radius: 12px !important;

        border:
            1px solid rgba(255,255,255,.08) !important;

        outline: none !important;

        background:
            rgba(255,255,255,.045) !important;

        color: #f5f5f3 !important;

        padding: 0 13px !important;

        font-size: 12px !important;
    }

    .sidebar-search input::placeholder {
        color: rgba(245,245,243,.36) !important;
    }

    .sidebar-search input:focus {
        border-color:
            rgba(198,166,107,.42) !important;
    }


    /* ---------- SIDEBAR GROUPS ---------- */

    .sidebar-group {
        flex: 0 0 auto !important;

        padding:
            12px 14px 0 !important;
    }

    .sidebar-group h4 {
        margin:
            0 4px 9px !important;

        color:
            rgba(198,166,107,.72) !important;

        font-size: 9px !important;

        letter-spacing: 1.8px !important;

        font-weight: 700 !important;
    }


    /* ---------- HISTORY ---------- */

    .history-list {
        display: flex !important;

        flex-direction: column !important;

        gap: 3px !important;
    }

    .history-item {
        width: 100% !important;

        min-height: 56px !important;

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        box-sizing: border-box !important;

        padding: 9px 8px 9px 10px !important;

        border-radius: 11px !important;

        background: transparent !important;

        color: #f5f5f3 !important;

        cursor: pointer !important;
    }

    .history-item:hover {
        background:
            rgba(255,255,255,.055) !important;
    }

    .history-item-content {
        flex: 1 1 auto !important;

        min-width: 0 !important;
    }

    .history-title {
        color: rgba(245,245,243,.88) !important;

        font-size: 12px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }

    .history-preview {
        margin-top: 3px !important;

        color: rgba(245,245,243,.36) !important;

        font-size: 10px !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }

    .history-time {
        margin-top: 3px !important;

        color: rgba(245,245,243,.25) !important;

        font-size: 9px !important;
    }

    .history-delete {
        flex: 0 0 auto !important;

        width: 28px !important;
        height: 28px !important;

        border: 0 !important;

        background: transparent !important;

        color: rgba(245,245,243,.3) !important;

        border-radius: 8px !important;
    }


    /* ---------- WORKSPACE NAV ---------- */

    .sidebar .sidebar-group:not(.recent-group) {
        padding-top: 18px !important;
    }


    /* ---------- FOOTER ---------- */

    .sidebar-footer {
        margin-top: auto !important;

        flex: 0 0 auto !important;

        padding:
            14px 14px
            calc(14px + env(safe-area-inset-bottom)) !important;

        border-top:
            1px solid rgba(255,255,255,.06) !important;

        background:
            rgba(0,0,0,.12) !important;
    }


    /* ---------- PREVENT BACKGROUND SCROLL ---------- */

    body.ap-mobile-nav-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

}
/* =========================================================
   AP SYNAPSE — FINAL MOBILE NAVIGATION SYSTEM
   Single source of truth
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- PAGE FOUNDATION ---------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow-x: hidden !important;
    }

    body {
        position: relative;
    }

    .app {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }


    /* =====================================================
       MENU BUTTON
       ===================================================== */

    button.mobile-menu-button {
        position: fixed !important;

        top: max(14px, env(safe-area-inset-top)) !important;
        left: 14px !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        z-index: 2147483647 !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        border: 1px solid rgba(198,166,107,.48) !important;
        border-radius: 14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(31,34,39,.98),
                rgba(12,14,18,.98)
            ) !important;

        color: #f5f5f3 !important;

        font-size: 24px !important;
        line-height: 1 !important;

        box-shadow:
            0 12px 35px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.06) !important;

        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;

        cursor: pointer !important;
        touch-action: manipulation !important;

        transform: none !important;

        transition:
            transform .18s ease,
            border-color .18s ease,
            background .18s ease !important;
    }

    button.mobile-menu-button:active {
        transform: scale(.94) !important;
    }


    /* =====================================================
       OVERLAY
       IMPORTANT:
       BELOW SIDEBAR
       ABOVE MAIN APP
       ===================================================== */

    .mobile-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        z-index: 2147483645 !important;

        background: rgba(0,0,0,.48) !important;

        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            opacity .25s ease,
            visibility .25s ease !important;
    }

    .mobile-sidebar-overlay.active,
    .mobile-sidebar-overlay.ap-mobile-open,
    .mobile-sidebar-overlay.visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* =====================================================
       SIDEBAR
       ===================================================== */

    aside.sidebar,
    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(326px, 88vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        box-sizing: border-box !important;

        z-index: 2147483646 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        visibility: hidden !important;
        opacity: 1 !important;

        pointer-events: none !important;

        transform: translate3d(-105%,0,0) !important;

        background:
            linear-gradient(
                180deg,
                rgba(19,22,27,.995) 0%,
                rgba(12,14,18,.995) 100%
            ) !important;

        border-right: 1px solid rgba(198,166,107,.22) !important;

        box-shadow:
            20px 0 70px rgba(0,0,0,.58) !important;

        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;

        transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            visibility .28s ease !important;
    }


    /* ALL YOUR EXISTING OPEN STATES */
    .sidebar.mobile-open,
    .sidebar.ap-mobile-open {
        transform: translate3d(0,0,0) !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* =====================================================
       SIDEBAR HEADER
       ===================================================== */

    .sidebar-header {
        flex: 0 0 auto !important;

        width: 100% !important;

        padding:
            76px
            18px
            18px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       BRAND
       ===================================================== */

    .sidebar .brand {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 12px !important;

        margin-bottom: 18px !important;
    }

    .sidebar .brand-mark {
        flex: 0 0 42px !important;

        width: 42px !important;
        height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 13px !important;

        border: 1px solid rgba(198,166,107,.4) !important;

        background:
            linear-gradient(
                145deg,
                rgba(198,166,107,.16),
                rgba(198,166,107,.04)
            ) !important;

        color: #c6a66b !important;

        font-weight: 700 !important;
        letter-spacing: .5px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    .sidebar .brand-text {
        min-width: 0 !important;
    }

    .sidebar .brand-text h2 {
        margin: 0 !important;

        color: #f5f5f3 !important;

        font-size: 17px !important;
        line-height: 1.2 !important;
        font-weight: 650 !important;
    }

    .sidebar .brand-text span {
        display: block !important;

        margin-top: 4px !important;

        color: rgba(245,245,243,.48) !important;

        font-size: 10px !important;

        letter-spacing: .8px !important;
    }


    /* =====================================================
       NEW CHAT
       ===================================================== */

    .sidebar .new-chat-btn {
        width: 100% !important;

        min-height: 48px !important;

        margin: 0 0 14px !important;

        border-radius: 14px !important;

        border: 1px solid rgba(198,166,107,.30) !important;

        background:
            linear-gradient(
                145deg,
                rgba(198,166,107,.13),
                rgba(198,166,107,.04)
            ) !important;

        color: #f5f5f3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 9px !important;

        font-size: 13px !important;
        font-weight: 600 !important;

        cursor: pointer !important;
    }


    /* =====================================================
       SEARCH
       ===================================================== */

    .sidebar .sidebar-search {
        width: 100% !important;

        margin: 0 !important;
    }

    .sidebar .sidebar-search input {
        width: 100% !important;
        height: 44px !important;

        box-sizing: border-box !important;

        border-radius: 13px !important;

        border: 1px solid rgba(255,255,255,.08) !important;

        outline: none !important;

        background: rgba(255,255,255,.045) !important;

        color: #f5f5f3 !important;

        padding: 0 14px !important;

        font-size: 12px !important;
    }

    .sidebar .sidebar-search input::placeholder {
        color: rgba(245,245,243,.38) !important;
    }


    /* =====================================================
       SIDEBAR GROUPS
       ===================================================== */

    .sidebar-group {
        width: 100% !important;

        box-sizing: border-box !important;

        padding:
            0
            14px !important;
    }

    .sidebar-group h4 {
        margin: 10px 4px 10px !important;

        color: rgba(198,166,107,.75) !important;

        font-size: 9px !important;

        letter-spacing: 1.8px !important;
    }


    /* =====================================================
       HISTORY
       ===================================================== */

    .history-list {
        width: 100% !important;
    }

    .history-item {
        width: 100% !important;

        box-sizing: border-box !important;

        display: flex !important;

        gap: 8px !important;

        padding: 12px !important;

        margin-bottom: 7px !important;

        border-radius: 13px !important;

        border: 1px solid rgba(255,255,255,.055) !important;

        background: rgba(255,255,255,.025) !important;

        color: #f5f5f3 !important;
    }

    .history-item-content {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .history-title {
        color: #f5f5f3 !important;

        font-size: 12px !important;
        line-height: 1.35 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .history-preview {
        margin-top: 4px !important;

        color: rgba(245,245,243,.43) !important;

        font-size: 10px !important;
        line-height: 1.4 !important;

        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;

        overflow: hidden !important;
    }

    .history-time {
        margin-top: 5px !important;

        color: rgba(245,245,243,.28) !important;

        font-size: 9px !important;
    }

    .history-delete {
        flex: 0 0 28px !important;

        width: 28px !important;
        height: 28px !important;

        border: 0 !important;

        background: transparent !important;

        color: rgba(245,245,243,.4) !important;

        border-radius: 8px !important;
    }


    /* =====================================================
       SIDEBAR FOOTER
       ===================================================== */

    .sidebar-footer {
        margin-top: auto !important;

        flex: 0 0 auto !important;

        padding:
            16px !important;
    }


    /* =====================================================
       MAIN WORKSPACE
       ===================================================== */

    .workspace {
        width: 100% !important;
        max-width: 100vw !important;

        height: 100dvh !important;

        padding:
            76px
            14px
            calc(90px + env(safe-area-inset-bottom))
            14px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    .workspace-content {
        width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;
    }

    .conversation {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* =====================================================
       COMMAND BAR
       ===================================================== */

    .command-section {
        position: fixed !important;

        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;

        z-index: 2147483644 !important;
    }


    /* =====================================================
       OPEN STATE
       ===================================================== */

    body.ap-mobile-nav-open {
        overflow: hidden !important;
        touch-action: none !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE NAVIGATION / SIDEBAR
   LAST OVERRIDE — DO NOT MODIFY
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- MOBILE NAV BUTTON ---------- */

    button.mobile-menu-button {
        position: fixed !important;
        top: calc(12px + env(safe-area-inset-top)) !important;
        left: 12px !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 2147483647 !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        box-sizing: border-box !important;

        border: 1px solid rgba(198,166,107,.55) !important;
        border-radius: 14px !important;

        background:
            linear-gradient(
                145deg,
                rgba(30,33,39,.98),
                rgba(12,14,18,.98)
            ) !important;

        color: #f5f5f3 !important;

        font-size: 23px !important;
        line-height: 1 !important;

        box-shadow:
            0 12px 34px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.06) !important;

        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;

        cursor: pointer !important;
        touch-action: manipulation !important;

        transform: none !important;
    }

    button.mobile-menu-button:active {
        transform: scale(.94) !important;
    }


    /* ---------- OVERLAY ---------- */

    .mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        background: rgba(0,0,0,.52) !important;

        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 2147483645 !important;

        transition:
            opacity .22s ease,
            visibility .22s ease !important;
    }

    .mobile-sidebar-overlay.active,
    .mobile-sidebar-overlay.visible,
    .mobile-sidebar-overlay.ap-mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* ---------- SIDEBAR ---------- */

    aside.sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(326px, 88vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        box-sizing: border-box !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background:
            linear-gradient(
                180deg,
                rgba(20,23,28,.995) 0%,
                rgba(12,14,18,.995) 100%
            ) !important;

        color: #f5f5f3 !important;

        border-right: 1px solid rgba(198,166,107,.22) !important;

        box-shadow:
            22px 0 70px rgba(0,0,0,.62) !important;

        transform: translateX(-110%) !important;

        visibility: hidden !important;
        opacity: 1 !important;

        pointer-events: none !important;

        z-index: 2147483646 !important;

        transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            visibility .28s linear !important;
    }


    /* ALL POSSIBLE OPEN STATES USED BY YOUR JS */

    aside.sidebar.mobile-open,
    aside.sidebar.ap-mobile-open {
        transform: translateX(0) !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        z-index: 2147483646 !important;
    }


    /* ---------- SIDEBAR HEADER ---------- */

    .sidebar-header {
        flex: 0 0 auto !important;

        width: 100% !important;

        padding:
            calc(74px + env(safe-area-inset-top))
            18px
            16px !important;

        box-sizing: border-box !important;

        background:
            linear-gradient(
                180deg,
                rgba(25,28,34,.98),
                rgba(18,20,25,.94)
            ) !important;

        border-bottom: 1px solid rgba(198,166,107,.12) !important;
    }


    /* ---------- BRAND ---------- */

    .sidebar .brand {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 12px !important;

        margin: 0 0 16px !important;
    }

    .sidebar .brand-mark {
        flex: 0 0 42px !important;

        width: 42px !important;
        height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;

        background:
            linear-gradient(
                145deg,
                #c6a66b,
                #9d7d42
            ) !important;

        color: #111 !important;

        font-weight: 800 !important;
        font-size: 14px !important;

        box-shadow:
            0 8px 25px rgba(198,166,107,.18) !important;
    }

    .sidebar .brand-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .sidebar .brand-text h2 {
        margin: 0 !important;

        color: #f5f5f3 !important;

        font-size: 17px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sidebar .brand-text span {
        display: block !important;

        margin-top: 4px !important;

        color: rgba(245,245,243,.52) !important;

        font-size: 10px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* ---------- NEW CHAT ---------- */

    .sidebar .new-chat-btn {
        width: 100% !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 9px !important;

        margin: 0 0 12px !important;

        padding: 0 14px !important;

        border: 1px solid rgba(198,166,107,.35) !important;
        border-radius: 13px !important;

        background: rgba(198,166,107,.10) !important;

        color: #f5f5f3 !important;

        font-size: 13px !important;
        font-weight: 600 !important;

        cursor: pointer !important;
    }

    .sidebar .new-chat-btn:hover {
        background: rgba(198,166,107,.17) !important;
        border-color: rgba(198,166,107,.55) !important;
    }


    /* ---------- SEARCH ---------- */

    .sidebar-search {
        width: 100% !important;
    }

    .sidebar-search input {
        width: 100% !important;
        height: 42px !important;

        box-sizing: border-box !important;

        padding: 0 13px !important;

        border: 1px solid rgba(255,255,255,.09) !important;
        border-radius: 11px !important;

        outline: none !important;

        background: rgba(255,255,255,.055) !important;

        color: #f5f5f3 !important;

        font-size: 12px !important;
    }

    .sidebar-search input::placeholder {
        color: rgba(245,245,243,.38) !important;
    }


    /* ---------- GROUPS ---------- */

    .sidebar-group {
        width: 100% !important;

        box-sizing: border-box !important;

        padding:
            16px 14px 0 !important;
    }

    .sidebar-group h4 {
        margin:
            0 0 9px 3px !important;

        color: rgba(198,166,107,.78) !important;

        font-size: 9px !important;

        letter-spacing: 1.7px !important;

        font-weight: 700 !important;
    }


    /* ---------- HISTORY ---------- */

    .history-list {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 5px !important;
    }

    .history-item {
        width: 100% !important;

        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;

        padding: 10px !important;

        border: 1px solid transparent !important;
        border-radius: 11px !important;

        background: rgba(255,255,255,.025) !important;
    }

    .history-item:hover {
        background: rgba(255,255,255,.055) !important;
        border-color: rgba(198,166,107,.12) !important;
    }

    .history-item-content {
        flex: 1 1 auto !important;

        min-width: 0 !important;
        overflow: hidden !important;
    }

    .history-title,
    .history-preview {
        overflow: hidden !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;
    }

    .history-title {
        color: #f5f5f3 !important;

        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .history-preview {
        margin-top: 3px !important;

        color: rgba(245,245,243,.42) !important;

        font-size: 9px !important;
    }

    .history-time {
        margin-top: 4px !important;

        color: rgba(245,245,243,.28) !important;

        font-size: 8px !important;
    }

    .history-delete {
        flex: 0 0 28px !important;

        width: 28px !important;
        height: 28px !important;

        margin-left: 6px !important;

        border: 0 !important;
        border-radius: 8px !important;

        background: transparent !important;

        color: rgba(245,245,243,.42) !important;

        cursor: pointer !important;
    }


    /* ---------- WORKSPACE MENU ---------- */

    .sidebar .sidebar-group button,
    .sidebar .sidebar-group a {
        max-width: 100% !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;
    }


    /* ---------- FOOTER ---------- */

    .sidebar-footer {
        flex: 0 0 auto !important;

        width: 100% !important;

        margin-top: auto !important;

        box-sizing: border-box !important;

        padding:
            14px
            14px
            calc(14px + env(safe-area-inset-bottom)) !important;

        border-top: 1px solid rgba(255,255,255,.07) !important;

        background: rgba(8,10,13,.42) !important;
    }


    /* ---------- PREVENT BLACK/INVISIBLE CONTENT ---------- */

    .sidebar *,
    .sidebar *::before,
    .sidebar *::after {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sidebar h1,
    .sidebar h2,
    .sidebar h3,
    .sidebar h4,
    .sidebar h5,
    .sidebar p,
    .sidebar span,
    .sidebar button,
    .sidebar a,
    .sidebar input {
        visibility: visible !important;
    }


    /* ---------- BODY ---------- */

    body.ap-mobile-nav-open {
        overflow: hidden !important;
        touch-action: none !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR VISIBILITY FIX
   Put this at the VERY BOTTOM of the main CSS file.
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- MOBILE NAV BUTTON ---------- */

    button.mobile-menu-button {
        position: fixed !important;
        top: calc(12px + env(safe-area-inset-top)) !important;
        left: 12px !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 2147483647 !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        background: rgba(17,20,24,.98) !important;
        color: #f5f5f3 !important;

        border: 1px solid rgba(198,166,107,.55) !important;
        border-radius: 14px !important;

        font-size: 24px !important;
        line-height: 1 !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.06) !important;

        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }


    /* ---------- DARK OVERLAY ---------- */

    .mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        display: block !important;

        background: rgba(0,0,0,.55) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        z-index: 2147483640 !important;

        transition:
            opacity .22s ease,
            visibility .22s ease !important;
    }

    .mobile-sidebar-overlay.active,
    .mobile-sidebar-overlay.visible,
    .mobile-sidebar-overlay.ap-mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* =====================================================
       SIDEBAR ITSELF
       ===================================================== */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(320px, 86vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        display: flex !important;
        flex-direction: column !important;

        /* IMPORTANT:
           Don't use an almost-black transparent background.
           This was making the contents look invisible. */

        background:
            linear-gradient(
                180deg,
                rgba(25,28,34,.99) 0%,
                rgba(16,18,23,.99) 55%,
                rgba(11,13,17,.99) 100%
            ) !important;

        color: #f5f5f3 !important;

        border-right: 1px solid rgba(198,166,107,.24) !important;

        box-shadow:
            18px 0 70px rgba(0,0,0,.60) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;

        transform: translateX(-110%) !important;

        visibility: hidden !important;
        opacity: 1 !important;
        pointer-events: none !important;

        z-index: 2147483645 !important;

        transition:
            transform .28s cubic-bezier(.22,.61,.36,1),
            visibility .28s linear !important;
    }


    /* ALL states your existing JS may use */

    .sidebar.mobile-open,
    .sidebar.ap-mobile-open {
        transform: translateX(0) !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }


    /* ---------- SIDEBAR HEADER ---------- */

    .sidebar-header {
        flex: 0 0 auto !important;

        display: block !important;

        padding:
            calc(76px + env(safe-area-inset-top))
            18px
            18px !important;

        color: #f5f5f3 !important;
    }


    /* ---------- BRAND ---------- */

    .sidebar .brand {
        display: flex !important;
        align-items: center !important;

        gap: 12px !important;

        width: 100% !important;
        min-width: 0 !important;

        color: #f5f5f3 !important;
    }

    .sidebar .brand-mark {
        flex: 0 0 44px !important;

        width: 44px !important;
        height: 44px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background:
            linear-gradient(
                145deg,
                #c6a66b,
                #9e814b
            ) !important;

        color: #101114 !important;

        border-radius: 13px !important;

        font-weight: 800 !important;
    }

    .sidebar .brand-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .sidebar .brand-text h2 {
        margin: 0 !important;

        color: #f5f5f3 !important;

        font-size: 17px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .sidebar .brand-text span {
        display: block !important;

        margin-top: 4px !important;

        color: rgba(245,245,243,.58) !important;

        font-size: 10px !important;
        line-height: 1.3 !important;
    }


    /* ---------- NEW CHAT ---------- */

    .sidebar .new-chat-btn {
        width: 100% !important;

        min-height: 46px !important;

        margin-top: 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        color: #111318 !important;

        background:
            linear-gradient(
                135deg,
                #d7bd82,
                #b49355
            ) !important;

        border: none !important;
        border-radius: 13px !important;

        font-size: 13px !important;
        font-weight: 700 !important;
    }


    /* ---------- SEARCH ---------- */

    .sidebar .sidebar-search {
        width: 100% !important;

        margin-top: 12px !important;
    }

    .sidebar .sidebar-search input {
        width: 100% !important;
        min-width: 0 !important;

        height: 42px !important;

        padding: 0 13px !important;

        background: rgba(255,255,255,.055) !important;

        color: #f5f5f3 !important;

        border: 1px solid rgba(255,255,255,.09) !important;
        border-radius: 11px !important;

        outline: none !important;
    }

    .sidebar .sidebar-search input::placeholder {
        color: rgba(245,245,243,.42) !important;
    }


    /* ---------- SIDEBAR GROUPS ---------- */

    .sidebar-group {
        flex: 0 0 auto !important;

        display: block !important;

        padding:
            8px 14px
            10px !important;

        color: #f5f5f3 !important;
    }

    .sidebar-group h4 {
        display: block !important;

        margin: 8px 4px !important;

        color: rgba(245,245,243,.42) !important;

        font-size: 9px !important;
        font-weight: 700 !important;

        letter-spacing: 1.6px !important;
    }


    /* ---------- HISTORY ---------- */

    .history-list {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
    }

    .history-item {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        padding: 11px !important;

        margin-bottom: 5px !important;

        background: rgba(255,255,255,.035) !important;

        border: 1px solid rgba(255,255,255,.055) !important;

        border-radius: 11px !important;

        color: #f5f5f3 !important;
    }

    .history-item-content {
        min-width: 0 !important;
        flex: 1 1 auto !important;

        overflow: hidden !important;
    }

    .history-title {
        color: #f5f5f3 !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .history-preview {
        margin-top: 3px !important;

        color: rgba(245,245,243,.48) !important;

        font-size: 10px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .history-time {
        margin-top: 4px !important;

        color: rgba(245,245,243,.30) !important;

        font-size: 9px !important;
    }

    .history-delete {
        flex: 0 0 auto !important;

        color: rgba(245,245,243,.45) !important;

        background: transparent !important;

        border: 0 !important;
    }


    /* ---------- WORKSPACE NAVIGATION ---------- */

    .sidebar .nav-item,
    .sidebar .sidebar-item,
    .sidebar a,
    .sidebar button {
        color: #f5f5f3 !important;
    }

    .sidebar .nav-item,
    .sidebar .sidebar-item {
        width: 100% !important;
        min-height: 44px !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 12px !important;

        margin: 3px 0 !important;

        border-radius: 11px !important;

        background: transparent !important;
    }

    .sidebar .nav-item:hover,
    .sidebar .sidebar-item:hover {
        background: rgba(255,255,255,.06) !important;
    }


    /* ---------- FOOTER ---------- */

    .sidebar-footer {
        flex: 0 0 auto !important;

        margin-top: auto !important;

        padding:
            14px
            14px
            calc(14px + env(safe-area-inset-bottom)) !important;

        color: #f5f5f3 !important;

        border-top: 1px solid rgba(255,255,255,.06) !important;
    }


    /* ---------- PREVENT MAIN APP FROM COVERING SIDEBAR ---------- */

    .app,
    .workspace,
    .workspace-content,
    main {
        min-width: 0 !important;
        max-width: 100vw !important;
    }

    body.ap-mobile-nav-open {
        overflow: hidden !important;
        touch-action: none !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE SIDEBAR FINAL OVERLAY FIX
   ========================================================= */

@media (max-width: 767px) {

    /* Keep the actual application visible underneath */
    .mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        background: rgba(5, 7, 10, 0.28) !important;

        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        z-index: 20000 !important;
    }

    .mobile-sidebar-overlay.active,
    .mobile-sidebar-overlay.visible,
    .mobile-sidebar-overlay.ap-mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* Sidebar stays above the overlay */
    .sidebar {
        z-index: 20001 !important;

        background:
            linear-gradient(
                180deg,
                rgba(24, 27, 33, 0.995) 0%,
                rgba(17, 19, 24, 0.995) 100%
            ) !important;

        color: #f5f5f3 !important;
    }


    /* Make sidebar text unquestionably readable */
    .sidebar,
    .sidebar * {
        text-shadow: none !important;
    }

    .sidebar .brand-text h2,
    .sidebar .brand-text span,
    .sidebar h4,
    .sidebar .history-title,
    .sidebar .history-preview,
    .sidebar .history-time,
    .sidebar .nav-item,
    .sidebar .sidebar-item,
    .sidebar a,
    .sidebar button {
        opacity: 1 !important;
    }


    /* Keep main application visible */
    .app,
    .workspace,
    .workspace-content,
    .conversation {
        opacity: 1 !important;
        filter: none !important;
    }


    /* Mobile menu button remains above everything */
    .mobile-menu-button {
        z-index: 20002 !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR VISIBILITY FIX
   ========================================================= */

@media (max-width: 767px) {

    .mobile-sidebar-overlay.active,
    .mobile-sidebar-overlay.visible,
    .mobile-sidebar-overlay.ap-mobile-open {

        /* Keep the application clearly visible */
        background: rgba(0, 0, 0, 0.16) !important;

        /* NO heavy blur */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        z-index: 20000 !important;
    }

    /* Sidebar itself stays crisp and completely above overlay */
    .sidebar {
        z-index: 20001 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sidebar * {
        opacity: 1 !important;
    }

    /* Prevent the actual application from being darkened */
    .app,
    .workspace,
    .workspace-content,
    .conversation {
        filter: none !important;
        opacity: 1 !important;
    }

    .mobile-menu-button {
        z-index: 20002 !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE SIDEBAR LABELS
   Keep icons + show full navigation names
   ========================================================= */

@media (max-width: 767px) {

    /* Sidebar navigation containers */
    .sidebar .nav-item,
    .sidebar .sidebar-item,
    .sidebar .workspace-item,
    .sidebar .menu-item,
    .sidebar a {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        justify-content: flex-start !important;

        gap: 12px !important;

        padding: 11px 13px !important;
        margin: 2px 0 !important;

        border-radius: 12px !important;

        color: #f5f5f3 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }

    /* Navigation text */
    .sidebar .nav-item span,
    .sidebar .sidebar-item span,
    .sidebar .workspace-item span,
    .sidebar .menu-item span,
    .sidebar a span {
        display: inline-flex !important;

        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        max-width: none !important;

        overflow: visible !important;

        color: #f5f5f3 !important;

        font-size: 14px !important;
        line-height: 1.3 !important;

        white-space: nowrap !important;
        text-overflow: clip !important;
    }

    /* Icons */
    .sidebar .nav-item svg,
    .sidebar .sidebar-item svg,
    .sidebar .workspace-item svg,
    .sidebar .menu-item svg,
    .sidebar a svg,
    .sidebar .nav-item i,
    .sidebar .sidebar-item i,
    .sidebar .workspace-item i,
    .sidebar .menu-item i {
        flex: 0 0 20px !important;

        width: 20px !important;
        height: 20px !important;

        display: inline-flex !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Sidebar section headings */
    .sidebar h4 {
        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        color: rgba(245,245,243,.55) !important;

        font-size: 10px !important;
        letter-spacing: 1.8px !important;

        margin: 18px 8px 8px !important;
    }

    /* Don't allow a mobile rule to collapse sidebar text */
    .sidebar .nav-label,
    .sidebar .item-label,
    .sidebar .menu-label,
    .sidebar .workspace-label {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        max-width: none !important;
        overflow: visible !important;

        color: #f5f5f3 !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR NAVIGATION
   Exact navigation IDs from AP Synapse HTML
   ========================================================= */

@media (max-width: 767px) {

    /* Navigation links */
    .sidebar #assistantBtn,
    .sidebar #projectsBtn,
    .sidebar #knowledgeBtn,
    .sidebar #documentsBtn,
    .sidebar #automationBtn,
    .sidebar #codeStudioBtn,
    .sidebar #canvasBtn,
    .sidebar #settingsSidebarBtn,
    .sidebar #profileSidebarBtn {

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;

        padding: 0 14px !important;
        margin: 3px 0 !important;

        box-sizing: border-box !important;

        color: #f5f5f3 !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 46px !important;

        text-align: left !important;
        text-decoration: none !important;

        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;

        opacity: 1 !important;
        visibility: visible !important;

        border-radius: 12px !important;

        position: relative !important;
        z-index: 2 !important;
    }

    /* Make the actual text itself impossible to collapse */
    .sidebar #assistantBtn::after,
    .sidebar #projectsBtn::after,
    .sidebar #knowledgeBtn::after,
    .sidebar #documentsBtn::after,
    .sidebar #automationBtn::after,
    .sidebar #codeStudioBtn::after,
    .sidebar #canvasBtn::after,
    .sidebar #settingsSidebarBtn::after,
    .sidebar #profileSidebarBtn::after {

        display: none !important;
        content: none !important;
    }

    /* Hover / active states */
    .sidebar #assistantBtn:hover,
    .sidebar #projectsBtn:hover,
    .sidebar #knowledgeBtn:hover,
    .sidebar #documentsBtn:hover,
    .sidebar #automationBtn:hover,
    .sidebar #codeStudioBtn:hover,
    .sidebar #canvasBtn:hover,
    .sidebar #settingsSidebarBtn:hover,
    .sidebar #profileSidebarBtn:hover {

        background: rgba(198,166,107,0.10) !important;
        color: #ffffff !important;
    }

    /* Sidebar navigation area */
    .sidebar .sidebar-group {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* Keep sidebar text readable */
    .sidebar,
    .sidebar * {
        text-rendering: optimizeLegibility !important;
    }

    /* Keep the sidebar itself clean and premium */
    .sidebar {
        color: #f5f5f3 !important;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR SCROLL
   ========================================================= */

@media (max-width: 767px) {

    .sidebar {
        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;

        scrollbar-width: thin;
    }

    .sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(198, 166, 107, 0.45);
        border-radius: 999px;
    }

    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(198, 166, 107, 0.7);
    }

    .sidebar-header,
    .sidebar-group,
    .sidebar-footer {
        min-width: 0 !important;
    }

    .sidebar-footer {
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR SCROLL FIX
   Does not affect desktop layout.
   ============================================================ */

@media (max-width: 767px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    body.ap-mobile-nav-open {
        overflow: hidden !important;
    }

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(326px, 88vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        display: flex !important;
        flex-direction: column !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;

        touch-action: pan-y !important;

        scrollbar-width: thin;

        box-sizing: border-box !important;
    }

    /* Keep the sidebar's internal content naturally scrollable */
    .sidebar-header,
    .sidebar-group,
    .sidebar-footer {
        flex: 0 0 auto !important;
        min-height: max-content !important;
    }

    .sidebar-group {
        overflow: visible !important;
    }

    .sidebar-group .history-list {
        overflow: visible !important;
        max-height: none !important;
    }

    /* Don't let footer consume the scroll area */
    .sidebar-footer {
        margin-top: 0 !important;
    }

    /* Every navigation item remains fully readable */
    .sidebar a,
    .sidebar button {
        flex-shrink: 0 !important;
    }

    /* Prevent long labels from getting clipped */
    .sidebar a {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Better touch scrolling */
    .sidebar * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Overlay must never steal scrolling from the sidebar */
    .mobile-sidebar-overlay {
        touch-action: auto !important;
    }

    /* Mobile menu button stays above everything */
    .mobile-menu-button {
        position: fixed !important;
        z-index: 2147483647 !important;
    }
}

@media (max-width: 767px) {

    .sidebar {
        overflow-y: scroll !important;
        overflow-x: hidden !important;

        touch-action: auto !important;
        -webkit-overflow-scrolling: touch !important;

        overscroll-behavior: contain !important;
        scroll-behavior: auto !important;

        pointer-events: auto !important;
    }

    .sidebar * {
        touch-action: auto !important;
    }

    .sidebar a,
    .sidebar button,
    .sidebar input {
        touch-action: manipulation !important;
    }

    .mobile-sidebar-overlay {
        pointer-events: auto !important;
    }
}

/* =================================================
   AP SYNAPSE — PREMIUM MOBILE SIDEBAR LAYER
   Sidebar ALWAYS above backdrop
   ================================================= */

.mobile-sidebar-overlay {

    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    background: rgba(0, 0, 0, 0.42) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    z-index: 9000 !important;

    transition:
        opacity 220ms ease,
        visibility 220ms ease !important;
}

.mobile-sidebar-overlay.ap-sidebar-visible {

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* =================================================
   SIDEBAR — ABOVE EVERYTHING
   ================================================= */

aside.sidebar {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: min(326px, 88vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    z-index: 10000 !important;

    isolation: isolate !important;

    background:
        linear-gradient(
            180deg,
            #16181d 0%,
            #101216 48%,
            #0c0e12 100%
        ) !important;

    opacity: 1 !important;

    filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    transform:
        translate3d(-105%, 0, 0) !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        transform 280ms cubic-bezier(.22,.61,.36,1),
        visibility 280ms ease !important;
}


/* =================================================
   OPEN SIDEBAR
   ================================================= */

aside.sidebar.ap-sidebar-open {

    transform:
        translate3d(0, 0, 0) !important;

    visibility: visible !important;

    pointer-events: auto !important;

    opacity: 1 !important;

    filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR TOUCH / SCROLL FIX
   Put this AFTER every other mobile CSS rule
   ========================================================= */

@media (max-width: 767px) {

    /* Overlay stays behind the sidebar and cannot steal
       scrolling gestures from the sidebar */
    .mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 20000 !important;
        pointer-events: none !important;
    }

    .mobile-sidebar-overlay.active,
    .mobile-sidebar-overlay.ap-mobile-open,
    .mobile-sidebar-overlay.visible {
        pointer-events: none !important;
    }

    /* Sidebar is always above overlay */
    .sidebar,
    .sidebar.mobile-open,
    .sidebar.ap-mobile-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;

        width: min(326px, 88vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        z-index: 20001 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;

        touch-action: pan-y !important;

        pointer-events: auto !important;

        scrollbar-width: thin;

        /* Keep the premium AP Synapse appearance */
        background:
            linear-gradient(
                180deg,
                rgba(20,22,27,.995),
                rgba(10,12,16,.995)
            ) !important;

        box-sizing: border-box !important;
    }

    /* Sidebar content must not block the scrolling container */
    .sidebar * {
        touch-action: auto;
    }

    .sidebar-header,
    .sidebar-group,
    .sidebar-footer {
        flex-shrink: 0 !important;
    }

    /* Navigation links remain fully clickable */
    .sidebar a,
    .sidebar button,
    .sidebar input {
        pointer-events: auto !important;
    }

    /* Keep hamburger above everything */
    .mobile-menu-button {
        position: fixed !important;
        z-index: 20002 !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR
   Permanent production layout
   Desktop remains untouched
   ========================================================= */

@media (max-width: 767px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .app {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  /* ---------- MOBILE MENU ---------- */

  button.mobile-menu-button {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top)) !important;
    left: 12px !important;

    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 20002 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(198,166,107,.45) !important;
    border-radius: 15px !important;

    background: rgba(14,16,20,.96) !important;
    color: #f5f5f3 !important;

    font-size: 24px !important;
    line-height: 1 !important;

    box-shadow:
      0 10px 35px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.04) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    touch-action: manipulation !important;
  }

  /* ---------- OVERLAY ---------- */

  .mobile-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    z-index: 19999 !important;

    background: rgba(0,0,0,.48) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;

    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;

    transition:
      opacity .22s ease,
      visibility .22s ease !important;
  }

  .mobile-sidebar-overlay.active,
  .mobile-sidebar-overlay.ap-mobile-open,
  .mobile-sidebar-overlay.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  /* ---------- SIDEBAR ---------- */

  .sidebar,
  .sidebar.mobile-open,
  .sidebar.ap-mobile-open {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    width: min(326px, 88vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box !important;

    z-index: 20001 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;

    pointer-events: auto !important;

    background:
      linear-gradient(
        180deg,
        rgba(20,22,27,.995),
        rgba(10,12,16,.995)
      ) !important;

    border-right: 1px solid rgba(198,166,107,.20) !important;

    box-shadow:
      18px 0 60px rgba(0,0,0,.55) !important;

    transition:
      transform .28s cubic-bezier(.22,.61,.36,1),
      visibility .28s linear !important;
  }

  /* Closed state */
  .sidebar {
    transform: translateX(-105%) !important;
    visibility: hidden !important;
  }

  /* Open state */
  .sidebar.mobile-open,
  .sidebar.ap-mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* ---------- SIDEBAR HEADER ---------- */

  .sidebar-header {
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding:
      calc(74px + env(safe-area-inset-top))
      18px
      16px !important;
  }

  /* ---------- RECENT ---------- */

  .recent-group {
    position: relative !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    height: auto !important;
    max-height: 220px !important;
    min-height: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    z-index: 1 !important;
  }

  .history-list {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    height: auto !important;
    max-height: 165px !important;

    flex: 0 1 auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;

    box-sizing: border-box !important;

    z-index: 1 !important;
  }

  .history-item {
    position: relative !important;
    z-index: 1 !important;

    flex: 0 0 auto !important;

    width: 100% !important;
    box-sizing: border-box !important;

    pointer-events: auto !important;
  }

  /* ---------- WORKSPACE NAVIGATION ---------- */

  .sidebar-group:not(.recent-group) {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    flex: 0 0 auto !important;

    box-sizing: border-box !important;

    z-index: 20 !important;

    pointer-events: auto !important;
  }

  .sidebar-group:not(.recent-group) a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 46px !important;

    box-sizing: border-box !important;

    z-index: 100 !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* ---------- FOOTER ---------- */

  .sidebar-footer {
    position: relative !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    margin-top: auto !important;

    padding:
      14px
      14px
      calc(14px + env(safe-area-inset-bottom)) !important;

    box-sizing: border-box !important;

    z-index: 20 !important;
  }

  /* ---------- WORKSPACE ---------- */

  .workspace {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    height: 100dvh !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    padding:
      calc(74px + env(safe-area-inset-top))
      14px
      calc(92px + env(safe-area-inset-bottom))
      14px !important;
  }

  .workspace-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    flex: 1 1 auto !important;

    overflow: hidden !important;
  }

  /* ---------- MOBILE NAV OPEN BODY ---------- */

  body.ap-mobile-nav-open {
    overflow: hidden !important;
    touch-action: none !important;
  }
}

/* =========================================================
   AP SYNAPSE — SIDEBAR STRUCTURE FIX
   Keeps History and Navigation completely separated
   ========================================================= */

.sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Every major sidebar section gets its own block */
.sidebar > .sidebar-header,
.sidebar > .sidebar-group,
.sidebar > .sidebar-footer {
    position: relative !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

/* =========================================================
   RECENT / HISTORY SECTION
   ========================================================= */

.sidebar > .recent-group {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* History list itself */
.sidebar .history-list {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    transform: none !important;
}

/* Each history entry occupies its own row */
.sidebar .history-item {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    transform: none !important;
}

/* History content */
.sidebar .history-item-content {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    width: 100% !important;

    overflow: hidden !important;
}

/* =========================================================
   NAVIGATION SECTION
   ========================================================= */

.sidebar > .sidebar-group:not(.recent-group) {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    flex: 0 0 auto !important;
}

/* Navigation itself */
.sidebar nav {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    flex: 0 0 auto !important;
}

/* Every navigation button gets its own row */
.sidebar nav a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;

    margin: 2px 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box !important;

    flex: 0 0 auto !important;

    transform: none !important;

    z-index: 2 !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.sidebar > .sidebar-footer {
    margin-top: auto !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    flex: 0 0 auto !important;

    position: relative !important;
    z-index: 10 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sidebar > .recent-group,
    .sidebar > .sidebar-group,
    .sidebar > .sidebar-footer {
        position: relative !important;
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .sidebar .history-list {
        display: flex !important;
        flex-direction: column !important;

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .sidebar .history-item {
        position: relative !important;

        width: 100% !important;
        min-height: 54px !important;

        flex: 0 0 auto !important;

        transform: none !important;
    }

    .sidebar nav {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;

        padding: 8px 10px !important;
    }

    .sidebar nav a {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;

        flex: 0 0 auto !important;

        margin: 2px 0 !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL SIDEBAR / WORKSPACE LAYOUT FIX
   Paste at the VERY BOTTOM of main.css
   ========================================================= */

/* ---------- DESKTOP ---------- */
@media (min-width: 769px) {

    /* Sidebar stays permanently visible on desktop */
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        width: 300px !important;
        height: 100vh !important;

        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;

        z-index: 1000 !important;

        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        pointer-events: auto !important;
    }

    /* Workspace must start AFTER sidebar */
    .app {
        margin-left: 300px !important;
        width: calc(100% - 300px) !important;

        min-width: 0 !important;
        max-width: none !important;

        display: block !important;
    }

    main.workspace,
    .workspace {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: none !important;

        min-width: 0 !important;
    }

    /* Prevent desktop content from being pushed beyond viewport */
    .workspace > *,
    .workspace-content,
    .main-content,
    .content,
    .hero,
    .hero-section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mobile-only controls must stay hidden */
    .mobile-menu-button {
        display: none !important;
    }

    .mobile-sidebar-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* ---------- MOBILE / TABLET ---------- */
@media (max-width: 768px) {

    /* Sidebar becomes an independent top-level layer */
    .sidebar {
        position: fixed !important;

        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        width: min(320px, 86vw) !important;
        height: 100dvh !important;

        display: flex !important;

        background: #0d0f13 !important;

        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        transform: translateX(-105%) !important;

        visibility: hidden !important;
        pointer-events: none !important;

        z-index: 2147483647 !important;

        isolation: isolate !important;

        transition:
            transform 260ms cubic-bezier(.2,.8,.2,1),
            visibility 0s linear 260ms !important;
    }

    /* OPEN STATE */
    .sidebar.ap-sidebar-open {
        transform: translateX(0) !important;

        visibility: visible !important;
        pointer-events: auto !important;

        opacity: 1 !important;
        filter: none !important;
        -webkit-filter: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        z-index: 2147483647 !important;

        transition:
            transform 260ms cubic-bezier(.2,.8,.2,1),
            visibility 0s linear 0s !important;
    }


    /* ---------- CRITICAL: OVERLAY MUST NEVER COVER SIDEBAR ---------- */

    .mobile-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        display: none !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;

        z-index: 2147483646 !important;

        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /*
      Even if JavaScript adds ap-sidebar-visible,
      overlay remains BEHIND sidebar.
    */
    .mobile-sidebar-overlay.ap-sidebar-visible {
        display: block !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        z-index: 2147483646 !important;

        background: rgba(0,0,0,.52) !important;

        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* Sidebar itself always beats overlay */
    .sidebar.ap-sidebar-open,
    .sidebar.ap-sidebar-open * {
        position: relative;
        z-index: 2147483647 !important;
    }


    /* ---------- MOBILE MENU BUTTON ---------- */

    .mobile-menu-button {
        position: fixed !important;

        top: 16px !important;
        left: 16px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 52px !important;
        height: 52px !important;

        z-index: 2147483648 !important;

        pointer-events: auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    /* ---------- MOBILE WORKSPACE ---------- */

    .app {
        margin-left: 0 !important;
        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        display: block !important;
    }

    main.workspace,
    .workspace {
        margin-left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;
    }

    .workspace > *,
    .workspace-content,
    .main-content,
    .content,
    .hero,
    .hero-section {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ---------- IMPORTANT: NEVER BLUR THE SIDEBAR ---------- */

.sidebar,
.sidebar.ap-sidebar-open,
.sidebar.ap-sidebar-open * {
    filter: none !important;
    -webkit-filter: none !important;
}


/* ---------- SAFETY AGAINST OLD BODY LOCK CSS ---------- */

body.ap-sidebar-locked {
    overflow-x: hidden !important;
}


/* ---------- PREVENT HORIZONTAL DESKTOP OVERFLOW ---------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* =========================================================
   AP SYNAPSE — FINAL RESPONSIVE SIDEBAR SYSTEM
   DO NOT ADD ANOTHER SIDEBAR CSS SYSTEM BELOW THIS
   ========================================================= */

/* ---------- DESKTOP ---------- */

@media (min-width: 701px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .app {
        width: 100%;
        min-height: 100vh;
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr) !important;
        grid-template-areas: "sidebar workspace" !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .sidebar {
        grid-area: sidebar !important;

        position: fixed !important;
        inset: 0 auto 0 0 !important;

        width: 300px !important;
        height: 100vh !important;

        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        transform: none !important;
        translate: none !important;

        z-index: 1000 !important;

        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        pointer-events: auto !important;
    }

    .workspace,
    main.workspace {
        grid-area: workspace !important;

        position: relative !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin-left: 300px !important;
        margin-right: 0 !important;

        transform: none !important;
        translate: none !important;

        left: auto !important;
        right: auto !important;

        overflow-x: hidden !important;
    }

    .mobile-menu-button {
        display: none !important;
    }

    .mobile-sidebar-overlay {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .app {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    /*
       IMPORTANT:
       The sidebar MUST NOT inherit opacity/filter/blur
       from any previous mobile system.
    */
    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(320px, 88vw) !important;
        height: 100vh !important;

        display: flex !important;
        flex-direction: column !important;

        z-index: 2147483000 !important;

        background: #0d0f13 !important;

        opacity: 1 !important;
        visibility: hidden !important;

        transform: translateX(-105%) !important;

        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        pointer-events: none !important;

        transition:
            transform 240ms cubic-bezier(.2,.8,.2,1),
            visibility 0s linear 240ms !important;

        isolation: isolate !important;
    }

    /*
       ONE authoritative open state.
    */
    .sidebar.ap-sidebar-open {
        visibility: visible !important;
        transform: translateX(0) !important;

        opacity: 1 !important;
        pointer-events: auto !important;

        transition:
            transform 240ms cubic-bezier(.2,.8,.2,1),
            visibility 0s linear 0s !important;
    }

    /*
       Overlay is BELOW sidebar.
       It must NEVER cover/sidebar-blur the drawer.
    */
    .mobile-sidebar-overlay {
        position: fixed !important;

        inset: 0 !important;

        z-index: 2147482000 !important;

        display: block !important;

        background: rgba(0, 0, 0, .48) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        transition:
            opacity 200ms ease,
            visibility 0s linear 200ms !important;
    }

    .mobile-sidebar-overlay.ap-sidebar-visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transition:
            opacity 200ms ease,
            visibility 0s linear 0s !important;
    }

    /*
       Workspace must NOT be shifted on mobile.
    */
    .workspace,
    main.workspace {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding-left: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
        translate: none !important;
    }

    /*
       3-bars button stays above everything.
    */
    .mobile-menu-button {
        position: fixed !important;

        top: 16px !important;
        left: 16px !important;

        width: 52px !important;
        height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 2147483647 !important;

        pointer-events: auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /*
       Sidebar content itself must remain sharp/clickable.
    */
    .sidebar *,
    .sidebar nav,
    .sidebar nav a,
    .sidebar button {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sidebar nav a,
    .sidebar button {
        pointer-events: auto !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR CLICK FIX
   ========================================================= */

@media (max-width: 767px) {

    aside.sidebar.ap-sidebar-open {
        z-index: 9001 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    aside.sidebar.ap-sidebar-open nav,
    aside.sidebar.ap-sidebar-open nav a,
    aside.sidebar.ap-sidebar-open button,
    aside.sidebar.ap-sidebar-open .new-chat-btn,
    aside.sidebar.ap-sidebar-open .history-item {
        pointer-events: auto !important;
    }

    .mobile-sidebar-overlay {
        z-index: 9000 !important;
        pointer-events: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-sidebar-overlay.ap-sidebar-visible {
        pointer-events: auto !important;
        z-index: 9000 !important;
    }

    .mobile-menu-button {
        z-index: 9002 !important;
        pointer-events: auto !important;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE DRAWER
   MOBILE ONLY
   DESKTOP IS COMPLETELY UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       SIDEBAR — CLOSED
       ===================================================== */

    aside.sidebar,
    .sidebar {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(326px, 88vw) !important;
        height: 100dvh !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background:
            linear-gradient(
                180deg,
                #17191e 0%,
                #111318 48%,
                #0c0e12 100%
            ) !important;

        color: #f5f5f3 !important;

        opacity: 1 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        transform: translate3d(-105%, 0, 0) !important;

        transition:
            transform 260ms cubic-bezier(.2,.8,.2,1),
            visibility 0s linear 260ms !important;

        /*
         * CRITICAL:
         * Never allow an old rule to turn the drawer
         * into position:relative.
         */
        z-index: 2147483646 !important;

        isolation: isolate !important;

        filter: none !important;
        -webkit-filter: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* =====================================================
       SIDEBAR — OPEN
       ===================================================== */

    aside.sidebar.ap-sidebar-open,
    .sidebar.ap-sidebar-open {

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        transform: translate3d(0, 0, 0) !important;

        z-index: 2147483646 !important;

        transition:
            transform 260ms cubic-bezier(.2,.8,.2,1),
            visibility 0s linear 0s !important;

        filter: none !important;
        -webkit-filter: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* =====================================================
       CRITICAL OVERRIDE
       OLD CSS MUST NEVER CHANGE THE DRAWER'S POSITION
       ===================================================== */

    aside.sidebar.ap-sidebar-open,
    aside.sidebar.ap-sidebar-open * {

        /*
         * Children may use normal positioning.
         * The sidebar itself remains fixed above.
         */
        filter: none !important;
        -webkit-filter: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* =====================================================
       OVERLAY — CLOSED
       ===================================================== */

    .mobile-sidebar-overlay {

        position: fixed !important;

        inset: 0 !important;

        display: block !important;

        background: rgba(0, 0, 0, .52) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 2147483645 !important;

        filter: none !important;

        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;

        transition:
            opacity 200ms ease,
            visibility 0s linear 200ms !important;
    }


    /* =====================================================
       OVERLAY — OPEN
       ===================================================== */

    .mobile-sidebar-overlay.ap-sidebar-visible {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        z-index: 2147483645 !important;

        transition:
            opacity 200ms ease,
            visibility 0s linear 0s !important;
    }


    /* =====================================================
       SIDEBAR CONTENT — CLICKABLE
       ===================================================== */

    aside.sidebar.ap-sidebar-open nav,
    aside.sidebar.ap-sidebar-open nav a,
    aside.sidebar.ap-sidebar-open button,
    aside.sidebar.ap-sidebar-open .new-chat-btn,
    aside.sidebar.ap-sidebar-open .history-item {

        pointer-events: auto !important;

        visibility: visible !important;

        opacity: 1 !important;

        filter: none !important;

        -webkit-filter: none !important;

        backdrop-filter: none !important;

        -webkit-backdrop-filter: none !important;
    }


    /* =====================================================
       MOBILE MENU BUTTON
       ===================================================== */

    .mobile-menu-button {

        position: fixed !important;

        top: 16px !important;
        left: 16px !important;

        width: 52px !important;
        height: 52px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        z-index: 2147483647 !important;

        pointer-events: auto !important;

        visibility: visible !important;

        opacity: 1 !important;

        filter: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    /* =====================================================
       BODY LOCK
       ===================================================== */

    body.ap-sidebar-locked {

        overflow: hidden !important;
        overflow-x: hidden !important;
    }

}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR FIX
   MOBILE ONLY — DO NOT AFFECT DESKTOP
   ========================================================= */

@media (max-width: 767px) {

    /* The mobile overlay */
    .mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        background: rgba(0, 0, 0, 0.68) !important;

        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        z-index: 9998 !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease !important;
    }

    /* Overlay OPEN */
    body.ap-sidebar-open .mobile-sidebar-overlay,
    body.ap-sidebar-visible .mobile-sidebar-overlay,
    body.ap-open .mobile-sidebar-overlay,
    body.mobile-open .mobile-sidebar-overlay,
    body.ap-mobile-open .mobile-sidebar-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* =====================================================
       ACTUAL SIDEBAR DRAWER
       ===================================================== */

    .sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(86vw, 340px) !important;
        max-width: 340px !important;
        height: 100dvh !important;

        margin: 0 !important;

        transform: translate3d(-105%, 0, 0) !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 9999 !important;

        transition:
            transform 0.32s cubic-bezier(.22,.61,.36,1) !important;

        isolation: isolate !important;

        /* Important: prevent the old sidebar rules
           from making the drawer behave like normal content */
        right: auto !important;
    }


    /* =====================================================
       SIDEBAR OPEN
       ===================================================== */

    body.ap-sidebar-open .sidebar,
    body.ap-sidebar-visible .sidebar,
    body.ap-open .sidebar,
    body.mobile-open .sidebar,
    body.ap-mobile-open .sidebar {

        transform: translate3d(0, 0, 0) !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        z-index: 9999 !important;
    }


    /* =====================================================
       KILL THE OLD BROKEN POSITIONING
       ===================================================== */

    .sidebar.ap-sidebar-open,
    .sidebar.ap-sidebar-open *,
    .sidebar.ap-sidebar-visible,
    .sidebar.ap-sidebar-visible *,
    .sidebar.ap-open,
    .sidebar.ap-open *,
    .sidebar.mobile-open,
    .sidebar.mobile-open *,
    .sidebar.ap-mobile-open,
    .sidebar.ap-mobile-open * {

        /* DO NOT allow old JS/CSS to turn the drawer
           into a relative-positioned element */
        position: revert !important;
    }


    /* Re-establish the drawer itself as fixed */
    .sidebar.ap-sidebar-open,
    .sidebar.ap-sidebar-visible,
    .sidebar.ap-open,
    .sidebar.mobile-open,
    .sidebar.ap-mobile-open {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        transform: translate3d(0, 0, 0) !important;

        z-index: 9999 !important;
    }


    /* =====================================================
       SIDEBAR CONTENT MUST BE CLICKABLE
       ===================================================== */

    .sidebar button,
    .sidebar a,
    .sidebar [role="button"],
    .sidebar .nav-item,
    .sidebar .menu-item {

        pointer-events: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }


    /* =====================================================
       MOBILE MENU BUTTON
       ===================================================== */

    .mobile-menu-button {
        position: relative !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
    }


    /* =====================================================
       PREVENT THE MAIN PAGE FROM INTERCEPTING CLICKS
       ===================================================== */

    body.ap-sidebar-open,
    body.ap-sidebar-visible,
    body.ap-open,
    body.mobile-open,
    body.ap-mobile-open {
        overflow: hidden !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE TOPBAR ACTIONS
   Final workspace polish
   ========================================================= */

@media (max-width: 768px) {

    /* Keep the topbar as the positioning context */
    .topbar {
        position: relative !important;
    }

    /* Show the existing desktop action group on mobile */
    .topbar-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;

        position: absolute !important;
        right: 7px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        z-index: 1000 !important;
    }

    /* Notification — visible on mobile */
    .topbar-right #notificationBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;

        border-radius: 10px !important;
    }

    /* Profile — visible on mobile */
    .topbar-right #profileBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;

        border-radius: 50% !important;
    }

    /* Settings stays hidden on mobile.
       User requested only Notification + Profile. */
    .topbar-right #settingsBtn {
        display: none !important;
    }

    /* Prevent the title area from running underneath
       the right-side actions */
    .topbar-left {
        padding-right: 82px !important;
        box-sizing: border-box !important;
    }

    /* Make sure the actions remain clickable */
    .topbar-right button {
        position: relative !important;
        z-index: 1001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}

/* =========================================
   AP SYNAPSE — INTELLIGENCE FIELD CONTROL
========================================= */

.intelligence-field-control {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 7px 10px;
    margin: 8px 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    cursor: pointer;
    color: inherit;
    border-radius: 10px;
    transition:
        background .25s ease,
        transform .25s ease;
}

.intelligence-field-control:hover {
    background: rgba(255,255,255,.045);
}

.intelligence-field-control:active {
    transform: scale(.985);
}

.intelligence-field-status {
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    background: #d6b36a;
    box-shadow:
        0 0 0 3px rgba(214,179,106,.08),
        0 0 14px rgba(214,179,106,.45);
    animation: intelligencePulse 2.4s ease-in-out infinite;
}

.intelligence-field-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255,255,255,.72);
}

.intelligence-field-divider {
    color: rgba(255,255,255,.22);
}

.intelligence-field-state {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #d6b36a;
}

.intelligence-field-chevron {
    font-size: 13px;
    color: rgba(255,255,255,.38);
    transition: transform .25s ease;
}

.intelligence-field-control:hover .intelligence-field-chevron {
    transform: translate(2px,-2px);
}

@keyframes intelligencePulse {

    0%,100% {
        opacity: .65;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

}


/* =========================================
   INTELLIGENCE FIELD PANEL
========================================= */

.intelligence-field-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 86px 24px 24px;
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.intelligence-field-panel.open {
    display: flex;
}

.intelligence-field-panel-inner {
    width: min(430px, calc(100vw - 48px));
    padding: 24px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(29,29,29,.97),
            rgba(13,13,13,.97)
        );
    box-shadow:
        0 30px 90px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.035);
    animation: intelligencePanelIn .25s ease-out;
}

@keyframes intelligencePanelIn {

    from {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

.intelligence-field-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.intelligence-field-panel-header h2 {
    margin: 5px 0 0;
    font-size: 22px;
    letter-spacing: -.02em;
}

.intelligence-field-live {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(214,179,106,.12);
    background: rgba(214,179,106,.045);
}

.intelligence-field-live strong,
.intelligence-field-live span {
    display: block;
}

.intelligence-field-live strong {
    font-size: 13px;
}

.intelligence-field-live div span {
    margin-top: 3px;
    font-size: 11px;
    color: rgba(255,255,255,.45);
}

.intelligence-field-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 14px;
}

.intelligence-field-metrics > div {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.intelligence-field-metrics span,
.intelligence-field-metrics strong {
    display: block;
}

.intelligence-field-metrics span {
    font-size: 9px;
    letter-spacing: .13em;
    color: rgba(255,255,255,.35);
}

.intelligence-field-metrics strong {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(255,255,255,.78);
}

.intelligence-field-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 9px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.28);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .intelligence-field-control {
        margin-top: 5px;
        padding: 6px 8px;
        gap: 6px;
    }

    .intelligence-field-label {
        font-size: 9px;
    }

    .intelligence-field-state {
        font-size: 8px;
    }

    .intelligence-field-panel {
        padding: 76px 14px 14px;
    }

    .intelligence-field-panel-inner {
        width: calc(100vw - 28px);
        padding: 20px;
        border-radius: 19px;
    }

}

/* AP SYNAPSE — KEEP ACTIVE ON ONE LINE */
.intelligence-field-state {
    white-space: nowrap !important;
    display: inline-block !important;
    width: max-content !important;
    min-width: max-content !important;
    flex-shrink: 0 !important;
}

/* AP SYNAPSE — TRUE CENTER INTELLIGENCE FIELD */
@media (max-width: 768px) {

    .topbar {
        position: relative !important;
    }

    .topbar button[aria-label="Open Intelligence Field"] {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: max-content !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* =========================================================
   AP SYNAPSE — PREMIUM WORKSPACE IDENTITY
   FINAL TOPBAR CONTROL
========================================================= */

.synapse-identity-btn {
    appearance: none;
    border: 1px solid rgba(212, 175, 92, 0.20);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    color: inherit;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 38px;
    padding: 5px 10px 5px 6px;

    border-radius: 12px;

    cursor: pointer;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.synapse-identity-btn:hover {
    border-color: rgba(212, 175, 92, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(212,175,92,0.10),
            rgba(255,255,255,0.035)
        );

    box-shadow:
        0 8px 28px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.06);

    transform: translateY(-1px);
}

.synapse-identity-btn:active {
    transform: translateY(0);
}


/* AP MONOGRAM */

.synapse-identity-mark {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    border: 1px solid rgba(212,175,92,0.38);

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,0.10),
            transparent 55%
        ),
        rgba(212,175,92,0.055);

    color: #d8b86a;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;

    box-shadow:
        inset 0 0 14px rgba(212,175,92,0.045);
}


/* BRAND COPY */

.synapse-identity-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    line-height: 1;
}

.synapse-identity-name {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    white-space: nowrap;
}

.synapse-identity-subtitle {
    margin-top: 4px;

    font-size: 7px;
    font-weight: 500;

    letter-spacing: .12em;

    color: rgba(255,255,255,0.42);

    white-space: nowrap;
}

.synapse-identity-chevron {
    margin-left: 2px;

    font-size: 12px;

    color: rgba(212,175,92,0.75);

    transition:
        transform .25s ease,
        color .25s ease;
}

.synapse-identity-btn:hover .synapse-identity-chevron {
    transform: translate(2px,-2px);
    color: #d8b86a;
}


/* =========================================================
   IDENTITY PANEL
========================================================= */

.synapse-identity-panel {
    position: fixed;

    top: 76px;
    left: 24px;

    width: min(360px, calc(100vw - 32px));

    z-index: 99999;

    padding: 18px;

    border-radius: 20px;

    border: 1px solid rgba(212,175,92,0.20);

    background:
        linear-gradient(
            145deg,
            rgba(24,24,24,0.98),
            rgba(10,10,10,0.985)
        );

    box-shadow:
        0 30px 90px rgba(0,0,0,0.58),
        inset 0 1px 0 rgba(255,255,255,0.055);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(-8px)
        scale(.97);

    transform-origin: top left;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}

.synapse-identity-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* PANEL HEADER */

.synapse-identity-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.synapse-identity-panel-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.synapse-identity-panel-mark {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    border: 1px solid rgba(212,175,92,0.32);

    color: #d8b86a;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;

    background: rgba(212,175,92,0.06);
}

.synapse-identity-panel-kicker {
    display: block;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .18em;

    color: #d8b86a;
}

.synapse-identity-panel-header h3 {
    margin: 5px 0 0;

    font-size: 14px;
    font-weight: 650;

    color: rgba(255,255,255,0.92);
}

.synapse-identity-close {
    width: 30px;
    height: 30px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 9px;

    background: rgba(255,255,255,0.035);

    color: rgba(255,255,255,0.60);

    cursor: pointer;

    font-size: 18px;

    transition:
        background .2s ease,
        color .2s ease;
}

.synapse-identity-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}


/* STATUS */

.synapse-identity-status {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px;

    border-radius: 13px;

    border: 1px solid rgba(255,255,255,0.065);

    background: rgba(255,255,255,0.025);

    margin-bottom: 12px;
}

.synapse-status-orb {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #d8b86a;

    box-shadow:
        0 0 0 4px rgba(212,175,92,0.08),
        0 0 16px rgba(212,175,92,0.55);

    animation: synapseStatusPulse 2.5s ease-in-out infinite;
}

@keyframes synapseStatusPulse {

    0%,100% {
        opacity: .65;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

}

.synapse-identity-status > div {
    min-width: 0;
    flex: 1;
}

.synapse-identity-status strong {
    display: block;

    font-size: 11px;
    font-weight: 700;

    color: rgba(255,255,255,0.90);
}

.synapse-identity-status span {
    display: block;

    margin-top: 3px;

    font-size: 8px;

    color: rgba(255,255,255,0.42);
}

.synapse-live-label {
    color: #d8b86a !important;

    font-size: 7px !important;
    font-weight: 800 !important;

    letter-spacing: .15em;
}


/* STATS */

.synapse-identity-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    margin-bottom: 12px;
}

.synapse-identity-stat {
    padding: 11px;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,0.055);

    background: rgba(255,255,255,0.018);
}

.synapse-identity-stat span {
    display: block;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .15em;

    color: rgba(255,255,255,0.34);
}

.synapse-identity-stat strong {
    display: block;

    margin-top: 5px;

    font-size: 10px;
    font-weight: 650;

    color: rgba(255,255,255,0.82);
}


/* QUICK ACTIONS */

.synapse-identity-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.synapse-identity-actions button {
    width: 100%;

    display: grid;

    grid-template-columns: 24px 1fr auto;

    align-items: center;

    gap: 8px;

    padding: 10px 11px;

    border: 1px solid transparent;

    border-radius: 11px;

    background: transparent;

    color: rgba(255,255,255,0.75);

    text-align: left;

    cursor: pointer;

    font-size: 9px;
    font-weight: 600;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.synapse-identity-actions button span {
    color: #d8b86a;
    text-align: center;
}

.synapse-identity-actions button b {
    color: rgba(255,255,255,0.30);
    font-size: 11px;
}

.synapse-identity-actions button:hover {
    border-color: rgba(212,175,92,0.14);

    background: rgba(212,175,92,0.055);

    color: #fff;
}

.synapse-identity-actions button:hover b {
    color: #d8b86a;
}


/* FOOTER */

.synapse-identity-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid rgba(255,255,255,0.055);

    font-size: 6px;
    font-weight: 700;

    letter-spacing: .15em;

    color: rgba(255,255,255,0.25);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .synapse-identity-btn {
        min-height: 34px;
        padding: 4px 7px 4px 5px;
        gap: 6px;
        border-radius: 10px;
    }

    .synapse-identity-mark {
        width: 24px;
        height: 24px;

        border-radius: 7px;

        font-size: 7px;
    }

    .synapse-identity-name {
        font-size: 7px;
        letter-spacing: .13em;
    }

    .synapse-identity-subtitle {
        font-size: 5.5px;
        margin-top: 3px;
    }

    .synapse-identity-chevron {
        font-size: 9px;
    }

    .synapse-identity-panel {
        top: 68px;
        left: 12px;

        width: calc(100vw - 24px);

        padding: 15px;

        border-radius: 18px;
    }

}

/* =========================================================
   AP SYNAPSE — MOBILE COMMAND BAR
   FINAL VISIBILITY + USABILITY FIX
   ========================================================= */

@media (max-width: 768px) {

    .command-section {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        z-index: 5000 !important;

        padding: 8px 8px
                 calc(8px + env(safe-area-inset-bottom))
                 !important;

        box-sizing: border-box !important;
    }

    .command-bar {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;

        gap: 5px !important;

        box-sizing: border-box !important;
    }

    /* Ask AP Synapse input */
    .command-bar #userInput {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        width: auto !important;

        font-size: 14px !important;
    }

    /* ALL command buttons */
    .command-bar button {
        display: flex !important;

        flex: 0 0 36px !important;

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;

        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;

        position: relative !important;
        z-index: 5001 !important;

        box-sizing: border-box !important;
    }

    /*
       Keep every useful command available on mobile.
       This includes:
       Attach • Image • Voice • Speak • Web • Think • Send
    */

    .command-bar #attachBtn,
    .command-bar #imageGenBtn,
    .command-bar #voiceBtn,
    .command-bar #speakBtn,
    .command-bar #webBtn,
    .command-bar #deepThinkBtn,
    .command-bar #stopBtn,
    .command-bar #sendBtn {
        display: flex !important;
    }

}

.synapse-account-actions {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.synapse-account-action {
    width: 100%;
    min-height: 46px;
    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;

    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.88);

    font: inherit;
    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.synapse-account-action:hover {
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.16);
    transform: translateY(-1px);
}

.synapse-signout {
    margin-top: 5px;

    color: #d8b46a;
    border-color: rgba(216,180,106,.20);
}

.synapse-signout:hover {
    background: rgba(216,180,106,.08);
    border-color: rgba(216,180,106,.35);
}

.synapse-account-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.synapse-account-action {
    flex: 1;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: .2s ease;
}

.synapse-account-action:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(212,175,55,.35);
}

#synapseSignOutBtn {
    color: #e6cfcf;
}

.synapse-account-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.synapse-account-action {
    flex: 1;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    color: #f5f5f5;
    font: inherit;
    cursor: pointer;
    transition: .2s ease;
}

.synapse-account-action:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(212,175,55,.35);
}

#synapseSignOutBtn {
    border-color: rgba(255,255,255,.14);
}

#synapseSwitchAccountBtn {
    color: #d8c38a;
}

/* =========================================================
   AP SYNAPSE — PREMIUM PROFILE PANEL
   Compact • Responsive • Account Controls Always Accessible
========================================================= */

#profileCard {
    width: min(440px, calc(100vw - 32px));
    max-height: min(760px, calc(100dvh - 32px));

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-gutter: stable;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    box-sizing: border-box;
}

/* Keep profile content clean on narrow screens */

#profileCard .profile-identity {
    min-width: 0;
}

#profileCard #profileName {
    margin-bottom: 4px;
}

#profileCard #profileEmail {
    margin-bottom: 7px;
    word-break: break-word;
}

/* =========================================================
   ACCOUNT SECTION
   The controls remain visible while profile content scrolls.
========================================================= */

#profileCard .profile-account-section {
    position: sticky;
    bottom: 0;
    z-index: 20;

    margin-top: 20px;
    padding-top: 15px;
    padding-bottom: 14px;

    border-top: 1px solid rgba(255,255,255,.09);

    background:
        linear-gradient(
            to bottom,
            rgba(14,14,14,.78),
            rgba(14,14,14,.97) 24%,
            rgba(14,14,14,1)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Account buttons */

.profile-account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.synapse-account-action {
    min-height: 44px;
    padding: 10px 14px;

    border-radius: 11px;
    border: 1px solid rgba(255,255,255,.11);

    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.88);

    font: inherit;
    font-size: 13px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.synapse-account-action:hover {
    background: rgba(255,255,255,.075);
    border-color: rgba(217,194,123,.28);
    transform: translateY(-1px);
}

.synapse-account-action:active {
    transform: translateY(0);
}

.synapse-account-action:focus-visible {
    outline: 2px solid rgba(217,194,123,.55);
    outline-offset: 2px;
}

#synapseSignOutBtn {
    color: rgba(255,255,255,.84);
}

#synapseSwitchAccountBtn {
    color: #d9c27b;
    border-color: rgba(217,194,123,.18);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #profileCard {
        width: calc(100vw - 20px);
        max-width: 430px;

        max-height: calc(100dvh - 20px);

        border-radius: 22px;

        scrollbar-width: none;
    }

    #profileCard::-webkit-scrollbar {
        display: none;
    }

    #profileCard .profile-account-section {
        margin-top: 14px;
        padding-top: 13px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .profile-account-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .synapse-account-action {
        min-height: 48px;
        font-size: 13px;
    }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    #profileCard {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
    }

    #profileCard .profile-account-section {
        padding-top: 11px;
    }

    .synapse-account-action {
        min-height: 46px;
    }
}

/* =========================================================
   AP SYNAPSE — PROFILE PANEL
   Premium responsive sizing
========================================================= */

#profileCard {
    width: min(440px, calc(100vw - 32px));
    max-height: min(760px, calc(100dvh - 32px));

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* Keep the profile header fixed */
#profileCard > .popup-header {
    flex-shrink: 0;
}

/* Profile information can scroll */
#profileCard .profile-hero,
#profileCard .profile-status,
#profileCard .profile-details,
#profileCard .profile-section-label,
#profileCard .profile-capabilities,
#profileCard .google-signin-section {
    flex-shrink: 0;
}

/* Account area remains accessible */
#profileCard .profile-account-section {
    flex-shrink: 0;
    margin-top: auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #profileCard {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 22px;
    }

    #profileCard .popup-header {
        flex-shrink: 0;
    }

    #profileCard .profile-account-section {
        margin-top: 14px;
        padding-top: 14px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .profile-account-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .synapse-account-action {
        min-height: 46px;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE COMMAND DOCK
   Unified • Connected • Premium • Touch Optimized
========================================================= */

@media (max-width: 600px) {

    /* ONE unified command surface */
    .command-bar {
        width: calc(100% - 20px) !important;
        max-width: 560px !important;

        margin: 0 auto !important;
        padding: 10px 10px 8px !important;

        display: grid !important;

        /* Input row + control rail */
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;

        gap: 7px 8px !important;

        box-sizing: border-box !important;

        border-radius: 20px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.055),
                rgba(255,255,255,.025)
            ) !important;

        border: 1px solid rgba(255,255,255,.105) !important;

        box-shadow:
            0 14px 40px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.045) !important;

        backdrop-filter: blur(22px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(120%) !important;

        overflow: hidden !important;
    }


    /* =====================================================
       INPUT
    ===================================================== */

    .command-bar #userInput {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 0 13px !important;

        box-sizing: border-box !important;

        border: 0 !important;
        outline: none !important;

        background: transparent !important;

        color: rgba(255,255,255,.94) !important;

        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .command-bar #userInput::placeholder {
        color: rgba(255,255,255,.42) !important;
        opacity: 1 !important;
    }


    /* =====================================================
       SEND
    ===================================================== */

    .command-bar #sendBtn {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-shrink: 0 !important;

        border-radius: 14px !important;

        border: 1px solid rgba(217,194,123,.22) !important;

        background:
            linear-gradient(
                145deg,
                rgba(217,194,123,.16),
                rgba(217,194,123,.055)
            ) !important;

        color: #d9c27b !important;

        font-size: 20px !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07) !important;

        transition:
            transform .18s ease,
            background .18s ease,
            border-color .18s ease !important;
    }

    .command-bar #sendBtn:active {
        transform: scale(.94) !important;
    }


    /* =====================================================
       LOWER CONTROL RAIL
       Attach • Image • Voice • Speak • Web • Think • Send
       The controls remain INSIDE the same command surface.
    ===================================================== */

    .command-bar::after {
        content: "" !important;

        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        height: 1px !important;

        width: 100% !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.075) 12%,
                rgba(255,255,255,.075) 88%,
                transparent
            ) !important;

        pointer-events: none !important;
    }


    /* Put the seven controls into a single connected rail */

    .command-bar #attachBtn,
    .command-bar #imageGenBtn,
    .command-bar #voiceBtn,
    .command-bar #speakBtn,
    .command-bar #webBtn,
    .command-bar #deepThinkBtn,
    .command-bar #sendBtn {
        box-sizing: border-box !important;
    }


    /* =====================================================
       TOOL BUTTONS
    ===================================================== */

    .command-bar #attachBtn,
    .command-bar #imageGenBtn,
    .command-bar #voiceBtn,
    .command-bar #speakBtn,
    .command-bar #webBtn,
    .command-bar #deepThinkBtn {

        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex-shrink: 1 !important;

        border-radius: 11px !important;

        border: 1px solid transparent !important;

        background: transparent !important;

        color: rgba(255,255,255,.56) !important;

        font-size: 16px !important;

        transition:
            color .18s ease,
            background .18s ease,
            border-color .18s ease,
            transform .18s ease !important;
    }


    /* =====================================================
       EVEN CONTROL DISTRIBUTION
       Seven controls share the complete lower rail.
    ===================================================== */

    .command-bar {
        --mobile-command-gap: 4px;
    }

    .command-bar #attachBtn {
        margin-left: 2px !important;
    }

    .command-bar #deepThinkBtn {
        margin-right: 2px !important;
    }


    /* =====================================================
       HOVER / ACTIVE
    ===================================================== */

    .command-bar #attachBtn:hover,
    .command-bar #imageGenBtn:hover,
    .command-bar #voiceBtn:hover,
    .command-bar #speakBtn:hover,
    .command-bar #webBtn:hover,
    .command-bar #deepThinkBtn:hover {

        color: rgba(255,255,255,.92) !important;

        background: rgba(255,255,255,.055) !important;

        border-color: rgba(255,255,255,.075) !important;

        transform: translateY(-1px) !important;
    }

    .command-bar #attachBtn:active,
    .command-bar #imageGenBtn:active,
    .command-bar #voiceBtn:active,
    .command-bar #speakBtn:active,
    .command-bar #webBtn:active,
    .command-bar #deepThinkBtn:active {

        transform: scale(.93) !important;
    }


    /* =====================================================
       ACTIVE INTELLIGENCE STATES
    ===================================================== */

    .command-bar #webBtn.active,
    .command-bar #deepThinkBtn.active,
    .command-bar #voiceBtn.active,
    .command-bar #speakBtn.active {

        color: #d9c27b !important;

        background: rgba(217,194,123,.075) !important;

        border-color: rgba(217,194,123,.18) !important;
    }


    /* =====================================================
       STOP
    ===================================================== */

    .command-bar #stopBtn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 11px !important;

        background: rgba(255,255,255,.045) !important;

        border: 1px solid rgba(255,255,255,.08) !important;

        color: rgba(255,255,255,.72) !important;
    }


    /* =====================================================
       ACCESSIBILITY
    ===================================================== */

    .command-bar button:focus-visible {
        outline: 2px solid rgba(217,194,123,.5) !important;
        outline-offset: 2px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   Keep everything compact without breaking the dock.
========================================================= */

@media (max-width: 380px) {

    .command-bar {
        width: calc(100% - 12px) !important;
        padding: 8px 7px 7px !important;
        border-radius: 18px !important;
        gap: 6px !important;
    }

    .command-bar #userInput {
        height: 46px !important;
        min-height: 46px !important;
        padding-left: 10px !important;
        font-size: 14px !important;
    }

    .command-bar #sendBtn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .command-bar #attachBtn,
    .command-bar #imageGenBtn,
    .command-bar #voiceBtn,
    .command-bar #speakBtn,
    .command-bar #webBtn,
    .command-bar #deepThinkBtn,
    .command-bar #stopBtn {

        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;

        font-size: 15px !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE COMMAND DOCK
   ONE SURFACE • 2 ROWS • 7 CONTROL ICONS
========================================================= */

@media (max-width: 600px) {

    .command-bar {
        width: calc(100% - 20px) !important;
        max-width: 560px !important;

        margin: 0 auto !important;
        padding: 8px 9px 7px !important;

        display: grid !important;

        /* EXACTLY 7 equal control columns */
        grid-template-columns:
            repeat(7, minmax(0, 1fr)) !important;

        grid-template-rows:
            46px 1px 38px !important;

        column-gap: 3px !important;
        row-gap: 5px !important;

        box-sizing: border-box !important;

        border-radius: 19px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.055),
                rgba(255,255,255,.025)
            ) !important;

        border: 1px solid rgba(255,255,255,.10) !important;

        box-shadow:
            0 12px 32px rgba(0,0,0,.28),
            inset 0 1px 0 rgba(255,255,255,.045) !important;

        backdrop-filter: blur(20px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(120%) !important;

        overflow: hidden !important;
    }


    /* =====================================================
       INPUT — TOP ROW
    ===================================================== */

    .command-bar #userInput {
        grid-column: 1 / 7 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        border: 0 !important;
        outline: none !important;

        background: transparent !important;

        color: rgba(255,255,255,.94) !important;

        font-size: 14px !important;
        line-height: 1.4 !important;

        box-sizing: border-box !important;
    }

    .command-bar #userInput::placeholder {
        color: rgba(255,255,255,.40) !important;
        opacity: 1 !important;
    }


    /* =====================================================
       SEND — TOP RIGHT
    ===================================================== */

    .command-bar #sendBtn {
        grid-column: 7 !important;
        grid-row: 1 !important;

        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 13px !important;

        border: 1px solid rgba(217,194,123,.22) !important;

        background:
            rgba(217,194,123,.075) !important;

        color: #d9c27b !important;

        font-size: 19px !important;

        box-sizing: border-box !important;

        transition:
            transform .16s ease,
            background .16s ease !important;
    }

    .command-bar #sendBtn:active {
        transform: scale(.93) !important;
    }


    /* =====================================================
       SUBTLE INTERNAL DIVIDER
    ===================================================== */

    .command-bar::after {
        content: "" !important;

        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        height: 1px !important;

        background:
            rgba(255,255,255,.065) !important;

        pointer-events: none !important;
    }


    /* =====================================================
       SEVEN CONTROL POSITIONS
       
       1 Attach
       2 Image
       3 Voice
       4 Speak
       5 Web
       6 Think
       7 Stop
    ===================================================== */

    .command-bar #attachBtn {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .command-bar #imageGenBtn {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    .command-bar #voiceBtn {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .command-bar #speakBtn {
        grid-column: 4 !important;
        grid-row: 3 !important;
    }

    .command-bar #webBtn {
        grid-column: 5 !important;
        grid-row: 3 !important;
    }

    .command-bar #deepThinkBtn {
        grid-column: 6 !important;
        grid-row: 3 !important;
    }

    .command-bar #stopBtn {
        grid-column: 7 !important;
        grid-row: 3 !important;
    }


    /* =====================================================
       ALL 7 CONTROL BUTTONS
    ===================================================== */

    .command-bar #attachBtn,
    .command-bar #imageGenBtn,
    .command-bar #voiceBtn,
    .command-bar #speakBtn,
    .command-bar #webBtn,
    .command-bar #deepThinkBtn,
    .command-bar #stopBtn {

        width: 100% !important;
        height: 38px !important;
        min-width: 0 !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        border-radius: 10px !important;

        border: 1px solid transparent !important;

        background: transparent !important;

        color: rgba(255,255,255,.58) !important;

        font-size: 15px !important;

        overflow: hidden !important;

        transition:
            background .16s ease,
            border-color .16s ease,
            color .16s ease,
            transform .16s ease !important;
    }


    /* =====================================================
       CONTROL INTERACTION
    ===================================================== */

    .command-bar #attachBtn:hover,
    .command-bar #imageGenBtn:hover,
    .command-bar #voiceBtn:hover,
    .command-bar #speakBtn:hover,
    .command-bar #webBtn:hover,
    .command-bar #deepThinkBtn:hover,
    .command-bar #stopBtn:hover {

        background: rgba(255,255,255,.055) !important;

        border-color: rgba(255,255,255,.07) !important;

        color: rgba(255,255,255,.92) !important;
    }

    .command-bar #attachBtn:active,
    .command-bar #imageGenBtn:active,
    .command-bar #voiceBtn:active,
    .command-bar #speakBtn:active,
    .command-bar #webBtn:active,
    .command-bar #deepThinkBtn:active,
    .command-bar #stopBtn:active {

        transform: scale(.91) !important;
    }


    /* Active intelligence tools */

    .command-bar #webBtn.active,
    .command-bar #deepThinkBtn.active,
    .command-bar #voiceBtn.active,
    .command-bar #speakBtn.active {

        color: #d9c27b !important;

        background: rgba(217,194,123,.07) !important;

        border-color: rgba(217,194,123,.16) !important;
    }


    /* Accessibility */

    .command-bar button:focus-visible {
        outline: 2px solid rgba(217,194,123,.50) !important;
        outline-offset: 1px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .command-bar {
        width: calc(100% - 12px) !important;

        padding: 7px 7px 6px !important;

        grid-template-rows:
            44px 1px 36px !important;

        column-gap: 2px !important;
        row-gap: 4px !important;

        border-radius: 18px !important;
    }

    .command-bar #userInput {
        height: 44px !important;
        min-height: 44px !important;

        padding-left: 8px !important;

        font-size: 13.5px !important;
    }

    .command-bar #sendBtn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .command-bar #attachBtn,
    .command-bar #imageGenBtn,
    .command-bar #voiceBtn,
    .command-bar #speakBtn,
    .command-bar #webBtn,
    .command-bar #deepThinkBtn,
    .command-bar #stopBtn {

        height: 36px !important;
        min-height: 36px !important;

        border-radius: 9px !important;

        font-size: 14px !important;
    }
}

/* =========================================================
   AP SYNAPSE — PROFILE PANEL
   SINGLE SOURCE OF TRUTH
========================================================= */

#profileCard {
    display: none;
}

#profileCard.active {
    display: block;
}

/* =========================================================
   AP SYNAPSE — PREMIUM MOBILE SIDEBAR TOGGLE
========================================================= */

.mobile-sidebar-btn {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: #fff;
    cursor: pointer;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.mobile-sidebar-btn:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(217,194,123,.28);
}

.mobile-sidebar-btn:active {
    transform: scale(.96);
}

.mobile-sidebar-btn span {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;

    transition:
        transform .22s ease,
        opacity .18s ease,
        width .22s ease;
}


/* OPEN STATE — turns ☰ into × */

.mobile-sidebar-btn.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.mobile-sidebar-btn.is-open span:nth-child(2) {
    opacity: 0;
    width: 0;
}

.mobile-sidebar-btn.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}


/* MOBILE ONLY */

@media (max-width: 768px) {

    .mobile-sidebar-btn {
        display: flex;
    }

}

@media (max-width: 768px) {

    .sidebar {
        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        touch-action: pan-y;
    }

}

/* =========================================================
   AP SYNAPSE — MOBILE SIDEBAR
   Full-height scrolling navigation
========================================================= */

@media (max-width: 768px) {

    .sidebar {
        height: 100dvh;
        max-height: 100dvh;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;

        box-sizing: border-box;
    }

    .sidebar-header,
    .sidebar-group,
    .sidebar-footer {
        flex-shrink: 0;
    }

    .sidebar-footer {
        padding-bottom:
            max(24px, env(safe-area-inset-bottom));
    }

}

@media (max-width: 768px) {

    .sidebar {
        display: flex;
        flex-direction: column;
    }

    .sidebar-header,
    .sidebar-group {
        flex-shrink: 0;
    }

    .sidebar-footer {
        flex-shrink: 0;
    }

}

/* =========================================================
   AP SYNAPSE — SIDEBAR FIRST-LOAD STABILITY
   Desktop: visible immediately.
   Mobile: existing mobile controller remains in charge.
   ========================================================= */

@media (min-width: 769px) {

    .sidebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

}

/* =========================================================
   AP SYNAPSE — MOBILE SIDEBAR SMOOTH SCROLL FIX
   ========================================================= */

@media (max-width: 768px) {

    .sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain;

        touch-action: pan-y !important;

        scrollbar-width: thin;
    }

    .sidebar * {
        touch-action: auto;
    }

}

/* Keep the bottom of the mobile navigation reachable */
@media (max-width: 768px) {

    .sidebar {
        padding-bottom: 80px !important;
        box-sizing: border-box !important;
    }

}

/* =========================================================
   AP SYNAPSE — PREMIUM IDENTITY PANEL
   ========================================================= */

.ap-profile-panel {
    width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;

    padding: 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 28, 31, 0.98),
            rgba(13, 14, 16, 0.99)
        );

    border:
        1px solid rgba(205, 170, 92, 0.22);

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255,255,255,0.025) inset,
        0 0 45px rgba(190, 150, 65, 0.055);

    color: #f4f2ed;

    position: relative;

    overflow: hidden;
}


/* subtle premium light */

.ap-profile-panel::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 163, 82, 0.10),
            transparent 68%
        );

    pointer-events: none;
}


/* HEADER */

.ap-profile-header {
    position: relative;

    padding-right: 32px;
}


.ap-profile-kicker {
    font-size: 10px;

    letter-spacing: 0.24em;

    font-weight: 700;

    color: #c7a45b;

    margin-bottom: 7px;
}


.ap-profile-title {
    margin: 0;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 650;

    letter-spacing: -0.025em;

    color: #f7f5f0;
}


/* CLOSE */

.ap-profile-close {
    position: absolute;

    top: -4px;
    right: 0;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.08);

    background: rgba(255,255,255,0.035);

    color: rgba(255,255,255,0.62);

    font-size: 20px;

    cursor: pointer;

    display: grid;
    place-items: center;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ap-profile-close:hover {
    background: rgba(201,163,82,0.10);

    color: #d6b66d;

    border-color:
        rgba(201,163,82,0.28);

    transform: rotate(4deg);
}


/* IDENTITY */

.ap-profile-identity {
    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 28px;
}


.ap-profile-panel .profile-avatar {
    flex: 0 0 auto;

    width: 64px;
    height: 64px;

    border-radius: 18px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            #292a2d,
            #151619
        );

    border:
        1px solid rgba(201,163,82,0.34);

    color: #d5b46a;

    font-size: 22px;

    font-weight: 700;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        0 0 20px rgba(201,163,82,.05);

    overflow: hidden;
}


.ap-profile-panel .profile-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.ap-profile-panel .profile-identity {
    min-width: 0;
}


.ap-profile-panel #profileName {
    margin: 0;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 650;

    color: #f4f2ed;

    overflow-wrap: anywhere;
}


.ap-profile-panel #profileEmail {
    margin: 5px 0 0;

    font-size: 13px;

    color: rgba(255,255,255,.52);

    overflow-wrap: anywhere;
}


/* VERIFIED */

.ap-profile-panel
.authenticated-status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 9px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: rgba(255,255,255,.42);
}


.ap-profile-panel
.authenticated-status.authenticated {
    color: #c9a75d;
}


.ap-profile-panel
.authenticated-status.authenticated::before {
    content: "✓";

    width: 16px;
    height: 16px;

    border-radius: 50%;

    display: inline-grid;
    place-items: center;

    background:
        rgba(201,163,82,.12);

    border:
        1px solid rgba(201,163,82,.25);

    font-size: 9px;
}


/* DIVIDER */

.ap-profile-divider {
    height: 1px;

    margin: 26px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.09),
            transparent
        );
}


/* GOOGLE CONNECTION */

.ap-account-status {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 15px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid rgba(255,255,255,.065);
}


.google-connection-indicator {
    font-size: 10px;

    color: rgba(255,255,255,.22);
}


.google-connection-indicator.connected {
    color: #c8a65b;

    text-shadow:
        0 0 12px rgba(200,166,91,.55);
}


.ap-status-label {
    display: block;

    font-size: 11px;

    color: rgba(255,255,255,.40);

    margin-bottom: 3px;
}


.ap-status-value {
    display: block;

    font-size: 12px;

    color: rgba(255,255,255,.72);

    overflow-wrap: anywhere;
}


/* ACTIONS */

.ap-profile-actions {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 22px;
}


.ap-profile-action {
    min-height: 48px;

    border-radius: 13px;

    padding: 0 16px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.ap-profile-action.secondary {
    color: rgba(255,255,255,.68);

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.08);
}


.ap-profile-action.primary {
    color: #e6c77d;

    background:
        linear-gradient(
            145deg,
            rgba(201,163,82,.12),
            rgba(201,163,82,.055)
        );

    border:
        1px solid rgba(201,163,82,.27);
}


.ap-profile-action:hover {
    transform: translateY(-1px);
}


.ap-profile-action.secondary:hover {
    background:
        rgba(255,255,255,.065);

    border-color:
        rgba(255,255,255,.13);
}


.ap-profile-action.primary:hover {
    background:
        linear-gradient(
            145deg,
            rgba(201,163,82,.18),
            rgba(201,163,82,.08)
        );

    border-color:
        rgba(201,163,82,.42);

    box-shadow:
        0 8px 28px rgba(201,163,82,.08);
}


/* MOBILE */

@media (max-width: 600px) {

    .ap-profile-panel {
        width: calc(100vw - 22px);

        padding: 23px;

        border-radius: 21px;
    }

    .ap-profile-title {
        font-size: 24px;
    }

    .ap-profile-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   AP SYNAPSE — PERSONALIZED HERO GREETING
========================================================= */

.personal-greeting {
    margin: 0 auto 14px;
    text-align: center;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;

    color: #c9a85e;

    opacity: 0;
    transform: translateY(6px);

    transition:
        opacity .45s ease,
        transform .45s ease;
}

.personal-greeting.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.personal-greeting[hidden] {
    display: none;
}

/* =========================================================
   AP SYNAPSE — PREMIUM TOPBAR BRAND MARK
   ========================================================= */

.ap-synapse-brand-mark {
    position: relative;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin-left: 10px;

    border: 1px solid rgba(212, 168, 75, 0.28);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 8px 24px rgba(0, 0, 0, 0.28);

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}


/* Subtle premium inner glow */

.ap-synapse-brand-mark::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: 13px;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(212, 168, 75, 0.12),
            transparent 58%
        );
}


/* Logo image */

.ap-synapse-brand-logo {
    position: relative;
    z-index: 1;

    width: 39px;
    height: 39px;

    display: block;

    object-fit: cover;

    border-radius: 10px;

    user-select: none;
    -webkit-user-drag: none;

    transition:
        transform 180ms ease,
        filter 180ms ease;
}


/* Hover */

.ap-synapse-brand-mark:hover {
    transform: translateY(-1px);

    border-color:
        rgba(212, 168, 75, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(212, 168, 75, 0.045)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 10px 30px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(212, 168, 75, 0.08);
}

.ap-synapse-brand-mark:hover
.ap-synapse-brand-logo {
    transform: scale(1.035);

    filter:
        brightness(1.05)
        contrast(1.03);
}


/* Keyboard focus */

.ap-synapse-brand-mark:focus-visible {
    outline: none;

    border-color:
        rgba(212, 168, 75, 0.78);

    box-shadow:
        0 0 0 3px rgba(212, 168, 75, 0.12),
        0 10px 30px rgba(0, 0, 0, 0.35);
}


/* Press */

.ap-synapse-brand-mark:active {
    transform: scale(0.97);
}


/* =========================================================
   TOPBAR SPACING
   ========================================================= */

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ap-synapse-brand-mark {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        margin-left: 4px;

        border-radius: 12px;
    }

    .ap-synapse-brand-logo {
        width: 34px;
        height: 34px;

        border-radius: 8px;
    }

}

/* =========================================================
   AP SYNAPSE — PREMIUM PROFILE POPOVER
   Final compact override
   ========================================================= */

#profileCard {
    position: fixed !important;

    top: 76px !important;
    right: 24px !important;

    width: min(390px, calc(100vw - 32px)) !important;
    max-height: min(620px, calc(100vh - 96px)) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 0 !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(25, 25, 27, 0.98),
            rgba(14, 14, 16, 0.985)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.58),
        0 8px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    backdrop-filter: blur(28px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(125%) !important;

    z-index: 99990 !important;

    transform-origin: top right !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) scale(0.985) !important;

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 180ms ease !important;
}


/* Open state — matches your existing JS */

#profileCard.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}


/* ---------------------------------------------------------
   PROFILE HEADER
   --------------------------------------------------------- */

#profileCard .profile-header,
#profileCard .profile-card-header {
    position: relative !important;

    padding: 22px 22px 18px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}


/* ---------------------------------------------------------
   CLEAR PREMIUM CLOSE BUTTON
   --------------------------------------------------------- */

#closeProfile {
    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border-radius: 10px !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;

    background: rgba(255, 255, 255, 0.045) !important;

    color: rgba(255, 255, 255, 0.72) !important;

    font-size: 17px !important;
    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 20 !important;

    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        transform 150ms ease !important;
}

#closeProfile:hover {
    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.09) !important;

    border-color: rgba(212, 168, 75, 0.42) !important;

    transform: scale(1.04) !important;
}

#closeProfile:active {
    transform: scale(0.94) !important;
}

#closeProfile:focus-visible {
    outline: none !important;

    border-color: rgba(212, 168, 75, 0.75) !important;

    box-shadow:
        0 0 0 3px rgba(212, 168, 75, 0.12) !important;
}


/* ---------------------------------------------------------
   PROFILE CONTENT
   --------------------------------------------------------- */

#profileCard .profile-content,
#profileCard .profile-body {
    padding: 18px 22px 22px !important;
}


/* ---------------------------------------------------------
   PROFILE AVATAR
   --------------------------------------------------------- */

#profileCard #profileAvatar {
    width: 64px !important;
    height: 64px !important;

    border-radius: 18px !important;

    object-fit: cover !important;

    border: 1px solid rgba(212, 168, 75, 0.28) !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.30) !important;
}


/* ---------------------------------------------------------
   PROFILE NAME
   --------------------------------------------------------- */

#profileCard #profileName {
    font-size: 20px !important;
    font-weight: 650 !important;

    line-height: 1.2 !important;

    letter-spacing: -0.02em !important;

    color: #f5f5f5 !important;
}


/* EMAIL */

#profileCard #profileEmail {
    margin-top: 5px !important;

    font-size: 13px !important;

    color: rgba(255, 255, 255, 0.52) !important;
}


/* ---------------------------------------------------------
   PROFILE SECTIONS
   --------------------------------------------------------- */

#profileCard section,
#profileCard .profile-section {
    margin-top: 14px !important;

    padding: 14px !important;

    border-radius: 15px !important;

    background: rgba(255, 255, 255, 0.025) !important;

    border: 1px solid rgba(255, 255, 255, 0.055) !important;
}


/* ---------------------------------------------------------
   ACCOUNT ACTIONS
   --------------------------------------------------------- */

#profileCard button[data-account-action] {
    min-height: 44px !important;

    border-radius: 12px !important;

    border: 1px solid rgba(255, 255, 255, 0.07) !important;

    background: rgba(255, 255, 255, 0.035) !important;

    color: rgba(255, 255, 255, 0.82) !important;

    transition:
        background 150ms ease,
        border-color 150ms ease !important;
}

#profileCard button[data-account-action]:hover {
    background: rgba(255, 255, 255, 0.065) !important;

    border-color: rgba(212, 168, 75, 0.28) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #profileCard {
        top: 68px !important;
        right: 12px !important;

        width: calc(100vw - 24px) !important;

        max-height: calc(100vh - 84px) !important;

        border-radius: 19px !important;
    }

}

/* =========================================================
   AP SYNAPSE — PREMIUM PROFILE PANEL FIX
   ========================================================= */

#profileCard {
    width: min(360px, calc(100vw - 32px));
    max-width: 360px;

    max-height: min(520px, calc(100vh - 40px));
    overflow-y: auto;

    padding: 24px;

    border-radius: 20px;

    box-sizing: border-box;

    z-index: 99999;

    position: fixed;

    top: 82px;
    right: 24px;

    transform-origin: top right;
}

/* Make the close button clearly visible */
#closeProfile {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.045);

    color: rgba(255,255,255,.78);

    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

#closeProfile:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
    border-color: rgba(212,175,85,.35);
    transform: scale(1.04);
}

/* Prevent profile content from touching the X */
#profileCard .profile-header,
#profileCard .profile-content {
    padding-right: 38px;
}

/* Mobile */
@media (max-width: 767px) {

    #profileCard {
        width: calc(100vw - 28px);
        max-width: none;

        top: 70px;
        right: 14px;

        max-height: calc(100vh - 84px);

        padding: 20px;

        border-radius: 18px;
    }

    #closeProfile {
        top: 12px;
        right: 12px;
    }
}

/* =========================================================
   AP SYNAPSE — SIDEBAR BRAND LOGO
   ========================================================= */

.sidebar-brand-mark {
    width: 52px !important;
    height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 15px !important;

    background: rgba(255, 255, 255, 0.025) !important;

    border: 1px solid rgba(212, 168, 75, 0.24) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 22px rgba(0, 0, 0, 0.25) !important;
}


.sidebar-brand-logo {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: inherit !important;

    user-select: none !important;

    -webkit-user-drag: none !important;
}

/* =========================================================
   AP SYNAPSE — ORIGINAL SIDEBAR BRAND LOGO
   ========================================================= */

.brand-mark {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 12px;
}

.brand-mark img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}

.synapse-identity-mark img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* =========================================================
   AP SYNAPSE — MOBILE CHAT BOTTOM CLEARANCE
   Keeps final response lines above the fixed composer
   ========================================================= */

@media (max-width: 767px) {

    #chatWindow {
        padding-bottom: 180px !important;
        scroll-padding-bottom: 180px !important;
    }

    .conversation {
        padding-bottom: 0 !important;
    }

}

/* =========================================================
   AP SYNAPSE — LIVE TALK
   ========================================================= */

.live-talk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    height: 42px;
    padding: 0 16px;

    border: 1px solid rgba(212, 166, 76, 0.28);
    border-radius: 12px;

    background: rgba(255,255,255,0.035);
    color: rgba(255,255,255,0.82);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.live-talk-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(212,166,76,.55);
    background: rgba(212,166,76,.08);
}

.live-talk-icon {
    font-size: 12px;
    transition: transform .25s ease;
}

.live-talk-btn.is-active {
    border-color: rgba(212,166,76,.75);
    background: rgba(212,166,76,.10);
    box-shadow:
        0 0 0 1px rgba(212,166,76,.08),
        0 8px 28px rgba(0,0,0,.25);
}

.live-talk-btn.is-listening .live-talk-icon {
    animation: apLiveTalkPulse 1.1s ease-in-out infinite;
}

.live-talk-btn.is-speaking .live-talk-icon {
    animation: apLiveTalkSpeaking .55s ease-in-out infinite alternate;
}

@keyframes apLiveTalkPulse {
    0%, 100% {
        transform: scale(.9);
        opacity: .55;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}

@keyframes apLiveTalkSpeaking {
    from {
        transform: scale(.9);
    }

    to {
        transform: scale(1.3);
    }
}

@media (max-width: 600px) {

    .live-talk-btn {
        height: 40px;
        padding: 0 13px;
        font-size: 12px;
    }

}

/* =========================================================
   AP SYNAPSE — LIVE TALK VOICE SELECTOR
   ========================================================= */

.live-talk-voice-selector {
    width: min(620px, 100%);

    display: flex;
    justify-content: center;

    gap: 12px;

    margin: 10px auto 4px;
}

.live-talk-voice-card {
    flex: 1;

    max-width: 280px;
    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 9px 13px;

    border-radius: 15px;

    border: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.035);

    color: #fff;

    cursor: pointer;

    text-align: left;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.live-talk-voice-card:hover {
    background: rgba(255,255,255,.06);

    transform: translateY(-1px);
}

.live-talk-voice-card.active {
    border-color: rgba(214,190,120,.38);

    background: rgba(214,190,120,.07);

    box-shadow:
        0 8px 30px rgba(0,0,0,.18);
}

.voice-avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #d9c58c;

    border:
        1px solid rgba(214,190,120,.25);

    background:
        radial-gradient(
            circle at 35% 30%,
            #292620,
            #11100e
        );

    font-weight: 700;
}

.voice-info {
    min-width: 0;
}

.voice-info strong {
    display: block;

    font-size: 12px;

    font-weight: 600;
}

.voice-info small {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.46);

    font-size: 10px;
}

.voice-check {
    margin-left: auto;

    opacity: 0;

    color: #d9c58c;
}

.live-talk-voice-card.active .voice-check {
    opacity: 1;
}

@media (max-width: 600px) {

    .live-talk-voice-selector {
        gap: 8px;
    }

    .live-talk-voice-card {
        min-height: 56px;

        padding: 7px 9px;
    }

    .voice-avatar {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }
}

/* =========================================================
   AP SYNAPSE — PREMIUM LIVE TALK CALL
========================================================= */

.live-talk-screen {
    position: fixed;
    inset: 0;
    z-index: 1000000;

    display: none;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(190, 160, 90, 0.10),
            transparent 34%
        ),
        #090909;

    color: #f5f3ee;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.live-talk-screen.is-open {
    display: block;
    opacity: 1;
    visibility: visible;
}


.live-talk-shell {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 30%
        );
}


/* HEADER */

.live-talk-header {
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(12,12,12,.82);

    backdrop-filter: blur(20px);
}


.live-talk-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}


.live-talk-brand-mark {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;

    color: #d9c58c;

    border:
        1px solid rgba(214,190,120,.28);

    background:
        linear-gradient(
            145deg,
            #171717,
            #0d0d0d
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.35);
}


.live-talk-brand strong {
    display: block;

    font-size: 15px;
    font-weight: 600;
}


.live-talk-brand span {
    display: block;

    margin-top: 2px;

    color: rgba(255,255,255,.48);

    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.live-talk-close {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.045);

    color: rgba(255,255,255,.70);

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.live-talk-close:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
    transform: scale(1.04);
}


/* MAIN */

.live-talk-main {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        34px
        24px
        20px;
}


.live-talk-status {
    min-height: 22px;

    font-size: 13px;

    color:
        rgba(255,255,255,.58);

    letter-spacing: .04em;

    text-align: center;
}


/* ORB */

.live-talk-orb {
    position: relative;

    width: 190px;
    height: 190px;

    margin:
        34px
        0
        28px;

    display: grid;
    place-items: center;
}


.live-talk-orb-core {
    position: relative;
    z-index: 3;

    width: 112px;
    height: 112px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 23px;
    font-weight: 700;
    letter-spacing: .08em;

    color: #d9c58c;

    border:
        1px solid rgba(214,190,120,.30);

    background:
        radial-gradient(
            circle at 35% 30%,
            #292620,
            #11100e 70%
        );

    box-shadow:
        0 0 45px rgba(210,180,100,.12),
        inset 0 0 30px rgba(255,255,255,.035);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.live-talk-orb-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(214,190,120,.16);

    pointer-events: none;
}


.ring-one {
    inset: 18px;
    animation: liveTalkPulse 2.8s ease-in-out infinite;
}


.ring-two {
    inset: 2px;
    opacity: .55;
    animation: liveTalkPulse 3.6s ease-in-out infinite;
}


.ring-three {
    inset: -16px;
    opacity: .28;
    animation: liveTalkPulse 4.4s ease-in-out infinite;
}


@keyframes liveTalkPulse {

    0%,100% {
        transform: scale(.96);
        opacity: .25;
    }

    50% {
        transform: scale(1.04);
        opacity: .75;
    }
}


/* STATES */

.live-talk-screen.is-listening
.live-talk-orb-core {
    box-shadow:
        0 0 55px rgba(210,180,100,.22),
        inset 0 0 30px rgba(255,255,255,.04);
}


.live-talk-screen.is-speaking
.live-talk-orb-core {
    transform: scale(1.06);

    box-shadow:
        0 0 75px rgba(210,180,100,.28),
        inset 0 0 35px rgba(255,255,255,.06);
}


/* TRANSCRIPT */

.live-talk-transcript {
    width: min(760px, 100%);

    flex: 1;

    min-height: 100px;

    overflow-y: auto;

    padding:
        10px
        4px
        30px;

    scroll-behavior: smooth;
}


.live-talk-empty {
    text-align: center;

    color:
        rgba(255,255,255,.38);

    font-size: 14px;

    padding: 25px;
}


.live-talk-message {
    max-width: 82%;

    margin-bottom: 14px;

    padding:
        12px
        15px;

    border-radius: 15px;

    font-size: 14px;

    line-height: 1.55;

    animation:
        liveTalkMessageIn .2s ease;
}


.live-talk-message.user {
    margin-left: auto;

    color: #f5f3ee;

    background:
        rgba(255,255,255,.075);

    border:
        1px solid rgba(255,255,255,.08);
}


.live-talk-message.synapse {
    margin-right: auto;

    color: rgba(255,255,255,.86);

    background:
        rgba(214,190,120,.055);

    border:
        1px solid rgba(214,190,120,.12);
}


.live-talk-message-label {
    margin-bottom: 5px;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .10em;

    color:
        rgba(214,190,120,.68);
}


@keyframes liveTalkMessageIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* FOOTER */

.live-talk-footer {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        16px
        28px;

    border-top:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(12,12,12,.88);

    backdrop-filter: blur(20px);
}


.live-talk-mic-state {
    display: flex;
    align-items: center;
    gap: 9px;

    color:
        rgba(255,255,255,.55);

    font-size: 12px;
}


.live-talk-mic-indicator {
    color: rgba(255,255,255,.30);
}


.live-talk-screen.is-listening
.live-talk-mic-indicator {
    color: #d9c58c;

    animation:
        liveTalkMicPulse 1.1s ease-in-out infinite;
}


@keyframes liveTalkMicPulse {

    50% {
        opacity: .35;
        transform: scale(.75);
    }
}


.live-talk-end {
    height: 44px;

    padding:
        0
        20px;

    display: flex;
    align-items: center;
    gap: 9px;

    border-radius: 13px;

    border:
        1px solid rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.055);

    color:
        rgba(255,255,255,.82);

    cursor: pointer;

    font-size: 13px;

    transition:
        background .2s ease,
        transform .2s ease;
}


.live-talk-end:hover {
    background:
        rgba(255,255,255,.09);

    transform: translateY(-1px);
}


@media (max-width: 600px) {

    .live-talk-header {
        height: 64px;
        padding: 0 17px;
    }

    .live-talk-main {
        padding:
            22px
            15px
            10px;
    }

    .live-talk-orb {
        width: 150px;
        height: 150px;
        margin: 20px 0;
    }

    .live-talk-orb-core {
        width: 92px;
        height: 92px;
        font-size: 19px;
    }

    .live-talk-message {
        max-width: 90%;
    }

    .live-talk-footer {
        min-height: 72px;
        padding: 12px 15px;
    }

    .live-talk-end {
        padding: 0 14px;
    }

}

/* =========================================================
   AP SYNAPSE — LIVE TALK CALL SCREEN
   ========================================================= */

.live-talk-screen {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(190,155,70,.08),
            transparent 35%
        ),
        rgba(4,5,7,.94);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.live-talk-screen.is-open {
    display: flex;
}

.live-talk-panel {
    width: min(620px, 100%);

    max-height: calc(100vh - 48px);

    overflow-y: auto;

    padding: 24px;

    border-radius: 28px;

    border: 1px solid rgba(255,255,255,.09);

    background:
        linear-gradient(
            145deg,
            rgba(25,25,27,.98),
            rgba(10,10,12,.98)
        );

    box-shadow:
        0 40px 120px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.05);
}


/* TOP BAR */

.live-talk-topbar {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.live-talk-brand {
    display: flex;

    align-items: center;

    gap: 12px;
}

.live-talk-brand-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    border: 1px solid rgba(214,190,120,.35);

    background: rgba(214,190,120,.07);

    color: #d8bd78;

    font-size: 11px;
    font-weight: 700;
}

.live-talk-brand strong {
    display: block;

    font-size: 14px;
}

.live-talk-brand span {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.42);

    font-size: 10px;
}

.live-talk-close {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.09);

    background: rgba(255,255,255,.04);

    color: rgba(255,255,255,.7);

    font-size: 23px;

    cursor: pointer;
}


/* STATUS */

.live-talk-status {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 22px;

    color: rgba(255,255,255,.55);

    font-size: 11px;
}

.live-talk-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d5b86f;

    box-shadow:
        0 0 12px rgba(213,184,111,.8);

    animation: liveTalkPulse 1.5s infinite;
}

@keyframes liveTalkPulse {

    0%,100% {
        opacity: .45;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


/* CENTRAL PRESENCE */

.live-talk-presence {
    text-align: center;

    padding: 28px 0 20px;
}

.live-talk-orb {
    width: 150px;
    height: 150px;

    margin: 0 auto 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216,189,120,.25),
            rgba(216,189,120,.04) 48%,
            transparent 70%
        );

    border:
        1px solid rgba(216,189,120,.25);

    box-shadow:
        0 0 60px rgba(216,189,120,.12);

    animation: liveTalkOrb 3s ease-in-out infinite;
}

.live-talk-orb-inner {
    width: 105px;
    height: 105px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(216,189,120,.35);

    background:
        radial-gradient(
            circle at 35% 30%,
            #2b2923,
            #0c0c0d
        );

    color: #d8bd78;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: 3px;
}

@keyframes liveTalkOrb {

    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

.live-talk-presence h2 {
    margin: 0;

    font-size: 23px;
}

.live-talk-presence p {
    margin: 7px 0 0;

    color: rgba(255,255,255,.42);

    font-size: 12px;
}


/* VOICES */

.live-talk-voices {
    margin-top: 8px;
}

.live-talk-section-label {
    margin-bottom: 9px;

    color: rgba(216,189,120,.7);

    font-size: 9px;

    letter-spacing: 2px;

    text-align: center;
}

.live-talk-voice-options {
    display: flex;

    gap: 10px;
}

.live-talk-voice-option {
    flex: 1;

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 62px;

    padding: 9px 12px;

    border-radius: 15px;

    border:
        1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.025);

    color: white;

    text-align: left;

    cursor: pointer;

    transition: .2s ease;
}

.live-talk-voice-option.active {
    border-color:
        rgba(216,189,120,.4);

    background:
        rgba(216,189,120,.065);
}

.voice-option-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(216,189,120,.25);

    color: #d8bd78;

    font-weight: 700;
}

.voice-option-text strong {
    display: block;

    font-size: 12px;
}

.voice-option-text small {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.4);

    font-size: 9px;
}

.voice-option-check {
    margin-left: auto;

    opacity: 0;

    color: #d8bd78;
}

.live-talk-voice-option.active
.voice-option-check {
    opacity: 1;
}


/* CONTROLS */

.live-talk-controls {
    display: flex;

    justify-content: center;

    gap: 16px;

    margin-top: 28px;
}

.live-talk-control {
    width: 72px;
    height: 72px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.09);

    background:
        rgba(255,255,255,.045);

    color: rgba(255,255,255,.8);

    cursor: pointer;

    transition: .2s ease;
}

.live-talk-control:hover {
    transform: translateY(-2px);

    background:
        rgba(255,255,255,.07);
}

.live-talk-control span {
    font-size: 19px;
}

.live-talk-control small {
    font-size: 8px;

    color: rgba(255,255,255,.42);
}

.live-talk-mic-control.active {
    border-color:
        rgba(216,189,120,.42);

    background:
        rgba(216,189,120,.09);

    color: #d8bd78;
}

.live-talk-end-control {
    color: #d98d82;
}

.live-talk-footer {
    margin-top: 22px;

    text-align: center;

    color: rgba(255,255,255,.2);

    font-size: 9px;
}


@media (max-width: 600px) {

    .live-talk-screen {
        padding: 10px;
    }

    .live-talk-panel {
        max-height: calc(100vh - 20px);

        padding: 18px;

        border-radius: 23px;
    }

    .live-talk-orb {
        width: 125px;
        height: 125px;
    }

    .live-talk-orb-inner {
        width: 88px;
        height: 88px;
    }

    .live-talk-controls {
        margin-top: 20px;
    }

    .live-talk-control {
        width: 64px;
        height: 64px;
    }
}

/* =========================================================
   AP SYNAPSE — PREMIUM COMMAND BAR
========================================================= */

.command-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 18px 28px 24px;
    position: relative;
    z-index: 50;
}


/* ---------------------------------------------------------
   COMMAND BAR
--------------------------------------------------------- */

.command-bar {
    width: min(960px, 100%);
    min-height: 76px;

    display: flex;
    align-items: center;

    padding: 10px 10px 10px 22px;

    gap: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(28, 29, 32, 0.96),
            rgba(16, 17, 19, 0.98)
        );

    border: 1px solid rgba(255, 255, 255, 0.085);

    border-radius: 22px;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


.command-bar:focus-within {
    border-color: rgba(190, 150, 70, 0.30);

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(190, 150, 70, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/* ---------------------------------------------------------
   INPUT
--------------------------------------------------------- */

.command-input-wrap {
    flex: 1;
    min-width: 120px;
}


#userInput {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #f4f2ed;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 15px;
    font-weight: 450;

    letter-spacing: -0.01em;

    padding: 14px 0;
}


#userInput::placeholder {
    color: rgba(218, 216, 209, 0.43);
    transition: color 160ms ease;
}


#userInput:focus::placeholder {
    color: rgba(218, 216, 209, 0.28);
}


/* ---------------------------------------------------------
   TOOL GROUP
--------------------------------------------------------- */

.command-tools {
    display: flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    border-left: 1px solid rgba(255, 255, 255, 0.055);
}


/* ---------------------------------------------------------
   COMMON TOOL BUTTON
--------------------------------------------------------- */

.command-tool,
.live-talk-btn,
.command-send {
    position: relative;

    border: 0;
    outline: none;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}


/* ---------------------------------------------------------
   TOOL BUTTONS
--------------------------------------------------------- */

.command-tool {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: transparent;

    color: rgba(221, 219, 212, 0.62);

    border: 1px solid transparent;
}


.command-tool svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 160ms ease,
        color 160ms ease;
}


.command-tool:hover {
    background: rgba(255, 255, 255, 0.055);

    color: #eeeae1;

    border-color: rgba(255, 255, 255, 0.065);
}


.command-tool:hover svg {
    transform: scale(1.06);
}


.command-tool:active {
    transform: scale(0.94);
}


.command-tool:focus-visible,
.live-talk-btn:focus-visible,
.command-send:focus-visible {
    box-shadow:
        0 0 0 2px rgba(190, 150, 70, 0.20),
        0 0 0 4px rgba(190, 150, 70, 0.07);
}


/* ---------------------------------------------------------
   LIVE TALK
--------------------------------------------------------- */

.live-talk-btn {
    height: 46px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 15px;

    border-radius: 13px;

    color: rgba(241, 238, 230, 0.82);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(190, 150, 70, 0.18);
}


.live-talk-btn:hover {
    color: #f4efe4;

    background:
        linear-gradient(
            135deg,
            rgba(190, 150, 70, 0.13),
            rgba(255,255,255,0.045)
        );

    border-color: rgba(190, 150, 70, 0.34);

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.20);
}


.live-talk-btn:active {
    transform: scale(0.96);
}


.live-talk-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}


/* Live indicator */

.live-talk-icon {
    width: 15px;
    height: 15px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(214, 178, 101, 0.70);

    border-radius: 50%;
}


.live-core {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d8b36c;

    box-shadow:
        0 0 8px rgba(216, 179, 108, 0.65);
}


/* ---------------------------------------------------------
   DEEP THINK ACTIVE STATE
--------------------------------------------------------- */

#deepThinkBtn.active {
    color: #d8b36c;

    background:
        rgba(190, 150, 70, 0.10);

    border-color:
        rgba(190, 150, 70, 0.24);

    box-shadow:
        inset 0 0 18px rgba(190, 150, 70, 0.045);
}


/* ---------------------------------------------------------
   WEB ACTIVE STATE
--------------------------------------------------------- */

#webBtn.active {
    color: #d8b36c;

    background:
        rgba(190, 150, 70, 0.09);

    border-color:
        rgba(190, 150, 70, 0.20);
}


/* ---------------------------------------------------------
   VOICE ACTIVE STATES
--------------------------------------------------------- */

#voiceBtn.active,
#speakBtn.active {
    color: #d8b36c;

    background:
        rgba(190, 150, 70, 0.085);

    border-color:
        rgba(190, 150, 70, 0.20);
}


/* ---------------------------------------------------------
   STOP
--------------------------------------------------------- */

.command-stop {
    color: rgba(230, 210, 180, 0.82);
}


.command-stop span {
    width: 9px;
    height: 9px;

    border-radius: 2px;

    background: currentColor;

    box-shadow:
        0 0 9px rgba(210, 175, 100, 0.25);
}


.command-stop:hover {
    color: #f1dfbe;

    background: rgba(190, 150, 70, 0.10);
}


/* ---------------------------------------------------------
   SEND
--------------------------------------------------------- */

.command-send {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: #171717;

    background:
        linear-gradient(
            145deg,
            #e1bf7b,
            #c99f55
        );

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}


.command-send svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 160ms ease;
}


.command-send:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            145deg,
            #e8c987,
            #d4aa61
        );

    box-shadow:
        0 9px 26px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(200, 160, 85, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}


.command-send:hover svg {
    transform: translateX(2px);
}


.command-send:active {
    transform: scale(0.94);
}


/* ---------------------------------------------------------
   PREMIUM DELAYED TOOLTIP
--------------------------------------------------------- */

[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;

    left: 50%;
    bottom: calc(100% + 11px);

    transform:
        translate(-50%, 4px)
        scale(0.96);

    opacity: 0;

    pointer-events: none;

    white-space: nowrap;

    padding: 7px 10px;

    border-radius: 8px;

    background:
        rgba(20, 20, 21, 0.97);

    color: rgba(245, 242, 235, 0.92);

    border: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.38);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 11px;
    font-weight: 550;

    letter-spacing: 0.01em;

    z-index: 1000;

    transition:
        opacity 150ms ease,
        transform 150ms ease;

    /* The delay happens before the tooltip becomes visible */
    transition-delay: 650ms;
}


/* tiny tooltip pointer */

[data-tooltip]::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: calc(100% + 6px);

    width: 7px;
    height: 7px;

    transform:
        translateX(-50%)
        rotate(45deg);

    opacity: 0;

    pointer-events: none;

    background: rgba(20, 20, 21, 0.97);

    border-left: 1px solid rgba(255, 255, 255, 0.09);
    border-top: 1px solid rgba(255, 255, 255, 0.09);

    z-index: 999;

    transition:
        opacity 150ms ease;

    transition-delay: 650ms;
}


[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
}


[data-tooltip]:hover::after {
    transform:
        translate(-50%, 0)
        scale(1);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 800px) {

    .command-section {
        padding:
            12px 14px 16px;
    }


    .command-bar {
        min-height: 68px;

        padding:
            8px 8px 8px 15px;

        border-radius: 18px;

        gap: 7px;
    }


    .live-talk-label {
        display: none;
    }


    .live-talk-btn {
        width: 42px;
        height: 42px;

        padding: 0;

        justify-content: center;
    }


    .command-tools {
        gap: 2px;
    }


    .command-tool {
        width: 38px;
        height: 38px;
    }


    .command-send {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 560px) {

    .command-bar {
        width: 100%;
    }


    #speakBtn,
    #webBtn {
        display: none;
    }


    .command-tool {
        width: 36px;
        height: 36px;
    }


    .command-send {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

}

/* ============================================================
   AP SYNAPSE — SOURCES & FURTHER READING
============================================================ */

.synapse-sources {
    margin-top: 28px;
    padding-top: 20px;

    border-top:
        1px solid rgba(255,255,255,0.08);
}

.synapse-sources-heading {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: rgba(255,255,255,0.78);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.synapse-sources-icon {
    display: inline-flex;

    width: 25px;
    height: 25px;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(205,175,95,0.25);

    border-radius: 8px;

    color: #d4b76a;

    background:
        rgba(205,175,95,0.07);
}

.synapse-source {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 11px 13px;

    margin-top: 7px;

    text-decoration: none;

    border:
        1px solid rgba(255,255,255,0.065);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.025);

    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.synapse-source:hover {
    background:
        rgba(255,255,255,0.055);

    border-color:
        rgba(205,175,95,0.25);

    transform:
        translateY(-1px);
}

.synapse-source-number {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 25px;
    height: 25px;

    border-radius: 7px;

    background:
        rgba(205,175,95,0.08);

    color:
        rgba(255,255,255,0.55);

    font-size: 11px;
}

.synapse-source-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    flex: 1;
}

.synapse-source-content strong {
    color:
        rgba(255,255,255,0.86);

    font-size: 13px;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.synapse-source-content small {
    margin-top: 3px;

    color:
        rgba(255,255,255,0.38);

    font-size: 10px;
}

.synapse-source-arrow {
    color:
        rgba(205,175,95,0.75);

    font-size: 16px;

    transition:
        transform 160ms ease;
}

.synapse-source:hover
.synapse-source-arrow {
    transform:
        translate(2px,-2px);
}

.ap-source-link {
    color: #d6b56a;
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
    transition: opacity 0.2s ease;
}

.ap-source-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ============================================================
   AP SYNAPSE — PREMIUM WEB SOURCE LINKS
   ============================================================ */

.ap-source-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;

    margin: 8px 4px;
    padding: 9px 14px;

    color: #e6c46a !important;
    background: rgba(230, 196, 106, 0.08);

    border: 1px solid rgba(230, 196, 106, 0.35);
    border-radius: 10px;

    font-weight: 600;
    text-decoration: none !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ap-source-link:hover {
    color: #fff2bd !important;

    background: rgba(230, 196, 106, 0.16);
    border-color: rgba(230, 196, 106, 0.75);

    transform: translateY(-1px);

    box-shadow:
        0 6px 22px rgba(230, 196, 106, 0.14);
}

.ap-source-link-icon {
    display: inline-flex;

    width: 22px;
    height: 22px;

    align-items: center;
    justify-content: center;

    color: #e6c46a;

    font-size: 15px;
    font-weight: 700;

    border: 1px solid rgba(230, 196, 106, 0.35);
    border-radius: 50%;
}

.ap-source-link-text {
    word-break: break-all;
}

/* ============================================================
   AP SYNAPSE — SOURCE LINK OVERRIDE
   ============================================================ */

.message-body a.ap-source-link,
.message-body a.ap-source-link:visited {

    display: inline-flex !important;
    align-items: center;
    gap: 8px;

    margin: 6px 3px;
    padding: 9px 14px;

    color: #e6c46a !important;

    background:
        linear-gradient(
            135deg,
            rgba(230,196,106,0.13),
            rgba(230,196,106,0.045)
        ) !important;

    border: 1px solid rgba(230,196,106,0.42) !important;

    border-radius: 10px;

    font-size: 0.92rem;
    font-weight: 600;

    text-decoration: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 4px 18px rgba(0,0,0,0.12);

    transition:
        all 180ms ease;

    cursor: pointer;
}

.message-body a.ap-source-link:hover {

    color: #fff4c4 !important;

    background:
        linear-gradient(
            135deg,
            rgba(230,196,106,0.25),
            rgba(230,196,106,0.09)
        ) !important;

    border-color:
        rgba(230,196,106,0.85) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 25px rgba(230,196,106,0.16);

}

.message-body a.ap-source-link::before {

    content: "↗";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    border:
        1px solid rgba(230,196,106,0.38);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 700;

}

.message-body a.ap-source-link-text {
    color: inherit !important;
}

/* ============================================================
   AP SYNAPSE — PREMIUM WEB SOURCES
   ============================================================ */

.ap-sources-panel {
    margin-top: 24px;
    padding-top: 18px;

    border-top:
        1px solid rgba(220, 185, 90, 0.18);
}

.ap-sources-heading {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 12px;

    color: #d9b85c;

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ap-sources-heading-mark {
    color: #e4c66b;
    font-size: 0.9rem;
}

.ap-sources-list {
    display: grid;
    gap: 9px;
}

.ap-premium-source {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 12px 14px;

    color: inherit !important;
    text-decoration: none !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.035),
            rgba(218,181,82,0.045)
        );

    border:
        1px solid rgba(218,181,82,0.20);

    border-radius: 12px;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.ap-premium-source:hover {

    transform: translateY(-1px);

    border-color:
        rgba(224,194,105,0.65);

    background:
        linear-gradient(
            135deg,
            rgba(218,181,82,0.10),
            rgba(255,255,255,0.045)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,0.18),
        0 0 20px rgba(218,181,82,0.06);
}

.ap-source-number {

    flex: 0 0 auto;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #e2c36b;

    background:
        rgba(218,181,82,0.08);

    border:
        1px solid rgba(218,181,82,0.30);

    border-radius: 50%;

    font-size: 0.72rem;
    font-weight: 700;
}

.ap-source-content {

    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ap-source-title {

    color: #eee6d0;

    font-size: 0.9rem;
    font-weight: 650;

    line-height: 1.35;
}

.ap-source-domain {

    color: #c9a957;

    font-size: 0.73rem;
    font-weight: 600;
}

.ap-source-arrow {

    margin-left: 4px;

    font-size: 0.8rem;

    opacity: 0.8;
}

.ap-source-snippet {

    margin-top: 3px;

    color: rgba(235,235,235,0.55);

    font-size: 0.76rem;
    line-height: 1.45;
}

/* ============================================================
   AP SYNAPSE — PREMIUM INTELLIGENCE CONVERSATION
   ============================================================ */

/* USER MESSAGE — clean editorial text, no childish bubble */
.user-message {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 0 42px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.user-message .avatar {
    display: none !important;
}

.user-message .message-body {
    max-width: min(780px, 78%) !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: rgba(235, 233, 226, 0.78) !important;

    font-size: 15px !important;
    line-height: 1.75 !important;
    text-align: right !important;
}


/* SYNAPSE RESPONSE — no giant box */
.message.ai {
    display: flex !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 1080px !important;

    margin: 0 auto 64px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.message.ai .avatar {
    flex: 0 0 auto !important;

    width: 30px !important;
    height: 30px !important;

    margin: 3px 22px 0 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 9px !important;

    background:
        linear-gradient(
            145deg,
            #d5b45a,
            #8f7131
        ) !important;

    color: #111 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;

    box-shadow:
        0 5px 18px rgba(194,153,57,.16) !important;
}

.message.ai .message-body {
    flex: 1 !important;
    min-width: 0 !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: rgba(242,240,233,.91) !important;

    font-size: 16px !important;
    line-height: 1.82 !important;
}


/* RESPONSE TYPOGRAPHY */
.message.ai .message-body h1,
.message.ai .message-body h2,
.message.ai .message-body h3 {
    margin: 30px 0 14px !important;

    color: #f2efe5 !important;

    font-weight: 650 !important;
    letter-spacing: -.025em !important;
    line-height: 1.25 !important;
}

.message.ai .message-body h1 {
    font-size: 25px !important;
}

.message.ai .message-body h2 {
    font-size: 21px !important;
}

.message.ai .message-body h3 {
    font-size: 18px !important;
}

.message.ai .message-body p {
    margin: 0 0 18px !important;
}

.message.ai .message-body li {
    margin: 9px 0 !important;
}

.message.ai .message-body strong {
    color: #e6c66d !important;
    font-weight: 650 !important;
}


/* PROCESSING STATE */
.thinking {
    width: 100% !important;
    max-width: 1080px !important;

    margin: 0 auto 42px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.synapse-processing {
    width: 100%;
    padding-left: 52px;
}

.synapse-processing-header {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    font-size: 10px;
    letter-spacing: .17em;
}

.synapse-processing-mark {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #c8a858;

    box-shadow:
        0 0 0 4px rgba(200,168,88,.08),
        0 0 15px rgba(200,168,88,.32);

    animation: synapseCorePulse 1.8s ease-in-out infinite;
}

.synapse-processing-title {
    color: rgba(231,225,208,.84);
    font-weight: 700;
}

.synapse-processing-status {
    color: #c7a85a;
    font-weight: 700;
}

.synapse-processing-stage {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(223,220,210,.58);

    font-size: 13px;
    letter-spacing: .015em;
}

.processing-pulse {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(213,184,104,.75);

    animation: synapseStagePulse 1.1s ease-in-out infinite;
}

.synapse-processing-line {
    width: 280px;
    height: 1px;

    margin-top: 15px;

    background:
        linear-gradient(
            90deg,
            rgba(197,164,83,.35),
            rgba(197,164,83,0)
        );
}

@keyframes synapseCorePulse {
    0%,100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes synapseStagePulse {
    0%,100% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }
}


/* SOURCE LINKS — PREMIUM GOLD */
.ap-source-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    margin: 3px 0 !important;
    padding: 5px 10px !important;

    color: #d8b967 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    border: 1px solid rgba(199,166,83,.24) !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            rgba(202,169,84,.09),
            rgba(202,169,84,.025)
        ) !important;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease !important;
}

.ap-source-link::after {
    content: "↗";

    font-size: 12px;
    opacity: .7;
}

.ap-source-link:hover {
    color: #f0d68b !important;

    border-color: rgba(220,190,105,.55) !important;

    background: rgba(211,176,87,.12) !important;

    transform: translateY(-1px);
}

/* =========================================================
   AP SYNAPSE — PREMIUM CONVERSATION SYSTEM
   Clean / editorial / intelligence-workspace aesthetic
   ========================================================= */

/* Conversation flow */
.message {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 28px 0;
    animation: apMessageIn .35s ease both;
}

/* Remove childish full-width user panel */
.message.user,
.user-message {
    justify-content: flex-end;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* User message itself */
.message.user .message-body,
.user-message .message-body {
    max-width: min(720px, 78%);
    width: fit-content;
    padding: 14px 19px;
    border-radius: 18px 18px 5px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        ) !important;

    border: 1px solid rgba(201,164,76,.30) !important;

    color: rgba(255,255,255,.92);

    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045);

    line-height: 1.65;
}

/* Remove the giant blue U block */
.user-message::before,
.user-message::after {
    display: none !important;
}

/* User avatar */
.message.user .avatar,
.user-message .avatar {
    display: none !important;
}

/* AP response */
.message.ai {
    justify-content: flex-start;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* AP avatar — understated, not a colorful square */
.message.ai .avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #d8b45a,
            #a78331
        ) !important;

    color: #111 !important;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;

    box-shadow:
        0 0 0 1px rgba(212,176,82,.22),
        0 5px 18px rgba(190,150,50,.15);
}

/* AP response body — NO box */
.message.ai .message-body {
    flex: 1;
    min-width: 0;
    max-width: 900px;

    padding: 2px 0 12px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: rgba(245,245,245,.91);
    line-height: 1.78;
    font-size: 15.5px;
}

/* Premium typography */
.message.ai .message-body p {
    margin: 0 0 18px;
}

.message.ai .message-body p:last-child {
    margin-bottom: 0;
}

.message.ai .message-body strong {
    color: #e4c66f;
    font-weight: 650;
}

.message.ai .message-body h1,
.message.ai .message-body h2,
.message.ai .message-body h3 {
    color: #f4f0e6;
    letter-spacing: -.015em;
    margin-top: 28px;
    margin-bottom: 13px;
}

.message.ai .message-body h2 {
    font-size: 21px;
}

.message.ai .message-body h3 {
    font-size: 17px;
}

/* Lists */
.message.ai .message-body ul,
.message.ai .message-body ol {
    padding-left: 23px;
    margin: 10px 0 20px;
}

.message.ai .message-body li {
    margin: 8px 0;
}

/* Elegant separator */
.message.ai .message-body hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.10);
    margin: 24px 0;
}

/* =========================================================
   SOURCE LINKS
   ========================================================= */

.message.ai .message-body a.ap-source-link,
.message.ai .message-body a[href^="http"] {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;

    margin: 5px 6px 5px 0;
    padding: 7px 12px;

    border-radius: 9px;

    color: #e5c76d !important;

    background:
        linear-gradient(
            135deg,
            rgba(218,180,78,.13),
            rgba(218,180,78,.055)
        ) !important;

    border: 1px solid rgba(218,180,78,.28) !important;

    text-decoration: none !important;

    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.message.ai .message-body a.ap-source-link::before {
    content: "↗";
    font-size: 12px;
    opacity: .9;
}

.message.ai .message-body a.ap-source-link:hover,
.message.ai .message-body a[href^="http"]:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            rgba(218,180,78,.22),
            rgba(218,180,78,.09)
        ) !important;

    border-color: rgba(218,180,78,.55) !important;

    box-shadow:
        0 5px 18px rgba(190,150,50,.12);
}

/* =========================================================
   THINKING / RESEARCH STATE
   ========================================================= */

.ap-synapse-thinking {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 25px 0 30px;
    padding-left: 2px;

    color: rgba(235,235,235,.72);

    font-size: 13px;
    letter-spacing: .02em;

    animation: apThinkingIn .35s ease both;
}

.ap-thinking-mark {
    position: relative;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    border: 1px solid rgba(218,180,78,.38);

    box-shadow:
        0 0 20px rgba(218,180,78,.08);

    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-thinking-mark::before {
    content: "";
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #d9b45a;

    box-shadow:
        0 0 12px rgba(218,180,78,.7);

    animation: apThinkingPulse 1.25s ease-in-out infinite;
}

.ap-thinking-text {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ap-thinking-label {
    color: #e0c26b;
    font-weight: 600;
}

.ap-thinking-stage {
    color: rgba(235,235,235,.55);
}

.ap-thinking-dots {
    display: inline-flex;
    gap: 3px;
}

.ap-thinking-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(218,180,78,.75);
    animation: apDot 1.15s infinite ease-in-out;
}

.ap-thinking-dots span:nth-child(2) {
    animation-delay: .15s;
}

.ap-thinking-dots span:nth-child(3) {
    animation-delay: .30s;
}

/* Streaming cursor */
.typingCursor {
    color: #d9b45a;
    opacity: .75;
    font-size: 12px;
    margin-left: 3px;
    animation: apCursorBlink 1s step-end infinite;
}

/* Animations */
@keyframes apMessageIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes apThinkingIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes apThinkingPulse {
    0%, 100% {
        transform: scale(.8);
        opacity: .55;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

@keyframes apDot {
    0%, 70%, 100% {
        transform: translateY(0);
        opacity: .35;
    }

    35% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

@keyframes apCursorBlink {
    50% {
        opacity: 0;
    }
}

/* Mobile */
@media (max-width: 700px) {

    .message.ai .message-body {
        font-size: 15px;
    }

    .message.user .message-body,
    .user-message .message-body {
        max-width: 88%;
    }

    .message {
        gap: 11px;
        margin: 22px 0;
    }

}

/* =========================================================
   AP SYNAPSE — MESSAGE ACTIONS
   ========================================================= */

.ap-response-actions {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 8px;
    margin-left: 0;

    min-height: 28px;
}


.ap-response-action {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 28px;
    padding: 0 8px;

    border: 1px solid transparent;
    border-radius: 7px;

    background: transparent;

    color: rgba(235,235,235,.38);

    font-family: inherit;
    font-size: 11px;
    font-weight: 550;
    letter-spacing: .01em;

    cursor: pointer;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.ap-response-action:hover {

    color: #dfc16a;

    background:
        rgba(216,180,88,.075);

    border-color:
        rgba(216,180,88,.18);

    transform:
        translateY(-1px);

}


.ap-action-icon {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    font-size: 13px;

    opacity: .8;

}


.ap-action-label {
    transition: opacity .18s ease;
}


/* =========================================================
   USER MESSAGE TIMESTAMP
   ========================================================= */

.ap-message-time {

    margin-top: 7px;

    text-align: right;

    color:
        rgba(235,235,235,.28);

    font-size: 10px;

    line-height: 1;

    letter-spacing: .025em;

    user-select: none;

}


/* =========================================================
   AP RESPONSE TIME / META
   ========================================================= */

.message.ai .ap-message-time {

    text-align: left;

    margin-top: 10px;

    color:
        rgba(235,235,235,.24);

}


/* =========================================================
   TOOLTIP
   ========================================================= */

.ap-response-action[title] {
    position: relative;
}


.ap-response-action:hover::after {

    content: attr(title);

    position: absolute;

    left: 50%;
    bottom: calc(100% + 8px);

    transform:
        translateX(-50%)
        translateY(2px);

    white-space: nowrap;

    padding: 6px 9px;

    border-radius: 6px;

    background:
        rgba(20,20,20,.96);

    border:
        1px solid
        rgba(216,180,88,.22);

    color:
        rgba(245,245,245,.82);

    font-size: 10px;
    font-weight: 500;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.28);

    pointer-events: none;

    opacity: 0;

    animation:
        apTooltipIn .16s ease
        forwards;

    z-index: 1000;

}


@keyframes apTooltipIn {

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);

    }

}


/* Mobile */

@media (max-width: 700px) {

    .ap-action-label {
        display: none;
    }

    .ap-response-action {
        width: 30px;
        padding: 0;
    }

}

/* ============================================================
   AP SYNAPSE — FINAL CONVERSATION LAYOUT SAFETY OVERRIDE
   Paste at the VERY BOTTOM of CSS
   ============================================================ */

/*
   IMPORTANT:
   Conversation enhancements must NEVER alter the geometry
   of the main AP Synapse workspace / hero composition.
*/


/* ------------------------------------------------------------
   1. USER MESSAGE ACTIONS
   ------------------------------------------------------------ */

.ap-user-message-actions {
    display: flex;
    gap: 4px;
    margin-top: 7px;

    opacity: 0;
    transform: translateY(-2px);

    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

.message.user:hover .ap-user-message-actions,
.message.user:focus-within .ap-user-message-actions {
    opacity: 1;
    transform: translateY(0);
}

.ap-message-mini-action {
    width: 26px;
    height: 26px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 26px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;

    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.52);

    cursor: pointer;

    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease;
}

.ap-message-mini-action:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(190,160,95,.25);
    color: rgba(255,255,255,.9);
}


/* ------------------------------------------------------------
   2. SOURCES
   ------------------------------------------------------------ */

.ap-sources {
    width: 100%;
    max-width: 100%;

    margin-top: 22px;
    padding-top: 14px;

    border-top: 1px solid rgba(255,255,255,.065);

    box-sizing: border-box;
}

.ap-sources-header {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 9px;
}

.ap-sources-kicker {
    font-size: 9px;
    letter-spacing: .18em;
    color: rgba(255,255,255,.42);
}

.ap-sources-count {
    min-width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.48);

    font-size: 9px;
}

.ap-sources-list {
    display: grid;
    gap: 5px;
    width: 100%;
}

.ap-source-card {
    display: grid;
    grid-template-columns: 25px minmax(0,1fr) 20px;
    align-items: center;

    min-width: 0;
    min-height: 44px;

    padding: 7px 9px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 9px;

    background: rgba(255,255,255,.018);

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.ap-source-card:hover {
    background: rgba(255,255,255,.045);
    border-color: rgba(190,160,95,.20);
    transform: translateX(2px);
}

.ap-source-number {
    font-size: 9px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.28);
}

.ap-source-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap-source-content strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
    font-weight: 500;

    color: rgba(255,255,255,.72);
}

.ap-source-content small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 9px;
    color: rgba(255,255,255,.31);
}

.ap-source-arrow {
    color: rgba(255,255,255,.28);
    font-size: 12px;
}


/* ------------------------------------------------------------
   3. SHARE
   ------------------------------------------------------------ */

.conversation-share-btn {
    height: 30px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    flex: 0 0 auto;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;

    background: rgba(255,255,255,.025);

    color: rgba(255,255,255,.52);

    font-size: 10px;

    cursor: pointer;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.conversation-share-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(190,160,95,.22);
    color: rgba(255,255,255,.88);
}


/* ------------------------------------------------------------
   4. CONVERSATION NAVIGATOR
   ------------------------------------------------------------
   CRITICAL FIX

   The navigator is removed from normal flex sizing.

   It must NEVER consume width from the central workspace.
   ------------------------------------------------------------ */

.conversation-navigator {
    position: absolute !important;

    top: 0;
    right: 0;
    bottom: 0;

    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;

    height: auto !important;

    margin: 0 !important;
    padding-left: 13px;

    box-sizing: border-box;

    border-left: 1px solid rgba(255,255,255,.055);

    overflow: hidden;

    z-index: 20;

    /*
       CRITICAL:
       Do not participate in parent's flex sizing.
    */
    flex: none !important;

    align-self: auto !important;
}

.conversation-navigator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 4px 10px;

    font-size: 8px;
    letter-spacing: .18em;

    color: rgba(255,255,255,.31);
}

.conversation-navigator-list {
    height: calc(100% - 32px);

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
}

.conversation-navigator-list::-webkit-scrollbar {
    display: none;
}

.conversation-nav-item {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns: 23px minmax(0,1fr);

    gap: 5px;

    padding: 7px 5px;
    margin-bottom: 2px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    text-align: left;

    color: rgba(255,255,255,.30);

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 140ms ease,
        color 140ms ease;
}

.conversation-nav-item:hover {
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.68);
}

.conversation-nav-item.active {
    background: rgba(190,160,95,.055);
    color: rgba(255,255,255,.78);
}

.conversation-nav-index {
    font-size: 8px;
    opacity: .45;
}

.conversation-nav-label {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 10px;
}


/* ------------------------------------------------------------
   5. JUMP TO LATEST
   ------------------------------------------------------------ */

.jump-to-latest {
    position: absolute;

    right: 215px;
    bottom: 88px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(18,18,18,.88);

    color: rgba(255,255,255,.72);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(6px);

    z-index: 30;

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease,
        background 160ms ease;
}

.jump-to-latest.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.jump-to-latest:hover {
    background: rgba(255,255,255,.08);
    color: white;
}


/* ------------------------------------------------------------
   6. DESKTOP / TABLET SAFETY
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

    .conversation-navigator {
        display: none !important;
    }

    .jump-to-latest {
        right: 24px;
    }
}


/* ------------------------------------------------------------
   7. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 700px) {

    .ap-user-message-actions {
        opacity: 1;
        transform: none;
    }

    .conversation-share-btn span:last-child {
        display: none;
    }

    .conversation-navigator {
        display: none !important;
    }

    .jump-to-latest {
        right: 18px;
        bottom: 78px;
    }
}


/* ============================================================
   8. FINAL AP SYNAPSE WORKSPACE PROTECTION
   ============================================================
   Conversation enhancements must not change the geometry of
   the hero / main workspace.
   ============================================================ */

#heroScreen {
    min-width: 0;
    box-sizing: border-box;
}

#heroScreen .hero-container {
    min-width: 0;
    box-sizing: border-box;
}

/*
   Prevent conversation additions from forcing horizontal
   expansion of the main workspace.
 */

#heroScreen .message,
#heroScreen .messages,
#heroScreen .conversation,
#heroScreen .conversation-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   9. ABSOLUTE NAVIGATOR SAFETY
   ------------------------------------------------------------ */

/*
   If the navigator exists inside a flex/grid conversation
   container, it remains visually available without changing
   the size calculation of the central content.
 */

.conversation-navigator {
    contain: layout paint;
}


/* ------------------------------------------------------------
   10. PREVENT ACCIDENTAL OVERFLOW FROM CONVERSATION UI
   ------------------------------------------------------------ */

.ap-sources,
.ap-source-card,
.conversation-share-btn,
.conversation-navigator,
.conversation-nav-item {
    max-width: 100%;
}


/* ============================================================
   END — AP SYNAPSE CONVERSATION LAYOUT SAFETY OVERRIDE
   ============================================================ */

/* ============================================================
   AP SYNAPSE — NORMAL CONVERSATION WIDTH
   Remove unnecessary right-side conversation column/space
   ============================================================ */

/* Completely remove the right-side conversation navigator */
.conversation-navigator,
.conversation-navigator-header,
.conversation-navigator-list,
.conversation-nav-item {
    display: none !important;
}

/* Let the conversation area use the full available workspace */
.conversation-content,
.conversation-main,
.conversation-view,
.messages-container,
.chat-messages {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Remove any reserved flex space caused by navigator */
.conversation-navigator + *,
.conversation-navigator ~ * {
    margin-right: 0 !important;
}

/* If the conversation wrapper is a flex row, don't reserve
   a second column for navigation */
.conversation-container,
.conversation-layout,
.chat-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    display: flex !important;
}

/* Keep the actual conversation centered and natural */
.conversation-content,
.conversation-main {
    min-width: 0 !important;
}

/* Remove any artificial right border/vertical divider */
.conversation-content,
.conversation-main {
    border-right: none !important;
}

/* Prevent the navigator from influencing layout even if
   another stylesheet tries to restore it */
#conversationNavigator,
#conversation-navigator,
.right-conversation-panel,
.conversation-right-panel {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ============================================================
   AP SYNAPSE — FINAL CHAT WIDTH OVERRIDE
   Remove right conversation navigator and restore full workspace
   ============================================================ */

.conversation-navigator,
#conversationNavigator,
.conversation-navigator-list {
    display: none !important;
}

.chat-window,
#chatWindow {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.chat-window > *,
#chatWindow > * {
    max-width: none;
}

/* Restore normal ChatGPT-like message working width */
.message {
    width: 100%;
    max-width: 900px;
}

.message.ai,
.message.user {
    margin-left: auto;
    margin-right: auto;
}

/* Do not reserve space for the removed navigator */
.jump-to-latest {
    right: 24px !important;
}

/* ============================================================
   AP SYNAPSE — MOBILE COMPOSER
   FINAL PREMIUM MOBILE OVERRIDE
   ============================================================ */

@media (max-width: 700px) {

    /* --------------------------------------------------------
       MAIN COMPOSER
       -------------------------------------------------------- */

    .composer,
    .chat-input-container,
    .input-container,
    .message-composer,
    .chat-composer {
        width: calc(100% - 20px) !important;
        max-width: none !important;

        margin-left: 10px !important;
        margin-right: 10px !important;

        border-radius: 18px !important;

        padding: 8px !important;

        background:
            linear-gradient(
                180deg,
                rgba(25,25,27,.96),
                rgba(15,15,17,.98)
            ) !important;

        border: 1px solid
            rgba(190,160,95,.24) !important;

        box-shadow:
            0 10px 35px rgba(0,0,0,.38),
            inset 0 1px 0
                rgba(255,255,255,.035) !important;

        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       ACTUAL INPUT
       -------------------------------------------------------- */

    #userInput {

        width: 100% !important;

        min-height: 42px !important;
        max-height: 120px !important;

        padding:
            11px 12px !important;

        margin: 0 !important;

        border: 0 !important;
        outline: none !important;

        border-radius: 12px !important;

        background:
            rgba(255,255,255,.035) !important;

        color:
            rgba(255,255,255,.88) !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        box-sizing: border-box !important;

        resize: none !important;
    }


    #userInput::placeholder {

        color:
            rgba(255,255,255,.34) !important;

        opacity: 1 !important;
    }


    #userInput:focus {

        background:
            rgba(255,255,255,.045) !important;

        box-shadow:
            inset 0 0 0 1px
                rgba(190,160,95,.12) !important;
    }


    /* --------------------------------------------------------
       COMPOSER TOOL ROW
       -------------------------------------------------------- */

    .composer-actions,
    .input-actions,
    .chat-input-actions,
    .composer-toolbar {

        display: flex !important;

        align-items: center !important;

        gap: 4px !important;

        width: 100% !important;

        min-width: 0 !important;

        padding:
            5px 2px 1px !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       TOOL BUTTONS
       -------------------------------------------------------- */

    .composer-actions button,
    .input-actions button,
    .chat-input-actions button,
    .composer-toolbar button {

        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;

        padding: 0 !important;

        border-radius: 9px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 32px !important;

        background:
            transparent !important;

        border: 1px solid
            transparent !important;

        color:
            rgba(255,255,255,.48) !important;

        transition:
            background 150ms ease,
            color 150ms ease,
            border-color 150ms ease,
            transform 150ms ease !important;
    }


    .composer-actions button:hover,
    .input-actions button:hover,
    .chat-input-actions button:hover,
    .composer-toolbar button:hover {

        background:
            rgba(255,255,255,.055) !important;

        border-color:
            rgba(190,160,95,.18) !important;

        color:
            rgba(255,255,255,.9) !important;
    }


    /* --------------------------------------------------------
       SEND BUTTON
       -------------------------------------------------------- */

    #sendBtn {

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        margin-left: auto !important;

        flex: 0 0 42px !important;

        border-radius: 13px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        background:
            linear-gradient(
                145deg,
                #d8b66a,
                #a98238
            ) !important;

        border: 1px solid
            rgba(255,255,255,.14) !important;

        color: #111 !important;

        box-shadow:
            0 5px 18px
            rgba(190,160,95,.18) !important;

        transition:
            transform 150ms ease,
            box-shadow 150ms ease,
            filter 150ms ease !important;
    }


    #sendBtn:hover {

        transform:
            translateY(-1px) !important;

        box-shadow:
            0 7px 22px
            rgba(190,160,95,.26) !important;

        filter:
            brightness(1.05) !important;
    }


    #sendBtn:active {

        transform:
            scale(.96) !important;
    }


    /* --------------------------------------------------------
       STOP BUTTON
       -------------------------------------------------------- */

    #stopBtn {

        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;

        border-radius: 9px !important;
    }


    /* --------------------------------------------------------
       REMOVE EXCESSIVE MOBILE GAPS
       -------------------------------------------------------- */

    .chat-input,
    .composer-inner,
    .input-wrapper {

        width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       MOBILE CHAT AREA
       Keep composer from covering the last response.
       -------------------------------------------------------- */

    #chatWindow {

        padding-bottom: 105px !important;
    }


    /* --------------------------------------------------------
       REMOVE THE OLD OVERSIZED / DESKTOP COMPOSER EFFECT
       -------------------------------------------------------- */

    .composer::before,
    .composer::after,
    .chat-input-container::before,
    .chat-input-container::after {

        display: none !important;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .composer,
    .chat-input-container,
    .input-container,
    .message-composer,
    .chat-composer {

        width: calc(100% - 14px) !important;

        margin-left: 7px !important;
        margin-right: 7px !important;

        padding: 6px !important;

        border-radius: 16px !important;
    }


    #userInput {

        font-size: 13px !important;

        min-height: 40px !important;
    }


    #sendBtn {

        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
    }

}

/* ============================================================
   AP SYNAPSE — MOBILE COMMAND BAR
   PREMIUM TWO-ROW COMPOSER
   ============================================================ */

@media (max-width: 700px) {

    /* --------------------------------------------------------
       COMMAND BAR — MASTER CONTAINER
       -------------------------------------------------------- */

    .command-bar {
        width: calc(100% - 18px) !important;
        max-width: none !important;

        margin-left: 9px !important;
        margin-right: 9px !important;

        padding: 8px !important;

        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;

        gap: 7px !important;

        box-sizing: border-box !important;

        border-radius: 18px !important;

        background:
            linear-gradient(
                180deg,
                rgba(25,25,27,.97),
                rgba(14,14,16,.985)
            ) !important;

        border: 1px solid
            rgba(190,160,95,.24) !important;

        box-shadow:
            0 12px 34px rgba(0,0,0,.42),
            inset 0 1px 0
                rgba(255,255,255,.035) !important;

        backdrop-filter: blur(22px) !important;
        -webkit-backdrop-filter: blur(22px) !important;

        overflow: visible !important;
    }


    /* ========================================================
       ROW 1 — ASK AP SYNAPSE
       ======================================================== */

    .command-input-wrap {
        width: 100% !important;

        min-width: 0 !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;
    }


    #userInput {
        width: 100% !important;

        min-width: 0 !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;

        padding:
            0 14px !important;

        box-sizing: border-box !important;

        border-radius: 12px !important;

        border: 1px solid
            rgba(255,255,255,.065) !important;

        outline: none !important;

        background:
            rgba(255,255,255,.035) !important;

        color:
            rgba(255,255,255,.92) !important;

        font-family: inherit !important;

        font-size: 14px !important;
        font-weight: 400 !important;

        line-height: 46px !important;

        transition:
            background 160ms ease,
            border-color 160ms ease,
            box-shadow 160ms ease !important;
    }


    #userInput::placeholder {
        color:
            rgba(255,255,255,.38) !important;

        opacity: 1 !important;
    }


    #userInput:focus {
        background:
            rgba(255,255,255,.048) !important;

        border-color:
            rgba(190,160,95,.28) !important;

        box-shadow:
            0 0 0 2px
            rgba(190,160,95,.045) !important;
    }


    /* ========================================================
       ROW 2 — ALL COMMAND BUTTONS
       ======================================================== */

    .command-bar > .command-action,
    .command-bar > .command-tools {
        grid-row: 2 !important;
    }


    /*
       Put Live Talk and the complete tool group
       into ONE clean horizontal control row.
    */

    .command-tools {
        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 4px !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* ========================================================
       LIVE TALK
       ======================================================== */

    #liveTalkBtn,
    .live-talk-btn {
        height: 34px !important;

        min-height: 34px !important;

        padding:
            0 8px !important;

        margin: 0 !important;

        flex:
            0 0 auto !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        border-radius: 9px !important;

        background:
            rgba(255,255,255,.035) !important;

        border: 1px solid
            rgba(255,255,255,.065) !important;

        color:
            rgba(255,255,255,.58) !important;

        font-size: 9px !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    .live-talk-label {
        display: inline !important;

        font-size: 9px !important;

        letter-spacing: .01em !important;
    }


    /* ========================================================
       INDIVIDUAL TOOL BUTTONS
       ======================================================== */

    .command-tool {

        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;

        flex:
            0 0 34px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 9px !important;

        background:
            transparent !important;

        border: 1px solid
            transparent !important;

        color:
            rgba(255,255,255,.48) !important;

        box-sizing: border-box !important;

        transition:
            background 150ms ease,
            border-color 150ms ease,
            color 150ms ease,
            transform 150ms ease !important;
    }


    .command-tool svg {

        width: 16px !important;
        height: 16px !important;

        fill: none !important;

        stroke:
            currentColor !important;

        stroke-width: 1.6 !important;

        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }


    .command-tool:hover,
    .command-tool:focus-visible {

        background:
            rgba(255,255,255,.055) !important;

        border-color:
            rgba(190,160,95,.18) !important;

        color:
            rgba(255,255,255,.9) !important;

        outline: none !important;
    }


    .command-tool:active {

        transform:
            scale(.94) !important;
    }


    /* ========================================================
       ACTIVE TOOLS
       ======================================================== */

    #webBtn.active,
    #deepThinkBtn.active {

        background:
            rgba(190,160,95,.09) !important;

        border-color:
            rgba(190,160,95,.28) !important;

        color:
            rgba(218,190,125,.95) !important;
    }


    /* ========================================================
       SEND BUTTON
       ======================================================== */

    #sendBtn {

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        flex:
            0 0 38px !important;

        margin-left: auto !important;

        padding: 0 !important;

        border-radius: 11px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        background:
            linear-gradient(
                145deg,
                #dfbf76,
                #ad873e
            ) !important;

        border: 1px solid
            rgba(255,255,255,.14) !important;

        color:
            #111 !important;

        box-shadow:
            0 5px 16px
            rgba(190,160,95,.18) !important;

        transition:
            transform 150ms ease,
            filter 150ms ease,
            box-shadow 150ms ease !important;
    }


    #sendBtn:hover {

        filter:
            brightness(1.06) !important;

        box-shadow:
            0 7px 20px
            rgba(190,160,95,.25) !important;
    }


    #sendBtn:active {

        transform:
            scale(.94) !important;
    }


    /* ========================================================
       TOOLTIP POSITIONING
       ======================================================== */

    .command-tool[data-tooltip]::after,
    .command-action[data-tooltip]::after {

        bottom:
            calc(100% + 8px) !important;

        top: auto !important;
    }


    /* ========================================================
       PREVENT CHAT CONTENT FROM HIDING BEHIND COMPOSER
       ======================================================== */

    #chatWindow {

        padding-bottom:
            105px !important;
    }

}


/* ============================================================
   SMALL PHONES — 380px AND BELOW
   ============================================================ */

@media (max-width: 380px) {

    .command-bar {

        width: calc(100% - 12px) !important;

        margin-left: 6px !important;
        margin-right: 6px !important;

        padding: 7px !important;

        gap: 6px !important;

        border-radius: 16px !important;
    }


    #userInput {

        height: 44px !important;
        min-height: 44px !important;

        font-size: 13px !important;
    }


    .command-tool {

        width: 31px !important;
        height: 31px !important;

        min-width: 31px !important;
    }


    #sendBtn {

        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
    }


    #liveTalkBtn {

        padding:
            0 6px !important;
    }


    .live-talk-label {

        font-size: 8px !important;
    }

}

/* =========================================================
   AP SYNAPSE — PREMIUM MOBILE COMMAND BAR
   Input first • Tools below • Proper spacing
   ========================================================= */

@media (max-width: 600px) {

    .command-bar {
        width: calc(100% - 20px);
        margin: 0 auto 10px;

        padding: 10px;

        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;

        gap: 10px;

        border-radius: 18px;

        box-sizing: border-box;

        align-items: center;
    }


    /* =========================================
       TOP — ASK AP SYNAPSE
       ========================================= */

    .command-input-wrap {
        grid-column: 1 / -1;
        width: 100%;

        min-width: 0;

        display: flex;
        align-items: center;
    }


    #userInput {
        width: 100%;
        min-width: 0;

        height: 48px;

        padding: 0 14px;

        box-sizing: border-box;

        font-size: 14px;

        border-radius: 13px;

        line-height: 48px;
    }


    /* =========================================
       SECOND ROW — TOOL AREA
       ========================================= */

    .live-talk-btn {
        grid-column: 1;
        grid-row: 2;

        height: 40px;

        padding: 0 12px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 7px;

        border-radius: 12px;

        white-space: nowrap;

        flex-shrink: 0;
    }


    .live-talk-label {
        display: inline-block;

        font-size: 11px;

        letter-spacing: .04em;
    }


    /* =========================================
       TOOLS — EVENLY SPACED
       ========================================= */

    .command-tools {
        grid-column: 2;
        grid-row: 2;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 8px;

        min-width: 0;

        flex-wrap: nowrap;
    }


    .command-tool {
        width: 34px;
        height: 34px;

        min-width: 34px;
        min-height: 34px;

        padding: 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 10px;

        flex-shrink: 0;
    }


    .command-tool svg {
        width: 16px;
        height: 16px;
    }


    /* =========================================
       SEND BUTTON
       ========================================= */

    #sendBtn {
        height: 42px;
        width: 42px;

        min-width: 42px;

        border-radius: 12px;

        flex-shrink: 0;
    }


    /* =========================================
       IF SEND BUTTON IS INSIDE THE INPUT AREA
       ========================================= */

    .command-input-wrap #sendBtn {
        margin-left: 8px;
    }


    /* =========================================
       PREVENT MOBILE CROWDING
       ========================================= */

    .command-bar * {
        box-sizing: border-box;
    }

}

@media (max-width: 430px) {

    .command-bar {
        width: calc(100% - 16px);
        padding: 9px;
        gap: 9px;
    }

    .command-tools {
        gap: 6px;
    }

    .command-tool {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .command-tool svg {
        width: 15px;
        height: 15px;
    }

    .live-talk-btn {
        height: 38px;
        padding: 0 10px;
    }

    .live-talk-label {
        font-size: 10px;
    }
}

/* ============================================================
   AP SYNAPSE — PREMIUM SIDEBAR SYSTEM
   Desktop + Mobile
   ============================================================ */

:root {
    --ap-sidebar-width: 292px;
    --ap-sidebar-rail: 68px;
    --ap-gold: #c9a85e;
    --ap-gold-soft: rgba(201,168,94,.16);
    --ap-panel: rgba(15,16,19,.96);
    --ap-border: rgba(255,255,255,.075);
}


/* ============================================================
   DESKTOP SIDEBAR TOP CONTROL
   ============================================================ */

.ap-sidebar-topbar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    box-sizing: border-box;
}

.ap-sidebar-icon-btn {
    width: 36px;
    height: 36px;

    border: 1px solid var(--ap-border);
    border-radius: 11px;

    background: rgba(255,255,255,.035);
    color: #cfcfc9;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.ap-sidebar-icon-btn:hover {
    background: var(--ap-gold-soft);
    color: var(--ap-gold);
    border-color: rgba(201,168,94,.28);
    transform: translateX(-1px);
}


/* ============================================================
   INSTALL AP SYNAPSE
   ============================================================ */

.ap-install-btn {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 15px;
    margin-top: 10px;

    border: 1px solid rgba(201,168,94,.18);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(201,168,94,.09),
            rgba(255,255,255,.025)
        );

    color: #e4dfd2;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.ap-install-btn:hover {
    background:
        linear-gradient(
            135deg,
            rgba(201,168,94,.16),
            rgba(255,255,255,.04)
        );

    border-color: rgba(201,168,94,.34);

    box-shadow:
        0 8px 30px rgba(0,0,0,.18);

    transform: translateY(-1px);
}

.ap-install-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(201,168,94,.12);
    color: var(--ap-gold);

    font-size: 16px;
}


/* ============================================================
   COLLAPSED DESKTOP RAIL
   ============================================================ */

.ap-collapsed-rail {
    position: fixed;

    top: 12px;
    left: 12px;
    bottom: 12px;

    width: var(--ap-sidebar-rail);

    display: none;
    flex-direction: column;
    align-items: center;

    padding: 12px 9px;

    box-sizing: border-box;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(20,21,25,.96),
            rgba(10,11,14,.96)
        );

    backdrop-filter: blur(18px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.28);

    z-index: 9990;
}

.ap-collapsed-rail.ap-visible {
    display: flex;
}

.ap-rail-btn {
    position: relative;

    width: 44px;
    height: 44px;

    margin: 4px 0;

    border:
        1px solid rgba(255,255,255,.065);

    border-radius: 12px;

    background: rgba(255,255,255,.025);

    color: #aaa9a4;

    display: flex;
    align-items: center;
    justify-content: center;

    font: inherit;
    font-size: 17px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.ap-rail-btn:hover {
    color: var(--ap-gold);

    background:
        rgba(201,168,94,.10);

    border-color:
        rgba(201,168,94,.24);

    transform: translateY(-1px);
}

.ap-rail-brand {
    color: var(--ap-gold);
    font-size: 13px;
    letter-spacing: .04em;
}

.ap-rail-spacer {
    flex: 1;
}


/* ============================================================
   PREMIUM TOOLTIP
   ============================================================ */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;

    left: calc(100% + 10px);
    top: 50%;

    transform:
        translateY(-50%)
        translateX(-4px);

    padding: 7px 10px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 8px;

    background: rgba(12,13,16,.97);

    color: #e9e8e4;

    font-size: 11px;
    font-weight: 500;

    white-space: nowrap;

    pointer-events: none;

    opacity: 0;

    box-shadow:
        0 10px 30px rgba(0,0,0,.28);

    transition:
        opacity .15s ease,
        transform .15s ease;

    z-index: 10000;
}

[data-tooltip]:hover::after {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.ap-mobile-menu {
    position: fixed;

    top: 14px;
    left: 14px;

    width: 46px;
    height: 46px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 14px;

    background:
        rgba(13,14,17,.88);

    color: #e8e6df;

    backdrop-filter: blur(18px);

    display: none;

    align-items: center;
    justify-content: center;

    font-size: 21px;

    cursor: pointer;

    z-index: 10001;

    box-shadow:
        0 10px 35px rgba(0,0,0,.25);
}


/* ============================================================
   MOBILE OVERLAY
   ============================================================ */

#apSidebarOverlay {
    position: fixed;
    inset: 0;

    background:
        rgba(0,0,0,.54);

    backdrop-filter: blur(2px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease;

    z-index: 9998;
}

#apSidebarOverlay.ap-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .ap-sidebar-topbar {
        height: 58px;
    }

    .ap-sidebar-icon-btn {
        width: 40px;
        height: 40px;

        font-size: 25px;
    }

    aside.sidebar {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(340px, 88vw) !important;
        height: 100dvh !important;

        z-index: 9999 !important;

        transform:
            translate3d(-105%,0,0) !important;

        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 1 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transition:
            transform .25s cubic-bezier(.22,.61,.36,1),
            visibility .25s ease !important;

        box-shadow:
            18px 0 60px rgba(0,0,0,.35);
    }

    aside.sidebar.ap-sidebar-open {
        transform:
            translate3d(0,0,0) !important;

        visibility: visible !important;
        pointer-events: auto !important;
    }

    .ap-mobile-menu {
        display: flex;
    }

    .ap-collapsed-rail {
        display: none !important;
    }

    .sidebar nav a,
    .new-chat-btn,
    .ap-install-btn {
        min-height: 50px;
    }

    .sidebar nav a {
        display: flex;
        align-items: center;
        padding: 0 14px;
        border-radius: 12px;
    }

    .ap-sidebar-topbar .ap-sidebar-icon-btn {
        display: none;
    }

    [data-tooltip]::after {
        display: none;
    }
}


/* ============================================================
   SIDEBAR COLLAPSED DESKTOP STATE
   ============================================================ */

@media (min-width: 768px) {

    body.ap-sidebar-collapsed .sidebar {
        transform:
            translateX(
                calc(-1 * var(--ap-sidebar-width) - 20px)
            );

        opacity: 0;
        pointer-events: none;

        transition:
            transform .25s ease,
            opacity .2s ease;
    }

    body.ap-sidebar-collapsed .ap-collapsed-rail {
        display: flex;
    }

}

/* ============================================================
   AP SYNAPSE — HISTORY CONTAINER FINAL VISIBILITY OVERRIDE
   ============================================================ */

@media (min-width: 769px) {

    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
    }

    /* Navigation occupies only its natural height */
    .sidebar-header {
        flex: 0 0 auto !important;
    }

    /* Every top navigation group remains above history */
    .sidebar > .sidebar-group:not(.recent-group) {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* ========================================================
       RECENT SECTION — FORCE IT TO EXIST
       ======================================================== */

    .sidebar > .sidebar-group.recent-group {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 0% !important;

        height: auto !important;
        min-height: 1px !important;
        max-height: none !important;

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        box-sizing: border-box !important;
    }

    /* ========================================================
       HISTORY — TAKE ALL REMAINING SPACE
       ======================================================== */

    .sidebar > .sidebar-group.recent-group > .history-list {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 auto !important;

        height: auto !important;
        min-height: 1px !important;
        max-height: none !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        box-sizing: border-box !important;

        pointer-events: auto !important;
    }

    /* History entries */
    .sidebar .history-list > .history-item {
        display: flex !important;
        flex: 0 0 auto !important;

        min-height: 58px !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;
    }

    /* Don't let a hidden/collapsed parent kill the history */
    .sidebar .recent-group,
    .sidebar .recent-group .history-list {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   AP SYNAPSE — SIDEBAR HISTORY VISIBILITY FIX
   Keeps existing sidebar structure and behavior intact.
   ============================================================ */

@media (min-width: 769px) {

    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .sidebar .recent-group {
        display: flex !important;
        flex-direction: column !important;

        /* Do NOT allow the history container to collapse to 0 */
        flex: 1 1 auto !important;
        min-height: 120px !important;
        height: auto !important;

        overflow: hidden !important;
    }

    .sidebar .history-list {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .sidebar .history-item {
        flex: 0 0 auto !important;
        display: flex !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE SIDEBAR HISTORY
   FINAL LAYOUT FIX
   Buttons → History → Footer
   ========================================================= */

@media (max-width: 768px) {

    /* Sidebar itself becomes the page-level scroll container */
    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        height: 100dvh !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    /* Keep the existing top/header/buttons ABOVE history */
    .sidebar > .ap-sidebar-topbar {
        order: 0 !important;
        flex: 0 0 auto !important;
    }

    .sidebar > .sidebar-header {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    /* MAIN BUTTONS */
    .sidebar > .sidebar-group:not(.recent-group) {
        order: 3 !important;
        flex: 0 0 auto !important;
    }

    /* HISTORY — ALWAYS AFTER BUTTONS */
    .sidebar > .recent-group {
        order: 4 !important;

        display: flex !important;
        flex-direction: column !important;

        flex: 0 0 360px !important;
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;

        width: 100% !important;
        overflow: hidden !important;

        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Actual history list */
    .sidebar > .recent-group .history-list {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    /* Footer ALWAYS LAST */
    .sidebar > .sidebar-footer {
        order: 99 !important;
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE SIDEBAR FINAL STABLE LAYOUT
   History after navigation • native sidebar scrolling
   No fixed-height history • no flex squeezing
   ========================================================= */

@media (max-width: 767px) {

    /* The sidebar itself is the ONE mobile scroll container */
    aside.sidebar,
    .sidebar {
        display: flex !important;
        flex-direction: column !important;

        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        overscroll-behavior-x: none !important;

        touch-action: pan-y !important;
        scroll-behavior: auto !important;
    }

    /* Never allow flexbox to squeeze the sections */
    aside.sidebar > .ap-sidebar-topbar,
    aside.sidebar > .sidebar-header,
    aside.sidebar > .sidebar-group,
    aside.sidebar > .sidebar-footer {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Correct visual order:
       topbar → header → navigation → history → footer */
    aside.sidebar > .ap-sidebar-topbar {
        order: 0 !important;
    }

    aside.sidebar > .sidebar-header {
        order: 1 !important;
    }

    aside.sidebar > .sidebar-group:not(.recent-group) {
        order: 2 !important;
    }

    aside.sidebar > .recent-group {
        order: 3 !important;

        display: block !important;

        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;

        flex: 0 0 auto !important;

        overflow: visible !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    aside.sidebar > .sidebar-footer {
        order: 4 !important;
        flex: 0 0 auto !important;
    }

    /* History must grow naturally */
    aside.sidebar .history-list {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 auto !important;
    }

    aside.sidebar .history-item {
        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 54px !important;
    }

    /* Do NOT let individual navigation items hijack scrolling */
    aside.sidebar nav,
    aside.sidebar nav a,
    aside.sidebar button {
        touch-action: manipulation;
    }

    /* But the sidebar itself remains a vertical pan surface */
    aside.sidebar {
        touch-action: pan-y !important;
    }

    /* No accidental horizontal movement */
    aside.sidebar * {
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    /* Sidebar = one natural vertical scroll area */
    aside.sidebar {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;

        min-height: 100dvh !important;
        height: 100dvh !important;

        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }

    /* Existing header/top sections must keep their size */
    aside.sidebar > .ap-sidebar-topbar,
    aside.sidebar > .sidebar-header {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }

    /* Main navigation */
    aside.sidebar > .sidebar-group:not(.recent-group) {
        order: 3 !important;

        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    /* ================================
       HISTORY — DO NOT SHRINK
       ================================ */

    aside.sidebar > .recent-group {
        order: 4 !important;

        display: block !important;

        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    aside.sidebar > .recent-group .history-list {
        display: flex !important;
        flex-direction: column !important;

        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    aside.sidebar > .recent-group .history-item {
        display: flex !important;

        flex: 0 0 auto !important;
        flex-shrink: 0 !important;

        width: 100% !important;
        min-height: 54px !important;
        height: auto !important;

        box-sizing: border-box !important;
    }

    /* Footer stays after history */
    aside.sidebar > .sidebar-footer {
        order: 99 !important;

        flex: 0 0 auto !important;
        flex-shrink: 0 !important;

        position: relative !important;
    }
}

/* =========================================================
   AP SYNAPSE — FINAL MOBILE SIDEBAR HISTORY
   ========================================================= */

@media (max-width: 768px) {

    /* Main navigation */
    aside.sidebar > .sidebar-group:not(.recent-group) {
        order: 2 !important;
        flex: 0 0 auto !important;
    }

    /* Recent / History section */
    aside.sidebar > .recent-group {
        order: 3 !important;

        flex: 0 0 260px !important;
        width: 100% !important;

        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* History becomes the ONLY scrolling area */
    aside.sidebar > .recent-group > .history-list {
        flex: 1 1 auto !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        display: flex !important;
        flex-direction: column !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;

        box-sizing: border-box !important;
    }

    /* History items */
    aside.sidebar > .recent-group .history-item {
        flex: 0 0 auto !important;
        min-height: 54px !important;
        width: 100% !important;
    }

    /* Footer remains after history */
    aside.sidebar > .sidebar-footer {
        order: 99 !important;
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   AP SYNAPSE — PURE OBSIDIAN BLACK
   Clean • Rich • Polished • Premium
   Background only — no neuron changes
   ========================================================= */

html,
body {
  background: #000101 !important;
  background-image:
    radial-gradient(
      85% 70% at 50% 0%,
      rgba(255, 255, 255, 0.018),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      #010203 0%,
      #000101 48%,
      #000000 100%
    ) !important;

  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Let the premium obsidian surface continue through the app */
#root,
#app {
  background: transparent !important;
}

/* Existing neuron field remains completely untouched */
canvas {
  background: transparent !important;
}

/* ============================================================
   AP SYNAPSE — PROFESSIONAL LIGHT / TITANIUM MODE
   FINAL OVERRIDE
   Purpose:
   • No blinding white
   • Proper readable contrast
   • Premium neutral titanium surface
   • Sidebar belongs to the same visual system
   • Cards / controls remain visible
   • Profile panel follows light mode
   • Intelligence Field remains visible
   • Does NOT alter dark mode
   ============================================================ */


/* ------------------------------------------------------------
   1. LIGHT MODE ROOT
   ------------------------------------------------------------ */

html:has(body.light-mode),
html:has(body.light),
html[data-theme="light"],
body.light-mode,
body.light,
body[data-theme="light"] {

  background: #e7e9e8 !important;
  color: #202326 !important;

  --ap-light-bg: #e7e9e8;
  --ap-light-surface: #eef0ef;
  --ap-light-surface-2: #e3e6e5;
  --ap-light-card: rgba(248, 249, 248, 0.82);
  --ap-light-border: rgba(35, 39, 42, 0.13);
  --ap-light-border-strong: rgba(35, 39, 42, 0.20);
  --ap-light-text: #202326;
  --ap-light-text-soft: #60666b;
  --ap-light-text-muted: #7a8084;
  --ap-light-gold: #a47a32;
}


/* ------------------------------------------------------------
   2. MAIN APPLICATION SURFACE
   ------------------------------------------------------------ */

body.light-mode,
body.light,
body[data-theme="light"] {

  background:
    radial-gradient(
      90% 70% at 50% -10%,
      rgba(255,255,255,0.55),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      #e3e6e5 0%,
      #edf0ef 42%,
      #e5e8e7 72%,
      #dde1df 100%
    ) !important;

  color: var(--ap-light-text) !important;
}


/* ------------------------------------------------------------
   3. STOP THE "PURE WHITE" LOOK
   ------------------------------------------------------------ */

body.light-mode::before,
body.light::before,
body[data-theme="light"]::before {

  background:
    radial-gradient(
      60% 50% at 50% 0%,
      rgba(255,255,255,0.22),
      transparent 70%
    ) !important;

  opacity: 1 !important;
}


/* ------------------------------------------------------------
   4. APPLICATION CONTAINERS
   ------------------------------------------------------------ */

body.light-mode #root,
body.light-mode #app,
body.light-mode .app,
body.light-mode .app-container,
body.light-mode .main-container,

body.light #root,
body.light #app,
body.light .app,
body.light .app-container,
body.light .main-container,

body[data-theme="light"] #root,
body[data-theme="light"] #app,
body[data-theme="light"] .app,
body[data-theme="light"] .app-container,
body[data-theme="light"] .main-container {

  background: transparent !important;
  color: var(--ap-light-text) !important;
}


/* ------------------------------------------------------------
   5. SIDEBAR — SAME MATERIAL AS THE WHOLE APP
   ------------------------------------------------------------ */

body.light-mode aside,
body.light-mode .sidebar,
body.light-mode [class*="sidebar"],
body.light-mode nav,

body.light aside,
body.light .sidebar,
body.light [class*="sidebar"],
body.light nav,

body[data-theme="light"] aside,
body[data-theme="light"] .sidebar,
body[data-theme="light"] [class*="sidebar"],
body[data-theme="light"] nav {

  background:
    linear-gradient(
      160deg,
      rgba(244,246,245,0.94),
      rgba(226,230,228,0.94)
    ) !important;

  color: var(--ap-light-text) !important;

  border-right: 1px solid
    rgba(35,39,42,0.12) !important;

  box-shadow:
    8px 0 28px rgba(30,34,36,0.045) !important;
}


/* ------------------------------------------------------------
   6. SIDEBAR TEXT
   ------------------------------------------------------------ */

body.light-mode aside *,
body.light-mode .sidebar *,
body.light-mode nav *,

body.light aside *,
body.light .sidebar *,
body.light nav *,

body[data-theme="light"] aside *,
body[data-theme="light"] .sidebar *,
body[data-theme="light"] nav * {

  color: inherit;
}


/* Main sidebar labels */

body.light-mode aside a,
body.light-mode aside button,
body.light-mode .sidebar a,
body.light-mode .sidebar button,
body.light-mode nav a,
body.light-mode nav button {

  color: #454b50 !important;
}


/* Secondary sidebar text */

body.light-mode aside small,
body.light-mode aside span,
body.light-mode .sidebar small,
body.light-mode .sidebar span {

  color: #6d7378 !important;
}


/* ------------------------------------------------------------
   7. SIDEBAR BUTTONS
   ------------------------------------------------------------ */

body.light-mode aside button,
body.light-mode .sidebar button,
body.light-mode nav button {

  background:
    rgba(255,255,255,0.38) !important;

  border: 1px solid
    rgba(35,39,42,0.11) !important;

  border-radius: 14px !important;

  box-shadow:
    0 2px 8px rgba(30,34,36,0.035) !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}


body.light-mode aside button:hover,
body.light-mode .sidebar button:hover,
body.light-mode nav button:hover {

  background:
    rgba(255,255,255,0.72) !important;

  border-color:
    rgba(164,122,50,0.25) !important;

  box-shadow:
    0 5px 18px rgba(30,34,36,0.07) !important;
}


/* ------------------------------------------------------------
   8. SEARCH FIELD
   ------------------------------------------------------------ */

body.light-mode input,
body.light-mode textarea,
body.light-mode [contenteditable="true"] {

  background:
    rgba(248,249,248,0.72) !important;

  color:
    #25292c !important;

  border-color:
    rgba(35,39,42,0.12) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.55),
    0 2px 10px rgba(30,34,36,0.035) !important;
}


body.light-mode input::placeholder,
body.light-mode textarea::placeholder {

  color:
    #7c8286 !important;
}


/* ------------------------------------------------------------
   9. HEADER / TOP CONTROLS
   ------------------------------------------------------------ */

body.light-mode header,
body.light-mode .header,
body.light-mode [class*="header"] {

  color:
    #25292c !important;

  border-color:
    rgba(35,39,42,0.10) !important;
}


/* ------------------------------------------------------------
   10. UNIVERSAL BUTTON / CONTROL FIX
   ------------------------------------------------------------ */

body.light-mode button {

  color:
    #303539 !important;

  border-color:
    rgba(35,39,42,0.13) !important;
}


body.light-mode button:hover {

  color:
    #202326 !important;

  border-color:
    rgba(164,122,50,0.30) !important;
}


/* ------------------------------------------------------------
   11. HERO TEXT — IMPORTANT
   ------------------------------------------------------------ */

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {

  color:
    #202326 !important;

  text-shadow:
    none !important;
}


/* ------------------------------------------------------------
   12. NORMAL TEXT
   ------------------------------------------------------------ */

body.light-mode p,
body.light-mode label,
body.light-mode span {

  text-shadow:
    none !important;
}


/* ------------------------------------------------------------
   13. GOLD AP SYNAPSE ACCENT
   ------------------------------------------------------------ */

body.light-mode .gold,
body.light-mode .accent,
body.light-mode [class*="gold"] {

  color:
    #9a702c !important;
}


/* ------------------------------------------------------------
   14. CARDS
   ------------------------------------------------------------ */

body.light-mode .card,
body.light-mode [class*="card"],
body.light-mode [class*="panel"] {

  background:
    linear-gradient(
      145deg,
      rgba(250,251,250,0.72),
      rgba(235,238,237,0.72)
    ) !important;

  border:
    1px solid rgba(35,39,42,0.12) !important;

  box-shadow:
    0 10px 32px rgba(30,34,36,0.045),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;

  color:
    #292d30 !important;
}


/* ------------------------------------------------------------
   15. RECENT INTELLIGENCE
   ------------------------------------------------------------ */

body.light-mode .recent-card,
body.light-mode [class*="recent"] {

  color:
    #292d30 !important;
}


body.light-mode .recent-card *,
body.light-mode [class*="recent"] * {

  text-shadow:
    none !important;
}


/* ------------------------------------------------------------
   16. INPUT / CHAT COMPOSER
   ------------------------------------------------------------ */

body.light-mode .composer,
body.light-mode .chat-input,
body.light-mode [class*="composer"] {

  background:
    rgba(248,249,248,0.86) !important;

  border:
    1px solid rgba(35,39,42,0.14) !important;

  box-shadow:
    0 12px 35px rgba(30,34,36,0.07),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;

  color:
    #25292c !important;
}


/* ------------------------------------------------------------
   17. PROFILE / ACCOUNT PANEL
   ------------------------------------------------------------ */

body.light-mode .profile-panel,
body.light-mode .account-panel,
body.light-mode [class*="profile"],
body.light-mode [class*="account-panel"] {

  background:
    linear-gradient(
      155deg,
      rgba(244,246,245,0.98),
      rgba(226,230,228,0.98)
    ) !important;

  color:
    #25292c !important;

  border:
    1px solid rgba(35,39,42,0.14) !important;

  box-shadow:
    -18px 0 45px rgba(25,29,31,0.12) !important;
}


/* Profile panel text */

body.light-mode .profile-panel *,
body.light-mode .account-panel *,
body.light-mode [class*="profile"] * {

  color:
    #303539 !important;

  text-shadow:
    none !important;
}


/* ------------------------------------------------------------
   18. PROFILE PANEL BUTTONS
   ------------------------------------------------------------ */

body.light-mode .profile-panel button,
body.light-mode .account-panel button {

  background:
    rgba(255,255,255,0.52) !important;

  color:
    #303539 !important;

  border:
    1px solid rgba(35,39,42,0.13) !important;
}


body.light-mode .profile-panel button:hover,
body.light-mode .account-panel button:hover {

  background:
    rgba(255,255,255,0.82) !important;
}


/* ------------------------------------------------------------
   19. SCROLLBARS
   ------------------------------------------------------------ */

body.light-mode ::-webkit-scrollbar {

  width: 9px;
}


body.light-mode ::-webkit-scrollbar-track {

  background:
    transparent !important;
}


body.light-mode ::-webkit-scrollbar-thumb {

  background:
    rgba(70,76,80,0.20) !important;

  border-radius:
    999px !important;
}


body.light-mode ::-webkit-scrollbar-thumb:hover {

  background:
    rgba(70,76,80,0.32) !important;
}


/* ------------------------------------------------------------
   20. KEEP INTELLIGENCE FIELD VISIBLE
   ------------------------------------------------------------ */

body.light-mode canvas {

  background:
    transparent !important;

  opacity:
    0.72 !important;
}


/* ------------------------------------------------------------
   21. REMOVE DARK-MODE TEXT SHADOWS / FILTERS
   ------------------------------------------------------------ */

body.light-mode * {

  text-shadow:
    none !important;
}


/* ------------------------------------------------------------
   22. GOLD INTERACTION — VERY SUBTLE
   ------------------------------------------------------------ */

body.light-mode button:focus-visible,
body.light-mode input:focus,
body.light-mode textarea:focus {

  outline:
    2px solid rgba(164,122,50,0.30) !important;

  outline-offset:
    2px !important;
}


/* ------------------------------------------------------------
   23. MOBILE LIGHT MODE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

  body.light-mode,
  body.light,
  body[data-theme="light"] {

    background:
      linear-gradient(
        145deg,
        #e5e8e7,
        #edf0ef 55%,
        #e2e5e4
      ) !important;
  }

  body.light-mode aside,
  body.light-mode .sidebar,
  body.light-mode nav {

    background:
      linear-gradient(
        160deg,
        rgba(241,243,242,0.98),
        rgba(225,229,227,0.98)
      ) !important;

    box-shadow:
      8px 0 30px rgba(30,34,36,0.10) !important;
  }

  body.light-mode .card,
  body.light-mode [class*="card"] {

    box-shadow:
      0 6px 22px rgba(30,34,36,0.055) !important;
  }
}

/* =========================================================
   AP SYNAPSE — LIGHT MODE MASTER SURFACE
   FINAL OVERRIDE
   body.light-mode = complete professional light theme
   ========================================================= */

body.light-mode {
    --ap-bg: #e9ecef;
    --ap-bg-deep: #e4e7ea;
    --ap-surface: #f4f5f6;
    --ap-surface-2: #eef0f2;
    --ap-surface-3: #e7e9eb;

    --ap-border: rgba(20, 24, 28, .12);
    --ap-border-soft: rgba(20, 24, 28, .08);

    --ap-text: #1b1e22;
    --ap-text-2: #4e555c;
    --ap-muted: #727980;

    --ap-gold: #9a7028;
    --ap-gold-soft: rgba(154,112,40,.14);

    background:
        radial-gradient(
            100% 70% at 50% -15%,
            rgba(255,255,255,.95),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #e8ebed 0%,
            #edf0f2 48%,
            #e5e8eb 100%
        ) !important;

    color: var(--ap-text) !important;
}


/* =========================================================
   ROOT WORKSPACE
   ========================================================= */

body.light-mode .app,
body.light-mode .workspace,
body.light-mode .main,
body.light-mode .main-content,
body.light-mode .content,
body.light-mode .conversation,
body.light-mode .projects-page,
body.light-mode .assistant-page {

    background: transparent !important;
    color: var(--ap-text) !important;
}


/* =========================================================
   SIDEBAR — SAME MATERIAL AS WORKSPACE
   ========================================================= */

body.light-mode .sidebar {

    background:
        linear-gradient(
            180deg,
            #e5e8eb 0%,
            #eaedef 48%,
            #e6e9eb 100%
        ) !important;

    color: var(--ap-text) !important;

    border-right:
        1px solid rgba(20,24,28,.11) !important;

    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.65),
        8px 0 28px rgba(20,24,28,.035) !important;
}


/* sidebar top/bottom gold lines */

body.light-mode .sidebar::before,
body.light-mode .sidebar::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(154,112,40,.20),
            transparent
        ) !important;
}


/* =========================================================
   SIDEBAR BRAND
   ========================================================= */

body.light-mode .brand-text h2 {

    color: #181b1f !important;
}

body.light-mode .brand-text span {

    color: #666d74 !important;
}

body.light-mode .brand-mark {

    background:
        linear-gradient(
            145deg,
            rgba(154,112,40,.16),
            rgba(154,112,40,.055)
        ) !important;

    border:
        1px solid rgba(154,112,40,.28) !important;

    box-shadow:
        0 8px 24px rgba(154,112,40,.07) !important;
}


/* =========================================================
   SIDEBAR BUTTONS
   ========================================================= */

body.light-mode .new-chat-btn {

    background:
        linear-gradient(
            180deg,
            #f7f8f9,
            #eceff1
        ) !important;

    color: #252a2f !important;

    border:
        1px solid rgba(20,24,28,.11) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 5px 16px rgba(20,24,28,.045) !important;
}

body.light-mode .new-chat-btn:hover {

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #eef0f2
        ) !important;

    color: #15181b !important;

    border-color:
        rgba(154,112,40,.28) !important;
}


/* =========================================================
   SIDEBAR SEARCH
   ========================================================= */

body.light-mode .sidebar-search input {

    background:
        rgba(255,255,255,.68) !important;

    color:
        #202428 !important;

    border:
        1px solid rgba(20,24,28,.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 4px 14px rgba(20,24,28,.035) !important;
}

body.light-mode .sidebar-search input::placeholder {

    color: #777e85 !important;
}


/* =========================================================
   SIDEBAR LABELS
   ========================================================= */

body.light-mode .sidebar-group h4 {

    color: #737a81 !important;
}


/* =========================================================
   HISTORY
   ========================================================= */

body.light-mode .history-item {

    background: transparent !important;

    color: #555c63 !important;
}

body.light-mode .history-item:hover {

    background:
        rgba(255,255,255,.58) !important;

    color: #181b1f !important;
}

body.light-mode .history-item.active {

    background:
        rgba(255,255,255,.72) !important;

    color: #181b1f !important;

    border-left-color:
        #9a7028 !important;
}


/* =========================================================
   SIDEBAR NAVIGATION
   ========================================================= */

body.light-mode .sidebar nav a {

    background: transparent !important;

    color: #4c535a !important;
}

body.light-mode .sidebar nav a:hover {

    background:
        rgba(255,255,255,.62) !important;

    color: #171a1e !important;

    transform: translateX(3px);
}

body.light-mode .sidebar nav a.active {

    background:
        rgba(255,255,255,.72) !important;

    color: #171a1e !important;

    border:
        1px solid rgba(154,112,40,.18) !important;
}


/* =========================================================
   SIDEBAR FOOTER
   ========================================================= */

body.light-mode .version {

    color: #7b8288 !important;

    border-top-color:
        rgba(20,24,28,.08) !important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

body.light-mode .topbar,
body.light-mode .top-bar,
body.light-mode header {

    background:
        rgba(232,235,237,.78) !important;

    color: var(--ap-text) !important;

    border-bottom:
        1px solid rgba(20,24,28,.09) !important;

    backdrop-filter:
        blur(20px) saturate(110%) !important;

    -webkit-backdrop-filter:
        blur(20px) saturate(110%) !important;
}


/* =========================================================
   GLOBAL LIGHT-MODE TEXT
   ========================================================= */

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {

    color: #171a1e !important;
}

body.light-mode p {

    color: #555c63 !important;
}


/* =========================================================
   HERO
   ========================================================= */

body.light-mode .hero h1,
body.light-mode .hero h1 *,
body.light-mode .hero-title,
body.light-mode .hero-title * {

    color: #171a1e !important;
}

body.light-mode .hero p,
body.light-mode .hero-subtitle {

    color: #60676e !important;
}


/* =========================================================
   HERO ACTION BUTTONS
   ========================================================= */

body.light-mode .hero-action-btn {

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82),
            rgba(241,243,244,.82)
        ) !important;

    color:
        #2a2f34 !important;

    border:
        1px solid rgba(20,24,28,.12) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 5px 16px rgba(20,24,28,.035) !important;
}

body.light-mode .hero-action-btn:hover {

    color:
        #15181a !important;

    border-color:
        rgba(154,112,40,.32) !important;

    background:
        #ffffff !important;
}


/* =========================================================
   RECENT INTELLIGENCE
   ========================================================= */

body.light-mode .recent-intelligence {

    background:
        linear-gradient(
            145deg,
            rgba(250,251,252,.82),
            rgba(239,242,244,.78)
        ) !important;

    border:
        1px solid rgba(20,24,28,.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 14px 35px rgba(20,24,28,.055) !important;

    color:
        #202428 !important;
}


body.light-mode .recent-intelligence h2 {

    color: #171a1e !important;
}

body.light-mode .recent-kicker {

    color: #9a7028 !important;
}

body.light-mode .recent-intelligence-header button {

    color: #555c63 !important;
}


/* =========================================================
   RECENT CARDS
   ========================================================= */

body.light-mode .recent-intelligence-grid > *,
body.light-mode .recent-card,
body.light-mode .history-card {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(241,243,245,.76)
        ) !important;

    border:
        1px solid rgba(20,24,28,.10) !important;

    color:
        #24282d !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}


/* =========================================================
   GENERAL CARDS
   ========================================================= */

body.light-mode .card,
body.light-mode .project-card,
body.light-mode .prompt-chip {

    background:
        rgba(248,249,250,.82) !important;

    color:
        #202428 !important;

    border-color:
        rgba(20,24,28,.10) !important;

    box-shadow:
        0 12px 30px rgba(20,24,28,.05) !important;
}


/* =========================================================
   COMMAND BAR / COMPOSER
   ========================================================= */

body.light-mode .command-bar,
body.light-mode .composer,
body.light-mode .chat-composer {

    background:
        rgba(248,249,250,.92) !important;

    color:
        #202428 !important;

    border:
        1px solid rgba(20,24,28,.11) !important;

    box-shadow:
        0 12px 35px rgba(20,24,28,.08),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}


body.light-mode #userInput,
body.light-mode .command-bar input,
body.light-mode .command-bar textarea {

    background:
        transparent !important;

    color:
        #202428 !important;

    border-color:
        transparent !important;
}

body.light-mode #userInput::placeholder {

    color:
        #777e85 !important;
}


/* =========================================================
   COMPOSER BUTTONS
   ========================================================= */

body.light-mode .command-bar button,
body.light-mode .composer button,
body.light-mode .chat-composer button {

    color:
        #4e555c !important;

    background:
        transparent !important;

    border-color:
        transparent !important;
}

body.light-mode .command-bar button:hover,
body.light-mode .composer button:hover,
body.light-mode .chat-composer button:hover {

    background:
        rgba(20,24,28,.055) !important;

    color:
        #171a1e !important;
}


/* SEND BUTTON — KEEP GOLD */

body.light-mode #sendBtn {

    background:
        linear-gradient(
            145deg,
            #c9a45a,
            #a98032
        ) !important;

    color:
        #171717 !important;

    border:
        1px solid rgba(120,82,20,.25) !important;

    box-shadow:
        0 8px 22px rgba(154,112,40,.20) !important;
}


/* =========================================================
   TOP ICON BUTTONS
   ========================================================= */

body.light-mode .topbar button,
body.light-mode .top-bar button {

    background:
        rgba(248,249,250,.76) !important;

    color:
        #3d444b !important;

    border:
        1px solid rgba(20,24,28,.10) !important;

    box-shadow:
        0 4px 14px rgba(20,24,28,.035) !important;
}


/* =========================================================
   PROFILE / POPUPS
   ========================================================= */

body.light-mode .popup-panel,
body.light-mode .profile-panel,
body.light-mode .profile-modal,
body.light-mode .account-panel,
body.light-mode [class*="profile-panel"],
body.light-mode [class*="profile-modal"] {

    background:
        linear-gradient(
            145deg,
            #f5f6f7,
            #e9ecef
        ) !important;

    color:
        #202428 !important;

    border:
        1px solid rgba(20,24,28,.13) !important;

    box-shadow:
        0 24px 65px rgba(20,24,28,.18) !important;
}

body.light-mode .popup-panel *,
body.light-mode .profile-panel *,
body.light-mode .profile-modal *,
body.light-mode .account-panel * {

    color:
        #30353a !important;
}


/* =========================================================
   COMMAND PALETTE
   ========================================================= */

body.light-mode .command-palette {

    background:
        rgba(30,34,38,.20) !important;
}

body.light-mode .command-box {

    background:
        #f4f5f6 !important;

    color:
        #202428 !important;

    border:
        1px solid rgba(20,24,28,.12) !important;
}

body.light-mode #commandSearch {

    background:
        #ffffff !important;

    color:
        #202428 !important;
}

body.light-mode .command-item:hover {

    background:
        #e8ebed !important;

    color:
        #171a1e !important;
}


/* =========================================================
   INPUTS / SELECTS / TEXTAREAS
   ========================================================= */

body.light-mode input,
body.light-mode textarea,
body.light-mode select {

    color:
        #202428 !important;

    background-color:
        #f8f9fa !important;

    border-color:
        rgba(20,24,28,.12) !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {

    color:
        #777e85 !important;
}


/* =========================================================
   GOLD ACCENT
   ========================================================= */

body.light-mode .gold,
body.light-mode .workspace-badge,
body.light-mode .recent-kicker {

    color:
        #9a7028 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

body.light-mode ::-webkit-scrollbar-track {

    background:
        #e2e5e8 !important;
}

body.light-mode ::-webkit-scrollbar-thumb {

    background:
        #b8bec4 !important;
}

body.light-mode ::-webkit-scrollbar-thumb:hover {

    background:
        #9a7028 !important;
}


/* =========================================================
   NEURAL FIELD — TRANSPARENT
   ========================================================= */

body.light-mode canvas#intelligence-field,
body.light-mode #intelligence-field {

    background:
        transparent !important;
}


/* =========================================================
   REMOVE DARK-MODE TEXT / SURFACE LEAKS
   ========================================================= */

body.light-mode [style*="color:#fff"],
body.light-mode [style*="color: #fff"],
body.light-mode [style*="color:white"],
body.light-mode [style*="color: white"] {

    color:
        #202428 !important;
}


/* =========================================================
   LIGHT MODE SHOULD NEVER BECOME PURE WHITE
   ========================================================= */

body.light-mode .workspace {

    background:
        linear-gradient(
            145deg,
            #edf0f2,
            #e7eaec
        ) !important;
}


/* =========================================================
   FINAL CONTRAST
   ========================================================= */

body.light-mode .muted,
body.light-mode .secondary {

    color:
        #687078 !important;
}

/* =========================================================
   AP SYNAPSE — FINAL PROFESSIONAL LIGHT MODE
   Complete light-surface normalization
   Paste at the VERY BOTTOM so it overrides old dark rules.
   ========================================================= */

/* ---------- LIGHT MODE ROOT ---------- */

html.light,
html[data-theme="light"],
body.light,
body[data-theme="light"],
body.light-mode {
  --ap-bg: #f4f5f6;
  --ap-surface: #ffffff;
  --ap-surface-soft: #f8f9fa;
  --ap-surface-muted: #eef0f2;

  --ap-border: #d9dde1;
  --ap-border-soft: #e5e8eb;

  --ap-text: #17191c;
  --ap-text-secondary: #555b62;
  --ap-text-muted: #747b83;

  --ap-gold: #a47727;
  --ap-gold-soft: rgba(164, 119, 39, 0.10);

  --ap-shadow:
    0 12px 35px rgba(20, 25, 30, 0.08);

  color-scheme: light;
}


/* =========================================================
   GLOBAL SURFACES
   ========================================================= */

html.light body,
html[data-theme="light"] body,
body.light,
body[data-theme="light"],
body.light-mode {

  background:
    radial-gradient(
      120% 90% at 50% -20%,
      rgba(255,255,255,.95),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #f1f3f5 0%,
      #f7f8f9 48%,
      #eef0f2 100%
    ) !important;

  color: var(--ap-text) !important;
}


/* Remove dark inherited surfaces */

html.light *,
html[data-theme="light"] *,
body.light *,
body[data-theme="light"] *,
body.light-mode * {
  --dark-bg: #ffffff;
}


/* =========================================================
   APP / MAIN CONTAINERS
   ========================================================= */

html.light #root,
html.light #app,
html.light .app,
html.light .app-container,
html.light .main-container,

html[data-theme="light"] #root,
html[data-theme="light"] #app,
html[data-theme="light"] .app,
html[data-theme="light"] .app-container,
html[data-theme="light"] .main-container,

body.light #root,
body.light #app,
body.light .app,
body.light .app-container,
body.light .main-container {

  background: transparent !important;
  color: var(--ap-text) !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

html.light .sidebar,
html[data-theme="light"] .sidebar,
body.light .sidebar,
body[data-theme="light"] .sidebar,
body.light-mode .sidebar {

  background:
    linear-gradient(
      180deg,
      #f4f5f6 0%,
      #f7f8f9 52%,
      #eef0f2 100%
    ) !important;

  border-right: 1px solid #d9dde1 !important;

  color: var(--ap-text) !important;

  box-shadow:
    8px 0 28px rgba(20,25,30,.045) !important;
}


/* Sidebar text */

html.light .sidebar *,
html[data-theme="light"] .sidebar *,
body.light .sidebar *,
body[data-theme="light"] .sidebar *,
body.light-mode .sidebar * {

  color: inherit;
}


/* Sidebar headings */

html.light .sidebar h1,
html.light .sidebar h2,
html.light .sidebar h3,
html.light .sidebar strong,

html[data-theme="light"] .sidebar h1,
html[data-theme="light"] .sidebar h2,
html[data-theme="light"] .sidebar h3,
html[data-theme="light"] .sidebar strong,

body.light .sidebar h1,
body.light .sidebar h2,
body.light .sidebar h3,
body.light .sidebar strong {

  color: #17191c !important;
}


/* Sidebar secondary text */

html.light .sidebar small,
html.light .sidebar span,
html.light .sidebar p,

html[data-theme="light"] .sidebar small,
html[data-theme="light"] .sidebar span,
html[data-theme="light"] .sidebar p,

body.light .sidebar small,
body.light .sidebar span,
body.light .sidebar p {

  color: #626970 !important;
}


/* =========================================================
   SIDEBAR BUTTONS
   ========================================================= */

html.light .sidebar button,
html.light .sidebar .nav-item,
html.light .sidebar a,

html[data-theme="light"] .sidebar button,
html[data-theme="light"] .sidebar .nav-item,
html[data-theme="light"] .sidebar a,

body.light .sidebar button,
body.light .sidebar .nav-item,
body.light .sidebar a {

  background: transparent !important;
  color: #30353a !important;

  border-color: transparent !important;

  box-shadow: none !important;
}


/* Hover */

html.light .sidebar button:hover,
html.light .sidebar .nav-item:hover,
html.light .sidebar a:hover,

html[data-theme="light"] .sidebar button:hover,
html[data-theme="light"] .sidebar .nav-item:hover,
html[data-theme="light"] .sidebar a:hover,

body.light .sidebar button:hover,
body.light .sidebar .nav-item:hover,
body.light .sidebar a:hover {

  background: #e9ecef !important;
  color: #17191c !important;
}


/* Active */

html.light .sidebar .active,
html.light .sidebar .active-item,
html.light .sidebar .nav-item.active,

html[data-theme="light"] .sidebar .active,
html[data-theme="light"] .sidebar .active-item,
html[data-theme="light"] .sidebar .nav-item.active,

body.light .sidebar .active,
body.light .sidebar .active-item,
body.light .sidebar .nav-item.active {

  background: #e7e9eb !important;
  color: #17191c !important;

  border: 1px solid #d5d9dd !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 8px rgba(20,25,30,.04) !important;
}


/* =========================================================
   NEW CONVERSATION / INSTALL
   ========================================================= */

html.light .new-conversation,
html.light .install-app,
html.light .install-button,

html[data-theme="light"] .new-conversation,
html[data-theme="light"] .install-app,
html[data-theme="light"] .install-button,

body.light .new-conversation,
body.light .install-app,
body.light .install-button {

  background: #ffffff !important;
  color: #252a2f !important;

  border: 1px solid #d7dce0 !important;

  box-shadow:
    0 3px 12px rgba(20,25,30,.055) !important;
}


/* =========================================================
   SEARCH INPUTS
   ========================================================= */

html.light input,
html.light textarea,
html.light select,

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,

body.light input,
body.light textarea,
body.light select {

  background: #ffffff !important;

  color: #202428 !important;

  border: 1px solid #d8dde1 !important;

  box-shadow:
    inset 0 1px 2px rgba(20,25,30,.025) !important;
}


html.light input::placeholder,
html.light textarea::placeholder,

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,

body.light input::placeholder,
body.light textarea::placeholder {

  color: #858c93 !important;
}


/* =========================================================
   TOP BAR
   ========================================================= */

html.light header,
html.light .topbar,
html.light .header,
html.light .navbar,

html[data-theme="light"] header,
html[data-theme="light"] .topbar,
html[data-theme="light"] .header,
html[data-theme="light"] .navbar,

body.light header,
body.light .topbar,
body.light .header,
body.light .navbar {

  background: rgba(246,247,248,.92) !important;

  border-bottom: 1px solid #dfe2e5 !important;

  color: #202428 !important;

  backdrop-filter: blur(18px) saturate(120%);
}


/* =========================================================
   TOP BAR BUTTONS
   ========================================================= */

html.light header button,
html.light .topbar button,
html.light .header button,

html[data-theme="light"] header button,
html[data-theme="light"] .topbar button,
html[data-theme="light"] .header button,

body.light header button,
body.light .topbar button,
body.light .header button {

  background: rgba(255,255,255,.78) !important;

  color: #34393e !important;

  border: 1px solid #d9dde1 !important;

  box-shadow:
    0 2px 8px rgba(20,25,30,.04) !important;
}


/* =========================================================
   MAIN CARDS / PANELS
   ========================================================= */

html.light .card,
html.light .panel,
html.light .workspace-card,
html.light .recent-intelligence,
html.light .recent-card,

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .workspace-card,
html[data-theme="light"] .recent-intelligence,
html[data-theme="light"] .recent-card,

body.light .card,
body.light .panel,
body.light .workspace-card,
body.light .recent-intelligence,
body.light .recent-card {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(248,249,250,.96)
    ) !important;

  color: #202428 !important;

  border: 1px solid #dce0e4 !important;

  box-shadow:
    0 14px 35px rgba(20,25,30,.055) !important;
}


/* =========================================================
   RECENT CONVERSATION CARDS
   ========================================================= */

html.light .recent-intelligence *,
html.light .recent-card *,

html[data-theme="light"] .recent-intelligence *,
html[data-theme="light"] .recent-card *,

body.light .recent-intelligence *,
body.light .recent-card * {

  color: inherit;
}


html.light .recent-card {
  background: #f8f9fa !important;
}


/* =========================================================
   HERO TEXT
   ========================================================= */

html.light h1,
html.light h2,
html.light h3,

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,

body.light h1,
body.light h2,
body.light h3 {

  color: #15181b !important;
}


/* IMPORTANT:
   Prevent the dark-mode white hero heading from remaining white.
*/

html.light .hero h1,
html.light .hero-title,
html.light .main-title,
html.light .welcome-title,

html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .main-title,
html[data-theme="light"] .welcome-title,

body.light .hero h1,
body.light .hero-title,
body.light .main-title,
body.light .welcome-title {

  color: #17191c !important;
}


/* =========================================================
   NORMAL BODY TEXT
   ========================================================= */

html.light p,
html.light label,
html.light .subtitle,
html.light .description,

html[data-theme="light"] p,
html[data-theme="light"] label,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .description,

body.light p,
body.light label,
body.light .subtitle,
body.light .description {

  color: #5d646b !important;
}


/* =========================================================
   ACTION / MODE BUTTONS
   ========================================================= */

html.light .mode-button,
html.light .action-button,
html.light .quick-action,
html.light .quick-action button,

html[data-theme="light"] .mode-button,
html[data-theme="light"] .action-button,
html[data-theme="light"] .quick-action,
html[data-theme="light"] .quick-action button,

body.light .mode-button,
body.light .action-button,
body.light .quick-action,
body.light .quick-action button {

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f5f6f7
    ) !important;

  color: #252a2f !important;

  border: 1px solid #d5d9dd !important;

  box-shadow:
    0 3px 10px rgba(20,25,30,.045) !important;
}


html.light .mode-button:hover,
html.light .action-button:hover,
html.light .quick-action:hover,

html[data-theme="light"] .mode-button:hover,
html[data-theme="light"] .action-button:hover,
html[data-theme="light"] .quick-action:hover,

body.light .mode-button:hover,
body.light .action-button:hover,
body.light .quick-action:hover {

  background: #f0f2f4 !important;
  border-color: #c9ced3 !important;
}


/* =========================================================
   CHAT COMPOSER
   ========================================================= */

html.light .chat-input,
html.light .composer,
html.light .input-container,
html.light .chat-composer,

html[data-theme="light"] .chat-input,
html[data-theme="light"] .composer,
html[data-theme="light"] .input-container,
html[data-theme="light"] .chat-composer,

body.light .chat-input,
body.light .composer,
body.light .input-container,
body.light .chat-composer {

  background:
    rgba(255,255,255,.96) !important;

  border: 1px solid #d7dce0 !important;

  color: #202428 !important;

  box-shadow:
    0 12px 30px rgba(20,25,30,.08) !important;
}


/* Composer buttons */

html.light .chat-input button,
html.light .composer button,
html.light .input-container button,
html.light .chat-composer button,

html[data-theme="light"] .chat-input button,
html[data-theme="light"] .composer button,
html[data-theme="light"] .input-container button,
html[data-theme="light"] .chat-composer button,

body.light .chat-input button,
body.light .composer button,
body.light .input-container button,
body.light .chat-composer button {

  background: transparent !important;

  color: #4c535a !important;

  border-color: transparent !important;
}


/* =========================================================
   GOLD ACCENTS
   ========================================================= */

html.light .gold,
html.light .accent,
html.light .brand-accent,

html[data-theme="light"] .gold,
html[data-theme="light"] .accent,
html[data-theme="light"] .brand-accent,

body.light .gold,
body.light .accent,
body.light .brand-accent {

  color: #9a7025 !important;
}


/* =========================================================
   OVERLAYS / MODALS / PROFILE PANELS
   ========================================================= */

html.light .modal,
html.light .dialog,
html.light .profile-panel,
html.light .drawer,

html[data-theme="light"] .modal,
html[data-theme="light"] .dialog,
html[data-theme="light"] .profile-panel,
html[data-theme="light"] .drawer,

body.light .modal,
body.light .dialog,
body.light .profile-panel,
body.light .drawer {

  background:
    rgba(255,255,255,.98) !important;

  color: #202428 !important;

  border: 1px solid #d8dde1 !important;

  box-shadow:
    0 24px 70px rgba(20,25,30,.18) !important;
}


/* Modal text must NOT remain dark-mode white/black incorrectly */

html.light .modal *,
html.light .dialog *,
html.light .profile-panel *,
html.light .drawer *,

html[data-theme="light"] .modal *,
html[data-theme="light"] .dialog *,
html[data-theme="light"] .profile-panel *,
html[data-theme="light"] .drawer *,

body.light .modal *,
body.light .dialog *,
body.light .profile-panel *,
body.light .drawer * {

  color: #30353a !important;
}


/* Headings inside panels */

html.light .modal h1,
html.light .modal h2,
html.light .modal h3,
html.light .dialog h1,
html.light .dialog h2,
html.light .dialog h3,
html.light .profile-panel h1,
html.light .profile-panel h2,
html.light .profile-panel h3,

html[data-theme="light"] .modal h1,
html[data-theme="light"] .modal h2,
html[data-theme="light"] .modal h3,
html[data-theme="light"] .dialog h1,
html[data-theme="light"] .dialog h2,
html[data-theme="light"] .dialog h3,
html[data-theme="light"] .profile-panel h1,
html[data-theme="light"] .profile-panel h2,
html[data-theme="light"] .profile-panel h3,

body.light .modal h1,
body.light .modal h2,
body.light .modal h3,
body.light .dialog h1,
body.light .dialog h2,
body.light .dialog h3,
body.light .profile-panel h1,
body.light .profile-panel h2,
body.light .profile-panel h3 {

  color: #17191c !important;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

html.light .dropdown,
html.light .menu,
html.light .popover,

html[data-theme="light"] .dropdown,
html[data-theme="light"] .menu,
html[data-theme="light"] .popover,

body.light .dropdown,
body.light .menu,
body.light .popover {

  background: #ffffff !important;

  color: #252a2f !important;

  border: 1px solid #d8dde1 !important;

  box-shadow:
    0 18px 45px rgba(20,25,30,.12) !important;
}


/* =========================================================
   ICON VISIBILITY
   ========================================================= */

html.light svg,
html.light i,

html[data-theme="light"] svg,
html[data-theme="light"] i,

body.light svg,
body.light i {

  color: #50575e !important;
}


/* Keep gold brand icons */

html.light .brand svg,
html.light .gold-icon,

html[data-theme="light"] .brand svg,
html[data-theme="light"] .gold-icon,

body.light .brand svg,
body.light .gold-icon {

  color: #9a7025 !important;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

html.light hr,
html[data-theme="light"] hr,
body.light hr {

  border: 0 !important;

  border-top: 1px solid #e0e3e6 !important;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

html.light *,
html[data-theme="light"] *,
body.light * {

  scrollbar-color: #c5cacf transparent;
}


/* =========================================================
   INTELLIGENCE FIELD
   Keep it subtle — NOT washed out.
   ========================================================= */

html.light canvas,
html[data-theme="light"] canvas,
body.light canvas {

  background: transparent !important;

  opacity: .30 !important;
}


/* =========================================================
   FINAL CONTRAST SAFETY
   ========================================================= */

/* Prevent common dark-mode classes from destroying readability */

html.light .text-white,
html.light .text-light,
html.light .text-muted-dark,
html.light .dark-text,

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-light,
html[data-theme="light"] .text-muted-dark,
html[data-theme="light"] .dark-text,

body.light .text-white,
body.light .text-light,
body.light .text-muted-dark,
body.light .dark-text {

  color: #252a2f !important;
}


/* Never allow transparent/white text on light surfaces */

html.light .hero,
html.light .workspace,
html.light .content,

html[data-theme="light"] .hero,
html[data-theme="light"] .workspace,
html[data-theme="light"] .content,

body.light .hero,
body.light .workspace,
body.light .content {

  color: #202428 !important;
}

/* =========================================================
   AP SYNAPSE — MOBILE THEME TOGGLE
   Quiet / premium / minimal
========================================================= */

.ap-mobile-theme-toggle {
    position: fixed !important;

    top: 16px !important;
    right: 16px !important;

    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    cursor: pointer !important;
    user-select: none !important;

    z-index: 100004 !important;

    border: 1px solid rgba(198,166,107,.20) !important;

    background: rgba(255,255,255,.045) !important;

    color: rgba(235,235,232,.78) !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.06) !important;

    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease !important;
}

.ap-mobile-theme-toggle:hover {
    background: rgba(198,166,107,.09) !important;
    border-color: rgba(198,166,107,.38) !important;
    color: #c6a66b !important;
}

.ap-mobile-theme-toggle:active {
    transform: scale(.94) !important;
}

.ap-theme-icon {
    display: block !important;

    font-size: 18px !important;
    line-height: 1 !important;

    transition:
        transform .25s ease,
        opacity .2s ease !important;
}

.ap-mobile-theme-toggle:hover .ap-theme-icon {
    transform: rotate(18deg) !important;
}


/* LIGHT MODE */

body.light-mode .ap-mobile-theme-toggle {
    background: rgba(255,255,255,.58) !important;

    color: #555c63 !important;

    border-color: rgba(20,24,28,.10) !important;

    box-shadow:
        0 5px 18px rgba(20,24,28,.055),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.light-mode .ap-mobile-theme-toggle:hover {
    background: rgba(255,255,255,.90) !important;

    color: #9a7028 !important;

    border-color: rgba(154,112,40,.28) !important;
}


/* DESKTOP — don't show this mobile control */

@media (min-width: 769px) {
    .ap-mobile-theme-toggle {
        display: none !important;
    }
}
/* =========================================================
   AP SYNAPSE — MOBILE TOPBAR ACTIONS
   FINAL CLEAN / TOUCH-SAFE LAYOUT
========================================================= */

@media (max-width: 768px) {

    /* Topbar action container */
    .topbar-actions,
    .top-bar-actions,
    .topbar .actions,
    .top-bar .actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Notification + theme controls */
    .topbar-actions > *,
    .top-bar-actions > *,
    .topbar .actions > *,
    .top-bar .actions > * {
        position: relative !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Individual action buttons */
    .topbar button,
    .top-bar button,
    .topbar .icon-btn,
    .top-bar .icon-btn {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 42px !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;

        position: relative !important;

        cursor: pointer !important;

        touch-action: manipulation !important;

        z-index: 10 !important;
    }

    /* Never let icon/text overlap */
    .topbar button svg,
    .top-bar button svg,
    .topbar .icon-btn svg,
    .top-bar .icon-btn svg {
        width: 18px !important;
        height: 18px !important;

        flex: 0 0 auto !important;

        pointer-events: none !important;
    }

    /* Theme button specifically */
    #themeToggle,
    #theme-toggle,
    #darkModeToggle,
    #lightModeToggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;

        flex: 0 0 42px !important;
    }

    /* Notification button */
    #notificationBtn,
    #notificationsBtn,
    .notification-btn,
    .notifications-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;

        flex: 0 0 42px !important;
    }

    /* Prevent notification badge from disturbing layout */
    .notification-badge,
    .notifications-badge,
    .notification-count {
        position: absolute !important;

        top: 5px !important;
        right: 5px !important;

        min-width: 7px !important;
        height: 7px !important;

        padding: 0 !important;

        border-radius: 50% !important;

        pointer-events: none !important;
    }

    /* Keep topbar itself clean */
    .topbar,
    .top-bar {
        display: flex !important;
        align-items: center !important;

        min-width: 0 !important;
    }

    /* Do not allow the title/logo area to crush the buttons */
    .topbar > *,
    .top-bar > * {
        min-width: 0 !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE TOPBAR ACTIONS
   FINAL CLEAN / TOUCH-SAFE LAYOUT
========================================================= */

@media (max-width: 768px) {

    /* Topbar action container */
    .topbar-actions,
    .top-bar-actions,
    .topbar .actions,
    .top-bar .actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Notification + theme controls */
    .topbar-actions > *,
    .top-bar-actions > *,
    .topbar .actions > *,
    .top-bar .actions > * {
        position: relative !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* Individual action buttons */
    .topbar button,
    .top-bar button,
    .topbar .icon-btn,
    .top-bar .icon-btn {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 42px !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;

        position: relative !important;

        cursor: pointer !important;

        touch-action: manipulation !important;

        z-index: 10 !important;
    }

    /* Never let icon/text overlap */
    .topbar button svg,
    .top-bar button svg,
    .topbar .icon-btn svg,
    .top-bar .icon-btn svg {
        width: 18px !important;
        height: 18px !important;

        flex: 0 0 auto !important;

        pointer-events: none !important;
    }

    /* Theme button specifically */
    #themeToggle,
    #theme-toggle,
    #darkModeToggle,
    #lightModeToggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;

        flex: 0 0 42px !important;
    }

    /* Notification button */
    #notificationBtn,
    #notificationsBtn,
    .notification-btn,
    .notifications-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;

        flex: 0 0 42px !important;
    }

    /* Prevent notification badge from disturbing layout */
    .notification-badge,
    .notifications-badge,
    .notification-count {
        position: absolute !important;

        top: 5px !important;
        right: 5px !important;

        min-width: 7px !important;
        height: 7px !important;

        padding: 0 !important;

        border-radius: 50% !important;

        pointer-events: none !important;
    }

    /* Keep topbar itself clean */
    .topbar,
    .top-bar {
        display: flex !important;
        align-items: center !important;

        min-width: 0 !important;
    }

    /* Do not allow the title/logo area to crush the buttons */
    .topbar > *,
    .top-bar > * {
        min-width: 0 !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE TOPBAR FINAL CONTROL LAYOUT
   Clean / Sober / Premium / Non-Jumbled
========================================================= */

@media (max-width: 768px) {

    /* Keep the topbar controls in one clean row */
    body.light-mode .topbar,
    body.light-mode .top-bar,
    body .topbar,
    body .top-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Every topbar control gets a predictable size */
    .topbar > button,
    .top-bar > button {
        position: relative !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;
        border-radius: 12px !important;

        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;

        z-index: 100 !important;
    }

    /* Notification */
    #notificationBtn {
        order: 1 !important;
    }

    /* Settings */
    #settingsBtn {
        order: 2 !important;
    }

    /* Theme */
    #apMobileThemeToggle {
        order: 3 !important;
    }

    /* Profile */
    #profileBtn {
        order: 4 !important;
    }

    /* Share */
    #shareConversationBtn {
        order: 5 !important;
    }

    /* Theme button — deliberately quiet and premium */
    #apMobileThemeToggle {
        border: 1px solid rgba(154,112,40,.18) !important;

        background:
            rgba(255,255,255,.58) !important;

        color: #555c63 !important;

        box-shadow:
            0 3px 12px rgba(20,24,28,.045),
            inset 0 1px 0 rgba(255,255,255,.8) !important;
    }

    #apMobileThemeToggle:hover {
        background:
            rgba(255,255,255,.82) !important;

        color: #171a1e !important;

        border-color:
            rgba(154,112,40,.30) !important;
    }

    #apMobileThemeToggle:active {
        transform: scale(.96) !important;
    }

    /* Dark mode version */
    body:not(.light-mode) #apMobileThemeToggle {
        background:
            rgba(255,255,255,.055) !important;

        color:
            rgba(245,245,243,.82) !important;

        border-color:
            rgba(198,166,107,.20) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    body:not(.light-mode) #apMobileThemeToggle:hover {
        background:
            rgba(255,255,255,.09) !important;

        color:
            #f5f5f3 !important;

        border-color:
            rgba(198,166,107,.34) !important;
    }

    /* Prevent SVG/icon sizes from causing the jumble */
    #notificationBtn svg,
    #settingsBtn svg,
    #apMobileThemeToggle svg,
    #profileBtn svg,
    #shareConversationBtn svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
        flex: 0 0 18px !important;
    }

    /* Keep badges from changing button geometry */
    #notificationBtn .notification-badge {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        min-width: 7px !important;
        width: 7px !important;
        height: 7px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        pointer-events: none !important;
    }

    /* Remove accidental transforms/margins from older rules */
    #notificationBtn,
    #settingsBtn,
    #apMobileThemeToggle,
    #profileBtn,
    #shareConversationBtn {
        transform: none !important;
    }

    #notificationBtn:active,
    #settingsBtn:active,
    #profileBtn:active,
    #shareConversationBtn:active {
        transform: scale(.96) !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .topbar,
    .top-bar {
        gap: 5px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topbar > button,
    .top-bar > button {
        flex-basis: 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        border-radius: 11px !important;
    }

    #notificationBtn svg,
    #settingsBtn svg,
    #apMobileThemeToggle svg,
    #profileBtn svg,
    #shareConversationBtn svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE TOPBAR CONTROL GROUP
   FINAL CLEAN LAYOUT
   ========================================================= */

@media (max-width: 768px) {

    /* Keep the topbar controls in one clean row */
    .topbar,
    .top-bar {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    /* Every topbar control gets its own independent box */
    .topbar button,
    .top-bar button {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 42px !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        transform: none !important;
        z-index: 10 !important;

        border-radius: 12px !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* -----------------------------------------------------
       AP SYNAPSE CORE
    ----------------------------------------------------- */

    #synapseIdentityBtn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20 !important;
    }

    /* -----------------------------------------------------
       INTELLIGENCE FIELD
    ----------------------------------------------------- */

    #intelligenceFieldBtn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20 !important;
    }

    /* -----------------------------------------------------
       NOTIFICATION
    ----------------------------------------------------- */

    #notificationBtn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20 !important;
    }

    /* -----------------------------------------------------
       SETTINGS
    ----------------------------------------------------- */

    #settingsBtn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20 !important;
    }

    /* -----------------------------------------------------
       LIGHT / DARK TOGGLE
    ----------------------------------------------------- */

    #apMobileThemeToggle {
        flex: 0 0 42px !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: relative !important;
        inset: auto !important;

        transform: none !important;

        border-radius: 12px !important;

        z-index: 30 !important;

        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* -----------------------------------------------------
       PROFILE
    ----------------------------------------------------- */

    #profileBtn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20 !important;
    }

    /* -----------------------------------------------------
       SHARE
    ----------------------------------------------------- */

    #shareConversationBtn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 20 !important;
    }

    /* Prevent icons from escaping their button */
    .topbar button svg,
    .top-bar button svg,
    .topbar button i,
    .top-bar button i {
        position: relative !important;
        inset: auto !important;

        width: 19px !important;
        height: 19px !important;

        max-width: 19px !important;
        max-height: 19px !important;

        margin: 0 !important;
        transform: none !important;
    }

    /* No button should overlap another */
    .topbar button + button,
    .top-bar button + button {
        margin-left: 0 !important;
    }

}

/* =========================================================
   AP SYNAPSE — PREMIUM WHITEBOARD
========================================================= */

.projects-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 28px;
}

.whiteboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.whiteboard-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #c6a66b;
    margin-bottom: 6px;
}

.whiteboard-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #f5f5f5;
}

.whiteboard-header p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.42);
    font-size: 12px;
}

.whiteboard-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.whiteboard-tools button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.8);
    cursor: pointer;
    font-size: 17px;
}

.whiteboard-tools button:hover {
    border-color: rgba(198,166,107,.35);
    color: #c6a66b;
}

.whiteboard-shell {
    width: 100%;
    height: calc(100% - 105px);
    min-height: 450px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(198,166,107,.28);
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
}

#apCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
}

/* =========================================================
   AP SYNAPSE — CANVAS WHITEBOARD
========================================================= */

.ap-whiteboard {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    flex-direction: column;
    background: #f8f9fb;
    color: #17191d;
}

.ap-whiteboard.open {
    display: flex;
}

.ap-whiteboard-header {
    height: 68px;
    flex: 0 0 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.ap-whiteboard-title {
    font-size: 15px;
    font-weight: 650;
}

.ap-whiteboard-subtitle {
    margin-top: 3px;
    font-size: 11px;
    color: #777;
}

.ap-whiteboard-actions {
    display: flex;
    gap: 8px;
}

.ap-whiteboard-actions button {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 11px;
    background: #fff;
    color: #202124;
    cursor: pointer;
    font-size: 18px;
}

.ap-whiteboard-actions button:hover {
    border-color: #c6a66b;
    color: #a17b32;
}

.ap-whiteboard-close {
    margin-left: 4px;
}

.ap-whiteboard-canvas-wrap {
    flex: 1;
    min-height: 0;
    padding: 16px;
    box-sizing: border-box;
}

#apCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    box-shadow: 0 8px 35px rgba(0,0,0,.08);
    touch-action: none;
    cursor: crosshair;
}

/* =========================================================
   AP SYNAPSE — READABILITY PRESERVATION LAYER
   Targeted only. Does NOT redesign the interface.
========================================================= */

:root {
    --ap-text-primary: #f3f4f6;
    --ap-text-secondary: rgba(229, 231, 235, 0.78);
    --ap-text-muted: rgba(229, 231, 235, 0.58);
    --ap-text-faint: rgba(229, 231, 235, 0.42);
    --ap-gold: #c6a66b;
}

/* Primary readable text */
.workspace-title h1,
.workspace-title strong,
.workspace-title .title,
.workspace-title .name,
.projects-page h1,
.projects-page h2,
.projects-page h3,
.projects-page h4,
.projects-page strong,
.projects-page label {
    color: var(--ap-text-primary);
}

/* Normal descriptive text */
.workspace-title p,
.projects-page p,
.projects-page small,
.projects-page .description,
.projects-page .subtitle,
.projects-page .secondary-text {
    color: var(--ap-text-secondary);
}

/* Faint/supporting text */
.projects-page .muted,
.projects-page .hint,
.projects-page .helper-text,
.projects-page .meta,
.projects-page .caption {
    color: var(--ap-text-muted);
}

/* Inputs */
input,
textarea,
select {
    color: var(--ap-text-primary);
}

input::placeholder,
textarea::placeholder {
    color: rgba(229, 231, 235, 0.48);
}

/* Buttons */
button {
    color: var(--ap-text-primary);
}

/* Keep gold restricted to emphasis */
.workspace-badge,
.section-label,
.eyebrow,
.gold-text,
.active {
    color: var(--ap-gold);
}

/* ---------------------------------------------------------
   CONTENT SURFACE
   Gives text-heavy areas enough separation from the
   Intelligence Field without removing the background.
--------------------------------------------------------- */

.projects-page .card,
.projects-page .panel,
.projects-page .workspace-card,
.projects-page .feature-card,
.projects-page .tool-card,
.projects-page .info-card {
    background: rgba(18, 20, 24, 0.78);
    border-color: rgba(255, 255, 255, 0.075);
}

/* ---------------------------------------------------------
   INTELLIGENCE FIELD MUST REMAIN BACKGROUND ONLY
--------------------------------------------------------- */

#intelligence-field {
    pointer-events: none;
}

/* Prevent background animation from visually overpowering
   readable interface content. */
.workspace-content,
.projects-page {
    isolation: isolate;
}

.workspace-content > *,
.projects-page > * {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------
   MOBILE READABILITY
--------------------------------------------------------- */

@media (max-width: 768px) {

    .workspace-title h1 {
        color: #f3f4f6;
    }

    .workspace-title p {
        color: rgba(229, 231, 235, 0.70);
    }

    .projects-page p,
    .projects-page small {
        color: rgba(229, 231, 235, 0.76);
    }

    .projects-page .card,
    .projects-page .panel,
    .projects-page .workspace-card,
    .projects-page .feature-card,
    .projects-page .tool-card,
    .projects-page .info-card {
        background: rgba(18, 20, 24, 0.88);
    }
}

/* =========================================================
   AP SYNAPSE — GLOBAL DARK SURFACE READABILITY FIX
   Do NOT alter layout, spacing, cards, or background.
   Only restores readable text contrast.
========================================================= */

body:not(.light-mode) {

    /* Main readable text */
    color: #f1f3f5;
}

/* Primary text across all workspaces */
body:not(.light-mode)
.workspace-content,
body:not(.light-mode)
.workspace-content h1,
body:not(.light-mode)
.workspace-content h2,
body:not(.light-mode)
.workspace-content h3,
body:not(.light-mode)
.workspace-content h4,
body:not(.light-mode)
.workspace-content p,
body:not(.light-mode)
.workspace-content label,
body:not(.light-mode)
.workspace-content strong,
body:not(.light-mode)
.workspace-content span,
body:not(.light-mode)
.workspace-content li {
    color: #f1f3f5;
}

/* Secondary / descriptive text */
body:not(.light-mode)
.workspace-content small,
body:not(.light-mode)
.workspace-content .subtitle,
body:not(.light-mode)
.workspace-content .description,
body:not(.light-mode)
.workspace-content .hint,
body:not(.light-mode)
.workspace-content .helper-text,
body:not(.light-mode)
.workspace-content .workspace-description {
    color: #aeb4bf !important;
}

/* Example labels */
body:not(.light-mode)
.workspace-content .example,
body:not(.light-mode)
.workspace-content .example-label,
body:not(.light-mode)
.workspace-content [class*="example"] {
    color: #d5d9df !important;
}

/* Inputs / textareas */
body:not(.light-mode)
.workspace-content input,
body:not(.light-mode)
.workspace-content textarea,
body:not(.light-mode)
.workspace-content select {
    color: #f5f6f7 !important;
}

/* Input placeholders */
body:not(.light-mode)
.workspace-content input::placeholder,
body:not(.light-mode)
.workspace-content textarea::placeholder {
    color: #8f97a3 !important;
    opacity: 1 !important;
}

/* Code / examples / preformatted content */
body:not(.light-mode)
.workspace-content pre,
body:not(.light-mode)
.workspace-content code,
body:not(.light-mode)
.workspace-content .code,
body:not(.light-mode)
.workspace-content .code-block {
    color: #e8ebef !important;
}

/* Buttons remain premium — don't flatten their colors */
body:not(.light-mode)
.workspace-content button {
    color: inherit;
}

/* Prevent disabled-looking text unless actually disabled */
body:not(.light-mode)
.workspace-content .text-muted {
    color: #aeb4bf !important;
}

/* Actual disabled controls stay visibly disabled */
body:not(.light-mode)
.workspace-content button:disabled,
body:not(.light-mode)
.workspace-content input:disabled,
body:not(.light-mode)
.workspace-content textarea:disabled {
    opacity: .55;
}

/* =========================================================
   MOBILE READABILITY
========================================================= */

@media (max-width: 768px) {

    body:not(.light-mode)
    .workspace-content p,
    body:not(.light-mode)
    .workspace-content span,
    body:not(.light-mode)
    .workspace-content label {
        text-shadow: none;
    }

    body:not(.light-mode)
    .workspace-content textarea {
        color: #f5f6f7 !important;
        caret-color: #c6a66b !important;
    }

    body:not(.light-mode)
    .workspace-content textarea::placeholder {
        color: #9299a5 !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE HISTORY VISIBILITY FIX
   ========================================================= */

@media (max-width: 768px) {

    .sidebar {
        display: flex !important;
        width: min(326px, 88vw) !important;
        height: 100dvh !important;
        flex-direction: column !important;
        overflow: hidden auto !important;
    }

    .sidebar .history-list,
    .sidebar .recent-group {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .sidebar .history-list {
        flex-direction: column !important;
        width: 100% !important;
        max-height: 240px !important;
        overflow-y: auto !important;
    }

    .sidebar .history-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-height: 64px !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   AP SYNAPSE — GALAXY / NARROW MOBILE HISTORY
   Permanent flex-layout correction
   ========================================================= */

@media (max-width: 600px) {

    .sidebar-group.recent-group {
        display: flex !important;
        flex-direction: column !important;

        flex: 0 0 170px !important;
        flex-shrink: 0 !important;

        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow: hidden !important;
    }

    .history-list {
        display: flex !important;
        flex-direction: column !important;

        flex: 1 1 auto !important;
        min-height: 0 !important;

        height: auto !important;
        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        visibility: visible !important;
        opacity: 1 !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
    }

    .history-item {
        display: flex !important;
        flex-shrink: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   AP SYNAPSE — MOBILE HISTORY / RECENT CONVERSATIONS FIX
   ========================================================= */

@media (max-width: 600px) {

  /* Keep the recent section alive inside the mobile sidebar */
  .sidebar .recent-group {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
    min-height: 150px !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
  }

  /* History itself gets the available space */
  .sidebar .recent-group .history-list {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
    min-height: 120px !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Make individual history entries properly visible */
  .sidebar .history-item {
    display: flex !important;
    flex: 0 0 auto !important;
    min-height: 58px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .sidebar .history-item-content {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
  }

  .sidebar .history-title,
  .sidebar .history-preview,
  .sidebar .history-time,
  .sidebar .history-delete {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Prevent the navigation area from consuming the history area */
  .sidebar .sidebar-nav {
    flex: 0 1 auto !important;
    min-height: 0 !important;
  }

  /* Keep bottom controls below history */
  .sidebar .sidebar-footer,
  .sidebar .sidebar-bottom,
  .sidebar .profile-section {
    flex: 0 0 auto !important;
  }
}

.live-talk-message-body {
    color: #f5f5f5;
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.live-talk-message-body strong {
    color: #ffffff;
    font-weight: 700;
}

.live-talk-message-body em {
    color: #eeeeee;
}

.live-talk-message-body::selection {
    background: rgba(212, 175, 55, 0.35);
}

/* AP SYNAPSE — WHITEBOARD */
#workspacePage.projects-page {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
}

#workspacePage.projects-page.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#apCanvas {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    touch-action: none !important;
    cursor: crosshair !important;
}

/* =========================================================
   AP SYNAPSE — ULTRA-FAST WHITEBOARD
   ========================================================= */

#canvasPage {
    contain: layout paint style;
}

#canvasPage .whiteboard-shell,
#canvasPage #apCanvas {
    contain: layout paint;
}

#apCanvas {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: 500px;
    background: #fff;
    border-radius: 20px;
    cursor: crosshair;
    touch-action: none;
    margin: 20px auto;
}

/* =========================================================
   AP SYNAPSE — WHITEBOARD VISIBILITY FIX
   ========================================================= */

#canvasPage {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

#canvasPage .whiteboard-shell,
.whiteboard-shell {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

#apCanvas {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 1px !important;
  min-height: 1px !important;
  flex: 1 1 auto !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* =========================================================

/* =========================================================
   AP SYNAPSE � WHITEBOARD SYSTEM
   SINGLE AUTHORITATIVE IMPLEMENTATION
   Desktop + Tablet + Mobile
========================================================= */

#canvasPage {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - 70px) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

#canvasPage .projects-header {
    position: relative !important;
    z-index: 20 !important;
    margin-bottom: 10px !important;
}

/* ---------------------------------------------------------
   WHITEBOARD SHELL
--------------------------------------------------------- */

#canvasPage .whiteboard-shell {
    position: relative !important;

    width: calc(100% - 24px) !important;
    height: calc(100vh - 135px) !important;

    min-height: 600px !important;

    margin: 0 12px !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;
}

/* ---------------------------------------------------------
   CANVAS
--------------------------------------------------------- */

#canvasPage #apCanvas {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 1px !important;
    min-height: 1px !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 14px !important;

    z-index: 1 !important;

    pointer-events: auto !important;
    touch-action: none !important;
}

/* ---------------------------------------------------------
   TOOLBAR
--------------------------------------------------------- */

#canvasPage .whiteboard-toolbar {
    position: absolute !important;

    top: 16px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 10000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    padding: 7px !important;

    box-sizing: border-box !important;

    background: rgba(255,255,255,.97) !important;

    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 13px !important;

    box-shadow: 0 8px 25px rgba(0,0,0,.14) !important;

    isolation: isolate !important;

    pointer-events: auto !important;
}

/* ---------------------------------------------------------
   TOOL BUTTONS
--------------------------------------------------------- */

#canvasPage #canvasPen,
#canvasPage #canvasErase,
#canvasPage #canvasClear {

    position: relative !important;
    z-index: 10001 !important;

    min-width: 100px !important;
    min-height: 46px !important;

    padding: 0 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    color: #17191d !important;
    -webkit-text-fill-color: #17191d !important;

    border: 1px solid #c7c9ce !important;
    border-radius: 10px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer !important;
    pointer-events: auto !important;

    text-shadow: none !important;

    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;

    transition:
        transform .15s ease,
        background-color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease !important;
}

/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

#canvasPage #canvasPen:hover,
#canvasPage #canvasErase:hover,
#canvasPage #canvasClear:hover {

    background: #f4f4f5 !important;

    color: #111317 !important;
    -webkit-text-fill-color: #111317 !important;

    border-color: #a9abb0 !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 5px 14px rgba(0,0,0,.12) !important;
}

/* ---------------------------------------------------------
   ACTIVE TOOL
--------------------------------------------------------- */

#canvasPage #canvasPen.active,
#canvasPage #canvasErase.active {

    background: #17191d !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    border-color: #17191d !important;

    box-shadow:
        0 0 0 2px rgba(198,166,107,.18),
        0 5px 14px rgba(0,0,0,.10) !important;
}

/* ---------------------------------------------------------
   CLEAR
--------------------------------------------------------- */

#canvasPage #canvasClear {
    color: #17191d !important;
    -webkit-text-fill-color: #17191d !important;
}

/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width: 769px) {

    #canvasPage .whiteboard-shell {
        width: calc(100% - 24px) !important;
        height: calc(100vh - 135px) !important;
        min-height: 650px !important;

        margin: 0 12px !important;
    }

    #canvasPage .whiteboard-toolbar {
        top: 16px !important;
    }

    #canvasPage #canvasPen,
    #canvasPage #canvasErase,
    #canvasPage #canvasClear {

        min-width: 105px !important;
        min-height: 48px !important;

        font-size: 14px !important;
    }
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

    #canvasPage {
        padding-top: 55px !important;
    }

    #canvasPage .projects-header {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }

    #canvasPage .whiteboard-shell {

        width: calc(100% - 16px) !important;

        height: calc(100vh - 235px) !important;

        min-height: 460px !important;

        margin: 0 8px !important;

        overflow: hidden !important;
    }

    #canvasPage .whiteboard-toolbar {

        top: 16px !important;
        left: 8px !important;
        right: 8px !important;

        width: auto !important;
        max-width: none !important;

        transform: none !important;

        gap: 6px !important;

        padding: 7px !important;

        justify-content: center !important;

        overflow: hidden !important;
    }

    #canvasPage .whiteboard-toolbar button {

        flex: 1 1 0 !important;

        min-width: 0 !important;

        width: auto !important;
        height: 42px !important;

        padding: 0 8px !important;

        font-size: 12px !important;

        white-space: nowrap !important;
    }

    #canvasPage #apCanvas {

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        border-radius: 12px !important;
    }
}

/* ---------------------------------------------------------
   SMALL PHONES
--------------------------------------------------------- */

@media (max-width: 380px) {

    #canvasPage {
        padding-top: 48px !important;
    }

    #canvasPage .whiteboard-shell {

        width: calc(100% - 12px) !important;

        margin: 0 6px !important;

        min-height: 440px !important;

        height: calc(100vh - 220px) !important;
    }

    #canvasPage .whiteboard-toolbar {

        left: 6px !important;
        right: 6px !important;

        gap: 4px !important;
        padding: 5px !important;
    }

    #canvasPage .whiteboard-toolbar button {

        height: 40px !important;

        padding: 0 5px !important;

        font-size: 11px !important;
    }
}

/* AP SYNAPSE — FINAL MOBILE COMMAND ROW
   LIVE TALK SEPARATED — NO OVERLAP
   ============================================================ */

@media (max-width: 767px) {

    /* Keep the command bar compact */
    .command-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 7px !important;
    }

    /* INPUT — unchanged */
    .command-input-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #userInput {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* ========================================================
       BUTTON ROW
    ======================================================== */

    .command-tools {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        gap: 7px !important;

        padding: 3px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    /* ========================================================
       LIVE TALK — SEPARATE, NEVER OVERLAPS
    ======================================================== */

    .live-talk-btn {
        position: relative !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 68px !important;

        height: 36px !important;
        min-height: 36px !important;

        padding: 0 9px !important;

        margin: 0 !important;

        border-radius: 9px !important;

        white-space: nowrap !important;

        z-index: 5 !important;
    }

    /* ========================================================
       TOOLS — FIXED INDIVIDUAL SPACE
    ======================================================== */

    .command-tool {
        position: relative !important;

        flex: 0 0 36px !important;

        width: 36px !important;
        min-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;

        margin: 0 !important;

        z-index: 5 !important;
    }

    /* ========================================================
       SEND — ALWAYS LAST
    ======================================================== */

    #sendBtn {
        position: relative !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin-left: auto !important;

        z-index: 10 !important;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 430px) {

    .command-tools {
        gap: 5px !important;
        padding: 2px !important;
    }

    .live-talk-btn {
        min-width: 60px !important;

        height: 34px !important;
        min-height: 34px !important;

        padding: 0 6px !important;
    }

    .command-tool {
        flex: 0 0 33px !important;

        width: 33px !important;
        min-width: 33px !important;

        height: 33px !important;
        min-height: 33px !important;
    }

    #sendBtn {
        flex: 0 0 38px !important;

        width: 38px !important;
        min-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .command-tools {
        gap: 4px !important;
    }

    .live-talk-btn {
        min-width: 56px !important;

        padding: 0 5px !important;
    }

    .command-tool {
        flex: 0 0 31px !important;

        width: 31px !important;
        min-width: 31px !important;

        height: 31px !important;
        min-height: 31px !important;
    }

    #sendBtn {
        flex: 0 0 36px !important;

        width: 36px !important;
        min-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
    }

}

@media (max-width: 767px) {

    .command-tools {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Every normal tool keeps its own space */
    .command-tool {
        position: relative !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    /* Pause response stays before Live Talk */
    #pauseResponseBtn {
        position: relative !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }

    /* LIVE TALK — ALWAYS LAST */
    .live-talk-btn {
        position: relative !important;
        order: 999 !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 68px !important;

        height: 36px !important;
        min-height: 36px !important;

        margin-left: 2px !important;
        margin-right: 0 !important;

        padding: 0 9px !important;

        white-space: nowrap !important;

        z-index: 20 !important;
    }

    /* Send remains safely separated */
    #sendBtn {
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;

        margin-left: auto !important;
    }
}

@media (max-width: 430px) {

    .command-tools {
        gap: 5px !important;
    }

    .command-tool {
        flex-basis: 33px !important;
        width: 33px !important;
        min-width: 33px !important;
        height: 33px !important;
    }

    .live-talk-btn {
        min-width: 60px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 6px !important;
    }

    #sendBtn {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }
}

/* ============================================================
   AP SYNAPSE — MOBILE COMMAND BAR
   FINAL HEIGHT COMPRESSION ONLY
   ============================================================ */

@media (max-width: 767px) {

    .command-bar {
        padding: 5px !important;
        gap: 5px !important;
        border-radius: 12px !important;
    }

    .command-input-wrap {
        height: 40px !important;
    }

    #userInput {
        height: 40px !important;
        min-height: 40px !important;
    }

    .command-tools {
        min-height: 34px !important;
        height: 34px !important;
        padding: 2px !important;
        gap: 5px !important;
    }

    .command-tool {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
    }

    .live-talk-btn {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 8px !important;
    }

    #sendBtn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}


/* SMALL PHONES */
@media (max-width: 430px) {

    .command-bar {
        padding: 4px !important;
        gap: 4px !important;
    }

    .command-input-wrap,
    #userInput {
        height: 38px !important;
        min-height: 38px !important;
    }

    .command-tools {
        height: 32px !important;
        min-height: 32px !important;
        gap: 4px !important;
    }

    .command-tool {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    .live-talk-btn {
        height: 30px !important;
        min-height: 30px !important;
    }

    #sendBtn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }
}

/* ============================================================
   AP SYNAPSE — MOBILE LIVE TALK
   FULL LABEL VISIBILITY ONLY
   ============================================================ */

@media (max-width: 767px) {

    .live-talk-btn {
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        white-space: nowrap !important;
        overflow: visible !important;

        flex: 0 0 78px !important;
    }

    .live-talk-label {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

@media (max-width: 430px) {

    .live-talk-btn {
        width: 74px !important;
        min-width: 74px !important;
        max-width: 74px !important;

        flex-basis: 74px !important;

        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

@media (max-width: 380px) {

    .live-talk-btn {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;

        flex-basis: 70px !important;

        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ============================================================
   AP SYNAPSE — PREMIUM UPLOADED FILE CARDS
   ============================================================ */

.ap-upload-message {
    align-items: flex-start;
}


.ap-upload-body {
    max-width: min(620px, 82%);
}


/* ============================================================
   MAIN CARD
   ============================================================ */

.ap-upload-card {

    position: relative;

    width: min(520px, 100%);

    padding: 18px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

    border: 1px solid
        rgba(212, 175, 55, .22);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.20),

        inset 0 1px 0
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    overflow: hidden;

}


/* ============================================================
   HEADER
   ============================================================ */

.ap-upload-header {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 15px;

}


.ap-upload-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.20),
            rgba(212,175,55,.07)
        );

    border: 1px solid
        rgba(212,175,55,.25);

    color: #d8b85a;

    font-size: 18px;

}


.ap-upload-title-group {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.ap-upload-title {

    font-size: 15px;

    font-weight: 650;

    letter-spacing: .01em;

}


.ap-upload-status {

    font-size: 12px;

    opacity: .62;

}


.ap-upload-ready {

    margin-top: 5px;

    font-size: 11px;

    opacity: .45;

}


/* ============================================================
   IMAGE PREVIEW
   ============================================================ */

.ap-upload-preview {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 15px;

    background:
        rgba(0,0,0,.16);

    border: 1px solid
        rgba(255,255,255,.07);

}


.ap-upload-image {

    display: block;

    width: 100%;

    max-height: 390px;

    object-fit: contain;

    border-radius: 14px;

}


/* ============================================================
   DOCUMENT CARD
   ============================================================ */

.ap-upload-document-card {

    display: flex;

    align-items: center;

    gap: 15px;

}


.ap-upload-document-icon {

    flex: 0 0 auto;

    width: 54px;
    height: 64px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.18),
            rgba(212,175,55,.055)
        );

    border: 1px solid
        rgba(212,175,55,.25);

    color: #d8b85a;

    font-size: 12px;

    font-weight: 750;

    letter-spacing: .08em;

}


.ap-upload-document-content {

    min-width: 0;

    flex: 1;

}


.ap-upload-check {

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        rgba(212,175,55,.12);

    border: 1px solid
        rgba(212,175,55,.22);

    color: #d8b85a;

    font-size: 14px;

}


/* ============================================================
   FOOTER
   ============================================================ */

.ap-upload-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 12px;

    font-size: 11px;

    opacity: .48;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .ap-upload-body {

        max-width: 92%;

    }

    .ap-upload-card {

        padding: 14px;

        border-radius: 17px;

    }

    .ap-upload-image {

        max-height: 300px;

    }

}

/* ============================================================
   AP SYNAPSE — INITIAL PAGE STATE
   Prevent canvas-page flash during startup
   ============================================================ */



#heroScreen {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
   AP SYNAPSE � WHITEBOARD CANVAS FINAL OVERRIDE
   LAST RULE � CANVAS MUST BE VISIBLE + DRAWABLE
========================================================= */

#canvasPage .whiteboard-shell {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: calc(100% - 16px) !important;
    height: calc(100vh - 180px) !important;
    min-height: 500px !important;
    margin: 0 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    pointer-events: auto !important;
}

#canvasPage #apCanvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 1px !important;
    min-height: 1px !important;
    background: #ffffff !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 14px !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

#canvasPage .whiteboard-toolbar {
    z-index: 10000 !important;
}

@media (max-width: 768px) {
    #canvasPage .whiteboard-shell {
        height: calc(100vh - 220px) !important;
        min-height: 460px !important;
    }
}


/* =========================================================
   AP SYNAPSE � WHITEBOARD CANVAS HEIGHT FINAL FIX
   ========================================================= */

#canvasPage .whiteboard-shell {
    width: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

#canvasPage .whiteboard-toolbar {
    flex: 0 0 auto !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 10 !important;
}

#canvasPage #apCanvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 440px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    flex: 1 1 auto !important;
    position: relative !important;
    z-index: 5 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    cursor: crosshair !important;
}

@media (max-width: 700px) {
    #canvasPage .whiteboard-shell {
        height: calc(100vh - 180px) !important;
        min-height: 420px !important;
    }

    #canvasPage #apCanvas {
        height: calc(100vh - 244px) !important;
        min-height: 350px !important;
    }
}


/* =========================================================
   AP SYNAPSE � WHITEBOARD CANVAS HEIGHT FINAL FIX
   ========================================================= */

#canvasPage .whiteboard-shell {
    width: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

#canvasPage .whiteboard-toolbar {
    flex: 0 0 auto !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 10 !important;
}

#canvasPage #apCanvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 440px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    flex: 1 1 auto !important;
    position: relative !important;
    z-index: 5 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    cursor: crosshair !important;
}

@media (max-width: 700px) {
    #canvasPage .whiteboard-shell {
        height: calc(100vh - 180px) !important;
        min-height: 420px !important;
    }

    #canvasPage #apCanvas {
        height: calc(100vh - 244px) !important;
        min-height: 350px !important;
    }
}


/* =========================================================
   AP SYNAPSE � WHITEBOARD FINAL LAYOUT OVERRIDE
   MUST REMAIN LAST
   ========================================================= */

#canvasPage {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 620px !important;
    max-height: none !important;
}

#canvasPage .whiteboard-shell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#canvasPage .whiteboard-toolbar {
    position: relative !important;
    z-index: 20 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}

#canvasPage #apCanvas {
    position: absolute !important;
    display: block !important;
    left: 0 !important;
    top: 64px !important;
    width: 100% !important;
    height: 440px !important;
    min-width: 0 !important;
    min-height: 440px !important;
    max-width: none !important;
    max-height: 440px !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    z-index: 10 !important;
}


/* =========================================================
   AP SYNAPSE � WHITEBOARD HARD HEIGHT OVERRIDE
   FINAL CANVAS VISIBILITY FIX
========================================================= */

#canvasPage {
    min-height: 620px !important;
    height: 620px !important;
    overflow: visible !important;
}

#canvasPage .whiteboard-shell {
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#canvasPage .whiteboard-toolbar {
    flex: 0 0 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#canvasPage #apCanvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: calc(100% - 2px) !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    flex: 0 0 440px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    pointer-events: auto !important;
    touch-action: none !important;
    z-index: 10 !important;
}


/* =========================================================
   AP SYNAPSE � WHITEBOARD FINAL GEOMETRY
========================================================= */

#canvasPage {
    height: 620px !important;
    min-height: 620px !important;
    overflow: visible !important;
}

#canvasPage .whiteboard-shell {
    display: block !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    overflow: visible !important;
}

#canvasPage #apCanvas {
    display: block !important;
    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    flex: none !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    position: relative !important;
    z-index: 20 !important;
}


/* =========================================================
   AP SYNAPSE � WHITEBOARD
   PERMANENT STABLE LAYOUT
========================================================= */

#canvasPage {
    display: block !important;
    height: 620px !important;
    min-height: 620px !important;
    overflow: visible !important;
}

#canvasPage .whiteboard-shell {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    flex: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#canvasPage .whiteboard-toolbar {
    display: flex !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex: none !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

#canvasPage #apCanvas {
    display: block !important;
    position: absolute !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;

    flex: none !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: none !important;

    z-index: 999 !important;
}


/* =========================================================
   AP SYNAPSE � WHITEBOARD FINAL DIMENSION LOCK
   Prevent all legacy flex/CSS rules from collapsing canvas
========================================================= */

#canvasPage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 620px !important;
    height: auto !important;
}

#canvasPage .whiteboard-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    flex: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#canvasPage .whiteboard-toolbar {
    display: flex !important;
    flex: none !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#canvasPage #apCanvas {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    flex: none !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {

    #canvasPage .whiteboard-shell {
        height: 520px !important;
        min-height: 520px !important;
    }

    #canvasPage #apCanvas {
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
    }

}


/* =========================================================
   AP SYNAPSE � PREMIUM WHITEBOARD
   FINAL AUTHORITATIVE LAYOUT
========================================================= */

#canvasPage {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 620px !important;
    box-sizing: border-box !important;
}

#canvasPage .projects-header {
    flex: none !important;
}

#canvasPage .whiteboard-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    max-width: none !important;
    flex: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#canvasPage .whiteboard-toolbar {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
}

#canvasPage #apCanvas {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    max-width: none !important;
    flex: none !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    pointer-events: auto !important;
    cursor: crosshair !important;
}

#canvasPage #canvasPen,
#canvasPage #canvasErase,
#canvasPage #canvasClear {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    cursor: pointer !important;
}

#canvasPage #canvasPen.active,
#canvasPage #canvasErase.active {
    transform: translateY(-1px);
}

@media (max-width: 700px) {

    #canvasPage {
        min-height: 560px !important;
    }

    #canvasPage .whiteboard-shell {
        height: 460px !important;
        min-height: 460px !important;
        max-height: 460px !important;
    }

    #canvasPage #apCanvas {
        height: 396px !important;
        min-height: 396px !important;
        max-height: 396px !important;
    }

}

/* AP SYNAPSE WHITEBOARD � AUTHORITATIVE FINAL FIX */

#canvasPage {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#canvasPage .whiteboard-shell {
    display: block !important;
    width: calc(100vw - 40px) !important;
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
    max-width: none !important;
    flex: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#canvasPage .whiteboard-toolbar {
    display: flex !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
}

#canvasPage #apCanvas {
    display: block !important;
    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    flex: none !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    touch-action: none !important;
}
 
/* =========================================================
   AP SYNAPSE � WHITEBOARD FINAL DIMENSION LOCK
   Prevent canvas collapse / flex shrink
========================================================= */

#canvasPage .whiteboard-shell {
    width: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#canvasPage .whiteboard-toolbar {
    flex: 0 0 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
}

#canvasPage #apCanvas {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 440px !important;
    min-height: 440px !important;
    max-height: 440px !important;
    box-sizing: border-box !important;
    touch-action: none !important;
    pointer-events: auto !important;
}

@media (max-width: 600px) {
    #canvasPage .whiteboard-shell {
        height: 520px !important;
        min-height: 520px !important;
    }

    #canvasPage #apCanvas {
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
    }
}