:root {
   /* Blu ministeriale */
   --bg-primary: #f5f8fa;
   --text-color: #333;
   --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
   --transition-speed: 0.3s;
   --sidebar-width: 280px;
   --sidebar-collapsed-width: 70px;

   /* Z-index usati nel tour e overlay */
   --z-overlay: 900;
   --z-tour-box: 1000;
   --z-tour-box-chat: 1100;

   /* palette “Ministero Blu” rivista */
   --ml-blue-900: #031633;
   /* quasi‑nero, focus ring / testo su bg blu   */
   --ml-blue-800: #052C65;
   /* blu brand                                   */
   --ml-blue-700: #084298;
   /* hover più chiaro                            */
   --ml-blue-100: #cfe2ff;
   /* blu primario */
   --ml-blue: #0D6EFD;
   /* highlight / selection                       */
   --ml-gray-50: #f9fafb;
   /* bg più chiaro                               */
   --ml-radius: 14px;
   /* rounding massima                            */
   --ml-shadow: 0 4px 12px rgba(0, 0, 0, .08);


   --focus-color: #1E90FF;
   /* CHIEDI A GIULIA */
   --focus-width: 3px;
   --focus-offset: 2px;

   /* Ridefinizione variabili native bootstrap per focus coerente sitewide */
   --bs-focus-ring-color: var(--focus-color);
   --bs-focus-ring-width: var(--focus-width);

 }

 * {
   font-family: "Plus Jakarta Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   font-variant-ligatures: none;
 }

 :focus-visible {
   outline: auto;
   outline-offset: var(--focus-offset);
 }

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

 .icon-color-primary {
   color: var(--ml-blue) !important;
 }


 body {
   background: var(--bg-primary);
   color: var(--text-color);
   /* Evita scrollbar orizzontali indesiderate su mobile */
   overflow-x: hidden;
   font-size: 16px;
 }

 /* Link "Salta al contenuto principale" (visibilmente nascosto ma raggiungibile a tab) */
 .visually-hidden-focusable {
   position: absolute;
   left: -10000px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
 }

 /* BARRA 1: Ministero */
 .top-header-ministero {
   background-color: var(--ml-blue);
   /* Blu ministero top bar */
   padding: 0.25rem 1rem;
   height: 32px;
 }

 .top-header-ministero a {
   color: #fff;
   text-decoration: none;
   font-size: 0.875rem;
   /* 14px */
   font-weight: 500;
   line-height: 130%;
 }

 .top-header-ministero a:hover {
   text-decoration: underline;
 }

 /* BARRA 2: AppLI (hamburger su mobile) */
 .appli-topbar {
   background-color: var(--ml-blue-800);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 1rem;
 }

 .appli-topbar-left {
   display: flex;
   align-items: center;
   gap: 1rem;
 }

 .appli-title {
   font-size: 1.2rem;
   font-weight: 600;
   margin: 0;
 }

 .topbar-actions {
   display: flex;
   align-items: center;
   gap: 1rem;
 }

 /* LAYOUT PRINCIPALE DESKTOP: sidebar + content */
 .main-layout {
   display: flex;
   height: calc(100vh - 88px);
   /* tolte le 2 barre */
   overflow: hidden;
 }


 /* Content area */
 .content-area {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   background: var(--ml-gray-50);
 }

 /* Pages container */
 .pages-container {
   height: 100%;
   overflow-y: auto;
   position: relative;
 }

 .page {
   display: none !important;
   height: 100%;
   position: absolute;

   inset: 0;

   overflow-y: auto;
   background: #fff;
   border-top-left-radius: var(--ml-radius);
   box-shadow: var(--ml-shadow);
 }

 .page.active {
   display: flex !important;
   flex-direction: column;
 }


 /* ------ FINE MEDIA QUERY ------ */


 /* Diario (linee + bullet) */
 .diary-date {
   font-weight: 600;
   margin-top: 0.75rem;
 }

 .diary-line {
   position: relative;
   font-size: 0.95rem;
   margin-left: 1.2rem;
   margin-bottom: 0.4rem;
   transition: background-color 0.2s;
   padding: 3px 8px 3px 3px;
   border-radius: 4px;
   cursor: pointer;
 }

 .diary-line::before {
   content: "\f111";
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   font-size: 0.55rem;
   color: var(--ml-blue-800);
   position: absolute;
   left: -1.2rem;
   top: 4px;
 }

 .diary-line:hover {
   background-color: #e9f0ff;
 }

 /* Badge */

 .user-badge {
   background: #e2e3e5;
   color: var(--text-color);
   border-radius: 20px;
   padding: 0.3rem 0.75rem;
   font-size: 0.85rem;
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
 }

 .user-badge.completed {
   background: #198754;
   color: #fff;
 }


 /* AREA CHAT (colonna destra) */
 .chat-area {
   background: #fff;
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
 }

 .chat-body {
   flex: 1;
   overflow-y: auto;
   padding: 1rem;
   background: #fefefe;
   /* Rimuovi qualsiasi padding-bottom eccessivo */
 }

 .message {
   display: flex;
   align-items: flex-end;
   margin-bottom: 1rem;
   opacity: 0;
   animation: fadeIn 0.3s forwards;
 }

 @keyframes fadeIn {
   to {
     opacity: 1;
   }
 }

 .message.bot {
   justify-content: flex-start;
 }

 .message.user {
   justify-content: flex-end;
 }

 .message.user .bubble {
   text-align: right;
 }

 .avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #ccc;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 0.5rem;
   color: #fff;
   font-size: 1.2rem;
 }

 .message.user .avatar {
   background: var(--ml-blue-800);
 }

 .message.bot .avatar {
   background: #888;
 }

 .bubble {
   max-width: 75%;
   padding: 0.8rem 1rem;
   border-radius: 20px;
   background: #f4f4f4;
   color: var(--text-color);
   font-size: 0.95rem;
   line-height: 1.4;
 }

 .message.user .bubble {
   background: #d4ecff;
   color: #0c5460;
   border-radius: 20px 20px 0 20px;
 }

 .message.bot .bubble {
   background: #f1f1f1;
   border-radius: 20px 20px 20px 0;
 }

 /* ANIMAZIONE TYPING (3 pallini) */
 .typing-indicator .bubble {
   min-width: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .dots-container {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
 }

 .dot {
   height: 10px;
   width: 10px;
   margin-right: 6px;
   border-radius: 50%;
   background-color: #b3d4fc;
   animation: pulse 1.2s infinite ease-in-out;
 }

 .dot:last-child {
   margin-right: 0;
 }

 .dot:nth-child(1) {
   animation-delay: -0.3s;
 }

 .dot:nth-child(2) {
   animation-delay: -0.1s;
 }

 .dot:nth-child(3) {
   animation-delay: 0.1s;
 }

 @keyframes pulse {
   0% {
     transform: translateY(0) scale(0.6);
     background-color: #b3d4fc;
     box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
   }

   50% {
     transform: translateY(-6px) scale(1.3);
     background-color: #6793fb;
     box-shadow: 0 0 0 6px rgba(178, 212, 252, 0);
   }

   100% {
     transform: translateY(0) scale(0.6);
     background-color: #b3d4fc;
     box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
   }
 }

 /* FOOTER CHAT */
 .chat-footer {
   background: #f1f3f5;
   border-top: 1px solid #ddd;
   padding: 0.75rem 1rem;
   flex-shrink: 0;
   /* Impedisce al footer di ridursi */
   position: relative;
   /* Non fixed su desktop */
   bottom: auto;
   left: auto;
   right: auto;
   z-index: auto;
 }

 /* Bottone advanced su mobile */
 .mobile-feature-toggle {
   display: none;
   background: var(--ml-blue-800);
   border: none;
   color: #fff;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background var(--transition-speed);
   flex-shrink: 0;
   cursor: pointer;
 }

 .mobile-feature-toggle:hover {
   background: #001533;
 }


 .feature-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
 }

 .feature-button {
   flex: 1;
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.3rem;
   font-size: 0.9rem;
   border-radius: 50px;
   border: 1px solid var(--ml-blue-800);
   background: #fff;
   color: #212529;
   padding: 0.4rem 0.75rem;
   transition: background var(--transition-speed);
 }

 .feature-button i {
   font-size: 1rem;
 }

 .feature-button:hover {
   background: #e9f0ff;
 }

 .feature-button.locked {
   opacity: 0.5;
   pointer-events: none;
 }

 .feature-button.active-feature {
   background: var(--ml-blue-800);
   color: #fff;
 }

 .feature-button.active-feature:hover {
   background: #001533;
 }

 .msg-input-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }

 .msg-input-row textarea {
   flex: 1;
   resize: none;
   border-radius: 20px;
   padding: 0.5rem 1rem;
   border: 1px solid #ccc;
   font-size: 0.95rem;
   max-height: 120px;
   /* Altezza per desktop */
   overflow-y: hidden;

   font-optical-sizing: inherit;
   font-weight: inherit;
   font-style: inherit;
   font-variant-ligatures: inherit;
 }


 .msg-input-row button.send-btn {
   border: none;
   background: var(--ml-blue);
   color: #fff;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background var(--transition-speed);
   flex-shrink: 0;
 }


 .msg-input-row button.send-btn.sending,
 .msg-input-row button.send-btn:disabled {
   background: #6c757d;
   cursor: not-allowed;
 }


 /* Rimuovi disabilitazione clic su elementi di navigazione quando necessario */
 .no-click {
   pointer-events: none !important;
   cursor: not-allowed !important;
 }

 .msg-input-row button.send-btn {
   border: none;
   background: var(--ml-blue);
   /* Bootstrap primary blu - sempre */
   color: #fff;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background var(--transition-speed);
   flex-shrink: 0;
 }

 /* Assicurati che non ci siano interferenze con voice-mode */
 .msg-input-row button.send-btn.voice-mode {
   background: var(--ml-blue);
   /* Stesso bootstrap primary blu */
 }


 .question-suggestion,
 .autoimpiego-question-suggestion {
   cursor: pointer;
   color: #052C65;
   background: none;
   border: none;
   padding: 0;
   text-align: left;
   width: 100%;
 }

 .question-suggestion:hover,
 .autoimpiego-question-suggestion:hover {
   text-decoration: underline;
   background-color: #f8f9fa;
 }

 /* OFFCANVAS (mobile) */
 .offcanvas-header .offcanvas-title {
   color: var(--ml-blue-800);
   font-size: 20px;
 }

 .offcanvas.offcanvas-start {
   width: 300px;
 }

 /* Stile "a la diary" per le righe di vacancy in modale, ma senza pallino */
 .vacancy-line {
   font-size: 0.95rem;
   margin-bottom: 0.4rem;
   transition: background-color 0.2s;
   padding: 4px 8px;
   border-radius: 4px;
   cursor: pointer;
   position: relative;
 }

 .vacancy-line:hover {
   background-color: #e9f0ff;
 }

 .vacancy-line a {
   color: var(--ml-blue-800);
   text-decoration: none;
 }

 .vacancy-line a:hover {
   text-decoration: underline;
 }

 /* =========================================================================
       MODIFICHE PER LA REGISTRAZIONE AUDIO
       ========================================================================= */

 #recordingIndicator {
   display: none;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.875rem;
   color: #dc3545;
   background-color: #fde2e2;
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
   animation: pulse-rec 1.5s infinite;
   max-width: 100%;
 }

 #recordingIndicator i {
   color: #dc3545;
 }

 @keyframes pulse-rec {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.1);
   }

   100% {
     transform: scale(1);
   }
 }

 #audioWave {
   /* il canvas eredita height/width impostati in HTML */
   flex: 1 1 30vw;
   /* ➜ “prendi 30 % viewport width” ma
                                   riduci o allarga se il flexbox lo chiede */
   min-width: 80px;
   /* … senza scendere sotto 80 px */
   max-width: 160px;
   /* … e senza superare 160 px */
   height: 24px;
 }

 /* Indicatori di caricamento STT (diverso dai tre puntini del bot) */
 #sttProcessingIndicator {
   display: none;
   align-items: center;
   gap: 0.3rem;
   font-size: 0.875rem;
   color: #666;
 }

 #sttProcessingIndicator .spinner-border {
   width: 1rem;
   height: 1rem;
   border-width: 2px;
 }

 /* =========================================================================
       NUOVE PAGINE
       ========================================================================= */

 /* Diario Page */
 .diary-page {
   padding: 1.5rem;
 }

 .diary-page-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .diary-page-item {
   background: #fff;
   padding: 1rem;
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
   box-shadow: var(--ml-shadow);
   border: none;
   border-radius: var(--ml-radius);
 }

 .diary-page-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .diary-page-date {
   font-size: 0.85rem;
   color: #666;
   margin-bottom: 0.5rem;
 }

 .diary-page-text {
   font-weight: 600;
 }

 /* Traguardi Page */
 .traguardi-page {
   padding: 1.5rem;
 }

 .badges-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 1.5rem;
 }

 .badge-card {
   background: #fff;
   border-radius: 8px;
   padding: 1.5rem;
   box-shadow: var(--shadow-light);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }

 .badge-icon {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: #198754;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   margin-bottom: 1rem;
 }

 .badge-title {
   font-weight: 600;
   margin-bottom: 0.5rem;
 }

 /* Explorer Page */
 .explorer-page {
   padding: 1.5rem;
   height: 100%;
   display: flex;
   flex-direction: column;
 }


 .explorer-tabs {
   margin-bottom: 1rem;
 }

 .explorer-tab-content {
   background: #fff;
   flex-grow: 1;
 }


 .search-form {
   background: #f8f9fa;
   border-radius: 8px;
   padding: 1.5rem;
   margin-bottom: 1.5rem;
 }

 .professions-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 1.5rem;
 }

 .profession-card {
   background: #ffffff;
   border-top: 4px solid #052c65;
   border-radius: 0px 0px 8px 8px;
   box-shadow: var(--shadow-light);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   height: 100%;
   transition: transform 0.2s, box-shadow 0.2s;
 }

 .profession-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
 }

 .profession-header {
   padding: 1rem;
   background: #fff;
   color: #052c65;
 }

 .profession-title {
   font-weight: 600;
   margin-bottom: 0.5rem;
 }

 .profession-code {
   font-size: 0.85rem;
   opacity: 0.8;
 }

 .profession-body {
   padding: 1rem;
   flex-grow: 1;
 }

 .profession-section {
   margin-bottom: 1rem;
 }

 .profession-section-title {
   font-size: 0.9rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
   color: #666;
 }

 .profession-description {
   font-size: 0.9rem;
   margin-bottom: 1rem;
 }

 .profession-footer {
   padding: 1rem;
   background: #fff;
   display: flex;
   justify-content: flex-end;
 }

 #interview_page_title_container {
   padding: 1.5rem;
   display: flex;
   justify-content: left;
   align-items: left;
 }

 .coming-soon {
   text-align: center;
   padding: 2rem;
 }

 .coming-soon-icon {
   font-size: 4rem;
   color: var(--ml-blue-800);
   margin-bottom: 1rem;
 }

 /* Contenitore principale */
