:root {
      --navy: #253247;
      --bg: #f7f8f9;
      --card: #ffffff;
      --text: #1f2937;
      --muted: #6b7280;
      --line: #e5e7eb;
      --bubble-user: #253247;
      --bubble-bot: #ffffff;
      --shadow: 0 14px 44px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.06);
      --radius: 30px;
    }
    * { box-sizing: border-box; }
    *, *::before, *::after, body, button, input, select, textarea, a {
      font-family: "Lexend", "Segoe UI", system-ui, sans-serif !important;
    }
    body {
      margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
      display: flex; flex-direction: column;
      -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    }
    .topbar {
      --topbar-bg: #f7f8f9;
      --topbar-text: var(--navy);
      position: relative;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: .85rem 1.5rem; background: var(--topbar-bg); color: var(--topbar-text);
      border-bottom: 1px solid #e5e7eb;
    }
    /* Layout desktop: logo a sinistra, titolo CENTRATO, azioni a destra. Il
       brand non può invadere la zona centrale, altrimenti un logo largo
       (wordmark) finisce sotto al titolo (DK-3131): limite + logo scalato. */
    .topbar .brand {
      display: flex; align-items: center; gap: .85rem; min-width: 0;
    }
    .topbar img.logo {
      height: 46px; width: auto; max-width: 100%; object-fit: contain; display: block;
    }
    .topbar .brand-title {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--topbar-text);
      white-space: nowrap;
    }
    /* Il limite al brand serve solo quando il titolo è visibile (≥721px): sotto,
       il titolo è nascosto e il logo può usare tutto lo spazio. */
    @media (min-width: 721px) {
      /* Logo a sinistra (non centrato dal `space-between`), titolo centrato,
         azioni a destra; il brand non invade la zona del titolo. */
      .topbar .brand { max-width: calc(50% - 110px); margin-right: auto; }
    }
    .pill {
      display: inline-flex; align-items: center; gap: .45rem;
      background: rgba(255,255,255,.12); border-radius: 999px;
      padding: .45rem .9rem; font-size: .8rem; font-weight: 600;
    }
    .topbar .actions { position: relative; display: flex; gap: .6rem; align-items: center; }
    .topbar .actions > a:not(.menu-item),
    .topbar .actions > button:not(.menu-toggle):not(.sidebar-toggle):not(.chat-language-btn) {
      display: none !important;
    }
    .chat-language-picker { position: relative; }
    .chat-language-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; color: var(--navy) !important; background: #fff !important; border: 0 !important; box-shadow: 0 2px 8px rgba(37,50,71,.08); }
    .chat-language-btn:hover { background: #eef1f4 !important; }
    .chat-language-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 200px; padding: .5rem 0; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(24,42,55,.14); }
    .chat-language-menu[hidden] { display: none; }
    .topbar .chat-language-menu button { display: block; width: 100%; min-height: 36px; margin: 0; padding: .5rem 1rem; border: 0; border-radius: 0; color: #374151; background: transparent; text-align: left; font-size: .8rem; font-weight: 500; }
    .chat-language-menu button:hover, .chat-language-menu button.is-current { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
    .topbar a, .topbar button {
      background: #fff; border: 1px solid rgba(37,50,71,.16); color: var(--topbar-text);
      border-radius: 999px; padding: .45rem .9rem; font-size: .85rem; cursor: pointer;
      text-decoration: none; font-weight: 500;
    }
    .topbar button.primary, .topbar a.primary {
      background: #fff; color: var(--navy); border-color: #fff; font-weight: 700;
    }
    .wrap {
      flex: 1; display: flex; justify-content: center; padding: 1.25rem;
    }
    .app-shell {
      flex: 1; display: grid; grid-template-columns: 260px 1fr; min-height: 0;
      transition: grid-template-columns .2s ease;
    }
    .app-shell.sidebar-collapsed { grid-template-columns: 0 1fr; }
    .app-shell.sidebar-collapsed .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
    .sidebar {
      background: #fafbfc; border-right: 1px solid var(--line);
      display: flex; flex-direction: column; min-height: 0; overflow: hidden;
      transition: transform .2s ease, opacity .15s ease;
    }
    .sidebar-head {
      display: flex; align-items: center; gap: .5rem;
      padding: .85rem .75rem; border-bottom: 1px solid var(--line);
    }
    .sidebar-new {
      flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
      background: var(--navy); color: #fff; border: 0; border-radius: 999px;
      padding: .6rem .9rem; font-size: .85rem; font-weight: 600; cursor: pointer;
      font-family: inherit;
    }
    .sidebar-new:hover { filter: brightness(1.08); }
    .sidebar-close {
      display: none; background: transparent; border: 0; color: var(--muted);
      cursor: pointer; padding: .35rem; border-radius: 8px;
    }
    .sidebar-close:hover { background: #eef1f4; color: var(--text); }
    .sidebar-list {
      flex: 1; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .15rem;
    }
    .sidebar-empty {
      padding: 1.2rem .75rem; color: var(--muted); font-size: .82rem; text-align: center;
    }
    .sidebar-item {
      display: flex; align-items: center; gap: .5rem;
      padding: .6rem .65rem; border-radius: 10px;
      color: var(--text); font-size: .85rem; line-height: 1.3;
      border: 1px solid transparent; background: transparent; text-align: left;
      width: 100%; font-family: inherit; position: relative;
    }
    .sidebar-item-switch {
      flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem;
      background: transparent; border: 0; color: inherit; cursor: pointer;
      font: inherit; padding: 0; text-align: left;
    }
    .sidebar-item:hover { background: #eef1f4; }
    .sidebar-item.active { background: #e7edf3; font-weight: 600; }
    .sidebar-item-title {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sidebar-tooltip {
      position: fixed; left: 0; top: 0; z-index: 1000;
      max-width: min(280px, calc(100vw - 2rem)); padding: .35rem .5rem;
      color: var(--text); background: #fff; border: 1px solid var(--line);
      border-radius: 6px; box-shadow: 0 4px 12px rgba(37,50,71,.14);
      font-size: 13px;
      white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity .12s ease, visibility .12s ease;
    }
    .sidebar-tooltip.visible {
      opacity: 1; visibility: visible;
    }
    .sidebar-item-actions {
      display: none; gap: .15rem; flex-shrink: 0;
    }
    .sidebar-item:hover .sidebar-item-actions,
    .sidebar-item.active .sidebar-item-actions { display: flex; }
    .sidebar-item-actions button {
      background: transparent; border: 0; color: var(--muted); cursor: pointer;
      padding: .25rem; border-radius: 6px; display: inline-flex; align-items: center;
    }
    .sidebar-item-actions button:hover { background: #d8dee5; color: var(--text); }
    .sidebar-item-actions button.danger:hover { color: #b03a3a; }
    .sidebar-item input.rename {
      flex: 1; min-width: 0; border: 1px solid var(--navy); border-radius: 6px;
      padding: .25rem .4rem; font-size: .85rem; font-family: inherit; outline: none;
    }
    .sidebar-toggle {
      display: inline-flex; background: transparent; border: 0; color: var(--topbar-text);
      cursor: pointer; padding: .25rem; border-radius: 8px; align-items: center;
      transition: background .15s ease;
    }
    .sidebar-toggle:hover { background: #e9edf0; }
    .sidebar-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
      z-index: 40;
    }
    .panel {
      width: min(1100px, 100%); background: var(--card); border: 1px solid var(--line);
      border-radius: var(--radius); box-shadow: var(--shadow);
      display: flex; flex-direction: column; min-height: min(78vh, 820px); overflow: hidden;
    }
    .panel-head {
      display: flex; align-items: center; justify-content: space-between; gap: .75rem;
      padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); background: #fff;
    }
    .panel-head .title {
      display: flex; align-items: center; gap: .65rem;
    }
    .badge {
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--navy); color: #fff; border-radius: 999px;
      padding: .7rem 1.1rem; font-size: 1rem; font-weight: 600;
    }
    .badge img { width: 18px; height: 18px; }
    .meta { color: var(--muted); font-size: .8rem; }
.messages {
       flex: 1 1 auto; min-height: 0; max-height: var(--chat-h, 45%); overflow-y: auto; padding: 1.15rem; display: flex; flex-direction: column; gap: .85rem;
       background: #f7f8f9;
       -webkit-overflow-scrolling: touch;
     }
    .msg-row { display: flex; }
    .msg-row.user { justify-content: flex-end; }
    .msg-row.bot { justify-content: flex-start; }
    .bubble {
      max-width: min(92%, 520px); padding: .95rem 1.1rem; border-radius: var(--bubble-radius, 1.1rem);
      border: 1px solid var(--line); background: var(--bubble-bot);
      font-size: .92rem; line-height: 1.55; word-break: break-word;
    }
    .msg-row.user .bubble {
      background: var(--bubble-user); color: #fff; border-color: transparent;
      white-space: pre-wrap;
    }
    .bubble.chat-error { display: flex; flex-direction: column; gap: .6rem; border-color: #f3c6c6; background: #fdf3f3; color: #8a1f1f; }
    .bubble.chat-error .retry-btn {
      align-self: flex-start; border: 1px solid #d98c8c; background: #fff; color: #8a1f1f;
      border-radius: 999px; padding: .3rem .85rem; font-weight: 700; font-size: .85rem; cursor: pointer;
    }
    .bubble.chat-error .retry-btn:hover { background: #fbe3e3; }
    .bubble.bot-rich { white-space: normal; }
    .bubble.bot-rich p { margin: 0 0 .55rem; }
    .bubble.bot-rich p:last-child { margin-bottom: 0; }
    .bubble.bot-rich ol, .bubble.bot-rich ul { margin: .35rem 0 .65rem; padding-left: 1.2rem; }
    .bubble.bot-rich li { margin: .25rem 0; }
    .bubble.bot-rich strong { color: var(--navy); font-weight: 700; }
    .bubble.bot-rich a {
      color: var(--navy); font-weight: 600; text-decoration: none;
      border-bottom: 1px solid rgba(37,50,71,.25);
    }
    .bubble.bot-rich a:hover { border-bottom-color: var(--navy); }
    .people {
      margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line);
      display: flex; flex-direction: column; gap: .65rem;
    }