/* Barra superiore e messaggi per le pagine staff. Classi prefissate per non
   interferire con gli stili delle pagine che la ospitano. */
.cts-host { position: sticky; top: 0; z-index: 60; }
.cts-bar { background: rgba(10,16,23,.94); backdrop-filter: blur(8px); border-bottom: 1px solid #2a3949; }
.cts-inner { max-width: 1200px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cts-brand { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-decoration: none; }
.cts-logo { height: 32px; width: auto; flex: 0 0 auto; }
.cts-title { font-weight: 800; color: #f5b942; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cts-title small { display: block; font-weight: 600; font-size: .72rem; color: #7d93a8; letter-spacing: .04em; }
.cts-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cts-user { font-weight: 700; color: #e9f0f7; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.cts-icon { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #35495e; background: #1a2632; color: #e9f0f7; cursor: pointer; font-size: 1.1rem; padding: 0; margin: 0; }
.cts-icon:hover { border-color: #f5b942; background: #223346; }
.cts-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800; display: none; align-items: center; justify-content: center; }
.cts-badge.on { display: flex; }
/* La chat interna si distingue a colpo d'occhio da quella con le squadre. */
.cts-badge.room { background: #16a34a; color: #fff; }
.cts-badge.ring { animation: cts-ring 1.1s ease-in-out 3; }
@keyframes cts-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.7); } 50% { box-shadow: 0 0 0 7px rgba(220,38,38,0); } }

.cts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 70; }
.cts-overlay.open { opacity: 1; visibility: visible; }
.cts-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 94vw); background: #0f1a24; border-left: 1px solid #2a3949; box-shadow: -8px 0 30px rgba(0,0,0,.45); transform: translateX(100%); transition: transform .25s ease; z-index: 80; display: flex; flex-direction: column; }
.cts-drawer.open { transform: translateX(0); }
.cts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #2a3949; }
.cts-head b { color: #f5b942; font-size: 1rem; }
.cts-head button { width: auto; margin: 0; padding: 7px 12px; border-radius: 8px; background: #1a2632; border: 1px solid #35495e; color: #e9f0f7; font-size: .9rem; }
.cts-head button:hover { border-color: #f5b942; background: #223346; }
.cts-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.cts-inbox { flex: 1; overflow-y: auto; }
.cts-thread-item { width: 100%; margin: 0; padding: 13px 16px; border: 0; border-bottom: 1px solid #1c2836; border-radius: 0; background: transparent; color: #e9f0f7; text-align: left; cursor: pointer; display: block; }
.cts-thread-item:hover { background: #16232f; }
.cts-thread-item .cts-t-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cts-thread-item .cts-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cts-thread-item .cts-when { color: #7d93a8; font-size: .78rem; margin-top: 3px; }
.cts-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.cts-empty { padding: 22px 16px; color: #7d93a8; text-align: center; }

.cts-conv { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cts-conv-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #2a3949; background: #16232f; }
.cts-conv-head button { width: auto; margin: 0; padding: 6px 11px; border-radius: 8px; background: #1a2632; border: 1px solid #35495e; color: #e9f0f7; font-size: .85rem; }
.cts-conv-head span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cts-scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.cts-msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cts-msg.them { align-self: flex-start; background: #1e2c3a; color: #e9f0f7; border-bottom-left-radius: 4px; }
.cts-msg.me { align-self: flex-end; background: #14532d; color: #dcfce7; border-bottom-right-radius: 4px; }
.cts-msg.cast { align-self: flex-end; background: #3f3410; color: #fde68a; }
.cts-msg.hint { align-self: flex-end; background: #0e2b3a; color: #bae6fd; border-left: 4px solid #38bdf8; }
.cts-msg.hint .cts-who { color: #7dd3fc; letter-spacing: .08em; text-transform: uppercase; }
.cts-msg .cts-who { display: block; font-size: .74rem; font-weight: 700; color: #f5b942; margin-bottom: 3px; }
.cts-msg .cts-meta { display: block; font-size: .7rem; color: #93a7bb; margin-top: 4px; }
.cts-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #2a3949; }
.cts-compose textarea { flex: 1; min-height: 44px; max-height: 130px; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #35495e; background: #0b141d; color: #e9f0f7; font: inherit; font-size: .95rem; resize: vertical; }
.cts-compose textarea:focus { outline: none; border-color: #f5b942; }
.cts-compose button { width: auto; margin: 0; padding: 0 16px; border-radius: 10px; }
.cts-note { padding: 0 12px 12px; }

@media (max-width: 640px) {
  .cts-inner { padding: 8px 14px; }
  .cts-user { display: none; }
  .cts-title small { display: none; }
}
@media (max-width: 420px) {
  .cts-title { display: none; }
}