/* ---- Main Chat Panel ---- */
.chat-main {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; min-height: 0; overflow: hidden;
    background: var(--bg-body);
}

/* Active chat container: MUST use flex:1, NEVER height:100% */
#chatActive {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.chat-main-empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
}
.chat-main-empty-icon { font-size: 56px; opacity: 0.15; }
.chat-main-empty p { color: var(--text-dim); font-size: 15px; font-weight: 300; }
.chat-main-empty p:last-child { font-size: 12px; max-width: 280px; text-align: center; line-height: 1.6; }

/* Top bar */
.chat-topbar {
    padding: 16px 24px; display: flex; align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
    flex-shrink: 0;
}
.chat-topbar-left { display: flex; align-items: center; gap: 14px; }
.chat-topbar-avatar {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--bg-elevated);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    border: 1px solid var(--border);
    overflow: hidden;
}
.chat-topbar-avatar svg {
    width: 100%; height: 100%;
    display: block;
    border-radius: inherit;
}
.chat-topbar-info { display: flex; flex-direction: column; gap: 2px; }
.chat-topbar-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.chat-topbar-status {
    font-size: 11px; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px; font-weight: 400;
}
.chat-topbar-badges { display: flex; gap: 6px; }
.chat-topbar-right { display: flex; align-items: center; gap: 10px; }

/* Options dropdown */
.options-menu { position: relative; }
.options-btn {
    background: none; border: 1.5px solid var(--border); color: var(--text-secondary);
    width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.options-btn:hover { border-color: var(--primary-500); color: var(--primary-400); background: var(--primary-100); }
.options-dropdown {
    display: none; position: absolute; top: 44px; right: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 0; min-width: 220px;
    box-shadow: var(--shadow-lg); z-index: 100;
}
.options-dropdown.show { display: block; }
.options-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; font-size: 13px; color: var(--text-secondary);
    cursor: pointer; transition: var(--transition);
    font-family: var(--font-display), var(--font-emoji); background: none; border: none;
    width: 100%; text-align: left; font-weight: 500;
}
.options-item:hover { background: var(--overlay-subtle); color: var(--text-primary); }
.options-item.danger { color: var(--danger); }
.options-item.danger:hover { background: rgba(248,113,113,0.08); }
.options-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Messages area */
.chat-messages {
    flex: 1; overflow-y: auto; padding: 24px 28px;
    min-height: 0;
    background-image: url('../img/chat-doodle.svg');
    background-repeat: repeat;
    background-size: 480px 480px;
    background-position: center;
    display: flex;
    flex-direction: column;
}
/* Spacer flexible: empuja mensajes al fondo cuando hay pocos,
   colapsa a 0 cuando hay muchos (permite scroll normal).
   Reemplaza justify-content: flex-end que causa overflow inaccesible. */
