/* L'attributo hidden deve sempre vincere sulle regole display della chat. */
#elisaChatDock [hidden],
.elisaChatPanel[hidden],
.elisaChatConv[hidden],
.elisaChatInput[hidden],
.elisaChatAttesa[hidden],
.elisaChatTyping[hidden],
.elisaChatContatti[hidden],
.elisaChatBadge[hidden],
.elisaChatIcon[hidden] {
 display: none !important;
}

/* =============================================================================
   elisaChat.css - stili della chat utente-utente della PWA ELISA
   File separato: non tocca elisapwa.css.
   Usa i token gia' presenti nel tema, con fallback per sicurezza.
   ========================================================================== */

#elisaChatDock {
 position: fixed;
 right: 18px;
 bottom: 18px;
 z-index: 9000;
 font-family: inherit;
}

/* ------------------------------------------------------------- launcher */

#elisaChatLauncher {
 display: none;
 position: relative;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 border: 1px solid var(--elisa-border-soft, #d9d9d9);
 background: var(--elisa-bg-main, #ffffff);
 color: var(--elisa-text-main, #232f3d);
 font-size: 20px;
 cursor: pointer;
 box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

#elisaChatLauncher:hover {
 background: var(--elisa-control-bg, #f2f2f2);
}

.elisaChatBadge {
 position: absolute;
 top: -4px;
 right: -4px;
 min-width: 18px;
 height: 18px;
 padding: 0 5px;
 border-radius: 9px;
 background: var(--elisa-accent, #3b67b1);
 color: var(--elisa-text-inverse, #ffffff);
 font-size: 11px;
 line-height: 18px;
 text-align: center;
}

.elisaChatBadge.piccolo {
 position: static;
 flex: 0 0 auto;
 align-self: center;
}

/* ------------------------------------------------------------- pannello */

.elisaChatPanel {
 position: absolute;
 /* mostrato/nascosto via attributo hidden */
 right: 0;
 bottom: 12px;
 width: 340px;
 height: 480px;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 min-height: 0;
 border: 1px solid var(--elisa-border-soft, #d9d9d9);
 border-radius: 12px;
 background: var(--elisa-bg-main, #ffffff);
 color: var(--elisa-text-main, #232f3d);
 box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.elisaChatPanel:not([hidden]) {
 display: flex !important;
}

.elisaChatHead {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 12px;
 border-bottom: 1px solid var(--elisa-border-soft, #e3e3e3);
}

.elisaChatTitolo {
 flex: 1 1 auto;
 font-size: 14px;
 font-weight: 600;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.elisaChatStato {
 flex: 0 0 auto;
 font-size: 11px;
 color: var(--elisa-text-secondary, #8a8a8a);
}

.elisaChatIcon {
 flex: 0 0 auto;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 26px;
 height: 26px;
 padding: 0;
 margin: 0;
 border: 0;
 border-radius: 6px;
 background: transparent;
 color: var(--elisa-text-secondary, #8a8a8a);
 cursor: pointer;
 line-height: 1;
 vertical-align: middle;
 font-size: 14px;
}

/* L'icona dentro il pulsante non deve spostare il centro. */
.elisaChatIcon > i {
 display: block;
 line-height: 1;
}

.elisaChatIcon:hover {
 background: var(--elisa-control-bg, #f2f2f2);
 color: var(--elisa-text-main, #232f3d);
}

.elisaChatBody {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

/* ------------------------------------------------------------- contatti */

.elisaChatContatti {
 flex: 1 1 auto;
 min-height: 0;
 display: block !important;
 overflow-y: auto;
 overflow-x: hidden;
}

.elisaChatRiga {
 position: relative;
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 9px 12px;
 cursor: pointer;
}

/* separatore a tutta larghezza, senza i margini del padding */
.elisaChatRiga::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 background: rgba(127, 127, 127, .14);
}

.elisaChatRiga:last-child::after {
 display: none;
}

.elisaChatRiga:hover {
 background: var(--elisa-accent-soft, rgba(127, 127, 127, .10));
}

.elisaChatAvatar {
 position: relative;
 flex: 0 0 auto;
 width: 34px;
 height: 34px;
 border-radius: 50%;
 background: var(--elisa-accent, #3b67b1);
 color: var(--elisa-text-inverse, #ffffff);
 font-size: 12px;
 font-weight: 600;
 line-height: 34px;
 text-align: center;
}

.elisaChatPallino {
 position: absolute;
 right: -1px;
 bottom: -1px;
 width: 10px;
 height: 10px;
 border: 2px solid var(--elisa-bg-main, #ffffff);
 border-radius: 50%;
 background: #b9b9b9;
}

.elisaChatRiga.online .elisaChatPallino {
 background: #3ba55d;
}

.elisaChatRigaTesti {
 flex: 1 1 auto;
 min-width: 0;
}

.elisaChatRigaNome {
 font-size: 13px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.elisaChatRigaUltimo {
 font-size: 11px;
 color: var(--elisa-text-secondary, #8a8a8a);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.elisaChatVuoto {
 padding: 18px 12px;
 font-size: 12px;
 text-align: center;
 color: var(--elisa-text-secondary, #8a8a8a);
}

/* ------------------------------------------------------------- conversazione */

.elisaChatConv {
 flex: 1 1 auto;
 min-height: 0;
 display: flex !important;
 flex-direction: column;
}

.elisaChatMsg {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 padding: 10px 12px;
 scrollbar-gutter: stable;
}

.elisaChatBolla {
 max-width: 78%;
 margin-bottom: 8px;
 padding: 6px 9px;
 border-radius: 10px;
 font-size: 13px;
 line-height: 1.35;
 word-wrap: break-word;
}

/* Bolle uguali alla chat AI (#chatArea): altro = bolla assistente, mia = bolla utente. */
.elisaChatBolla.sua {
 margin-right: auto;
 background: #262626;
 color: var(--elisa-text-bg-main, #f2f2f2);
 border-bottom-left-radius: 3px;
}

.elisaChatBolla.mia {
 margin-left: auto;
 background: #474c54;
 color: var(--elisa-section-title, #f2f2f2);
 border: 1px solid #5a6068;
 border-bottom-right-radius: 3px;
}

/* Tema chiaro: stesse tinte della chat AI */
html[data-elisa-theme="elisa-lightbase"] .elisaChatBolla.sua {
 background: #3a3a3a;
 color: #ececec;
}

html[data-elisa-theme="elisa-lightbase"] .elisaChatBolla.mia {
 background: #ffffff;
 color: #253044;
 border: 1px solid #e6e6e6;
 box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.elisaChatBollaOra {
 margin-top: 2px;
 font-size: 10px;
 opacity: .75;
 text-align: right;
}

.elisaChatBolla.mia.letta .elisaChatBollaOra::after {
 content: " \2713\2713";
}

.elisaChatTyping {
 display: flex;
 gap: 4px;
 padding: 0 14px 8px;
}

.elisaChatTyping span {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--elisa-text-secondary, #9a9a9a);
 animation: elisaChatDot 1.2s infinite ease-in-out;
}

.elisaChatTyping span:nth-child(2) { animation-delay: .15s; }
.elisaChatTyping span:nth-child(3) { animation-delay: .3s; }

@keyframes elisaChatDot {
 0%, 60%, 100% { opacity: .25; transform: translateY(0); }
 30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ------------------------------------------------------------- avvisi e attesa */

.elisaChatSistema {
 max-width: 88%;
 margin: 0 auto 8px;
 padding: 5px 9px;
 border: 1px solid var(--elisa-border-soft, #e3e3e3);
 border-radius: 8px;
 background: var(--elisa-control-bg, #f4f4f4);
 color: var(--elisa-text-secondary, #6f6f6f);
 font-size: 11.5px;
 line-height: 1.35;
 text-align: center;
}

.elisaChatAttesa {
 flex: 0 0 auto;
 max-height: 92px;
 overflow-y: auto;
 padding: 6px 12px;
 border-bottom: 1px solid var(--elisa-border-soft, #e3e3e3);
 background: var(--elisa-control-bg, #f6f6f6);
}

.elisaChatAttesaTitolo {
 margin-bottom: 3px;
 font-size: 11px;
 font-weight: 600;
 color: var(--elisa-text-main, #232f3d);
}

.elisaChatAttesaRiga {
 font-size: 11px;
 color: var(--elisa-text-secondary, #7a7a7a);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.elisaChatAttesaRiga span {
 display: inline-block;
 min-width: 14px;
 color: var(--elisa-accent, #3b67b1);
 font-weight: 600;
}

/* ------------------------------------------------------------- input */

.elisaChatInput {
 display: flex !important;
 flex: 0 0 auto;
 align-items: flex-end;
 gap: 8px;
 padding: 8px 10px;
 border-top: 1px solid var(--elisa-border-soft, #e3e3e3);
 border-bottom-left-radius: 12px;
 border-bottom-right-radius: 12px;
 background: var(--elisa-bg-main, #ffffff);
}

.elisaChatInput textarea {
 flex: 1 1 auto;
 max-height: 68px;
 padding: 7px 9px;
 resize: none;
 overflow-y: auto;
 overflow-x: hidden;
 min-height: 20px;
 box-sizing: border-box;
 border: 1px solid var(--elisa-border-hard, #d9d9d9) !important;
 border-radius: 8px !important;
 outline: none !important;
 box-shadow: none !important;
 background: var(--elisa-bg-panel-soft, #ffffff) !important;
 color: var(--elisa-text-main, #232f3d) !important;
 font-family: inherit;
 font-size: 13px;
 line-height: 1.35;
}

.elisaChatInput textarea:focus {
 outline: none !important;
 box-shadow: none !important;
 border-color: var(--elisa-accent, #3b67b1) !important;
}

.elisaChatInput button {
 flex: 0 0 auto;
 width: 34px;
 height: 34px;
 border: 0;
 border-radius: 8px;
 background: var(--elisa-border-hard, #414141);
 color: var(--elisa-text-inverse, #ffffff);
 font-size: 14px;
 cursor: pointer;
}

.elisaChatInput button:hover {
 filter: brightness(1.08);
}

/* ------------------------------------------------------------- schermi stretti */

@media (max-width: 480px) {
 .elisaChatPanel {
  width: calc(100vw - 24px);
  height: calc(100vh - 120px);
 }
}

/* Scrollbar moderne, come #chatArea della PWA (variabili --elisa-scroll-*). */
.elisaChatMsg,
.elisaChatContatti,
.elisaChatInput textarea {
 scrollbar-width: thin;
 scrollbar-color: var(--elisa-scroll-thumb-soft, rgba(150,150,150,.5)) transparent;
}

.elisaChatMsg::-webkit-scrollbar,
.elisaChatContatti::-webkit-scrollbar,
.elisaChatInput textarea::-webkit-scrollbar {
 width: 10px;
}

.elisaChatMsg::-webkit-scrollbar-thumb,
.elisaChatContatti::-webkit-scrollbar-thumb,
.elisaChatInput textarea::-webkit-scrollbar-thumb {
 background-color: var(--elisa-scroll-thumb, rgba(150,150,150,.6));
 border-radius: 8px;
 border-right: 3px solid transparent;
 border-left: 3px solid transparent;
 background-clip: padding-box;
}

.elisaChatMsg::-webkit-scrollbar-thumb:hover,
.elisaChatContatti::-webkit-scrollbar-thumb:hover,
.elisaChatInput textarea::-webkit-scrollbar-thumb:hover {
 background-color: var(--elisa-scroll-thumb-hover, rgba(120,120,120,.8));
}

.elisaChatMsg::-webkit-scrollbar-track,
.elisaChatContatti::-webkit-scrollbar-track,
.elisaChatInput textarea::-webkit-scrollbar-track {
 background: transparent;
}