#simulazione-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Ogni gruppo di simulazione - layout orizzontale */
.simulation-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Contenitore del testo */
.simulation-info {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}


/* Bottone sempre a destra */
.simulation-group .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
/* cerchietto per x sui campi*/
.btn-clear-input {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  z-index: 10;
}

.btn-clear-input:hover {
  color: #5C636A;
}
/*fine cerchietto*/

/* Su schermi piccoli, stack verticale */
@media (max-width: 768px) {
  .simulation-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .simulation-group .btn {
    width: 100%;
  }
}

 /* Documenti Page */
 .documenti-page {
   padding: 1.5rem;
   display: flex;
   justify-content: left;
   align-items: left;
 }





 /* 3. ─────────────‑─ CHAT BUBBLES RITOCCHI ───────────────── */
 .bubble {
   border-radius: 20px 20px 20px 4px;
 }

 .message.user .bubble {
   background: var(--ml-blue-100);
   color: var(--ml-blue-900);
 }

 .message.bot .bubble {
   background: #f4f4f4;
 }

 /* 4. ─────────────‑─ BUTTON & INPUT MICRO‑TWEAKS ─────────── */
 .feature-button {
   border-radius: 50px;
   transition: box-shadow .2s, transform .2s;
 }

 .feature-button:hover {
   box-shadow: var(--ml-shadow);
   transform: translateY(-1px);
 }



 /* 5. ─────────────‑─ SMALL SHADOW HINTS ──────────────────── */
 .section-box,
 .badge-card,
 .diary-page-item {
   box-shadow: var(--ml-shadow);
   border: none;
   border-radius: var(--ml-radius);
 }

 .search-highlight {
   background: #ffe066;
   padding: 0 .15rem;
   border-radius: 2px;
 }

 .search-highlight.active {
   background: #ffca3a;
 }

 /* quella su cui ci troviamo */
 #docsTable thead th:first-child {
   border-top-left-radius: var(--ml-radius);
 }

 #docsTable thead th:last-child {
   border-top-right-radius: var(--ml-radius);
 }

 /* ————————— DOCUMENTI ————————— */
 .documenti-page {
   /* riempi tutta l’altezza */
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .docs-table-wrapper {
   /* contenitore scrollabile */
   flex: 1;
   overflow: auto;
   /* prende tutto lo spazio restante */
   background: #fff;
   border-radius: var(--ml-radius);
   box-shadow: var(--ml-shadow);
   padding: 0;
 }

 /* tabella full‑width & sticky header */
 #docsTable {
   min-width: 100%;
   margin: 0;
 }

 #docsTable thead th {
   position: sticky;
   top: 0;
   z-index: 2;
   /* header fisso */
   background: var(--ml-blue-800);
   color: #fff;
   border: 0;
 }

 #docsTable tbody tr:nth-child(even) {
   background: var(--ml-gray-50);
 }

 #docsTable tbody tr:hover {
   background: var(--ml-blue-100);
 }

 #docsTable td,
 #docsTable th {
   padding: .75rem 1rem;
   white-space: nowrap;
 }

 #docsTable td:last-child {
   width: 1%;
 }

 /* ——— DOCUMENTI full‑width ——— */
 .documenti-page {
   padding: 1.5rem;
   /* solo margine esterno     */
   display: flex;
   flex-direction: column;
   /* via il centraggio fixed  */
   height: 100%;
 }

 .docs-table-wrapper {
   flex: 1;
   /* occupa tutto lo spazio   */
   width: 100%;
   /* larghezza 100%           */
   overflow: auto;
 }

 #docsTable {
   width: 100%;
 }

 /* elimina padding verticale extra */
 #refreshDocsBtn.spin i {
   animation: spin 1s linear infinite;
 }

 #refreshOffersBtn.spin i {
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 .interview-table-wrapper {
   flex: 1;
   /* stessa impostazione di docs-table-wrapper */
   overflow: auto;
   background: #fff;
   border-radius: var(--ml-radius);
   box-shadow: var(--ml-shadow);
   padding: 0;
 }

 #interviewsTable {
   min-width: 100%;
   margin: 0;
 }

 #interviewsTable thead th {
   position: sticky;
   top: 0;
   z-index: 2;
   /* header fisso */
   background: var(--ml-blue-800);
   color: #fff;
   border: 0;
 }

 #interviewsTable tbody tr:nth-child(even) {
   background: var(--ml-gray-50);
 }

 /* zebra */
 #interviewsTable tbody tr:hover {
   background: var(--ml-blue-100);
 }

 /* hover */
 #interviewsTable td,
 #interviewsTable th {
   padding: .75rem 1rem;
   white-space: nowrap;
 }

 #interviewsTable td:last-child {
   width: 1%;
 }

 /* override larghezza pagina: occupa tutto lo spazio disponibile */
 .simulazione-page {
   display: flex;
   flex-direction: column;
   /* verticale, non più centratissima */
 }

 .data-table-wrapper {
   flex: 1;
   width: 100%;
   overflow: auto;
   background: #fff;
   border-radius: var(--ml-radius);
   box-shadow: var(--ml-shadow);
   padding: 0;
 }

 /* tabella comune */
 .data-table {
   width: 100%;
   min-width: 100%;
   margin: 0;
 }

 .data-table thead th {
   position: sticky;
   top: 0;
   z-index: 2;
   background: var(--ml-blue-800);
   color: #fff;
   border: 0;
 }

 .data-table tbody tr:nth-child(even) {
   background: var(--ml-gray-50);
 }

 .data-table tbody tr:hover {
   background: var(--ml-blue-100);
 }

 .data-table td,
 .data-table th {
   padding: .75rem 1rem;
   white-space: nowrap;
 }

 .data-table td:last-child {
   width: 1%;
 }

 /* Badge rosso sulla campanella */
 #notifBadge {
   font-size: .65rem;
   pointer-events: none;
 }

 /* Stato “non letta” nella lista */
 .notif-unread {
   background: var(--ml-blue-100);
   cursor: pointer;
 }

 .notif-unread:hover {
   background: #dbe6ff;
 }

 .sidebar-utility {
   display: flex;
 }

 /* quando la sidebar è collassata (70 px) torniamo “verticale” */
 .nav-sidebar.collapsed .sidebar-utility {
   flex-direction: column;
 }

 /* nascondi la scritta quando collassata */
 .nav-sidebar.collapsed .sidebar-utility span {
   display: none;
 }

 /* dimensioni & spacing dei bottoni */
 .sidebar-utility .btn {
   font-size: .9rem;
   padding: .45rem .75rem;
 }

 .nav-sidebar {
   display: flex;
   /* nuovo */
   flex-direction: column;
   /* nuovo */
 }

 /* Hide chat avatars (user & AI) */
 .message .avatar {
   display: none !important;
 }

 /* patch‑override comes *after* original styles so it wins */
 .message.user .bubble {
   text-align: left !important;
   /* imbandierato a sinistra */
 }



 .disclamer-footer {
   font-size: 12px !important;
   color: #495057;
   /* Contrasto WCAG AAA con background #f1f3f5 */
   text-align: center;
   line-height: 1.2;
 }


 .floating-menu-container {
   display: none;
 }

 /* Nascondi completamente l'overlay su desktop */
 .menu-overlay {
   display: none;
 }


 /* evita il ritaglio e centra meglio l’icona */
 #btnVoiceRecord {
   overflow: visible;
   /* lascia “respirare” il glifo */
 }

 .profession-title-link {
   text-decoration: underline;
   color: #0d6efd;
   /* colore del link */
 }

 .profession-title-link:hover {
   text-decoration: underline;
   color: #0a58ca;
   /* colore più scuro per l'hover */
 }

 .profession-title-link .profession-title {
   cursor: pointer;
 }

 .badge-card {
   background: #fff;
   border-radius: 8px;
   /* o var(--ml-radius) se definito e appropriato */
   padding: 1.5rem;
   box-shadow: var(--shadow-light);
   /* o var(--ml-shadow) */
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   transition: transform 0.2s, box-shadow 0.2s;
 }

 .badge-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
   /* Ombra leggermente più pronunciata */
 }

 .badge-card .badge-icon {
   width: 70px;
   /* Leggermente più piccolo della tua immagine? */
   height: 70px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
   /* Adatta la dimensione dell'icona FontAwesome */
   margin-bottom: 1rem;
   color: #fff;
   /* Colore icona bianca */
 }

 .badge-card .badge-title {
   font-weight: 600;
   margin-bottom: 0.5rem;
   font-size: 1.1rem;
   /* Leggermente più grande */
   color: #333;
   /* Testo scuro per il titolo */
 }


 /* Stile per badge SBLOCCATO (come il tuo attuale verde) */
 .badge-card.unlocked .badge-icon {
   background: var(--success);
   /* Verde successo Bootstrap (o il tuo verde attuale) */
   /* Potresti anche aggiungere un bordo verde se vuoi */
   /* border: 2px solid #1f7a34; */
 }

 .badge-card.unlocked .badge-title {
   color: var(--success);
   /* Titolo verde per coerenza */
 }


 /* Stile per badge BLOCCATO (grigio) */
 .badge-card.locked {
   opacity: 1;
   /* Leggermente trasparente */
 }

 .badge-card.locked .badge-icon {
   background-color: #e9ecef;
   /* Grigio chiaro per l'icona */
   color: #adb5bd;
   /* Icona FontAwesome più scura su sfondo grigio */
   /* Nessun bordo o un bordo grigio sottile */
   /* border: 2px solid #cccccc; */
 }

 .badge-card.locked .badge-title {
   color: #757575;
   /* Titolo grigio scuro */
 }

 /* Stile Bootstrap Italia (esempio, potresti doverlo adattare) */
 /* Se vuoi uno stile più simile a "chip" o "tag" di Bootstrap Italia */
 .badge-card.bootstrap-italia-style {
   border: 1px solid #ddd;
   padding: 1rem;
   box-shadow: none;
 }

 .badge-card.bootstrap-italia-style .badge-icon {
   width: 40px;
   height: 40px;
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
 }

 .badge-card.bootstrap-italia-style.locked {
   background-color: #f8f9fa;
   /* Grigio molto chiaro Bootstrap */
 }

 /* per l'accessibilità */
 .visually-hidden {
   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;
 }

 /* Stile per l'indicatore di registrazione (il box rosso che lampeggia) */
 #recordingIndicator,
 #recordingIndicatorAutoimpiego {
   display: none;
   /* Nascosto di default */
   align-items: center;
   gap: 0.5rem;
   font-size: 0.875rem;
   color: #dc3545;
   /* Colore testo rosso */
   background-color: #fde2e2;
   /* Sfondo rosso chiaro */
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
   animation: pulse-rec 1.5s infinite;
   /* Animazione di pulsazione */
   max-width: 100%;
 }

 #recordingIndicator i,
 #recordingIndicatorAutoimpiego i {
   color: #dc3545;
   /* Icona microfono rossa */
 }

 /* Animazione di pulsazione per l'indicatore di registrazione */
 @keyframes pulse-rec {
   0% {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
     /* Alone rosso */
   }

   50% {
     transform: scale(1.05);
     /* Leggero ingrandimento */
     box-shadow: 0 0 0 5px rgba(220, 53, 69, 0);
     /* Dissolvenza alone */
   }

   100% {
     transform: scale(1);
     box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
   }
 }

 /* Stile per la waveform audio */
 #audioWave,
 #audioWaveAutoimpiego {
   flex: 1 1 30vw;
   min-width: 80px;
   max-width: 160px;
   height: 24px;
 }

 /* Stile per l'indicatore di trascrizione (spinner) */
 #sttProcessingIndicator,
 #sttProcessingIndicatorAutoimpiego {
   display: none;
   /* Nascosto di default */
   align-items: center;
   gap: 0.3rem;
   font-size: 0.875rem;
   color: #666;
 }

 #sttProcessingIndicator .spinner-border,
 #sttProcessingIndicatorAutoimpiego .spinner-border {
   width: 1rem;
   height: 1rem;
   border-width: 2px;
 }

 .date-title {
   text-align: center;
   margin: 16px 0;
   font-weight: 500;
   color: #666;
   font-size: 14px;
 }

