/* ===========================
   FruityDoc - Chat CSS (full)
   =========================== */

:root{
    --fd-bg:#0f1115; --fd-panel:#151922; --fd-elev:#1b2130; --fd-text:#e6e9ef; --fd-muted:#a6adbb; --fd-primary:#6c5ce7; --fd-border:#2a3242;
    --fd-radius:14px; --fd-gap:12px; --fd-pad:14px;
    --fd-left-w:320px; --fd-right-w:340px; --fd-collapsed-w:56px; --fd-topbar-h:56px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body.fd-body{background:var(--fd-bg);color:var(--fd-text);font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,sans-serif}

/* App full-height con variabili per larghezze */
.fd-app{
    --L:var(--fd-left-w);--R:var(--fd-right-w);--C:var(--fd-collapsed-w);
    height:100vh;min-height:0;display:grid;
    grid-template-rows:var(--fd-topbar-h) 1fr;
    grid-template-columns:var(--L) 1fr var(--R);
    transition:grid-template-columns .25s ease;
    overflow:hidden;
}
.fd-app[data-left="collapsed"]{--L:var(--C)}
.fd-app[data-right="collapsed"]{--R:var(--C)}

/* Topbar */
.fd-topbar{
    grid-column:1/-1;height:var(--fd-topbar-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--fd-gap);
    background:linear-gradient(0deg,var(--fd-panel),var(--fd-elev));
    border-bottom:1px solid var(--fd-border);
    position:sticky;top:0;z-index:10;
}
.fd-topbar-left,.fd-topbar-right{display:flex;align-items:center;gap:8px}
.fd-brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.fd-logo{height:22px}
.fd-brand-text{font-weight:600;letter-spacing:.2px}
.fd-user{display:flex;align-items:center;gap:8px;color:var(--fd-muted)}
.fd-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#2c3344;display:inline-flex;align-items:center;justify-content:center;font-weight:700}

/* Icon buttons (topbar) */
.fd-iconbtn{
    width:34px;height:34px;display:inline-grid;place-items:center;
    border:1px solid var(--fd-border);background:var(--fd-panel);color:var(--fd-text);
    border-radius:10px;cursor:pointer
}
.fd-iconbtn:hover{background:var(--fd-elev)}
.fd-ico{width:18px;height:18px;display:block}

/* Tema (switch) */
.fd-theme{ position: relative; }
.fd-theme-btn{
    width:34px;height:34px;display:inline-grid;place-items:center;
    border:1px solid var(--fd-border);background:var(--fd-panel);color:var(--fd-text);
    border-radius:10px;cursor:pointer;margin-right:6px;
}
.fd-theme-btn:hover{ background:var(--fd-elev); }
.fd-theme-ico{ font-size:14px; line-height:1; }
.fd-theme-menu{
    position:absolute; right:0; top:40px; min-width:200px;
    background:var(--fd-panel); border:1px solid var(--fd-border);
    border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.45); padding:6px;
    z-index:30;
}
.fd-theme-opt{
    width:100%; text-align:left; display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:10px; border:0; background:transparent; color:var(--fd-text);
    cursor:pointer;
}
.fd-theme-opt:hover{ background: rgba(255,255,255,.05); }

/* Pannelli laterali */
.fd-pane{background:var(--fd-panel);border-right:1px solid var(--fd-border);overflow:hidden;display:flex;flex-direction:column}
.fd-left{grid-row:2;grid-column:1}
.fd-right{grid-row:2;grid-column:3;border-right:0;border-left:1px solid var(--fd-border)}

/* Header cliccabili (nessun pulsante interno) */
.fd-pane-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--fd-pad);border-bottom:1px solid var(--fd-border);
    user-select:none;cursor:pointer
}
.fd-pane-title{display:flex;align-items:center;gap:8px}
.fd-pane-icon{font-size:14px}
.fd-pane-text{font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--fd-muted)}

/* Stato compresso: rail verticale cliccabile */
.fd-app[data-left="collapsed"] .fd-left,
.fd-app[data-right="collapsed"] .fd-right{position:relative}
.fd-app[data-left="collapsed"] .fd-left .fd-pane-header,
.fd-app[data-right="collapsed"] .fd-right .fd-pane-header{
    writing-mode:vertical-rl;transform:rotate(180deg);height:100%;
    align-items:center;justify-content:center;border-bottom:0
}
.fd-app[data-left="collapsed"] .fd-left > :not(.fd-pane-header),
.fd-app[data-right="collapsed"] .fd-right > :not(.fd-pane-header){display:none}

