.cmc { position: fixed; right: 24px; bottom: 24px; z-index: 1200; display: flex; align-items: flex-end; gap: 12px; font-family: inherit; }
.cmc * { box-sizing: border-box; }
.cmc button { font: inherit; cursor: pointer; }
.cmc-fab { position: relative; width: 56px; height: 56px; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0b3d1e, #1f9d55); box-shadow: 0 12px 30px rgba(11, 61, 30, .45); display: grid; place-items: center; transition: transform .2s; }
.cmc-fab:hover { transform: translateY(-2px) scale(1.04); }
.cmc-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.cmc-badge[hidden] { display: none; }

.cmc-panel { position: absolute; right: 70px; bottom: 0; width: 320px; max-height: min(560px, 70vh); display: flex; flex-direction: column; background: #fff; color: #0b0d12; border: 1px solid #e3e8f0; border-radius: 18px; box-shadow: 0 24px 60px rgba(11, 13, 18, .25); overflow: hidden; }
.cmc-panel[hidden] { display: none; }
.cmc-ph { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #0b3d1e; color: #fff; }
.cmc-ph b { flex: 1; font-size: 16px; color: #fff; }
.cmc-mute, .cmc-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; line-height: 1; }
.cmc-mute:hover, .cmc-close:hover { background: rgba(255, 255, 255, .26); }
.cmc-status { margin: 0; padding: 6px 14px; font-size: 12px; background: #fff7e0; color: #7a5b00; }
.cmc-search { margin: 10px 12px 4px; padding: 9px 12px; border: 1px solid #dde3ec; border-radius: 999px; font: inherit; font-size: 14px; background: #f6f8fb; color: #0b0d12; }
.cmc-scroll { overflow-y: auto; padding: 4px 6px 10px; }
.cmc-scroll h4 { margin: 12px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5a6475; }
.cmc-online-count { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #e7f7ee; color: #14532d; }
.cmc-empty { margin: 6px 8px; font-size: 13px; color: #8a93a3; }
.cmc-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: #0b0d12; }
.cmc-row:hover { background: #f1f5f9; }
.cmc-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmc-row-body b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmc-row-body small { font-size: 12.5px; color: #5a6475; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmc-unread { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.cmc-avatar { position: relative; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #0b3d1e; color: #fff; display: grid; place-items: center; font-weight: 700; }
.cmc-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.cmc-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #aab3c2; border: 2px solid #fff; }
.cmc-dot.is-on { background: #22c55e; }

.cmc-windows { display: flex; align-items: flex-end; gap: 10px; }
.cmc-window { width: 300px; height: 400px; display: flex; flex-direction: column; background: #fff; color: #0b0d12; border: 1px solid #e3e8f0; border-radius: 16px 16px 0 0; box-shadow: 0 18px 50px rgba(11, 13, 18, .28); overflow: hidden; }
.cmc-window.is-min { height: 52px; }
.cmc-wh { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0b3d1e; color: #fff; }
.cmc-wh .cmc-dot { border-color: #0b3d1e; }
.cmc-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmc-wt a { color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmc-wt small { font-size: 11.5px; color: #b9e6c9; }
.cmc-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; line-height: 1; }
.cmc-x:hover { background: rgba(255, 255, 255, .26); }
.cmc-msgs { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; background: #f6f8fb; }
.cmc-window.is-min .cmc-msgs, .cmc-window.is-min .cmc-form, .cmc-window.is-min .cmc-typing { display: none; }
.cmc-msg { display: flex; flex-direction: column; max-width: 82%; }
.cmc-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.cmc-msg.is-theirs { align-self: flex-start; align-items: flex-start; }
.cmc-bubble { padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.is-mine .cmc-bubble { background: #0b3d1e; color: #fff; border-bottom-right-radius: 4px; }
.is-theirs .cmc-bubble { background: #fff; color: #0b0d12; border: 1px solid #e3e8f0; border-bottom-left-radius: 4px; }
.cmc-time { margin-top: 2px; font-size: 11px; color: #8a93a3; }
.cmc-img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; }
.cmc-bubble:has(.cmc-img) { padding: 4px; }
.cmc-file { display: flex; align-items: center; gap: 10px; color: inherit !important; text-decoration: none; }
.cmc-file-ic { font-size: 22px; }
.cmc-file-info { display: flex; flex-direction: column; min-width: 0; }
.cmc-file-info b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.cmc-file-info small { font-size: 11.5px; opacity: .75; }
.cmc-text { display: block; }
.cmc-notice { align-self: center; padding: 5px 10px; font-size: 12px; color: #7a5b00; background: #fff7e0; border-radius: 999px; }
.cmc-typing { padding: 4px 14px 6px; font-size: 12px; font-style: italic; color: #5a6475; background: #f6f8fb; }
.cmc-typing[hidden] { display: none; }
.cmc-typing i { display: inline-block; width: 4px; height: 4px; margin-left: 3px; border-radius: 50%; background: #5a6475; animation: cmcDot 1.2s infinite; }
.cmc-typing i:nth-of-type(2) { animation-delay: .2s; }
.cmc-typing i:nth-of-type(3) { animation-delay: .4s; }
@keyframes cmcDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.cmc-form { display: flex; align-items: flex-end; gap: 6px; padding: 8px; background: #fff; border-top: 1px solid #e3e8f0; }
.cmc-attach, .cmc-send { width: 34px; height: 34px; flex: 0 0 34px; border: 0; border-radius: 50%; background: #eef2f7; font-size: 16px; display: grid; place-items: center; color: #0b0d12; }
.cmc-send { background: #0b3d1e; color: #fff; }
.cmc-attach:hover { background: #dfe6ef; }
.cmc-input { flex: 1; min-width: 0; resize: none; padding: 8px 12px; border: 1px solid #dde3ec; border-radius: 18px; font: inherit; font-size: 14px; background: #f6f8fb; color: #0b0d12; max-height: 110px; }
.cmc-input:focus, .cmc-search:focus { outline: 2px solid #3ddc84; outline-offset: 0; border-color: transparent; }

@media (max-width: 767.98px) {
  .cmc { right: 10px; bottom: 10px; }
  .cmc-panel { position: fixed; left: 10px; right: 10px; bottom: 76px; width: auto; max-height: 70vh; }
  .cmc-windows { position: fixed; left: 0; right: 0; bottom: 0; top: auto; flex-direction: column; align-items: stretch; pointer-events: none; }
  .cmc-window { pointer-events: auto; width: 100%; height: min(70vh, 480px); border-radius: 16px 16px 0 0; position: fixed; left: 0; right: 0; bottom: 0; }
  .cmc-window.is-min { height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .cmc-typing i, .cmc-fab { animation: none; transition: none; } }

.cmc-me-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 12px; font-weight: 600; }
.cmc-me-toggle i { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.cmc-me-toggle.is-off i { background: #aab3c2; box-shadow: none; }
.cmc-me-toggle:hover { background: rgba(255, 255, 255, .26); }
.cmc-fab-dot { position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: #aab3c2; border: 2px solid #fff; }
.cmc-fab-dot.is-on { background: #22c55e; }

.cmc.has-panel .cmc-windows { margin-right: 332px; }
@media (max-width: 767.98px) { .cmc.has-panel .cmc-windows { margin-right: 0; } }

/* Disposizione con il chatbot IA: il chatbot IA sta sopra, la chat della community sotto, i pannelli non si sovrappongono */
body:has(#cm-chat) #cb-toggle { bottom: 92px !important; right: 24px !important; }
body:has(#cm-chat) #cb-panel { bottom: 160px !important; }
body:has(#cm-chat) #cb-toggle::after { content: "IA"; position: absolute; left: -6px; top: -6px; padding: 1px 6px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.cmc-fab::before { content: attr(data-label); position: absolute; right: 64px; top: 50%; transform: translateY(-50%); padding: 4px 10px; border-radius: 999px; background: #0b3d1e; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.cmc-fab:hover::before { opacity: 1; }
body:has(#cb-toggle.active) .cmc-panel { right: 470px; }
body:has(#cb-toggle.active) .cmc-windows { margin-right: 400px; }
body:has(#cb-toggle.active) .cmc.has-panel .cmc-windows { margin-right: 732px; }
.cmc.has-panel .cmc-windows { margin-right: 332px; }

@media (max-width: 767.98px) {
  .cmc { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body:has(#cm-chat) #cb-toggle { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  body:has(#cm-chat) #cb-panel { bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important; }
  .cmc-panel { right: 10px; bottom: 76px; }
  body:has(#cb-toggle.active) .cmc-panel { right: 10px; }
  body:has(#cb-toggle.active) .cmc-windows, body:has(#cb-toggle.active) .cmc.has-panel .cmc-windows { margin-right: 0; }
}

body:has(#cm-chat) #cb-panel { max-height: calc(100vh - 176px); }
body:has(#cm-chat) .cmc-panel { max-height: calc(100vh - 110px); }
body:has(#cm-chat) .cmc-window { max-height: calc(100vh - 110px); }

.cmc-guest-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cmc-guest-body p { margin: 0; font-size: 14px; line-height: 1.55; color: #3a4252; }
.cmc-guest-body b { color: #0b0d12; font-size: 16px; }
.cmc-guest-btn { display: inline-flex; justify-content: center; padding: 11px 16px; border-radius: 999px; background: #0b3d1e; color: #fff !important; font-weight: 600; text-decoration: none; }
.cmc-guest-btn.is-ghost { background: transparent; color: #0b3d1e !important; border: 1px solid #b6e6c9; }
.cmc-ic { display: block; }
.cmc-guest .cmc-panel { right: 70px; }
body:has(#cm-chat-guest) #cb-toggle { bottom: 92px !important; right: 24px !important; }
body:has(#cm-chat-guest) #cb-panel { bottom: 160px !important; max-height: calc(100vh - 176px); }
body:has(#cm-chat-guest) #cb-toggle::after { content: "IA"; position: absolute; left: -6px; top: -6px; padding: 1px 6px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 767.98px) {
  body:has(#cm-chat-guest) #cb-toggle { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; }
  body:has(#cm-chat-guest) #cb-panel { bottom: calc(152px + env(safe-area-inset-bottom, 0px)) !important; }
  .cmc-guest { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cmc-guest .cmc-panel { position: fixed; left: 10px; right: 10px; bottom: 76px; width: auto; }
}

.cmc-msg { position: relative; }
.cmc-del { position: absolute; top: 4px; left: -30px; width: 26px; height: 26px; border: 1px solid #d5dbe5; border-radius: 50%; background: #fff; color: #3b4558; font-size: 16px; font-weight: 700; line-height: 1; opacity: .85; cursor: pointer; }
.cmc-msg:hover .cmc-del, .cmc-del:focus-visible { opacity: 1; }
.cmc-del:hover { background: #e8edf3; color: #0b0d12; }
.cmc-menu { position: fixed; z-index: 2147483647; min-width: 200px; padding: 6px; display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e8f0; border-radius: 12px; box-shadow: 0 12px 30px rgba(11, 13, 18, .28); font-family: inherit; }
.cmc-menu button { padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; color: #0b0d12; cursor: pointer; }
.cmc-menu button:hover { background: #f1f5f9; }
.cmc-menu button.is-danger { color: #b42318; }
.cmc-gone { font-style: italic; opacity: .75; }
.is-deleted .cmc-bubble { background: transparent !important; border: 1px dashed #cfd6e2 !important; color: #5a6475 !important; }
.cmc-legal { margin: 0; padding: 8px 14px; font-size: 11px; line-height: 1.45; color: #7a8392; background: #f6f8fb; border-top: 1px solid #e3e8f0; }