.load-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

 .filters {
   display: flex;
   justify-content: center;
   padding: 20px;
   background: #f9f9f9;
   border-bottom: 1px solid #ddd;
 }

 .filters-inner {
   display: flex;
   align-items: center;
   width: 100%;
   max-width: 600px;
   background: white;
   padding: 0 16px;
   border-bottom: 1px solid #ccc;
 }

 #searchBar {
   flex: 1;
   border: none;
   outline: none;
   padding: 10px;
   font-size: 14px;
   background: transparent;
 }

 #searchBar::placeholder {
   color: #999;
 }

 .separator {
   width: 1px;
   height: 24px;
   background: #ccc;
   margin: 0 12px;
 }

 #refreshDiaryBtn {
   font-size: 16px;
   color: #007bff;
   border: none;
   background: transparent;
   cursor: pointer;
 }

 .message.highlight {
   background-color: #d0ebff;
   border-left: 4px solid #339af0;
   padding-left: 8px;
   transition: background-color 1.5s ease-out;
 }

 .search-navigation button {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 1rem;
   padding: 2px;
 }

 .search-navigation span {
   min-width: 2.5em;
   text-align: center;
 }

 .bubble {
   position: relative;
   padding-bottom: 14px;
   /* spazio per l'orario */
 }

 .msg-time {
   position: absolute;
   bottom: 4px;
   right: 8px;
   font-size: 0.75rem;
   color: #777;
 }


 @media (max-width: 768px) {
   .explorer-page {
     padding: 12px;
     height: 100%;
     display: flex;
     flex-direction: column;
   }
 }

 [inert] {
   pointer-events: none;
   user-select: none;
   opacity: 0.5;
   filter: grayscale(1);
 }

 [inert] * {
   pointer-events: none !important;
   user-select: none !important;
 }

 .bg-blue-100 {
   background-color: #e7f1ff;
 }

 .new-candidature-title-section {
   font-size: 24px;
 }

 .send-btn:focus-visible {
   outline: auto;
   outline-offset: var(--focus-offset);
   outline-color: #000000;
 }

 .btn:focus-visible {
   outline: auto;
   outline-offset: var(--focus-offset);
   outline-color: #000000;
 }

 .manual-switch:focus-visible {
   outline: auto;
   outline-offset: var(--focus-offset);
   outline-color: #000000;
 }

 .nav-sidebar-item-disabled,
 .mobile-nav-disabled {
   pointer-events: none;
   /* Blocca completamente i click */
   cursor: not-allowed;
   opacity: 0.6;
 }

 .appli-topbar .lang-switcher {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   height: 32px;
   padding: 2px 10px;
   border-radius: 32px;
   border: 1px solid rgba(255, 255, 255, 0.5);
   background-color: transparent;
   transition: background-color 0.2s ease;
   color: #FFFFFF;
   /* Assicura che il testo sia bianco */
 }

 .appli-topbar .lang-switcher:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }

 /* Stile del testo "ITA", "ENG", etc. */
 .appli-topbar .lang-switcher #language-display {
   color: #FFFFFF;
   font-size: 16px;
   font-weight: 700;
   /* Bold */
   line-height: 1.5;
 }

 /* Rimuove la freccia di default di Bootstrap */
 .appli-topbar .lang-switcher::after {
   display: none;
 }

 /* Stile della freccia personalizzata */
 .appli-topbar .lang-switcher .lang-arrow {
   font-size: 12px;
   color: #FFFFFF;
 }

 .support-id-container {
   background-color: #f0f6ff;
   /* Colore azzurro chiaro */
   border: 1px solid #cce0ff;
   border-radius: 8px;
   padding: 8px 12px;
   font-family: 'Courier New', Courier, monospace;
 }

 .support-id-container .copy-btn {
   color: #0d6efd;
   /* Blu primario */
   border: none;
 }

 .support-id-container .copy-btn:hover {
   background-color: #e7f1ff;
 }

 /* Stile header ricerca cpi */
 .card-header-cpi {
   margin-left: 16px;
   margin-top: 16px;
   font-size: 1.125rem;
   font-weight: 700;
 }

 #interviewInputBar textarea#interviewReplyInput {
   width: auto !important;
   flex: 1 1 auto !important;
   min-width: 0 !important;
   margin-right: 0.75rem;
 }

 .notif-pending {
   pointer-events: none;
   /* Disabilita i click */
   opacity: 0.7;
   /* Feedback visivo che è in corso un'azione */
   cursor: wait;
 }

 body.ui-locked * {
   pointer-events: none !important;
   cursor: not-allowed !important;
 }

 /* Eccezioni: Help desktop/mobile + modale help */
 body.ui-locked #btnHelp,
 body.ui-locked #btnHelp *,
 body.ui-locked #btnHelpMobile,
 body.ui-locked #btnHelpMobile * {
   pointer-events: auto !important;
   cursor: pointer !important;
 }

 body.ui-locked #helpModal,
 body.ui-locked #helpModal * {
   pointer-events: auto !important;
   cursor: auto !important;
 }

 .claude-none {
   display: none;
 }

 .claude-none-plus {
   display: none;
   gap: 4px;
   align-items: center;
 }

 .claude-border-none {
   border: none;
 }

 .claude-border-radius {
   border-radius: 12px;
 }

 .claude-fontsize-08 {
   font-size: 0.8rem;
 }

 .claude-block {
   display: block;
 }

 .claude-1 {
   z-index: 1100;
 }

 .claude-2 {
   height: 20px;
 }

 .claude-3 {
   z-index: 2000;
   display: flex;
 }

 .claude-4 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .claude-5 {
   display: none;
   align-items: center;
   gap: 0.5rem;
 }

 .claude-6 {
   z-index: 2000;
 }

 .claude-7 {
   max-height: 400px;
   overflow-y: auto;
 }

 .claude-8 {
   color: var(--accent-color);
   font-weight: 600;
 }

 .claude-9 {
   font-size: 3rem;
   color: var(--accent-color);
 }

 .claude-10 {
   margin-top: 1rem;
 }

 .claude-11 {
   text-align: center;
   padding: 10px;
 }

 .claude-12 {
   width: 3rem;
   height: 3rem;
 }

 .claude-13 {
   font-weight: 600;
 }

 .claude-14 {
   margin-bottom: 1rem;
   font-weight: 600;
   color: var(--ml-blue-800);
 }

 .claude-15 {
   padding: 1.5rem;
   position: relative;
 }

 .claude-16 {
   background-color: #f8f9fa;
 }

 .claude-17 {
   margin-left: .5rem;
 }

 #recordingIndicatorInterview {
    /* Nascosto di default, mostrato da JS */
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #dc3545; /* Testo rosso */
    background-color: #fde2e2; /* Sfondo rosso chiaro */
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    animation: pulse-rec 1.5s infinite; /* Animazione di pulsazione */
}