/* Sinistra: Fonti */
.fd-search{padding:var(--fd-pad);border-bottom:1px solid var(--fd-border)}
.fd-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--fd-border);background:var(--fd-elev);color:var(--fd-text)}
.fd-input::placeholder{color:var(--fd-muted)}
.fd-sources-actions{display:flex;gap:8px;padding:var(--fd-pad);border-bottom:1px solid var(--fd-border)}
.fd-btn{padding:9px 12px;border-radius:10px;border:1px solid var(--fd-border);background:var(--fd-elev);color:var(--fd-text);cursor:pointer}
.fd-btn:hover{filter:brightness(1.05)}
.fd-btn-primary{background:var(--fd-primary);border-color:transparent;color:#fff}
.fd-btn-ghost{background:transparent}
.fd-sources{display:grid;padding:6px;gap:6px;overflow:auto}
.fd-source{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:transparent;text-decoration:none;color:var(--fd-text);border:1px solid transparent}
.fd-source:hover{background:rgba(255,255,255,.04)}
.fd-source.is-active{background:rgba(108,92,231,.14);border-color:rgba(108,92,231,.4)}
.fd-source-title{font-weight:600;font-size:13px}
.fd-source-preview{color:var(--fd-muted);font-size:12px;line-height:1.3}
.fd-source-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.fd-source-actions{display:flex;gap:4px}

/* Anti-overflow sidebar fonti */
.fd-left { min-width: 0; }                     /* la colonna non cresce per colpa dei figli */
.fd-sources { min-width: 0; }                  /* grid container */
.fd-source, .fd-source-row { min-width: 0; }   /* flex/grid item non spinge il contenitore */
.fd-source-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-source-preview {
    overflow-wrap: anywhere; word-break: break-word; /* spezza URL/parole lunghe */
}


/* Centro: Chat */
.fd-center{
    grid-row:2;grid-column:2;display:grid;grid-template-rows:auto 1fr auto;min-height:0;
    gap:var(--fd-gap);
    background:radial-gradient(1200px 500px at 50% -100px, rgba(108,92,231,.12), transparent 60%) no-repeat;
    padding:var(--fd-gap)
}
.fd-chat-header{background:var(--fd-panel);border:1px solid var(--fd-border);border-radius:var(--fd-radius);padding:10px 12px}
.fd-chat-title h1{margin:0;font-size:16px}
.fd-chat-sub{margin:3px 0 0;color:var(--fd-muted)}

/* Lista messaggi bottom-up: column-reverse (nuovi in basso) */
.fd-messages{
    overflow:auto;min-height:0;padding:6px;
    display:flex;flex-direction:column-reverse;gap:6px
}

/* Messaggio = bubble sopra, azioni sotto */
.fd-msg{display:flex;flex-direction:column;gap:4px}
.fd-msg-assistant{align-items:flex-start}
.fd-msg-user{align-items:flex-end}

/* Bubbles compatte */
.fd-msg-bubble{
    display:inline-block;max-width:min(680px,78%);
    padding:6px 10px;border-radius:14px;border:1px solid var(--fd-border);
    background:#1f2737;line-height:1.28;white-space:pre-wrap;word-break:break-word
}
.fd-msg-user .fd-msg-bubble{background:#243049;border-color:#2f3b55}
.fd-msg-assistant .fd-msg-bubble{background:#1d2331}

/* Animazione fade-in-up all'inserimento */
@keyframes fd-fade-in-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fd-msg.anim-in .fd-msg-bubble{ animation: fd-fade-in-up .18s ease-out both; }

/* Bubble typing (tre pallini) */
.fd-typing .fd-msg-bubble{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; }
.fd-typing-dots{ display:inline-flex; align-items:center; gap:4px; }
.fd-typing-dots i{
    width:6px; height:6px; border-radius:50%;
    background: currentColor; opacity:.6; animation: fd-bounce 1s infinite ease-in-out;
}
.fd-typing-dots i:nth-child(2){ animation-delay:.12s }
.fd-typing-dots i:nth-child(3){ animation-delay:.24s }
@keyframes fd-bounce { 0%,80%,100%{ transform:translateY(0); opacity:.5 } 40%{ transform:translateY(-3px); opacity:1 } }

/* Composer */
.fd-composer{position:sticky;bottom:0}
.fd-composer-inner{
    display:grid;grid-template-columns:1fr auto;gap:8px;background:var(--fd-panel);
    border:1px solid var(--fd-border);border-radius:var(--fd-radius);padding:6px; position:relative;
}
.fd-textarea{resize:none;width:100%;min-height:36px;max-height:160px;background:transparent;color:var(--fd-text);border:0;outline:0;padding:6px 8px;line-height:1.3}
.fd-textarea--mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.fd-composer-actions{display:flex;align-items:center;gap:6px}
#fd-input:disabled{ background:#2a3242; opacity:.6; cursor:not-allowed }
.fd-composer button:disabled{ opacity:.5; cursor:not-allowed }

/* Tree select sotto al composer */
.fd-composer-tree-select{
    display:flex;align-items:center;gap:8px;padding:8px 10px;
    background:var(--fd-panel);border:1px solid var(--fd-border);border-top:0;
    border-radius:0 0 var(--fd-radius) var(--fd-radius);margin-top:-1px;
}
.fd-tree-label{font-size:13px;color:var(--fd-muted);white-space:nowrap;margin:0}
.fd-tree-select{
    flex:1;padding:6px 10px;border-radius:8px;border:1px solid var(--fd-border);
    background:var(--fd-elev);color:var(--fd-text);font-size:14px;cursor:pointer;
}
.fd-tree-select:focus{outline:2px solid var(--fd-primary);outline-offset:1px}

/* Overlay busy sul composer */
.fd-composer-busy{
    position:absolute; inset:0; display:grid; place-items:center;
    background:rgba(0,0,0,.35); border-radius:var(--fd-radius); backdrop-filter:blur(1px); z-index:5;
}
.fd-busy-wrap{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:600 }
.fd-busy-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation: fd-spin .8s linear infinite }
@keyframes fd-spin { to { transform: rotate(360deg); } }

/* Tool (pannello destro) */
.fd-tools{display:grid;gap:8px;padding:var(--fd-pad);overflow:auto}
.fd-tool{text-align:left;width:100%;background:var(--fd-elev);border:1px solid var(--fd-border);color:var(--fd-text);border-radius:12px;padding:12px;cursor:pointer}
.fd-tool:hover{filter:brightness(1.05)}
.fd-tool-title{font-weight:700}
.fd-tool-sub{color:var(--fd-muted);font-size:12px;margin-top:2px}

/* Modal */
.fd-modal{position:fixed;inset:0;display:none}
.fd-modal[aria-hidden="false"]{display:block}
.fd-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.fd-modal__dialog{position:relative;margin:6vh auto;background:var(--fd-panel);width:min(860px,92vw);border:1px solid var(--fd-border);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.fd-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--fd-border)}
.fd-modal__body{padding:12px 14px}
.fd-modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--fd-border)}
.fd-label{display:block;font-size:12px;color:var(--fd-muted);margin-bottom:6px}

