/* Mobile: chat a schermo intero (app-like), desktop invariato */
    @media (max-width: 720px) {
      body {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        height: 100dvh;
        overflow: hidden;
      }
      .topbar {
        flex-shrink: 0;
        gap: .5rem;
        padding: .55rem .75rem;
      }
      .topbar .brand { gap: .5rem; min-width: 0; }
      .topbar img.logo { height: 36px; }
      .topbar .pill { display: none; }
      .topbar .brand-title { display: none; }
      .topbar #userMeta { display: none; }
      .sidebar-toggle { display: inline-flex; }
      .app-shell { grid-template-columns: 1fr; }
      .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
        z-index: 50; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: 2px 0 20px rgba(0,0,0,.15);
        padding-top: env(safe-area-inset-top);
      }
      .sidebar.open { transform: translateX(0); }
      .sidebar-close { display: inline-flex; }
      .sidebar-overlay.show { display: block; }
      .topbar .hide-sm { display: none; }
      .topbar .actions { gap: .35rem; flex-wrap: nowrap; }
      .topbar a, .topbar button {
        min-height: 44px;
        padding: .45rem .75rem;
        font-size: .8rem;
        display: inline-flex;
        align-items: center;
      }
      /* Su mobile: nascondi i bottoni diretti, usa il menu kebab */
      .topbar .actions > a:not(.menu-item),
      .topbar .actions > button:not(.menu-toggle):not(.sidebar-toggle):not(.chat-language-btn) {
        display: none !important;
      }
      .menu-toggle { display: inline-flex !important; }
      .wrap {
        padding: 0;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      .panel {
        width: 100%;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        min-height: 0;
        flex: 1 1 auto;
      }
      .panel-head {
        flex-shrink: 0;
        padding: .65rem .75rem;
        gap: .5rem;
      }
      .badge {
        padding: .4rem .7rem;
        font-size: .78rem;
        max-width: 100%;
      }
      #resetBtn {
        min-height: 44px;
        padding: .45rem .7rem;
        font-size: .78rem;
        flex-shrink: 0;
      }
      #resetBtn .reset-full { display: none; }
      #resetBtn .reset-short { display: inline; }
      .messages { padding: .85rem .75rem; gap: .7rem; max-height: none; }
      /* With results, use one document scroll instead of two compressed scroll areas. */
      body.has-results {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
      }
      body.has-results .wrap,
      body.has-results .app-shell,
      body.has-results .panel {
        height: auto;
        overflow: visible;
      }
      body.has-results .messages {
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
      }
      body.has-results .results-panel,
      body.has-results .results-panel #resultsBody {
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
      }
      .results-panel .people { max-height: none; padding: .7rem .75rem 1rem; }
      .bubble {
        max-width: 88%;
        padding: .75rem .9rem;
        font-size: .9rem;
        border-radius: 1rem;
      }
      .person {
        grid-template-columns: auto 1fr;
        grid-template-areas:
          "score side"
          "main main"
          "skills skills";
        column-gap: 14px; row-gap: 12px;
        padding: .85rem; border-radius: 14px;
      }
      .person-score {
        grid-area: score;
        flex-direction: column; align-items: flex-start;
        gap: 4px; padding-right: 0; padding-bottom: 0;
        border-right: 0; border-bottom: 0;
      }
      .person-main {
        grid-area: main;
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
      }
      .person-role {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
      }
      .person-side {
        grid-area: side;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
      }
      .person-link {
        width: auto;
        min-height: 36px;
        padding: .4rem .75rem;
      }
      .chip {
        min-height: 44px;
        padding: .55rem .85rem;
        display: inline-flex;
        align-items: center;
      }
      .chips { justify-content: flex-start; gap: .4rem; }
      .welcome { padding: 1.1rem .35rem; text-align: left; align-items: flex-start; }
      .welcome h2 { font-size: 1.05rem; text-align: left; }
      .welcome p { font-size: .82rem; line-height: 1.4; text-align: left; margin: 0; }
      .status { padding: 0 .75rem .4rem; }
      .composer-wrap {
        flex-shrink: 0;
        padding: .65rem .75rem max(.9rem, env(safe-area-inset-bottom));
      }
      .pdf-bar strong { max-width: min(12rem, 45vw); }
      .pdf-bar button { min-height: 36px; padding: .25rem .5rem; }
      .composer { position: relative; gap: 0; }
      .composer textarea {
        font-size: 16px;
        min-height: 44px;
        border-radius: 22px;
        padding: .65rem 2.8rem .65rem 2.8rem;
        min-width: 0;
      }
      .composer .attach {
        position: absolute;
        left: .25rem;
        bottom: 0;
        width: 44px;
        height: 44px;
        min-height: 44px;
        min-width: 44px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #aeb8be;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      .composer .attach:hover,
      .composer .attach:focus-visible {
        background: transparent;
        color: var(--navy);
        width: 44px;
        padding: 0;
      }
      .composer .attach .attach-label { display: none; }
      .composer .attach svg { display: block; }
      .composer button.send {
        position: absolute;
        right: .25rem;
        bottom: 0;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        font-size: .85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      .skills-grid { overflow: visible; padding: 8px 12px 14px; }
      .sk-thead { display: none; }
      .skill-detail {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
          "name"
          "ev"
          "cert";
        align-items: start;
        row-gap: 8px;
        min-width: 0;
        padding: 12px 14px;
      }
      .skill-detail .sd-name { grid-area: name; display: flex; flex-direction: column; gap: 3px; }
      .skill-detail .sd-name b, .skill-detail .sd-name a { font-size: 14px; line-height: 21px; }
      .skill-detail .sd-ctx { font-size: 12px; line-height: 18px; }
      .skill-detail .sd-cell.sd-cert { grid-area: cert; flex: 1 1 auto; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 3px; }
      .skill-detail .sd-cell.sd-cert::before { content: "Certificati"; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #aeb8be; }
      .skill-detail .sd-cell.sd-ev { grid-area: ev; flex: 1 1 auto; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 3px; }
      .skill-detail .sd-cell.sd-ev::before { content: "Prove"; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #aeb8be; }
      details.person-skills > summary { min-height: 44px; padding: .65rem .2rem; }
      details.person-skills[open] > summary { border-bottom-color: transparent; padding-bottom: .65rem; }
      .person-score { align-items: stretch; }
      .person-score > .score-line,
      .person-score > .score-label { align-self: flex-start; }
      .splitter { display: none; }
    }