#recordingIndicatorInterview i {
    color: #dc3545; /* Icona microfono rossa */
}

/* Animazione di pulsazione */
@keyframes pulse-rec {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 5px rgba(220, 53, 69, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* Stile per i pulsanti quando la registrazione è ATTIVA */
#btnVoiceRecordInterview.active i.fa-microphone::before,
#btnSendInterviewReply.active.voice-mode i.fa-microphone::before {
    content: "\f04c"; /* Icona FontAwesome per "pausa" */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* Aggiunge un feedback visivo al pulsante attivo */
#btnVoiceRecordInterview.active,
#btnSendInterviewReply.active.voice-mode {
    color: #dc3545 !important; /* Colore rosso per l'icona */
    animation: pulse-rec 1.5s infinite;
}

 /* FAQ page tweaks */
.login-page .breadcrumb {
  --bs-breadcrumb-divider: '>';
}

.faq-intro {
  max-width: 720px;
}

.faq-accordion .accordion-item {
  border-bottom: 1px solid #e9ecef;
}

/* Rimuove bordo default accordion-flush e migliora click area */
.faq-accordion .accordion-button {
  padding-top: .9rem;
  padding-bottom: .9rem;
  font-weight: 600;
}

/* Pulsante “Cos’è AppLI?” nel box grigio */
.faq-intro-button {
  background: transparent;
  box-shadow: none !important;
}

/* caret più discreto */
.faq-accordion .accordion-button::after {
  transform: rotate(-90deg);
  transition: transform .2s ease;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(0deg);
}

/* Spaziature */
.faq-accordion .accordion-body {
  color: #3f4550;
}

@media (min-width: 992px) {
  .faq-intro { font-size: 1.01rem; }
}

/* Sitemap page */
.sitemap-page h1 { font-weight: 700; }
.sitemap-links { margin-top: .25rem; }

.sitemap-link {
  font-weight: 600;
  text-decoration: underline;
}
.sitemap-link:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}
/* Sticky footer solo per la sitemap */
html, body.sitemap-page { height: 100%; }

