/* La chat occupa lo spazio visibile; lo storico scorre nel proprio pannello. */
html.registro-chat-open, body.registro-chat-open {
  height:100% !important;
  overflow:hidden !important;
  overscroll-behavior:none;
}
#app.registro-wordpress-app.chat-view {
  position:fixed !important;
  top:var(--chat-viewport-top, 0px) !important;
  left:0 !important;
  width:100% !important;
  max-width:none !important;
  height:var(--chat-viewport-height, 100dvh) !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
#app.registro-wordpress-app.chat-view .shell {
  height:100% !important;
  min-height:0 !important;
  grid-template-rows:minmax(0, 1fr) !important;
  overflow:hidden !important;
}
#app.registro-wordpress-app.chat-view .sidebar {
  height:100% !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
}
#app.registro-wordpress-app.chat-view .content {
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:0 !important;
  min-width:0 !important;
  max-width:none !important;
  align-self:stretch !important;
  padding:22px 28px !important;
  overflow:hidden !important;
}
#app.registro-wordpress-app.chat-view .chat-topbar { flex:0 0 auto; margin:0 0 16px !important; }
#app .chat-top-copy { margin:4px 0 0; color:var(--muted); font-size:13px; }
#app.registro-wordpress-app .chat-section {
  display:flex !important;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
  min-width:0;
  width:100%;
  overflow:hidden;
  border-radius:16px !important;
}
#app .chat-header { flex:0 0 auto; padding:14px 18px 12px; border-bottom:1px solid var(--theme-line, var(--line)); }
#app .chat-toolbar { display:flex; align-items:center; gap:8px; min-width:0; }
#app .chat-retention svg { flex:0 0 14px; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
#app .chat-info { position:relative; flex:0 0 auto; }
#app .chat-info summary { display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%; color:var(--muted); cursor:pointer; list-style:none; }
#app .chat-info summary::-webkit-details-marker { display:none; }
#app .chat-info summary:hover,#app .chat-info[open] summary { background:var(--theme-soft); color:var(--forest); }
#app .chat-info summary:focus-visible { outline:2px solid var(--theme-link); outline-offset:2px; }
#app .chat-info summary svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
#app .chat-info-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:25; width:200px; padding:5px; border:1px solid var(--theme-line); border-radius:12px; background:var(--panel); box-shadow:0 5px 18px #002b4b20; }
#app .chat-info-menu .chat-notification-button { display:block; width:100%; min-height:40px!important; border:0; text-align:left; }
#app .chat-course-picker { display:flex; align-items:center; gap:12px; margin:0; font-size:13px; font-weight:700; color:var(--ink); }
#app.registro-wordpress-app .chat-course-picker select {
  display:block;
  width:min(100%, 420px);
  min-width:0;
  height:40px;
  padding:0 12px;
  border:1px solid var(--theme-line, var(--line));
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  font:inherit;
}
#app .chat-retention { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.3; }
#app .chat-messages {
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-height:0;
  gap:10px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding:18px;
  background:var(--theme-soft, #f0f5f2);
}
#app .chat-messages>.empty { margin:auto; padding:18px 0; }
#app .chat-day-separator {
  flex:0 0 auto;
  align-self:center;
  max-width:calc(100% - 24px);
  margin:7px 0 3px;
  padding:6px 12px;
  border:1px solid color-mix(in srgb, var(--theme-line, #a7bbcd) 25%, white);
  border-radius:10px;
  background:var(--panel, #fff);
  color:var(--muted);
  box-shadow:0 1px 4px rgba(22, 51, 77, .04);
  text-align:center;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
}
#app .chat-day-separator:first-child { margin-top:0; }
#app .chat-message {
  flex:0 0 auto;
  align-self:flex-start;
  width:fit-content;
  min-width:100px;
  max-width:min(82%, 680px);
  padding:10px 14px;
  border:1px solid var(--theme-line, var(--line));
  border-radius:16px 16px 16px 5px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 2px 4px rgba(18, 35, 29, .04);
}
#app .chat-message-own {
  align-self:flex-end;
  border-radius:16px 16px 5px 16px;
  background:var(--theme-soft-strong, #dceee2);
}
#app .chat-message header { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; min-width:0; }
#app .chat-sender { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 4px; flex:1 1 auto; min-width:0; }
#app .chat-message header strong { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--theme-link, var(--forest)); font-size:12px; }
#app .chat-sender-role { flex:0 0 auto; color:var(--muted); font-size:11px; font-weight:500; white-space:nowrap; }
#app .chat-message time { flex:0 0 auto; width:auto; margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap; }
#app .chat-message p { margin:5px 0 0; line-height:1.5; overflow-wrap:anywhere; }
#app .chat-attachment { display:block; margin-top:8px; color:var(--theme-link, var(--forest)); font-size:13px; font-weight:700; overflow-wrap:anywhere; }
#app .chat-form { flex:0 0 auto; padding:12px 16px; margin:0; border-top:1px solid var(--theme-line, var(--line)); background:var(--panel); }
#app .chat-composer { display:flex; align-items:flex-end; gap:8px; padding:5px; border:1px solid var(--theme-line, var(--line)); border-radius:28px; background:var(--theme-soft, #f0f5f2); transition:border-color .15s; }
#app .chat-composer:focus-within { border-color:var(--theme-link, var(--forest)); }
#app.registro-wordpress-app .chat-composer textarea {
  display:block !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  width:100% !important;
  height:auto;
  min-height:44px !important;
  padding:10px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:20px !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  color:var(--ink) !important;
  font-size:16px !important;
}
#app.registro-wordpress-app .chat-send {
  display:grid !important;
  place-items:center !important;
  flex:0 0 40px !important;
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:var(--forest) !important;
  color:#fff !important;
}
#app .chat-send svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#app .chat-send:disabled { opacity:.55; cursor:wait; }
#app .chat-send:focus-visible, #app .chat-course-picker select:focus-visible { outline:2px solid var(--theme-link, var(--forest)); outline-offset:3px; }
#app .chat-feedback { margin:8px 4px 0; font-size:12px; color:var(--coral, #b54432); }
#app .chat-feedback[hidden] { display:none; }
#app .chat-typing { display:none; align-items:center; gap:7px; min-height:18px; margin:0 8px 5px; color:var(--muted); font-size:12px; line-height:18px; visibility:hidden; }
#app .chat-typing.is-active { display:flex; visibility:visible; }
#app .chat-typing-text { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#app .chat-typing-dots { display:flex; flex:0 0 auto; align-items:center; gap:3px; }
#app .chat-typing-dots i { width:4px; height:4px; border-radius:50%; background:currentColor; }
#app .chat-typing.is-active .chat-typing-dots i { animation:chat-typing-dot 1.2s ease-in-out infinite; }
#app .chat-typing-dots i:nth-child(2) { animation-delay:.15s !important; }
#app .chat-typing-dots i:nth-child(3) { animation-delay:.3s !important; }
@keyframes chat-typing-dot { 0%,60%,100% { opacity:.4; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce) { #app .chat-typing.is-active .chat-typing-dots i { animation:none; } }
#app .chat-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#app.registro-wordpress-app.chat-compact .chat-topbar { display:none !important; }
@media(max-width:900px) {
  #app.registro-wordpress-app.chat-view .shell { grid-template-rows:auto minmax(0, 1fr) !important; }
  #app.registro-wordpress-app.chat-view .sidebar:not(.menu-open) { height:auto !important; overflow:hidden !important; }
  #app.registro-wordpress-app.chat-view .content { padding:10px 12px calc(var(--chat-nav-height, 0px) + 10px) !important; }
  #app.registro-wordpress-app.chat-view .chat-topbar { margin-bottom:10px !important; }
  #app.registro-wordpress-app.chat-view .chat-topbar h1 { font-size:24px !important; line-height:1.2 !important; }
  #app .chat-topbar .eyebrow, #app .chat-top-copy { display:none; }
  #app .chat-header { padding:10px 12px; }
  #app .chat-course-picker select { flex:1; width:100%; font-size:16px; }
  #app .chat-messages { padding:12px; gap:9px; }
  #app .chat-message { max-width:88%; padding:9px 12px; }
  #app .chat-message header { gap:8px; }
  #app .chat-form { padding:10px; }
  #app.registro-wordpress-app.chat-compact .recipient-sidebar:not(.menu-open) { display:none !important; }
  #app.registro-wordpress-app.chat-compact.teacher-mobile-shell .shell,
  #app.registro-wordpress-app.chat-compact.student-mobile-shell .shell { grid-template-rows:minmax(0, 1fr) !important; }
  #app.registro-wordpress-app.chat-compact .content { padding-top:6px !important; }
  body.registro-chat-open #teacher-mobile-nav, body.registro-chat-open #student-mobile-nav { bottom:var(--chat-viewport-bottom, 0px) !important; }
}
@media(max-width:380px) {
  #teacher-mobile-nav button, #student-mobile-nav button { font-size:9px !important; }
}

#app .chat-author-avatar { position:absolute;overflow:hidden;isolation:isolate; }
#app .chat-author-avatar img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }


/* Azioni e citazioni condivise da desktop, mobile e PWA. */
.registro-wordpress-app .chat-message header { gap: 6px; }
.registro-wordpress-app .chat-message .chat-menu-trigger {
  flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; padding: 0;
  margin: -6px -6px -6px 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-family: inherit; font-weight: 700; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: none;
}
.registro-wordpress-app .chat-message .chat-menu-trigger:hover,
.registro-wordpress-app .chat-message .chat-menu-trigger:focus-visible { background: rgba(0, 59, 100, .08); }
.chat-action-menu { position: fixed; z-index: 10020; min-width: 168px; padding: 5px; border: 1px solid #dbe3eb; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px #002b4b30; }
.chat-action-menu button { display: block; width: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 9px; background: transparent; color: #003457; text-align: left; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.3; cursor: pointer; }
.chat-action-menu button:hover, .chat-action-menu button:focus-visible { background: #edf4fc; }
.chat-action-menu button[data-action="delete"] { color: #b52b49; }
.registro-wordpress-app .chat-message .chat-reply-preview {
  display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; max-width: 100%;
  margin: 6px 0 8px; padding: 8px 10px; border: 0; border-left: 3px solid #3d83c4;
  border-radius: 7px; background: #003b640c; color: var(--muted); text-align: left; white-space: normal;
  font-size: 12px; line-height: 1.4; box-shadow: none; cursor: pointer;
}
.chat-reply-preview strong { color: var(--primary, #003b64); }
.chat-reply-preview span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.chat-message .chat-mention { color: #005eb0; background: #deedfc; border-radius: 4px; font-weight: 650; padding: 0 2px; }
.chat-message .chat-mention-me { background: #dbe0ff; color: #42368f; }
.chat-message .chat-edited { display: block; margin-top: 4px; text-align: right; font-size: 10px; color: var(--muted); }
.chat-message.chat-message-deleted > p { font-style: italic; color: var(--muted); }
.chat-message.chat-highlight { outline: 2px solid #368add; outline-offset: 2px; }
.registro-wordpress-app .chat-form { position: relative; }
.registro-wordpress-app .chat-context { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 0 0 8px; border-left: 3px solid #3d83c4; border-radius: 10px; background: #edf4fc; }
.chat-context > div { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.chat-context strong { font-size: 12px; color: var(--primary, #003b64); }
.chat-context span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registro-wordpress-app .chat-context .chat-cancel { flex: 0 0 auto; width: auto; min-height: 36px; padding: 6px 10px; border: 0; background: transparent; box-shadow: none; color: #003b64; font-size: 12px; font-weight: 650; }
.registro-wordpress-app .chat-composer .chat-send.chat-save { width: auto !important; min-width: 64px; flex: 0 0 auto; padding: 0 14px !important; border-radius: 20px; font-size: 13px; }
.registro-wordpress-app .chat-mentions { position: absolute; bottom: calc(100% - 12px); left: 12px; right: 12px; z-index: 20; max-height: min(224px, 35dvh); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid #dbe3eb; border-radius: 14px; background: white; box-shadow: 0 -5px 22px #002b4b20; }
.registro-wordpress-app .chat-mentions button { display: flex; flex-direction: column; gap: 3px; width: 100%; min-height: 52px; padding: 9px 12px; border: 0; border-radius: 9px; text-align: left; background: white; box-shadow: none; color: #003457; white-space: normal; overflow-wrap: anywhere; }
.chat-mentions button strong { font-size: 13px; }
.chat-mentions button span { font-size: 11px; color: #4e6c88; }
.registro-wordpress-app .chat-mentions button[aria-selected="true"] { background: #edf4fc; }
.registro-wordpress-app .chat-context[hidden], .registro-wordpress-app .chat-mentions[hidden] { display: none !important; }
@media (max-width: 900px) {
  .registro-wordpress-app .chat-message .chat-menu-trigger { flex-basis: 36px; width: 36px; height: 36px; }
  .registro-wordpress-app .chat-context { margin-inline: 4px; }
}

/* Reazioni compatte, con selezione nel menu e pulsanti raggiungibili al tocco. */
.chat-action-menu.chat-reaction-picker { display: grid; grid-template-columns: repeat(3, 48px); gap: 4px; min-width: 0; padding: 8px; }
.chat-reaction-picker button { width: 48px; height: 48px; padding: 0; text-align: center; font-size: 25px; }
.chat-reaction-picker button[aria-checked="true"] { background: #deedfc; outline: 2px solid #367bb5; outline-offset: -2px; }
#app.registro-wordpress-app .chat-message .chat-reactions { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:5px; }
#app.registro-wordpress-app .chat-message .chat-reaction { display:inline-flex; align-items:center; justify-content:center; gap:3px; flex:0 0 auto; width:auto; min-width:34px; height:24px; min-height:24px!important; margin:0; padding:2px 6px; border:1px solid #ccdbe8; border-radius:12px; background:#f5f9fd; color:#214b6b; font-size:11px; line-height:1!important; box-shadow:none; cursor:pointer; }
#app.registro-wordpress-app .chat-message .chat-reaction span:first-child { font-size:14px; line-height:1; }
#app.registro-wordpress-app .chat-message .chat-reaction[data-mine="true"] { border-color: #367bb5; background: #deedfc; font-weight: 700; }
.registro-wordpress-app .chat-message .chat-reaction:focus-visible { outline: 2px solid #367bb5; outline-offset: 2px; }

/* Il conteggio apre i nomi; l'inserimento resta nel selettore Reagisci. */
.chat-detail-dialog { box-sizing:border-box; width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:20px; border:1px solid #dbe3eb; border-radius:22px; background:#fff; color:#123249; box-shadow:0 12px 44px #002b4b35; font-family:inherit; }
.chat-detail-dialog::backdrop { background:#00243770; }
.chat-detail-dialog > header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.chat-detail-dialog h2 { flex:1; min-width:0; margin:0; font-size:20px; }
.chat-detail-dialog [data-chat-dialog-close] { flex:0 0 40px; width:40px; height:40px; border:0; border-radius:50%; background:#f1f5fa; color:#325a77; font-size:28px; cursor:pointer; }
.chat-detail-dialog .chat-dialog-content { max-height:60dvh; overflow-y:auto; overscroll-behavior:contain; }
.chat-detail-dialog ul { list-style:none; margin:0; padding:0; }
.chat-reactor-list li { padding:13px 4px; border-bottom:1px solid #e6edf4; overflow-wrap:anywhere; }
.chat-notice-list a { display:flex; flex-direction:column; gap:6px; padding:14px 10px; border-radius:12px; color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.chat-notice-list a.is-unread { background:#edf5ff; }
.chat-notice-list small { color:#53718a; font-size:12px; }
.chat-detail-dialog button:focus-visible,.chat-notice-list a:focus-visible { outline:2px solid #367bb5; outline-offset:2px; }
#app .chat-notification-button { flex:0 0 auto; padding:7px 10px; border:1px solid #cbdbe7; border-radius:12px; background:white; color:#003b64; font-size:12px; cursor:pointer; }
#app .chat-notification-button[hidden] { display:none!important; }
#app .chat-notification-count { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; margin-left:5px; padding:0 3px; border-radius:10px; background:#d93e60; color:#fff; font-size:10px; line-height:1; }
@media(max-width:900px){ .chat-detail-dialog { padding:16px; } }

/* Preserve plain-text line breaks and indentation without widening the chat. */
#app.registro-wordpress-app .chat-message > p { white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal; }
#app.registro-wordpress-app .chat-composer textarea { resize:none;line-height:24px!important;white-space:pre-wrap!important;overflow-wrap:anywhere;box-sizing:border-box!important;font-family:inherit!important; }
#app.registro-wordpress-app .chat-reply-preview span,
#app.registro-wordpress-app .chat-context span { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:pre-wrap;overflow:hidden;overflow-wrap:anywhere; }