/* chat.css - Chat general de la pestana Juegos (CryptoMarketTracker)
   Usa las variables de color del sitio, asi sigue el modo claro/oscuro. */

/* ---- boton flotante (esquina inferior derecha) ---- */
.cmtc-fab{position:fixed;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:900;width:3.6rem;height:3.6rem;border-radius:50%;border:0;background:var(--cyan-primary);color:#04222a;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s ease,filter .15s ease}
.cmtc-fab:hover{transform:scale(1.07);filter:brightness(1.08)}
.cmtc-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cmtc-fab[hidden]{display:none}
.cmtc-fab svg{width:1.7rem;height:1.7rem}
.cmtc-fab.has-unread::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--cyan-primary);animation:cmtc-ring 1.8s ease-out infinite;pointer-events:none}
@keyframes cmtc-ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.cmtc-badge{position:absolute;top:-.25rem;right:-.25rem;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:999px;background:#ef4444;color:#fff;font-size:.72rem;font-weight:800;line-height:1.35rem;text-align:center;border:2px solid var(--bg-color)}
.cmtc-badge[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.cmtc-fab,.cmtc-fab:hover{transition:none;transform:none}.cmtc-fab.has-unread::after{animation:none;opacity:.6}}

/* ---- ventana grande en el centro ---- */
.cmtc-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.cmtc-overlay[hidden]{display:none}
.cmtc{display:flex;flex-direction:column;width:min(56rem,100%);height:min(82vh,48rem);border:1px solid var(--border-color);background:var(--card-bg);border-radius:1rem;overflow:hidden;color:var(--text-primary);box-shadow:0 20px 60px rgba(0,0,0,.5);animation:cmtc-pop .16s ease-out}
@keyframes cmtc-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cmtc{animation:none}}
.cmtc *{box-sizing:border-box}

.cmtc-header{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--border-color)}
.cmtc-title{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;color:var(--text-primary)}
.cmtc-title svg{width:1.25rem;height:1.25rem;color:var(--cyan-primary)}
.cmtc-close{flex:none;width:2.2rem;height:2.2rem;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:.6rem;background:transparent;color:var(--text-secondary);cursor:pointer}
.cmtc-close:hover{background:var(--card-bg-alt);color:var(--text-primary)}
.cmtc-close svg{width:1.2rem;height:1.2rem}
.cmtc-close:focus-visible{outline:2px solid var(--cyan-primary);outline-offset:2px}
.cmtc-status{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-secondary)}
.cmtc-dot{width:.5rem;height:.5rem;border-radius:50%;background:#9ca3af}
.cmtc-status.on .cmtc-dot{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:cmtc-pulse 2s infinite}
@keyframes cmtc-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.cmtc-status.on .cmtc-dot{animation:none}}

.cmtc-listwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.cmtc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.cmtc-empty{margin:auto;text-align:center;color:var(--text-secondary);font-size:.9rem;padding:1rem}
.cmtc-msg{max-width:100%}
.cmtc-head{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.15rem}
.cmtc-nick{font-weight:700;font-size:.82rem;overflow-wrap:anywhere}
.cmtc-time{font-size:.7rem;color:var(--text-secondary)}
.cmtc-text{display:inline-block;max-width:100%;background:var(--card-bg-alt);border-radius:.75rem;padding:.4rem .7rem;font-size:.92rem;line-height:1.35;overflow-wrap:anywhere}
.cmtc-me .cmtc-text{background:rgba(6,182,212,.16)}
.cmtc-sticker{display:block;width:96px;height:96px;object-fit:contain}

.cmtc-new{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);border:0;border-radius:999px;background:var(--cyan-primary);color:#04222a;font-weight:700;font-size:.8rem;padding:.4rem .9rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.cmtc-new[hidden]{display:none}

.cmtc-foot{border-top:1px solid var(--border-color);padding:.8rem 1.1rem .9rem}
.cmtc-row{display:flex;gap:.5rem;align-items:center}
.cmtc-input{flex:1;min-width:0;height:2.6rem;border:1px solid var(--border-color);background:var(--bg-color);color:var(--text-primary);border-radius:.75rem;padding:0 .9rem;font-size:16px}
.cmtc-input::placeholder{color:var(--text-secondary);opacity:.8}
.cmtc-btn{flex:none;height:2.6rem;min-width:2.6rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);border-radius:.75rem;cursor:pointer;font-weight:600;font-size:.9rem;padding:0 .7rem}
.cmtc-btn:hover{color:var(--cyan-primary);border-color:var(--cyan-primary)}
.cmtc-btn svg{width:1.15rem;height:1.15rem}
.cmtc-btn.primary{background:var(--cyan-primary);border-color:var(--cyan-primary);color:#04222a;font-weight:700}
.cmtc-btn.primary:hover{filter:brightness(1.08);color:#04222a}
.cmtc-btn:disabled{opacity:.45;cursor:default;filter:none}
.cmtc-input:focus-visible,.cmtc-btn:focus-visible,.cmtc-new:focus-visible,.cmtc-st:focus-visible,.cmtc-link:focus-visible{outline:2px solid var(--cyan-primary);outline-offset:2px}

.cmtc-nicklabel{font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}
.cmtc-meta{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;min-height:1.1rem;font-size:.75rem;color:var(--text-secondary)}
.cmtc-link{background:none;border:0;padding:0;color:var(--cyan-primary);cursor:pointer;font-size:.75rem;text-decoration:underline}
.cmtc-count{margin-left:auto}
.cmtc-err{color:#ef4444;font-size:.78rem;margin-top:.35rem;min-height:1rem}

.cmtc-tray{border-top:1px solid var(--border-color);background:var(--card-bg-alt);padding:.6rem .8rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:.4rem;max-height:150px;overflow-y:auto}
.cmtc-tray[hidden]{display:none}
.cmtc-st{border:0;background:transparent;border-radius:.6rem;padding:.2rem;cursor:pointer}
.cmtc-st:hover{background:rgba(6,182,212,.14)}
.cmtc-st img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}

@media (max-width:640px){
  .cmtc-overlay{padding:0}
  .cmtc{width:100%;height:100vh;height:100dvh;border-radius:0;border:0}
  .cmtc-btn .cmtc-btn-label{display:none}
  .cmtc-fab{right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
}

.cmtc-staff{font-size:.62rem;font-weight:800;letter-spacing:.05em;padding:.05rem .4rem;border-radius:999px;background:var(--cyan-primary);color:#04222a;align-self:center}
.cmtc-btn[hidden]{display:none}