/* CHAT: Messages, Bubbles, Glitch */
.chat-area { 
    position: relative; display: flex; flex-direction: column;
    background: rgba(0, 0, 0, 0.85); 
    z-index: 5;
    backdrop-filter: blur(10px);
    height: 100vh; 
    height: 100dvh; 
    transition: filter 0.1s;
    /* 3D Stage for Holographic Tilt */
    perspective: 1500px;
}

.sonic-distortion { filter: blur(1px) contrast(1.1); transform: scale(0.995); }

.chat-header {
    height: var(--header-h); padding: 0 20px; display: flex; align-items: center; justify-content: space-between;
    background: rgba(10, 10, 12, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 20;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.chat-title { font-size: 1rem; font-weight: 700; color: #fff; text-shadow: 0 0 10px var(--neon-cyan); }
.back-button { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 10px; margin-left: -10px; }

/* MESSAGES CONTAINER */
.messages-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px;
    display: flex; flex-direction: column; gap: 15px; z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: var(--neon-cyan) transparent;
    transform-style: preserve-3d;
}

/* VOID LOGO (Empty State) */
.void-logo {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    height: 100%; width: 100%; opacity: 0.5; text-align: center;
    pointer-events: none; user-select: none;
    animation: pulseVoid 4s infinite alternate;
}
@keyframes pulseVoid { from { opacity: 0.3; transform: scale(0.95); } to { opacity: 0.6; transform: scale(1.05); } }


.msg-row { 
    display: flex; width: 100%; position: relative; margin-bottom: 12px; 
    transform-style: preserve-3d; 
    transition: transform 0.1s;
    transform: skewY(var(--scroll-skew, 0deg));
}
.msg-row.me { justify-content: flex-end; }
.msg-row.them { justify-content: flex-start; }

.msg-bubble {
    max-width: 85%; padding: 14px 18px; border-radius: 18px;
    position: relative; z-index: 2; 
    word-wrap: break-word; overflow-wrap: break-word;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.1s ease-out, filter 0.1s, box-shadow 0.2s; 
    backface-visibility: hidden; 
    border: 1px solid transparent; 
    backdrop-filter: blur(8px);
}

/* THEM STYLES */
.msg-row.them .msg-bubble { 
    background: rgba(30, 30, 35, 0.85); /* More transparent */
    color: #e0e0e0;
    border-bottom-left-radius: 4px;
    border-color: rgba(255,255,255,0.05);
}

/* ME STYLES */
.msg-row.me .msg-bubble { 
    background: linear-gradient(135deg, rgba(255, 183, 0, 0.8) 0%, rgba(180, 109, 0, 0.8) 100%); 
    color: #fff; font-weight: 500;
    border-color: rgba(255, 183, 0, 0.3);
    border-bottom-right-radius: 4px;
    box-shadow: 0 0 15px rgba(255,183,0,0.1);
}

/* 5. SENTIMENT BORDERS */
.msg-bubble.sentiment-excited { box-shadow: 0 0 15px var(--neon-gold); border-color: var(--neon-gold); }
.msg-bubble.sentiment-curious { box-shadow: 0 0 15px var(--neon-cyan); border-color: var(--neon-cyan); }
.msg-bubble.sentiment-danger { box-shadow: 0 0 15px var(--neon-fire); border-color: var(--neon-fire); }
.msg-bubble.sentiment-positive { box-shadow: 0 0 15px var(--neon-emerald); border-color: var(--neon-emerald); }

.msg-content { line-height: 1.5; }

/* FIX: Ensure decrypting class is the ONLY one setting the color */
.msg-content.decrypting { 
    font-family: 'Courier New', monospace; 
    color: var(--neon-cyan); 
    text-shadow: 0 0 5px var(--neon-cyan); 
}

/* FOOTER & ACTIONS */
.msg-footer {
    margin-top: 6px; display: flex; align-items: center; justify-content: space-between;
}

.msg-time { 
    font-size: 0.65rem; opacity: 0.6; 
    font-family: monospace; letter-spacing: 1px;
}

.msg-actions {
    display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s;
}
.msg-bubble:hover .msg-actions { opacity: 1; }

.action-btn {
    background: rgba(255,255,255,0.1); border: none;
    color: inherit; border-radius: 4px; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; cursor: pointer;
}
.action-btn:hover { background: rgba(255,255,255,0.3); }

/* LAYOUT FIX: Code Blocks */
.msg-content pre {
    background: rgba(0, 0, 0, 0.7);
    padding: 10px; border-radius: 6px;
    overflow-x: auto; max-width: 100%; 
    font-family: 'Courier New', monospace; font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.1); position: relative;
}
.msg-content code { font-family: inherit; color: var(--neon-cyan); }
.msg-row.me .msg-content code { color: #000; font-weight: bold; }

.code-copy-btn {
    position: absolute; top: 5px; right: 5px;
    background: rgba(255,255,255,0.1); color: #fff;
    border: none; border-radius: 4px; font-size: 0.7rem;
    cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
}
.msg-content pre:hover .code-copy-btn { opacity: 1; }

/* GHOST BUBBLE (Broadcast Typing) */
.ghost-row { opacity: 0.8; }
.ghost-bubble {
    background: transparent !important;
    border: 1px dashed var(--neon-cyan) !important;
    color: var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2) !important;
}

/* SWIPE WRAPPER - UPDATED */
.swipe-wrapper {
    display: flex; align-items: center; position: relative; 
    touch-action: pan-y; width: 100%;
    transform-style: preserve-3d;
}

/* FIXED: Alignment for ME vs THEM within the wrapper */
.msg-row.me .swipe-wrapper { justify-content: flex-end; }
.msg-row.them .swipe-wrapper { justify-content: flex-start; }

.swipe-wrapper.swiping { user-select: none; -webkit-user-select: none; }

.swipe-icon {
    width: auto; height: 30px; border-radius: 15px; padding: 0 12px;
    background: var(--neon-gold); color: #000; font-weight: bold; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%) scale(0.5);
    opacity: 0; transition: transform 0.2s; z-index: 1; pointer-events: none;
    box-shadow: 0 0 10px var(--neon-gold);
    white-space: nowrap;
}
.msg-row.them .swipe-icon { left: -80px; } 
.msg-row.me .swipe-icon { right: -80px; }

/* 6. TIMELINE SCRUBBER */
.time-scrubber {
    position: absolute; right: 2px; top: 60px; bottom: 20px; width: 10px;
    z-index: 50; border-right: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
}
.time-scrubber:hover { border-right-color: var(--neon-cyan); }

.time-dot {
    position: absolute; right: 0; width: 6px; height: 6px; border-radius: 50%;
    transform: translate(50%, -50%);
    box-shadow: 0 0 4px currentColor; opacity: 0.7; pointer-events: none;
}

/* GLITCH ENTRY */
.glitch-entry { animation: glitchSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
@keyframes glitchSlide {
    0% { transform: translateY(20px) skewX(20deg); opacity: 0; filter: hue-rotate(90deg) blur(5px); }
    100% { transform: translateY(0) skewX(0); opacity: 1; filter: none; }
}

/* IFRAME PREVIEW */
.iframe-wrapper {
    margin-top: 10px; border: 1px solid var(--neon-emerald);
    border-radius: 6px; overflow: hidden; background: #000;
}
.iframe-label {
    background: var(--neon-emerald); color: #000;
    font-size: 0.6rem; padding: 2px 6px; font-weight: bold; font-family: monospace;
}
.code-iframe {
    width: 100%; height: 300px; border: none; background: #fff; display: block;
}

/* CONTEXT MENU */
.context-menu {
    position: fixed; z-index: 10000;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid var(--neon-cyan); border-radius: 8px;
    padding: 6px 0; width: 200px;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
    backdrop-filter: blur(10px);
    animation: menuPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes menuPop { from{opacity:0; transform:scale(0.8);} to{opacity:1; transform:scale(1);} }

.ctx-item {
    padding: 10px 16px; color: #fff; cursor: pointer; font-size: 0.9rem; transition: background 0.2s;
}
.ctx-item:hover { background: rgba(6, 182, 212, 0.2); }
.ctx-separator { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; }
.ctx-danger { color: var(--neon-fire); }
.ctx-danger:hover { background: rgba(239, 68, 68, 0.2); }

@media (max-width: 850px) {
    .chat-area { 
        position: fixed; inset: 0; transform: translateX(100%); 
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        background: #000; height: 100dvh; 
    }
    .app-container.view-chat .chat-area { transform: translateX(0); }
    .back-button { display: block; }
    .msg-actions { opacity: 1; } /* Always show actions on mobile */
    .msg-bubble { max-width: 90%; }
}