.sitemap-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sitemap-page > main {
  flex: 1 0 auto;   /* riempie lo spazio lasciando il footer in basso */
}

.sitemap-page .landingpage-footer {
  flex-shrink: 0;   /* evita che il footer si comprima */
}

.app-height-24 {
  height: 24px;
}

.app-height-32 {
  height: 32px;
}

.app-header-36 {
  height: 36px;
}

.faq-accordion {
  max-width: 720px;
}

.initial-suggestions-container,
.offer-suggestions-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Allinea i pulsanti a sinistra */
  gap: 8px; /* Spazio tra i pulsanti */
  padding: 2px 15px 20px 60px; /* Allineato con il testo della bolla sopra */
}

/* Stile base per i pulsanti di suggerimento */
.initial-suggestions-container .suggestion-button,
.offer-suggestions-container .suggestion-button {
  background-color: #ffffff;      /* Sfondo bianco */
  border: 1px solid var(--bs-primary);   
  color: #0d6efd;                 /* Testo blu primario */
  border-radius: 8px;             /* Bordi leggermente arrotondati */
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.2s ease-in-out;
  max-width: 300px;
  width: 90%; 
  text-align: center;
}

@media (min-width: 769px) {
  .initial-suggestions-container,
  .offer-suggestions-container  {
    flex-direction: row;          /* Riporta i pulsanti in orizzontale */
    justify-content: center;      /* 4. Centra i pulsanti orizzontalmente */
    padding: 2px 60px 20px 60px;  /* Ripristina un padding adeguato per desktop */
  }

  .initial-suggestions-container .suggestion-button,
  .offer-suggestions-container .suggestion-button {
    width: auto;                  /* Lascia che i pulsanti si adattino al loro contenuto */
    max-width: none;              /* Rimuovi il limite di larghezza massima */
  }
}

/* Rimuove l'ombra/bordo blu al focus per un look pulito */
.initial-suggestions-container .suggestion-button:focus,
.initial-suggestions-container .suggestion-button:active,
.offer-suggestions-container .suggestion-button:focus,
.offer-suggestions-container .suggestion-button:active {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2); /* Ombra soft blu al focus */
  outline: none;
  border-color: #0d6efd; /* Bordo blu solo al focus */
}

/* Effetto al passaggio del mouse (hover) */
.initial-suggestions-container .suggestion-button:hover,
.offer-suggestions-container .suggestion-button:hover {
  background-color: #f8f9fa; /* Sfondo grigio chiarissimo */
  border-color: #adb5bd;     /* Bordo leggermente più scuro */
  color:#052c65;          /* Testo blu scuro */
}