/* Azioni sotto le bubble: solo icone, 60% -> 100% on hover, tooltip */
.fd-msg-actions{ display:flex; gap:8px; margin-top:2px; pointer-events: auto; }
.fd-msg-action{ appearance:none; background:transparent; border:0; padding:4px; line-height:0; cursor:pointer; opacity:.6; transition:opacity .15s ease; position:relative }
.fd-msg-action:hover{ opacity:1 }
.fd-msg-action svg{
    width:16px; height:16px; display:block; color:currentColor;
    fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
/* Tooltip (usa data-tip) */
.fd-msg-action[data-tip]::after,
.fd-msg-action[data-tip]::before{
    position:absolute; pointer-events:none; opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.fd-msg-action[data-tip]::after{
    content: attr(data-tip);
    /*bottom: 190%; left: 50%; transform: translateX(-50%) translateY(4px);*/
    background: rgba(10,10,14,.95); color:#fff; font-size:12px; line-height:1;
    padding:6px 8px; border-radius:8px; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.55);
}
.fd-msg-action[data-tip]::before{
    content: ""; bottom: calc(150% - 4px); left: 50%;
    /*transform: translateX(-50%) translateY(4px) rotate(45deg);*/
    width:8px; height:8px; background: rgba(10,10,14,.95);
}
.fd-msg-action:hover::after,
.fd-msg-action:hover::before{ opacity:1; transform: translateX(-50%) translateY(0); }


/* mantieni le regole base come sopra, poi: */
.fd-msg-action[data-tip].tip-right::after{ /* analoghe a data-tip-pos="right" */
    left: 100%;
    top: 50%;
    bottom: auto;
    transform: translateX(8px) translateY(-50%);
}
.fd-msg-action[data-tip].tip-right::before{
    left: calc(100% + 4px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(45deg);
}

.fd-msg-action[data-tip].tip-left::after{
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateX(-8px) translateY(-50%);
}
.fd-msg-action[data-tip].tip-left::before{
    right: calc(100% + 4px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(45deg);
}

/* Tema chiaro (override variabili) */
:root[data-theme="light"]{
    --fd-bg:#f6f7fb; --fd-panel:#ffffff; --fd-elev:#fafbff; --fd-text:#1c2230; --fd-muted:#5c6475; --fd-primary:#6c5ce7; --fd-border:#dfe3ee;
}
:root[data-theme="light"] .fd-msg-user .fd-msg-bubble{ background:#e8edfb; border-color:#cfd8f1 }
:root[data-theme="light"] .fd-msg-assistant .fd-msg-bubble{ background:#eef0f7 }
:root[data-theme="light"] .fd-source.is-active{ background:rgba(108,92,231,.18); border-color:rgba(108,92,231,.5) }

/* Mobile */
@media (max-width:980px){
    .fd-app{grid-template-columns:0 1fr 0}
    .fd-left,.fd-right{position:fixed;top:var(--fd-topbar-h);bottom:0;width:min(86vw,360px);z-index:20}
    .fd-left{left:10px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
    .fd-right{right:10px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
    .fd-app[data-left="collapsed"] .fd-left,
    .fd-app[data-right="collapsed"] .fd-right{display:none}
}


/* Garantisci che le azioni ricevano il click anche vicino ai bordi */
.fd-msg { position: relative; }
.fd-msg-actions { position: relative; z-index: 2; }
.fd-msg-action { pointer-events: auto; }


/* Anti-overflow orizzontale */
html, body { overflow-x: hidden; }
.fd-center, .fd-messages, .fd-msg, .fd-msg-bubble { min-width: 150px; max-width: 100%; }
.fd-messages { overflow-x: hidden; }
.fd-msg-bubble { overflow-wrap: anywhere; word-break: break-word;  }

/* Le azioni devono sempre ricevere il click */
.fd-msg { position: relative; }
.fd-msg-actions { position: relative; z-index: 2; }
.fd-msg-action { pointer-events: auto; }


/* ===== Mobile Safe-Area & Anti-Overflow ===== */
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

/* Altezza reale della viewport mobile (fix 100vh su iOS/Chrome) */
:root { --vh: 1vh; --composer-h: 64px; }
.fd-app { height: calc(var(--vh) * 100); }

/* Safe area in basso: evita che la chat finisca sotto la barra di sistema */
.fd-messages {
    padding-bottom: calc(10px + var(--composer-h) + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
}

/* Composer sempre visibile sopra la safe-area */
.fd-composer { position: sticky; bottom: 0; transform: translateZ(0); }
.fd-composer-inner { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }

/* Niente zoom su focus: font >=16px su input/textarea */
.fd-textarea,
input, select, textarea, button {
    font-size: 16px;  /* iOS zoom fix */
}

/* Le bubble non “spingono” in orizzontale */
.fd-center, .fd-messages, .fd-msg, .fd-msg-bubble { min-width: 150px; max-width: 100%; }
.fd-msg-bubble { overflow-wrap: anywhere; word-break: break-word; }


/* === Mobile tweaks === */
@media (max-width: 980px){
    /* Gap più corto tra ultima bubble e composer */
    .fd-messages{
        /* prima probabilmente era alto; lo riduciamo */
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px) + var(--composer-h));
    }
}

/* Il modale deve stare sopra a tutto (sidebar incluse) */
.fd-modal{ z-index: 9999; }
.fd-modal__backdrop{ z-index: -1; } /* resta sotto al dialog dentro lo stesso stacking context */


/* Sentinel per rilevare il breakpoint "floating" */
#fd-bp-sentinel{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
#fd-bp-sentinel::after{content:"desktop"}            /* default */
@media (max-width: 960px){                           /* <-- metti qui il TUO breakpoint reale */
    #fd-bp-sentinel::after{content:"float"}            /* in mobile/floating sidebars */
}




/* --- Anti-overflow globale (senza rompere i rail orizzontali interni) --- */
html, body {
    max-width: 100%;
    overflow-x: hidden;           /* taglia lo scroll orizzontale della pagina */
}

/* Contenitori principali: non lasciare che i figli spingano in orizzontale */
#fd-app,
.fd-layout,
.fd-main,
.fd-content,
.fd-page {
    max-width: 100%;
    overflow-x: clip;             /* meglio di hidden: evita side-effects sui figli */
    position: relative;
}

/* Flex/grid: abilita la compressione corretta del contenuto */
.fd-layout, .fd-main, .fd-content, .fd-row, .fd-col {
    min-width: 0;                 /* fondamentale per truncation/ellissi */
}

/* Immagini/media: mai oltre la larghezza del container */
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Sidebar sinistra/destra: evita che riservino spazio quando flottano */
@media (max-width: 980px) {
    /* se in mobile le sidebar "fluttuano", assicurati siano fuori dal flusso */
    .fd-left, .fd-right {
        position: fixed;            /* toglie dal flusso, niente impatto su larghezza pagina */
        top: 0; bottom: 0;
        width: min(86vw, 420px);
        max-width: 100%;
        will-change: transform;
        contain: layout paint;      /* evita di contribuire all'overflow del documento */
    }
    /* stato chiuso: invisibile e non cliccabile */
    [data-left="collapsed"]  .fd-left,
    [data-right="collapsed"] .fd-right {
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(-110%,0,0);  /* sx */
    }
    /* stato aperto: visibile e in viewport */
    [data-left="expanded"]  .fd-left  { left: 0;  transform: translate3d(0,0,0); visibility: visible; pointer-events: auto; }
    [data-right="expanded"] .fd-right { right: 0; transform: translate3d(0,0,0); visibility: visible; pointer-events: auto; }
}

/* Lista fonti nella sidebar: zero push orizzontale */
.fd-left { min-width: 0; }
.fd-sources, .fd-source-list, .fd-source, .fd-source-row { min-width: 0; }
.fd-source-title, .fd-source-title a {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.fd-source-preview { overflow-wrap: anywhere; word-break: break-word; }


/* Variabili per scrollbar */
:root{
    /* valori base (modo "chiaro") */
    --scroll-thumb: rgba(0,0,0,.28);
    --scroll-thumb-hover: rgba(0,0,0,.45);
    --scroll-track: transparent;
}
/* Tema scuro: pollice più chiaro, con un accenno brand in hover */
@media (prefers-color-scheme: dark){
    :root{
        --scroll-thumb: rgba(255,255,255,.22);
        --scroll-thumb-hover: rgba(255,229,0,.45); /* giallo brand soft */
        --scroll-track: transparent;
    }
}

/* Firefox */
* {
    scrollbar-width: thin;                                 /* sottile */
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* WebKit/Chromium */
::-webkit-scrollbar {
    width: 8px; height: 8px;                               /* sottile */
}
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}
::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

/* Applica in modo esplicito anche a contenitori scrollabili interni */
.fd-left, .fd-right, .chat-window, .rail, .fd-sources, .fd-content {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.fd-left::-webkit-scrollbar,
.fd-right::-webkit-scrollbar,
.chat-window::-webkit-scrollbar,
.rail::-webkit-scrollbar,
.fd-sources::-webkit-scrollbar,
.fd-content::-webkit-scrollbar {
    width: 8px; height: 8px;
}
.fd-left::-webkit-scrollbar-thumb,
.fd-right::-webkit-scrollbar-thumb,
.chat-window::-webkit-scrollbar-thumb,
.rail::-webkit-scrollbar-thumb,
.fd-sources::-webkit-scrollbar-thumb,
.fd-content::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 8px;
}
.fd-left::-webkit-scrollbar-thumb:hover,
.fd-right::-webkit-scrollbar-thumb:hover,
.chat-window::-webkit-scrollbar-thumb:hover,
.rail::-webkit-scrollbar-thumb:hover,
.fd-sources::-webkit-scrollbar-thumb:hover,
.fd-content::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}


/* ============ Anti-overflow Sidebar Fonti ============ */

/* Evita che la sidebar riservi spazio orizzontale — chiave per troncare correttamente */
.fd-left {
    min-width: 0;
    overflow-x: hidden;          /* blocca lo scroll orizzontale interno */
}

/* Il contenitore scrollabile delle fonti: solo scroll verticale */
.fd-left .fd-sources {
    overflow-y: auto;
    overflow-x: hidden;          /* <— elimina la barra orizzontale */
}

/* Nessun figlio deve "spingere" in larghezza */
.fd-left .fd-sources,
.fd-left .fd-source,
.fd-left .fd-source-row,
.fd-left .fd-source-title,
.fd-left .fd-source-preview {
    min-width: 0;
}

/* Titolo: tronca con ellissi, inline sicuro */
.fd-left .fd-source-title,
.fd-left .fd-source-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Preview/URL: spezza parole lunghissime / url */
.fd-left .fd-source-preview {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* In mobile la sidebar è già "fluttuante" (position:fixed) a 980px:
   assicuriamoci che NON contribuisca mai alla larghezza del documento */
@media (max-width:980px){
    .fd-left {
        position: fixed;           /* sei già fixed nel tuo CSS; ribadisco per sicurezza */
        left: 10px; right: auto;   /* non occupare spazio fuori viewport */
        max-width: min(86vw, 360px);
        contain: layout paint;     /* isola il layout, niente overflow nel documento */
    }
}


/* ===== SOURCES: layout tabellare + icone in colonna ===== */

/* contenitore scrollabile solo verticale (già presente) */
.fd-left { min-width:0; overflow-x:hidden; }
.fd-sources { overflow-y:auto; overflow-x:hidden; min-width:0; }

/* riga a 3 colonne: [icone strette] [testo comprimibile] [aside no-wrap] */
.fd-source-row{
    display:grid;
    grid-template-columns: 22px minmax(0,1fr) auto;
    gap:10px;
    align-items:start;
}

/* colonna icone “stack” stretto */
.fd-icon-stack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    width:22px; min-width:22px;
}
.fd-icon-stack .fd-ico{ width:18px; height:18px; display:block; }

/* corpo testo: titolo su una riga + ellissi; meta che si spezza */
.fd-source-body{ min-width:0; }
.fd-source-title{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    color:inherit; text-decoration:none; font-weight:600; font-size:13px;
}
.fd-source-title:hover{ text-decoration:underline; }
.fd-source-meta{
    margin-top:2px; font-size:12px; color:var(--fd-muted);
    overflow-wrap:anywhere; word-break:break-word;
}

/* aside: azioni no-wrap, non spingono la riga */
.fd-source-aside{ white-space:nowrap; display:flex; align-items:center; gap:6px; }
.fd-source-actions{ display:flex; gap:4px; }

/* hard anti-overflow: nessun figlio “spinge” la colonna */
.fd-left .fd-source,
.fd-left .fd-source-row,
.fd-left .fd-source-title,
.fd-left .fd-source-meta{ min-width:0; }

/* Mobile: sidebar fluttuante non contribuisce alla larghezza documento */
@media (max-width:980px){
    .fd-left{
        position:fixed; top:var(--fd-topbar-h); bottom:0; left:10px;
        width:min(86vw,360px); max-width:100%;
        contain:layout paint; will-change:transform;
    }
    .fd-app[data-left="collapsed"] .fd-left{ display:none; }
}


/* Meta sotto al titolo: data IT + dominio */
.fd-source-meta{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:2px;
    font-size:12px;
    color: var(--fd-muted, #8a9097);
    min-width:0;               /* consente al dominio di spezzare */
    flex-wrap:wrap;            /* se serve va a capo */
}
.fd-source-date{ font-variant-numeric: tabular-nums; }
.fd-source-sep{ opacity:.6; }
.fd-source-domain{
    overflow-wrap:anywhere;
    word-break:break-word;
}


/* Textarea del composer: baseline coerente */
#fd-input.fd-textarea{
    line-height: 1.4;              /* riga “reale” */
    padding: 10px 12px;            /* verticale 10px */
    box-sizing: border-box;
    resize: none;
    height: auto !important;       /* ignora eventuali height inline (39px ecc.) */
    overflow-y: auto;
}

/* Placeholder: usa la stessa line-height del campo per non farsi tagliare */
#fd-input.fd-textarea::placeholder{
    line-height: inherit;
    opacity: .75;
}

/* Mobile: garantisci 2 righe piene (2 * line-height + padding) */
@media (max-width:980px){
    #fd-input.fd-textarea{
        /* 2 righe da 1.4em + 10px top + 10px bottom */
        min-height: calc(2 * 1.4em + 20px) !important;
        /* se hai bordo top/bottom > 0, puoi aggiungere +2px qui sopra */
    }
}

/* Evita che il wrapper schiacci il textarea */
.fd-composer .fd-composer-inner{
    align-items: stretch;         /* assicura che il textarea cresca in altezza */
}


/* === Chat history (lista) === */
.fd-chats{
    display:grid; gap:6px; padding:6px;
    overflow:auto; border-bottom:1px solid var(--fd-border);
    max-height: 40vh; /* lascia spazio ai tool sotto; regola a piacere */
}
.fd-chat-item{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:12px; text-decoration:none; color:var(--fd-text);
    background:transparent; border:1px solid transparent; cursor:pointer;
}
.fd-chat-item:hover{ background: rgba(255,255,255,.04); }
.fd-chat-item.is-active{ background: rgba(108,92,231,.14); border-color: rgba(108,92,231,.4); }
.fd-chat-title{
    font-weight:600; font-size:13px; overflow:hidden; white-space:normal; text-overflow:ellipsis;
}
.fd-chat-meta{
    color: var(--fd-muted); font-size:12px; margin-top:2px; display:flex; gap:6px; flex-wrap:wrap;
}
.fd-chat-bullet{ opacity:.6; }

/* In mobile, la sinistra “fluttua”: nessun cambio necessario, eredita i tuoi breakpoints */


/* === Topbar: utente + avatar reattivi al tema === */

/* Valori default: tema scuro (quando data-theme non è "light") */
:root {
    --fd-topbar-user-text: #e5e7eb;        /* testo chiaro su fondo scuro */
    --fd-avatar-bg:        #334155;        /* slate-700 */
    --fd-avatar-text:      #f9fafb;        /* quasi bianco */
    --fd-avatar-ring:      rgba(255,255,255,.18);
}

/* Override in tema chiaro */
[data-theme="light"] {
    --fd-topbar-user-text: #111827;        /* testo scuro */
    --fd-avatar-bg:        #eef2ff;        /* violet-50 */
    --fd-avatar-text:      #1f2937;        /* gray-800 */
    --fd-avatar-ring:      rgba(0,0,0,.08);
}

/* Nome utente: usa il colore del tema corrente */
.fd-topbar .fd-user-name {
    color: var(--fd-topbar-user-text);
    transition: color .18s ease;
}

/* Avatar: stile coerente nei due temi */
.fd-topbar .fd-avatar {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 999px;
    background: var(--fd-avatar-bg);
    color: var(--fd-avatar-text);
    border: 1px solid var(--fd-avatar-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Immagine avatar: riempie il cerchio */
.fd-topbar .fd-avatar-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    /* Niente filtri di default: rispetta la foto reale */
    /* Se mai servisse più leggibilità con foto scure in dark:
       [data-theme!="light"] .fd-topbar .fd-avatar-img { filter: brightness(1.05); } */
}

/* Fallback con iniziale */
.fd-topbar .fd-avatar-fallback {
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 12px;
    text-transform: uppercase;
}

/* Stato hover/focus: piccolo accento sul bordo */
.fd-topbar .fd-user-btn:hover .fd-avatar,
.fd-topbar .fd-user-btn:focus-visible .fd-avatar {
    box-shadow: 0 0 0 2px var(--fd-avatar-ring);
    outline: none;
}


/* === Superfici della topbar e del menu utente, sensibili al tema === */
.fd-topbar {
    /* default: tema scuro (quando data-theme NON è "light") */
    --fd-surface:  #0f172a;                 /* sfondo menu */
    --fd-border:   rgba(255,255,255,.12);   /* bordo menu */
    --fd-hover:    rgba(255,255,255,.06);   /* hover voci */
    --fd-text:     #e5e7eb;                 /* testo voci */
    --fd-elevation: 0 8px 24px rgba(0,0,0,.32);
}

/* override in tema chiaro */
[data-theme="light"] .fd-topbar {
    --fd-surface:  #ffffff;
    --fd-border:   #e5e7eb;
    --fd-hover:    #f3f4f6;
    --fd-text:     #111827;
    --fd-elevation: 0 8px 24px rgba(0,0,0,.08);
}

/* applica le variabili al menu e agli item */
.fd-topbar .fd-user-menu {
    background: var(--fd-surface);
    border-color: var(--fd-border);
    box-shadow: var(--fd-elevation);
    color: var(--fd-text);
}
.fd-topbar .fd-user-menu-item {
    color: var(--fd-text);
}
.fd-topbar .fd-user-menu-item:hover,
.fd-topbar .fd-user-menu-item:focus {
    background: var(--fd-hover);
    color: var(--fd-text);
}

/* opzionale: se il box bianco fosse l'hover del bottone utente */
.fd-topbar .fd-user-btn:hover,
.fd-topbar .fd-user-btn:focus-visible {
    background: var(--fd-hover);
    border-radius: 8px;
    outline: none;
}


/* === Chat list: replica layout a 3 colonne delle sorgenti === */
#fd-chats .fd-source-row{
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) auto; /* icona | testo | azioni */
    align-items: center;
    gap: 10px;
}

#fd-chats .fd-icon-stack{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
}

#fd-chats .fd-source-body{ min-width: 0; }              /* consente ellissi */
#fd-chats .fd-source-title{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#fd-chats .fd-source-meta{ margin-top:2px; font-size:12px; color:var(--fd-muted); display:flex; gap:6px; flex-wrap:wrap; }

#fd-chats .fd-source-aside{ white-space: nowrap; margin-left: auto; }
#fd-chats .fd-source-actions{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#fd-chats .fd-iconbtn{
    width: 28px;
    height: 28px;
    line-height: 0;
    display: inline-grid;
    place-items: center;
}

/* === Chat list: azioni davvero a destra === */
#fd-chats { width: 100%; }
#fd-chats .fd-source {         /* l’anchor dell’item chat */
    display: block;              /* (override del display predefinito) */
    width: 100%;
}