.chat-messages::before {
    content: '';
    flex: 1 1 0px;
    min-height: 0;
}
/* Ningun hijo del chat debe comprimirse por el flex layout */
.chat-messages > * {
    flex-shrink: 0;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Load more messages banner */
.chat-load-more {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 16px; cursor: pointer;
    margin: 4px auto 8px; max-width: 240px;
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    border-radius: 20px; transition: var(--transition);
}
.chat-load-more:hover {
    background: var(--primary-100); border-color: var(--primary-400);
}
.chat-load-more-text {
    font-size: 12px; color: var(--primary-400); font-weight: 500;
}
.chat-load-more-spinner {
    display: flex; align-items: center; justify-content: center;
    padding: 4px;
}

.msg {
    max-width: 65%; width: fit-content; padding: 12px 16px; border-radius: 16px;
    margin-bottom: 8px; font-size: 14px; line-height: 1.6;
    position: relative; cursor: default; min-width: 80px;
    white-space: pre-wrap; word-wrap: break-word;
    font-family: var(--font-display), var(--font-emoji);
    -webkit-user-select: text; user-select: text;
}
.msg-mine {
    margin-left: auto;
    background: var(--msg-mine-bg, rgb(9, 97, 89));
    border: 1px solid var(--msg-mine-border, var(--primary-glow));
    color: var(--msg-mine-text, var(--text-primary));
    border-bottom-right-radius: 4px;
}
.msg-theirs {
    margin-right: auto;
    background: var(--msg-other-bg, var(--bg-elevated));
    border: 1px solid var(--msg-other-border, var(--border));
    color: var(--msg-other-text, var(--text-primary));
    border-bottom-left-radius: 4px;
}
.msg-meta { font-size: 10px; color: var(--text-dim); margin-top: 6px; }
.msg-mine .msg-meta { color: var(--text-muted); text-align: right; }

/* Input area */
.chat-input-area {
    padding: 16px 24px; border-top: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
    position: relative;
}
.chat-input { display: flex; gap: 10px; align-items: flex-end; }
.chat-input .input {
    flex: 1; border-radius: 20px; padding: 10px 20px;
    background: var(--bg-input); font-size: 14px;
    font-family: var(--font-display), var(--font-emoji);
}
.chat-input .chat-textarea {
    flex: 1; border-radius: 20px; padding: 10px 20px;
    background: var(--bg-input); font-size: 14px;
    font-family: var(--font-display), var(--font-emoji);
    resize: none; overflow-y: auto;
    min-height: 42px; max-height: 120px;
    line-height: 1.5;
    /* Oculta scrollbar en todos los navegadores pero mantiene scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.chat-input .chat-textarea::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.chat-input .btn-primary { border-radius: 24px; padding: 12px 20px; flex-shrink: 0; }
.chat-input-extras {
    display: flex; align-items: center; gap: 12px;
    margin-top: 8px; padding: 0 8px;
}
.chat-input-extras label {
    font-size: 11px; color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; gap: 5px; font-weight: 500;
}

/* Connection status */
.conn-status { display: inline-flex; align-items: center; gap: 5px; }
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.conn-dot.live { background: var(--success); box-shadow: 0 0 8px var(--success); }
.conn-dot.reconnecting { background: var(--warning); animation: pulse 1s ease-in-out infinite; }
.conn-dot.polling { background: var(--info); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Message states */
.msg-failed { opacity: 0.7; }
.msg-failed .msg-meta::after { content: none; }
.msg-failed-actions {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
}
.msg-failed-badge {
    display: inline-flex; align-items: center; gap: 3px;
    color: var(--danger); font-size: 11px; cursor: pointer;
    padding: 2px 6px; border-radius: 4px;
    transition: background 0.15s;
}
.msg-failed-badge:hover { background: rgba(248,113,113,0.12); }
.msg-failed-badge svg { width: 12px; height: 12px; }
.msg-failed-menu {
    position: absolute; bottom: 100%; right: 0; z-index: 50;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px; min-width: 140px;
    box-shadow: var(--shadow-lg); display: none;
}
.msg-failed-menu.show { display: block; }
.msg-failed-menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 6px; cursor: pointer;
    font-size: 12px; color: var(--text-primary); white-space: nowrap;
    transition: background 0.15s;
}
.msg-failed-menu-item:hover { background: var(--overlay-light); }
.msg-failed-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.msg-failed-menu-item.danger { color: var(--danger); }
.msg-failed-menu-item.danger:hover { background: rgba(248,113,113,0.08); }
.msg-retry-loading { display: inline-flex; align-items: center; gap: 4px; color: var(--primary-400); font-size: 11px; }
.msg-retry-spinner { width: 12px; height: 12px; border: 2px solid var(--primary-100); border-top-color: var(--primary-500); border-radius: 50%; animation: spin 0.6s linear infinite; }
.msg-status { font-size: 12px; margin-left: 4px; letter-spacing: -2px; }
.msg-status-queued { color: var(--text-dim); }
.msg-status-queued::after {
    content: ''; display: inline-block;
    width: 10px; height: 10px;
    border: 1.5px solid var(--overlay-light);
    border-top-color: var(--primary-400);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle; letter-spacing: 0;
}
.msg-status-sent { color: var(--text-muted); }
.msg-status-sent::after { content: '\2713'; }
.msg-status-delivered { color: var(--primary-400); }
.msg-status-delivered::after { content: '\2713\2713'; }
.msg-status-read { color: var(--accent-light); }
.msg-status-read::after { content: '\2713\2713'; }
.msg-edited .msg-meta::before { content: 'editado \00b7 '; font-style: italic; }
.msg-deleted { opacity: 0.45; font-style: italic; }
.msg-deleted-text { color: var(--text-dim); font-size: 13px; }

/* Text formatting — WhatsApp-style */
.msg-content strong { font-weight: 700; }
.msg-content em { font-style: italic; }
.msg-content s { text-decoration: line-through; opacity: 0.75; }
.msg-content.msg-formatted { white-space: normal; }
.msg-code-block {
    display: block; font-family: var(--font-mono); font-size: 12px;
    background: var(--bg-body); color: var(--primary-300);
    padding: 10px 14px; border-radius: 6px; margin: 4px 0;
    white-space: pre-wrap; word-break: break-all;
    border: 1px solid var(--border);
}
.msg-code-inline {
    font-family: var(--font-mono); font-size: 12px;
    background: var(--overlay-light); color: var(--primary-300);
    padding: 2px 6px; border-radius: 4px;
}
.msg-quote {
    border-left: 3px solid var(--primary-500); padding: 2px 10px;
    margin: 2px 0; color: var(--text-secondary); font-style: italic;
    background: var(--overlay-subtle); border-radius: 0 6px 6px 0;
}
.msg-list {
    margin: 2px 0; padding-left: 20px; list-style-position: outside;
}
.msg-list li { padding: 1px 0; line-height: 1.4; }
ul.msg-list { list-style-type: disc; }
ol.msg-list { list-style-type: decimal; }

/* Message actions */
.msg-actions {
    display: none; position: absolute; top: -6px; right: -6px;
    z-index: 10; opacity: 0; transition: opacity 0.15s;
}
.msg-theirs .msg-actions { right: auto; left: -6px; }
.msg:hover .msg-actions { display: flex; opacity: 1; }
.msg-actions:has(+ .msg-edit-input),
.msg:has(.msg-edit-input) .msg-actions { display: none !important; }
.msg-action-btn {
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-muted); width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%; padding: 0;
    font-family: var(--font-display), var(--font-emoji); font-weight: 500;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.msg-action-btn:hover { background: var(--primary-100); color: var(--primary-400); transform: scale(1.1); }
.msg-action-btn:active { transform: scale(0.95); }
.msg-action-btn svg { width: 14px; height: 14px; }
.msg-edit-input {
    width: 100%; padding: 10px 14px; font-family: var(--font-display), var(--font-emoji);
    font-size: 14px; line-height: 1.5; background: var(--bg-body); color: var(--text-primary);
    border: 1.5px solid var(--primary-500); border-radius: 8px;
    box-sizing: border-box; outline: none;
    resize: none; overflow: hidden;
    min-height: 40px; max-height: 200px;
}
.msg-edit-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.msg-edit-actions {
    display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;
}
.msg-edit-btn {
    padding: 6px 16px; border: none; border-radius: 6px;
    font-family: var(--font-display), var(--font-emoji); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.msg-edit-btn:active { transform: scale(0.95); }
.msg-edit-cancel {
    background: var(--overlay-light); color: var(--text-secondary);
}
.msg-edit-cancel:hover { background: var(--overlay-medium); }
.msg-edit-save {
    background: var(--primary-600); color: #fff;
}
.msg-edit-save:hover { background: var(--primary-500); }

/* Verify panel */
.verify-panel {
    display: none; padding: 24px; border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.verify-panel.show { display: block; }
.verify-fp {
    font-family: var(--font-mono); font-size: 13px; font-weight: 600;
    letter-spacing: 1.5px; padding: 12px 16px; background: var(--bg-body);
    border-radius: var(--radius-sm); text-align: center; margin: 8px 0;
    border: 1px solid var(--border); word-break: break-all;
}
.verify-fp.mine { color: var(--primary-400); }
.verify-fp.partner { color: var(--accent-light); }
.verify-qr { display: flex; justify-content: center; margin: 16px 0; }
.verify-badge {
    font-size: 10px; padding: 3px 10px;
    background: var(--primary-100); color: var(--success);
    border: 1px solid var(--primary-100);
    border-radius: 20px; font-weight: 600; letter-spacing: 0.03em;
}
.verify-badge.unverified {
    background: var(--accent-100); color: var(--accent);
    border-color: var(--accent-100);
}

/* ============================================================
   MESSAGE ANIMATIONS SYSTEM — Selectable via data-anim-* attributes
   ============================================================ */

/* ---- SEND ANIMATIONS (mine) — 10 total ---- */
@keyframes sendSlide { 0%{opacity:0;transform:translateX(30px) scale(0.92)} 60%{opacity:1;transform:translateX(-3px) scale(1.01)} 100%{opacity:1;transform:translateX(0) scale(1)} }
@keyframes sendBounce { 0%{opacity:0;transform:translateY(40px)} 50%{opacity:1;transform:translateY(-8px)} 70%{transform:translateY(3px)} 100%{transform:translateY(0)} }
@keyframes sendPop { 0%{opacity:0;transform:scale(0.3)} 60%{opacity:1;transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes sendFade { from{opacity:0} to{opacity:1} }
@keyframes sendFlip { 0%{opacity:0;transform:perspective(400px) rotateY(90deg)} 60%{opacity:1;transform:perspective(400px) rotateY(-10deg)} 100%{transform:perspective(400px) rotateY(0)} }
@keyframes sendElastic { 0%{opacity:0;transform:translateX(50px) scaleX(1.3)} 40%{opacity:1;transform:translateX(-8px) scaleX(0.95)} 60%{transform:translateX(4px) scaleX(1.02)} 80%{transform:translateX(-2px) scaleX(0.99)} 100%{transform:translateX(0) scaleX(1)} }
@keyframes sendSwing { 0%{opacity:0;transform:translateX(30px) rotate(8deg);transform-origin:top right} 50%{opacity:1;transform:translateX(-4px) rotate(-3deg)} 75%{transform:translateX(2px) rotate(1deg)} 100%{transform:translateX(0) rotate(0)} }
@keyframes sendRise { 0%{opacity:0;transform:translateY(20px) rotate(2deg)} 60%{opacity:1;transform:translateY(-3px) rotate(0)} 100%{transform:translateY(0)} }
@keyframes sendUnfold { 0%{opacity:0;transform:scaleX(0);transform-origin:right center} 60%{opacity:1;transform:scaleX(1.03)} 100%{transform:scaleX(1)} }
@keyframes sendGlitch { 0%{opacity:0;transform:translate(5px,-3px);filter:hue-rotate(90deg)} 25%{opacity:0.7;transform:translate(-4px,2px);filter:hue-rotate(-60deg)} 50%{opacity:0.9;transform:translate(3px,0);filter:hue-rotate(30deg)} 75%{opacity:1;transform:translate(-1px,0);filter:none} 100%{opacity:1;transform:translate(0);filter:none} }

.msg-new.msg-mine { animation: sendSlide 0.35s cubic-bezier(0.22,0.68,0.31,1) both; }
[data-anim-send="slide"] .msg-new.msg-mine { animation-name: sendSlide; }
[data-anim-send="bounce"] .msg-new.msg-mine { animation-name: sendBounce; animation-duration: 0.5s; }
[data-anim-send="pop"] .msg-new.msg-mine { animation-name: sendPop; animation-duration: 0.35s; }
[data-anim-send="fade"] .msg-new.msg-mine { animation-name: sendFade; animation-duration: 0.25s; }
[data-anim-send="flip"] .msg-new.msg-mine { animation-name: sendFlip; animation-duration: 0.45s; }
[data-anim-send="elastic"] .msg-new.msg-mine { animation-name: sendElastic; animation-duration: 0.6s; }
[data-anim-send="swing"] .msg-new.msg-mine { animation-name: sendSwing; animation-duration: 0.5s; }
[data-anim-send="rise"] .msg-new.msg-mine { animation-name: sendRise; animation-duration: 0.4s; }
[data-anim-send="unfold"] .msg-new.msg-mine { animation-name: sendUnfold; animation-duration: 0.4s; }
[data-anim-send="glitch"] .msg-new.msg-mine { animation-name: sendGlitch; animation-duration: 0.35s; animation-timing-function: steps(4, end); }
@keyframes sendTypewriter { 0%{opacity:0;max-width:0;white-space:nowrap;overflow:hidden} 100%{opacity:1;max-width:600px} }
@keyframes sendThrow { 0%{opacity:0;transform:translate(60px,40px) rotate(15deg) scale(0.5)} 50%{opacity:1;transform:translate(-5px,-10px) rotate(-3deg) scale(1.05)} 100%{opacity:1;transform:translate(0) rotate(0) scale(1)} }
@keyframes sendSpiral { 0%{opacity:0;transform:rotate(360deg) scale(0)} 50%{opacity:0.8;transform:rotate(90deg) scale(1.1)} 100%{opacity:1;transform:rotate(0) scale(1)} }
@keyframes sendJelly { 0%{opacity:0;transform:scale(0.3,0.3)} 30%{opacity:1;transform:scale(1.15,0.85)} 45%{transform:scale(0.9,1.1)} 60%{transform:scale(1.05,0.95)} 75%{transform:scale(0.98,1.02)} 100%{opacity:1;transform:scale(1,1)} }
@keyframes sendMatrix { 0%{opacity:0;filter:brightness(3) hue-rotate(90deg);transform:scaleY(0.1)} 40%{opacity:0.8;filter:brightness(2) hue-rotate(45deg);transform:scaleY(1.1)} 70%{filter:brightness(1.3) hue-rotate(15deg);transform:scaleY(0.95)} 100%{opacity:1;filter:none;transform:scaleY(1)} }
@keyframes sendExplosion { 0%{opacity:0;transform:scale(0)} 40%{opacity:1;transform:scale(1.3)} 70%{transform:scale(0.95)} 100%{opacity:1;transform:scale(1)} }
@keyframes sendHelicopter { 0%{opacity:0;transform:translateY(-60px) rotate(720deg) scale(0.3)} 60%{opacity:1;transform:translateY(5px) rotate(-10deg) scale(1.02)} 100%{opacity:1;transform:translateY(0) rotate(0) scale(1)} }
@keyframes sendRubberband { 0%{opacity:0;transform:scaleX(0.3) translateX(40px)} 25%{opacity:1;transform:scaleX(1.35) translateX(-8px)} 50%{transform:scaleX(0.85) translateX(4px)} 70%{transform:scaleX(1.08) translateX(-2px)} 100%{opacity:1;transform:scaleX(1) translateX(0)} }
[data-anim-send="typewriter"] .msg-new.msg-mine { animation-name: sendTypewriter; animation-duration: 0.6s; animation-timing-function: steps(20); }
[data-anim-send="throw"] .msg-new.msg-mine { animation-name: sendThrow; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2,0.8,0.3,1.2); }
[data-anim-send="spiral"] .msg-new.msg-mine { animation-name: sendSpiral; animation-duration: 0.6s; }
[data-anim-send="jelly"] .msg-new.msg-mine { animation-name: sendJelly; animation-duration: 0.7s; }
[data-anim-send="matrix"] .msg-new.msg-mine { animation-name: sendMatrix; animation-duration: 0.5s; animation-timing-function: steps(6); }
[data-anim-send="explosion"] .msg-new.msg-mine { animation-name: sendExplosion; animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.17,0.67,0.38,1.2); }
[data-anim-send="helicopter"] .msg-new.msg-mine { animation-name: sendHelicopter; animation-duration: 0.65s; }
[data-anim-send="rubberband"] .msg-new.msg-mine { animation-name: sendRubberband; animation-duration: 0.7s; }

/* ---- RECEIVE ANIMATIONS (theirs) — 10 total ---- */
@keyframes recvSlide { 0%{opacity:0;transform:translateX(-25px) scale(0.94)} 60%{opacity:1;transform:translateX(2px) scale(1.005)} 100%{transform:translateX(0) scale(1)} }
@keyframes recvBounce { 0%{opacity:0;transform:translateY(40px)} 50%{opacity:1;transform:translateY(-6px)} 70%{transform:translateY(2px)} 100%{transform:translateY(0)} }
@keyframes recvPop { 0%{opacity:0;transform:scale(0.3)} 60%{opacity:1;transform:scale(1.06)} 100%{transform:scale(1)} }
@keyframes recvFlip { 0%{opacity:0;transform:perspective(400px) rotateY(-90deg)} 60%{opacity:1;transform:perspective(400px) rotateY(10deg)} 100%{transform:perspective(400px) rotateY(0)} }
@keyframes recvElastic { 0%{opacity:0;transform:translateX(-50px) scaleX(1.3)} 40%{opacity:1;transform:translateX(8px) scaleX(0.95)} 60%{transform:translateX(-4px) scaleX(1.02)} 80%{transform:translateX(2px) scaleX(0.99)} 100%{transform:translateX(0) scaleX(1)} }
@keyframes recvSwing { 0%{opacity:0;transform:translateX(-30px) rotate(-8deg);transform-origin:top left} 50%{opacity:1;transform:translateX(4px) rotate(3deg)} 75%{transform:translateX(-2px) rotate(-1deg)} 100%{transform:translateX(0) rotate(0)} }
@keyframes recvRise { 0%{opacity:0;transform:translateY(20px) rotate(-2deg)} 60%{opacity:1;transform:translateY(-3px) rotate(0)} 100%{transform:translateY(0)} }
@keyframes recvUnfold { 0%{opacity:0;transform:scaleX(0);transform-origin:left center} 60%{opacity:1;transform:scaleX(1.03)} 100%{transform:scaleX(1)} }
@keyframes recvGlitch { 0%{opacity:0;transform:translate(-5px,3px);filter:hue-rotate(-90deg)} 25%{opacity:0.7;transform:translate(4px,-2px);filter:hue-rotate(60deg)} 50%{opacity:0.9;transform:translate(-3px,0);filter:hue-rotate(-30deg)} 75%{opacity:1;transform:translate(1px,0);filter:none} 100%{opacity:1;transform:translate(0);filter:none} }

.msg-new:not(.msg-mine) { animation: recvSlide 0.35s cubic-bezier(0.22,0.68,0.31,1) both; }
[data-anim-recv="slide"] .msg-new:not(.msg-mine) { animation-name: recvSlide; }
[data-anim-recv="bounce"] .msg-new:not(.msg-mine) { animation-name: recvBounce; animation-duration: 0.5s; }
[data-anim-recv="pop"] .msg-new:not(.msg-mine) { animation-name: recvPop; animation-duration: 0.35s; }
[data-anim-recv="fade"] .msg-new:not(.msg-mine) { animation-name: sendFade; animation-duration: 0.25s; }
[data-anim-recv="flip"] .msg-new:not(.msg-mine) { animation-name: recvFlip; animation-duration: 0.45s; }
[data-anim-recv="elastic"] .msg-new:not(.msg-mine) { animation-name: recvElastic; animation-duration: 0.6s; }
[data-anim-recv="swing"] .msg-new:not(.msg-mine) { animation-name: recvSwing; animation-duration: 0.5s; }
[data-anim-recv="rise"] .msg-new:not(.msg-mine) { animation-name: recvRise; animation-duration: 0.4s; }
[data-anim-recv="unfold"] .msg-new:not(.msg-mine) { animation-name: recvUnfold; animation-duration: 0.4s; }
[data-anim-recv="glitch"] .msg-new:not(.msg-mine) { animation-name: recvGlitch; animation-duration: 0.35s; animation-timing-function: steps(4, end); }
@keyframes recvTelegram { 0%{opacity:0;transform:translateY(-50px) rotate(-5deg)} 60%{opacity:1;transform:translateY(3px) rotate(1deg)} 100%{opacity:1;transform:translateY(0) rotate(0)} }
@keyframes recvPortal { 0%{opacity:0;transform:scale(0) rotate(180deg)} 60%{opacity:1;transform:scale(1.05) rotate(-5deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes recvFloatup { 0%{opacity:0;transform:translateY(30px)} 40%{opacity:1;transform:translateY(-8px)} 65%{transform:translateY(3px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes recvNewspaper { 0%{opacity:0;transform:scale(0) rotate(720deg)} 70%{opacity:1;transform:scale(1.05) rotate(-5deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes recvHack { 0%{opacity:0;transform:translate(-8px,4px);filter:hue-rotate(180deg) brightness(2)} 20%{opacity:0.6;transform:translate(6px,-3px);filter:hue-rotate(-90deg) brightness(1.5)} 40%{opacity:0.8;transform:translate(-4px,2px);filter:hue-rotate(90deg)} 60%{opacity:0.9;transform:translate(3px,-1px);filter:hue-rotate(-45deg)} 80%{transform:translate(-1px,0);filter:hue-rotate(15deg)} 100%{opacity:1;transform:translate(0);filter:none} }
@keyframes recvDomino { 0%{opacity:0;transform:perspective(300px) rotateX(-90deg);transform-origin:top} 50%{opacity:1;transform:perspective(300px) rotateX(10deg)} 70%{transform:perspective(300px) rotateX(-5deg)} 100%{opacity:1;transform:perspective(300px) rotateX(0)} }
@keyframes recvDrop3d { 0%{opacity:0;transform:perspective(400px) translateZ(100px) translateY(-30px)} 60%{opacity:1;transform:perspective(400px) translateZ(-10px) translateY(3px)} 100%{opacity:1;transform:perspective(400px) translateZ(0) translateY(0)} }
@keyframes recvCurtain { 0%{opacity:0;clip-path:inset(0 0 100% 0)} 40%{opacity:1;clip-path:inset(0 0 20% 0)} 100%{opacity:1;clip-path:inset(0 0 0 0)} }
[data-anim-recv="telegram"] .msg-new:not(.msg-mine) { animation-name: recvTelegram; animation-duration: 0.55s; }
[data-anim-recv="portal"] .msg-new:not(.msg-mine) { animation-name: recvPortal; animation-duration: 0.5s; }
[data-anim-recv="floatup"] .msg-new:not(.msg-mine) { animation-name: recvFloatup; animation-duration: 0.6s; }
[data-anim-recv="newspaper"] .msg-new:not(.msg-mine) { animation-name: recvNewspaper; animation-duration: 0.6s; }
[data-anim-recv="hack"] .msg-new:not(.msg-mine) { animation-name: recvHack; animation-duration: 0.5s; animation-timing-function: steps(5); }
[data-anim-recv="domino"] .msg-new:not(.msg-mine) { animation-name: recvDomino; animation-duration: 0.55s; }
[data-anim-recv="drop3d"] .msg-new:not(.msg-mine) { animation-name: recvDrop3d; animation-duration: 0.55s; }
[data-anim-recv="curtain"] .msg-new:not(.msg-mine) { animation-name: recvCurtain; animation-duration: 0.5s; }

/* ---- DELETE ANIMATIONS — 10 total ---- */
@keyframes delSlideout { 0%{opacity:1;transform:translateX(0) scale(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 40%{opacity:.5;transform:translateX(10px) scale(0.96)} 100%{opacity:0;transform:translateX(40px) scale(0.9);max-height:0;margin-bottom:0;padding:0} }
@keyframes delShrink { 0%{opacity:1;transform:scale(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 100%{opacity:0;transform:scale(0);max-height:0;margin-bottom:0;padding:0} }
@keyframes delPoof { 0%{opacity:1;transform:scale(1);filter:blur(0)} 50%{opacity:.5;transform:scale(1.1);filter:blur(2px)} 100%{opacity:0;transform:scale(1.4);filter:blur(8px);max-height:0;margin-bottom:0;padding:0} }
@keyframes delFade { 0%{opacity:1;max-height:200px;margin-bottom:var(--msg-gap,8px)} 60%{opacity:0} 100%{opacity:0;max-height:0;margin-bottom:0;padding:0} }
@keyframes delFall { 0%{opacity:1;transform:translateY(0) rotate(0);max-height:200px;margin-bottom:var(--msg-gap,8px)} 100%{opacity:0;transform:translateY(80px) rotate(8deg);max-height:0;margin-bottom:0;padding:0} }
@keyframes delTornado { 0%{opacity:1;transform:rotate(0) scale(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 40%{opacity:.7;transform:rotate(180deg) scale(0.7)} 100%{opacity:0;transform:rotate(540deg) scale(0);max-height:0;margin-bottom:0;padding:0} }
@keyframes delDissolve { 0%{opacity:1;transform:scale(1);filter:blur(0) saturate(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 40%{opacity:.6;transform:scale(1.05);filter:blur(3px) saturate(0.5)} 100%{opacity:0;transform:scale(1.15);filter:blur(10px) saturate(0);max-height:0;margin-bottom:0;padding:0} }
@keyframes delSwipe { 0%{opacity:1;transform:translateX(0);max-height:200px;margin-bottom:var(--msg-gap,8px)} 30%{opacity:.9;transform:translateX(-8px)} 100%{opacity:0;transform:translateX(80px);max-height:0;margin-bottom:0;padding:0} }
@keyframes delCrush { 0%{opacity:1;transform:scaleY(1) scaleX(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 50%{opacity:.7;transform:scaleY(0.3) scaleX(1.2)} 100%{opacity:0;transform:scaleY(0) scaleX(1.4);max-height:0;margin-bottom:0;padding:0} }
@keyframes delRocket { 0%{opacity:1;transform:translateY(0) scale(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 30%{opacity:.9;transform:translateY(4px) scale(0.98)} 100%{opacity:0;transform:translateY(-60px) scale(0.5);max-height:0;margin-bottom:0;padding:0} }

.msg-deleting { animation: delSlideout 0.35s cubic-bezier(0.4,0,0.6,1) forwards; pointer-events:none; overflow:hidden; }
[data-anim-del="slideout"] .msg-deleting { animation-name: delSlideout; }
[data-anim-del="shrink"] .msg-deleting { animation-name: delShrink; animation-duration: 0.3s; }
[data-anim-del="poof"] .msg-deleting { animation-name: delPoof; animation-duration: 0.4s; }
[data-anim-del="fade"] .msg-deleting { animation-name: delFade; animation-duration: 0.3s; }
[data-anim-del="fall"] .msg-deleting { animation-name: delFall; animation-duration: 0.45s; }
[data-anim-del="tornado"] .msg-deleting { animation-name: delTornado; animation-duration: 0.55s; }
[data-anim-del="dissolve"] .msg-deleting { animation-name: delDissolve; animation-duration: 0.5s; }
[data-anim-del="swipe"] .msg-deleting { animation-name: delSwipe; animation-duration: 0.35s; }
[data-anim-del="crush"] .msg-deleting { animation-name: delCrush; animation-duration: 0.4s; }
[data-anim-del="rocket"] .msg-deleting { animation-name: delRocket; animation-duration: 0.45s; }
@keyframes delBlackhole { 0%{opacity:1;transform:scale(1) rotate(0);max-height:200px;margin-bottom:var(--msg-gap,8px)} 50%{opacity:0.6;transform:scale(0.5) rotate(180deg)} 100%{opacity:0;transform:scale(0) rotate(540deg);max-height:0;margin-bottom:0;padding:0} }
@keyframes delShatter { 0%{opacity:1;transform:scale(1);filter:none;max-height:200px;margin-bottom:var(--msg-gap,8px)} 30%{opacity:0.9;transform:scale(1.02);filter:brightness(1.5)} 60%{opacity:0.5;transform:scale(1.05) skewX(10deg);filter:brightness(0.8) contrast(1.5)} 100%{opacity:0;transform:scale(1.2) skewX(-20deg) skewY(5deg);filter:blur(4px) brightness(0.3);max-height:0;margin-bottom:0;padding:0} }
@keyframes delBurn { 0%{opacity:1;filter:none;transform:scaleY(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 30%{opacity:0.9;filter:sepia(1) brightness(1.3) saturate(2)} 60%{opacity:0.5;filter:sepia(1) brightness(1.8) saturate(3) blur(1px);transform:scaleY(0.8)} 100%{opacity:0;filter:brightness(3) blur(6px);transform:scaleY(0);max-height:0;margin-bottom:0;padding:0} }
@keyframes delFlushspin { 0%{opacity:1;transform:rotate(0) scale(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 40%{opacity:0.7;transform:rotate(180deg) scale(0.7)} 70%{opacity:0.3;transform:rotate(540deg) scale(0.3)} 100%{opacity:0;transform:rotate(720deg) scale(0) translateY(20px);max-height:0;margin-bottom:0;padding:0} }
@keyframes delAbduct { 0%{opacity:1;transform:translateY(0) scale(1);max-height:200px;margin-bottom:var(--msg-gap,8px)} 40%{opacity:0.8;transform:translateY(-10px) scale(1.05)} 100%{opacity:0;transform:translateY(-60px) scale(0.5) scaleX(0.3);max-height:0;margin-bottom:0;padding:0} }
@keyframes delCrumble { 0%{opacity:1;transform:translateY(0) rotate(0);max-height:200px;margin-bottom:var(--msg-gap,8px)} 30%{opacity:0.8;transform:translateY(5px) rotate(2deg) skewX(3deg)} 60%{opacity:0.4;transform:translateY(15px) rotate(-3deg) scaleY(0.7) skewX(-5deg)} 100%{opacity:0;transform:translateY(30px) rotate(8deg) scaleY(0.2) scaleX(1.3);max-height:0;margin-bottom:0;padding:0} }
@keyframes delVaporize { 0%{opacity:1;transform:translateY(0);filter:none;max-height:200px;margin-bottom:var(--msg-gap,8px)} 40%{opacity:0.7;transform:translateY(-5px);filter:blur(1px) brightness(1.3)} 100%{opacity:0;transform:translateY(-25px) scaleX(1.3);filter:blur(8px) brightness(2);max-height:0;margin-bottom:0;padding:0} }
@keyframes delGlitchout { 0%{opacity:1;transform:translate(0);filter:none;max-height:200px;margin-bottom:var(--msg-gap,8px)} 15%{opacity:0.8;transform:translate(-6px,3px);filter:hue-rotate(90deg)} 30%{opacity:0.6;transform:translate(4px,-2px);filter:hue-rotate(-60deg) brightness(1.5)} 50%{opacity:0.4;transform:translate(-3px,1px) scaleX(1.1);filter:invert(0.3)} 70%{opacity:0.2;transform:translate(5px,-3px) scaleX(0.9);filter:saturate(3)} 100%{opacity:0;transform:translate(0) scale(0.9);filter:brightness(3);max-height:0;margin-bottom:0;padding:0} }
[data-anim-del="blackhole"] .msg-deleting { animation-name: delBlackhole; animation-duration: 0.6s; }
[data-anim-del="shatter"] .msg-deleting { animation-name: delShatter; animation-duration: 0.5s; }
[data-anim-del="burn"] .msg-deleting { animation-name: delBurn; animation-duration: 0.6s; }
[data-anim-del="flush"] .msg-deleting { animation-name: delFlushspin; animation-duration: 0.7s; }
[data-anim-del="abduct"] .msg-deleting { animation-name: delAbduct; animation-duration: 0.55s; }
[data-anim-del="crumble"] .msg-deleting { animation-name: delCrumble; animation-duration: 0.5s; }
[data-anim-del="vaporize"] .msg-deleting { animation-name: delVaporize; animation-duration: 0.55s; }
[data-anim-del="glitchout"] .msg-deleting { animation-name: delGlitchout; animation-duration: 0.4s; animation-timing-function: steps(6); }

/* ---- PENDING ANIMATIONS — 9 total ---- */
@keyframes pendPulse { 0%,100%{opacity:0.55} 50%{opacity:0.35} }
@keyframes pendShimmer { 0%{opacity:0.55;background-position:-200% 0} 100%{opacity:0.55;background-position:200% 0} }
@keyframes pendGlow { 0%,100%{opacity:0.55;box-shadow:0 0 0 0 var(--primary-glow)} 50%{opacity:0.65;box-shadow:0 0 12px 2px var(--primary-glow)} }
@keyframes pendDots { 0%{content:'enviando'} 25%{content:'enviando.'} 50%{content:'enviando..'} 75%{content:'enviando...'} }
@keyframes pendWave { 0%,100%{opacity:0.55;transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes pendBounce { 0%,100%{opacity:0.55;transform:translateY(0)} 50%{opacity:0.6;transform:translateY(-5px)} }
@keyframes pendFlicker { 0%,100%{opacity:0.55} 20%{opacity:0.3} 40%{opacity:0.6} 60%{opacity:0.25} 80%{opacity:0.5} }
@keyframes pendRadar { 0%{opacity:0.55;box-shadow:0 0 0 0 var(--primary-glow)} 50%{opacity:0.55;box-shadow:0 0 0 8px transparent} 100%{opacity:0.55;box-shadow:0 0 0 0 transparent} }
@keyframes pendBreathe { 0%,100%{opacity:0.45;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.02)} }

.msg-pending { opacity: 0.55; animation: pendPulse 1.5s ease-in-out infinite; }
.msg-pending .msg-meta::after { content: ' \00b7 enviando...'; }
[data-anim-pend="pulse"] .msg-pending { animation-name: pendPulse; }
[data-anim-pend="shimmer"] .msg-pending {
    animation: pendShimmer 2s linear infinite;
    background-image: linear-gradient(90deg, transparent 0%, var(--primary-100) 50%, transparent 100%);
    background-size: 200% 100%;
}
[data-anim-pend="glow"] .msg-pending { animation: pendGlow 1.8s ease-in-out infinite; }
[data-anim-pend="dots"] .msg-pending { opacity: 0.55; animation: none; }
[data-anim-pend="dots"] .msg-pending .msg-meta::after { content: ' \00b7 enviando'; animation: pendDots 1.5s steps(4) infinite; }
[data-anim-pend="wave"] .msg-pending { animation: pendWave 1.5s ease-in-out infinite; }
[data-anim-pend="bounce"] .msg-pending { animation: pendBounce 1.2s ease-in-out infinite; }
[data-anim-pend="flicker"] .msg-pending { animation: pendFlicker 1.5s ease-in-out infinite; }
[data-anim-pend="radar"] .msg-pending { animation: pendRadar 1.8s ease-out infinite; }
[data-anim-pend="breathe"] .msg-pending { animation: pendBreathe 2.5s ease-in-out infinite; }
@keyframes pendHeartbeat { 0%,40%,100%{transform:scale(1);opacity:0.55} 8%{transform:scale(1.15);opacity:0.75} 16%{transform:scale(0.97);opacity:0.5} 24%{transform:scale(1.2);opacity:0.8} 32%{transform:scale(0.98);opacity:0.5} }
@keyframes pendNeon { 0%,100%{opacity:0.3;box-shadow:none} 15%{opacity:0.7;box-shadow:0 0 8px var(--primary-glow)} 30%{opacity:0.35} 50%{opacity:0.65;box-shadow:0 0 12px var(--primary-glow)} 65%{opacity:0.4;box-shadow:none} 85%{opacity:0.7;box-shadow:0 0 6px var(--primary-glow)} }
@keyframes pendMorse { 0%,20%{opacity:0.3} 5%{opacity:0.7} 10%{opacity:0.3} 15%{opacity:0.7} 25%,50%{opacity:0.3} 30%{opacity:0.7} 45%{opacity:0.7} 55%{opacity:0.3} 60%,75%{opacity:0.7} 80%,100%{opacity:0.3} }
@keyframes pendSpin { 0%{transform:rotate(0);opacity:0.55} 100%{transform:rotate(360deg);opacity:0.55} }
@keyframes pendPendFloat { 0%,100%{transform:translateY(0);opacity:0.55} 50%{transform:translateY(-6px);opacity:0.65} }
@keyframes pendVibrate { 0%,100%{transform:translateX(0);opacity:0.55} 20%{transform:translateX(-2px)} 40%{transform:translateX(2px)} 60%{transform:translateX(-1px)} 80%{transform:translateX(1px)} }
[data-anim-pend="heartbeat"] .msg-pending { animation: pendHeartbeat 1s ease-in-out infinite; }
[data-anim-pend="neon"] .msg-pending { animation: pendNeon 2s ease-in-out infinite; }
[data-anim-pend="morse"] .msg-pending { animation: pendMorse 2.5s linear infinite; }
[data-anim-pend="spin"] .msg-pending { animation: pendSpin 3s linear infinite; }
[data-anim-pend="pendfloat"] .msg-pending { animation: pendPendFloat 2s ease-in-out infinite; }
[data-anim-pend="vibrate"] .msg-pending { animation: pendVibrate 0.5s linear infinite; }

/* ---- UTILITY ANIMATIONS (not selectable) ---- */
@keyframes msgAppear { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes msgEditFlash { 0%{box-shadow:0 0 0 0 var(--primary-glow)} 30%{box-shadow:0 0 0 4px var(--primary-glow)} 100%{box-shadow:0 0 0 0 transparent} }
@keyframes msgPopIn { 0%{opacity:0;transform:scale(0.3)} 60%{opacity:1;transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes dateSepIn { from{opacity:0;transform:scaleX(0.7)} to{opacity:1;transform:scaleX(1)} }
@keyframes msgHighlight { 0%{box-shadow:0 0 0 3px var(--primary-glow);background:var(--primary-100)} 100%{box-shadow:none;background:transparent} }

.msg-appear { animation: msgAppear 0.25s ease-out; }
.msg-edited-flash { animation: msgEditFlash 0.6s ease-out; }
.msg-date-sep {
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
    margin: 16px 0 8px;
    animation: dateSepIn 0.3s ease-out;
}
.msg-reaction-new { animation: msgPopIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.msg-highlight { animation: msgHighlight 1.5s ease-out; }

/* Stagger for initial load */
.msg-stagger { animation: msgAppear 0.2s ease-out both; }
.msg-stagger:nth-child(1){animation-delay:0s} .msg-stagger:nth-child(2){animation-delay:.03s}
.msg-stagger:nth-child(3){animation-delay:.06s} .msg-stagger:nth-child(4){animation-delay:.09s}
.msg-stagger:nth-child(5){animation-delay:.12s} .msg-stagger:nth-child(6){animation-delay:.15s}
.msg-stagger:nth-child(7){animation-delay:.18s} .msg-stagger:nth-child(8){animation-delay:.21s}
.msg-stagger:nth-child(9){animation-delay:.24s} .msg-stagger:nth-child(10){animation-delay:.27s}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .msg-new, .msg-new.msg-mine, .msg-new:not(.msg-mine),
    .msg-appear, .msg-deleting, .msg-edited-flash,
    .msg-highlight, .msg-stagger, .msg-date-sep,
    .msg-pending, .msg-reaction-new {
        animation: none !important;
        transition: none !important;
    }
    .msg-deleting { opacity: 0; }
    .msg-pending { opacity: 0.55; }
}

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; text-align: center;
}
.stat-number { font-size: 28px; font-weight: 800; color: var(--primary-400); letter-spacing: -0.02em; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }

/* Loading */
.spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid var(--overlay-strong);
    border-top: 2px solid currentColor;
    border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* No footer in full-screen mode */

/* Responsive */
/* Mobile styles now in mobile.css */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Screenshot protection */
.screenshot-protected {
    -webkit-user-select: none; user-select: none;
}
.screenshot-toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: var(--danger); color: white; padding: 10px 24px;
    border-radius: 24px; font-size: 13px; font-weight: 600;
    z-index: 9999; display: none; box-shadow: var(--shadow-lg);
    animation: toastIn 0.3s ease-out;
}
.screenshot-toast.show { display: block; }
@keyframes toastIn { from { opacity:0; transform: translateX(-50%) translateY(-10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }


/* Emoji-only messages — rendered larger without bubble background */
.msg-emoji-only {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: 2px;
    font-family: var(--font-emoji);
}
.msg-emoji-wrap {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 12px !important;
}
.msg-emoji-wrap .msg-actions { opacity: 0; }
.msg-emoji-wrap:hover .msg-actions { opacity: 1; }

@media (hover: none) and (pointer: coarse) {
    .msg .msg-actions { display: flex; opacity: 0.4; }
    .msg .msg-actions:active { opacity: 1; }
    .msg-action-btn { width: 32px; height: 32px; }
}

/* Pulse highlight animation for scroll-to-message */
@keyframes msg-pulse {
    0%   { box-shadow: 0 0 0 0 var(--border-focus); }
    30%  { box-shadow: 0 0 0 8px var(--primary-glow); }
    60%  { box-shadow: 0 0 0 4px var(--primary-100); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.msg-highlight-pulse {
    animation: msg-pulse 1.2s ease-out;
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
    border-radius: 16px;
}
.msg-highlight-pulse.msg-theirs {
    outline-color: var(--primary-400);
}

/* Links clicables dentro de mensajes */
.msg-link {
    color: #38bdf8;
    text-decoration: underline;
    text-decoration-color: rgba(56, 189, 248, 0.4);
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    word-break: break-all;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: none;
    padding-bottom: 0;
}
.msg-link::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 3px;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,104a8,8,0,0,1-16,0V59.31l-98.34,98.35a8,8,0,0,1-11.32-11.32L196.69,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z'/%3E%3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,104a8,8,0,0,1-16,0V59.31l-98.34,98.35a8,8,0,0,1-11.32-11.32L196.69,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z'/%3E%3C/svg%3E") no-repeat center/contain;
    opacity: 0.7;
}
.msg-link:hover {
    color: #7dd3fc;
    text-decoration-color: #7dd3fc;
}
.msg-mine .msg-link {
    color: #93c5fd;
    text-decoration-color: rgba(147, 197, 253, 0.5);
}
.msg-mine .msg-link:hover {
    color: #bfdbfe;
    text-decoration-color: #bfdbfe;
}

/* Light theme: links need darker colors for contrast on light backgrounds */
[data-theme="light"] .msg-link,
[data-theme="system"] .msg-link {
    color: #0369a1;
    text-decoration-color: rgba(3, 105, 161, 0.4);
}
[data-theme="light"] .msg-link:hover,
[data-theme="system"] .msg-link:hover {
    color: #0284c7;
    text-decoration-color: #0284c7;
}
[data-theme="light"] .msg-mine .msg-link,
[data-theme="system"] .msg-mine .msg-link {
    color: #075985;
    text-decoration-color: rgba(7, 89, 133, 0.5);
}
[data-theme="light"] .msg-mine .msg-link:hover,
[data-theme="system"] .msg-mine .msg-link:hover {
    color: #0c4a6e;
    text-decoration-color: #0c4a6e;
}

/* Scroll-to-message highlight animation */
.msg-highlight {
    animation: msgHighlight 2s ease-out;
}
@keyframes msgHighlight {
    0%, 20% { background: rgba(127, 119, 221, 0.2); border-radius: var(--radius); }
    100% { background: transparent; }
}