/* Recados do administrador: estilos prontos (announce.js). Tudo com prefixo .ann-, para nunca brigar com o resto do painel nem do admin. */
.ann { --c: #4f8cff; --cbg: color-mix(in srgb, var(--c) 13%, transparent); position: relative; color: var(--text, #f2f2f4); font-size: 14px; line-height: 1.45; }
.ann-lvl-warn { --c: #f1c40f; } .ann-lvl-bad { --c: #e74c3c; }
.ann button { font: inherit; cursor: pointer; }
.ann-x { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: inherit; opacity: .75; }
.ann-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.ann-btn { margin-top: 10px; padding: 8px 16px; border-radius: 10px; border: 0; background: var(--c); color: #111; font-weight: 700; }
.ann-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #111; font-weight: 800; font-size: 13px; }
.ann-ico-big { width: 38px; height: 38px; font-size: 20px; }
.ann-title { display: block; font-weight: 700; }

/* faixa e alerta */
.ann-faixa, .ann-alerta { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--cbg); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-left: 4px solid var(--c); }
.ann-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ann-faixa .ann-title { display: inline; margin-right: 8px; }
.ann-alerta { padding: 14px 16px; border: 2px solid var(--c); border-radius: 14px; font-weight: 600; animation: ann-glow 1.6s ease-in-out infinite; }
.ann-alerta .ann-title { text-transform: uppercase; letter-spacing: .06em; }
@keyframes ann-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 0%, transparent); } }

/* cartão */
.ann-cartao { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--cbg), transparent 70%), var(--card, #17171a); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--border, #2a2a30)); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.ann-cartao .ann-title { font-size: 16px; margin-bottom: 4px; }
.ann-cartao .ann-text { margin: 0; opacity: .92; }

/* letreiro */
.ann-letreiro { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 0; border-radius: 12px; background: var(--cbg); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); overflow: hidden; }
.ann-lane { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ann-track { display: inline-flex; white-space: pre; animation: ann-run 22s linear infinite; }
.ann-letreiro:hover .ann-track { animation-play-state: paused; }
.ann-run { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; padding-left: 14px; }
@keyframes ann-run { to { transform: translateX(-50%); } }

/* tela cheia */
.ann-tela { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 22%, #0b0b0e), #050506 70%); backdrop-filter: blur(6px); animation: ann-fade .35s ease-out; }
.ann-tela.ann-preview { position: relative; inset: auto; z-index: 0; min-height: 230px; border-radius: 14px; overflow: hidden; padding: 16px; }
.ann-screen { text-align: center; max-width: 760px; display: grid; gap: 16px; justify-items: center; }
.ann-big { font-weight: 800; font-size: clamp(22px, 5.2vw, 54px); letter-spacing: .42em; padding-left: .42em; line-height: 1.25; display: flex; flex-wrap: wrap; justify-content: center; }
.ann-preview .ann-big { font-size: clamp(16px, 3vw, 26px); }
.ann-letter { display: inline-block; opacity: 0; animation: ann-letter .6s ease-out forwards; text-shadow: 0 0 24px color-mix(in srgb, var(--c) 70%, transparent); }
.ann-gap { width: .5em; }
.ann-dots { display: flex; gap: 10px; }
.ann-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); animation: ann-dot 1.2s ease-in-out infinite; }
.ann-dots i:nth-child(2) { animation-delay: .18s; } .ann-dots i:nth-child(3) { animation-delay: .36s; }
.ann-tela .ann-text { margin: 0; max-width: 560px; opacity: .85; font-size: 16px; }
@keyframes ann-letter { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ann-dot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes ann-fade { from { opacity: 0; } to { opacity: 1; } }

/* digitando */
.ann-digitando { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #0b0f0c; border: 1px solid color-mix(in srgb, var(--c) 45%, #1d2a22); }
.ann-term { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; color: color-mix(in srgb, var(--c) 55%, #d8ffe5); overflow-wrap: anywhere; }
.ann-prompt { opacity: .6; }
.ann-cursor { animation: ann-blink 1s steps(2, start) infinite; }
@keyframes ann-blink { to { visibility: hidden; } }

/* discreto */
.ann-discreto { display: flex; justify-content: center; }
.ann-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--cbg); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); font-size: 12.5px; }
.ann-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.ann-pill .ann-x { width: 22px; height: 22px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) { .ann-alerta, .ann-track, .ann-letter, .ann-dots i, .ann-cursor, .ann-tela { animation: none !important; } .ann-letter { opacity: 1; } .ann-dots i { opacity: 1; } .ann-lane { overflow-x: auto; } }
@media (max-width: 640px) { .ann-cartao { padding: 14px; } .ann-big { letter-spacing: .28em; } }