#fd-chats .fd-source-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto; /* icona | testo | azioni */
    align-items: center;
    gap: 10px;
    width: 100%;
}

#fd-chats .fd-icon-stack {
    width: 22px; min-width: 22px;
    display: flex; align-items: center; justify-content: center;
}

#fd-chats .fd-source-body { min-width: 0; }               /* consente ellissi */
#fd-chats .fd-source-title {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#fd-chats .fd-source-meta {
    margin-top: 2px; font-size: 12px; color: var(--fd-muted); display: flex; gap: 6px; flex-wrap: wrap;
}

/* — il segreto per tenerle allineate a destra — */
#fd-chats .fd-source-aside { justify-self: end; white-space: nowrap; }
#fd-chats .fd-source-actions { display: inline-flex; align-items: center; gap: 4px; }
#fd-chats .fd-iconbtn { width: 28px; height: 28px; line-height: 0; display: inline-grid; place-items: center; }


/* 1) la bubble deve essere positioned */
.fd-msg-bubble{ position: relative; }

/* 2) tail lato DESTRO per i messaggi utente */
.fd-msg-user .fd-msg-bubble::before,
.fd-msg-user .fd-msg-bubble::after{
    content:""; position:absolute; bottom:6px; right:-6px;
    width:12px; height:12px; transform: rotate(45deg);
    border-radius: 2px;             /* ammorbidisce l’angolo */
    pointer-events: none;
}
/* contorno (sotto): usa il colore del bordo della bubble */
.fd-msg-user .fd-msg-bubble::before{
    background: var(--fd-border);   /* stesso bordo della bubble */
    bottom:5px; right:-7px;         /* 1px più fuori/sotto → fa da outline */
    width:14px; height:14px;        /* leggermente più grande */
}
/* riempimento (sopra): eredita il background della bubble */
.fd-msg-user .fd-msg-bubble::after{
    background-color: inherit;      /* prende il bg della bubble */
}

/* 3) tail lato SINISTRO per i messaggi assistant */
.fd-msg-assistant .fd-msg-bubble::before,
.fd-msg-assistant .fd-msg-bubble::after{
    content:""; position:absolute; bottom:6px; left:-6px;
    width:12px; height:12px; transform: rotate(45deg);
    border-radius: 2px; pointer-events: none;
}
.fd-msg-assistant .fd-msg-bubble::before{
    background: var(--fd-border);
    bottom:5px; left:-7px;
    width:14px; height:14px;
}
.fd-msg-assistant .fd-msg-bubble::after{
    background-color: inherit;
}