/* ══════════════════════════════════════════════════════════════════
   CINEHUB WATCH ROOM — watchroom.css
   Add to index.html: <link rel="stylesheet" href="css/watchroom.css">
══════════════════════════════════════════════════════════════════ */

/* ── Toggle button (always visible when in a room) ─────────────── */
#wr-toggle {
    position:        fixed;
    bottom:          5rem;
    right:           1rem;
    z-index:         999990;
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      var(--accent-cyan);
    color:           var(--bg-deep);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 20px rgba(0,210,245,0.45);
    transition:      transform 0.2s ease, box-shadow 0.2s ease;
}
#wr-toggle:hover {
    transform:  scale(1.1);
    box-shadow: 0 6px 28px rgba(0,210,245,0.6);
}

/* Unread badge */
.wr-unread {
    position:        absolute;
    top:             -4px;
    right:           -4px;
    min-width:       18px;
    height:          18px;
    padding:         0 4px;
    background:      var(--accent-red);
    color:           #fff;
    border-radius:   999px;
    font-size:       0.65rem;
    font-weight:     800;
    align-items:     center;
    justify-content: center;
    border:          2px solid var(--bg-deep);
}

/* ── Overlay (mobile) ───────────────────────────────────────────── */
#wr-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.6);
    z-index:    999991;
    backdrop-filter: blur(3px);
}
#wr-overlay.open { display: block; }

/* ── Drawer — desktop: fixed right panel ────────────────────────── */
#wr-drawer {
    position:       fixed;
    top:            0;
    right:          0;
    bottom:         0;
    width:          340px;
    background:     rgba(10,13,24,0.98);
    border-left:    1px solid rgba(255,255,255,0.07);
    z-index:        999992;
    display:        flex;
    flex-direction: column;
    transform:      translateX(100%);
    transition:     transform 0.28s cubic-bezier(0.4,0,0.2,1);
    box-shadow:     -8px 0 40px rgba(0,0,0,0.5);
}
#wr-drawer.open { transform: translateX(0); }

/* Push main content when panel is open on desktop */
@media (min-width: 769px) {
    #wr-drawer.open ~ #app-content,
    body:has(#wr-drawer.open) .main-content {
        margin-right: 340px;
        transition:   margin-right 0.28s cubic-bezier(0.4,0,0.2,1);
    }
}

/* ── Header ─────────────────────────────────────────────────────── */
.wr-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.85rem 1rem;
    border-bottom:   1px solid rgba(255,255,255,0.07);
    flex-shrink:     0;
    background:      rgba(15,19,32,0.95);
}
.wr-header-left {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    min-width:   0;
}
.wr-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--accent-cyan);
    flex-shrink:   0;
    animation:     wrPulse 2s ease-in-out infinite;
}
@keyframes wrPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,210,245,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(0,210,245,0); }
}
.wr-title {
    font-size:   0.82rem;
    font-weight: 700;
    color:       var(--accent-cyan);
    flex-shrink: 0;
}
.wr-movie-name {
    font-size:     0.72rem;
    color:         var(--text-med);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.wr-header-right {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    flex-shrink: 0;
}
.wr-share-btn {
    display:      flex;
    align-items:  center;
    gap:          0.3rem;
    padding:      0.3rem 0.65rem;
    background:   rgba(0,210,245,0.1);
    color:        var(--accent-cyan);
    border:       1px solid rgba(0,210,245,0.25);
    border-radius: 6px;
    font-size:    0.72rem;
    font-weight:  700;
    cursor:       pointer;
    font-family:  var(--font-body);
    transition:   all 0.15s;
}
.wr-share-btn:hover { background: rgba(0,210,245,0.2); }

.wr-leave-btn {
    padding:      0.3rem 0.65rem;
    background:   rgba(229,57,53,0.1);
    color:        var(--accent-red);
    border:       1px solid rgba(229,57,53,0.2);
    border-radius: 6px;
    font-size:    0.72rem;
    font-weight:  700;
    cursor:       pointer;
    font-family:  var(--font-body);
    transition:   all 0.15s;
    white-space:  nowrap;
}
.wr-leave-btn:hover { background: rgba(229,57,53,0.2); }

/* ── Host / Viewer badge ────────────────────────────────────────── */
.wr-host-badge, .wr-viewer-badge {
    display:      flex;
    align-items:  center;
    gap:          0.4rem;
    padding:      0.45rem 1rem;
    font-size:    0.72rem;
    font-weight:  600;
    flex-shrink:  0;
}
.wr-host-badge {
    background: rgba(255,179,0,0.08);
    color:      var(--accent-gold);
    border-bottom: 1px solid rgba(255,179,0,0.15);
}
.wr-viewer-badge {
    background: rgba(0,210,245,0.06);
    color:      var(--accent-cyan);
    border-bottom: 1px solid rgba(0,210,245,0.1);
}

/* ── Share link row ─────────────────────────────────────────────── */
.wr-link-row {
    display:  flex;
    gap:      0.4rem;
    padding:  0.6rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.wr-link-input {
    flex:         1;
    background:   rgba(255,255,255,0.05);
    border:       1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding:      0.4rem 0.6rem;
    color:        var(--text-med);
    font-size:    0.7rem;
    font-family:  monospace;
    outline:      none;
    min-width:    0;
}
.wr-copy-btn {
    flex-shrink:  0;
    padding:      0.4rem 0.75rem;
    background:   rgba(0,210,245,0.1);
    color:        var(--accent-cyan);
    border:       1px solid rgba(0,210,245,0.2);
    border-radius: 6px;
    font-size:    0.72rem;
    font-weight:  700;
    cursor:       pointer;
    font-family:  var(--font-body);
    transition:   all 0.15s;
}
.wr-copy-btn:hover { background: rgba(0,210,245,0.2); }

/* ── Chat messages area ─────────────────────────────────────────── */
.wr-chat-messages {
    flex:         1;
    overflow-y:   auto;
    padding:      0.75rem 0.85rem;
    display:      flex;
    flex-direction: column;
    gap:          0.6rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.wr-chat-messages::-webkit-scrollbar { width: 3px; }
.wr-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.wr-chat-welcome {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.25rem;
    padding:         1rem;
    text-align:      center;
    color:           var(--text-med);
    font-size:       0.78rem;
}
.wr-chat-welcome-sub {
    font-size:   0.68rem;
    opacity:     0.6;
}

/* ── Message bubble ─────────────────────────────────────────────── */
.wr-msg {
    display:        flex;
    flex-direction: column;
    gap:            0.18rem;
    max-width:      88%;
    align-self:     flex-start;
}
.wr-msg-own { align-self: flex-end; }

.wr-msg-meta {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}
.wr-msg-own .wr-msg-meta { flex-direction: row-reverse; }

.wr-msg-name {
    font-size:   0.65rem;
    font-weight: 700;
    color:       var(--accent-cyan);
}
.wr-msg-own .wr-msg-name { color: var(--accent-gold); }

.wr-msg-time {
    font-size: 0.6rem;
    color:     var(--text-med);
    opacity:   0.6;
}

.wr-msg-text {
    background:   rgba(255,255,255,0.06);
    border:       1px solid rgba(255,255,255,0.07);
    border-radius: 0 10px 10px 10px;
    padding:      0.45rem 0.65rem;
    font-size:    0.82rem;
    line-height:  1.45;
    color:        var(--text-high);
    word-break:   break-word;
}
.wr-msg-own .wr-msg-text {
    background:   rgba(0,210,245,0.12);
    border-color: rgba(0,210,245,0.2);
    border-radius: 10px 0 10px 10px;
}

/* ── Chat input ─────────────────────────────────────────────────── */
.wr-chat-input-row {
    flex-shrink:   0;
    padding:       0.65rem 0.85rem;
    border-top:    1px solid rgba(255,255,255,0.07);
    display:       flex;
    flex-direction: column;
    gap:           0.4rem;
    background:    rgba(10,13,24,0.98);
}
.wr-username-wrap {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
}
.wr-username-label {
    font-size:   0.68rem;
    color:       var(--text-med);
    font-weight: 600;
}
.wr-change-name {
    background:  none;
    border:      none;
    color:       var(--text-med);
    font-size:   0.72rem;
    cursor:      pointer;
    padding:     0;
    opacity:     0.6;
    transition:  opacity 0.15s;
}
.wr-change-name:hover { opacity: 1; }

.wr-input-row {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}
.wr-input {
    flex:         1;
    background:   rgba(255,255,255,0.06);
    border:       1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding:      0.55rem 0.75rem;
    color:        var(--text-high);
    font-size:    0.82rem;
    font-family:  var(--font-body);
    outline:      none;
    transition:   border-color 0.15s;
}
.wr-input:focus { border-color: var(--accent-cyan); }
.wr-input::placeholder { color: rgba(255,255,255,0.25); }

.wr-send-btn {
    width:           36px;
    height:          36px;
    flex-shrink:     0;
    border-radius:   50%;
    background:      var(--accent-cyan);
    color:           var(--bg-deep);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.15s, box-shadow 0.15s;
}
.wr-send-btn:hover {
    transform:  scale(1.08);
    box-shadow: 0 2px 12px rgba(0,210,245,0.4);
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — bottom sheet style
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #wr-toggle {
        bottom: 5.5rem;
        right:  0.75rem;
        width:  44px;
        height: 44px;
    }

    #wr-drawer {
        top:           auto;
        right:         0;
        left:          0;
        bottom:        0;
        width:         100%;
        height:        70vh;
        border-left:   none;
        border-top:    1px solid rgba(255,255,255,0.1);
        border-radius: 20px 20px 0 0;
        transform:     translateY(100%);
        box-shadow:    0 -8px 40px rgba(0,0,0,0.6);
    }
    #wr-drawer.open { transform: translateY(0); }

    /* Pull handle */
    #wr-drawer::before {
        content:       '';
        display:       block;
        width:         40px;
        height:        4px;
        border-radius: 2px;
        background:    rgba(255,255,255,0.15);
        margin:        0.6rem auto 0;
        flex-shrink:   0;
    }

    .wr-movie-name { display: none; }

    .wr-chat-messages { padding: 0.6rem 0.75rem; }
    .wr-chat-input-row { padding: 0.55rem 0.75rem; padding-bottom: calc(0.55rem + env(safe-area-inset-bottom)); }
}

/* ── "Watch Together" button on detail page ─────────────────────── */
.btn-watch-together {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.75rem 1.5rem;
    background:      rgba(0,210,245,0.1);
    color:           var(--accent-cyan);
    border:          1px solid rgba(0,210,245,0.3);
    border-radius:   10px;
    font-size:       0.9rem;
    font-weight:     700;
    cursor:          pointer;
    font-family:     var(--font-body);
    transition:      all 0.2s;
    white-space:     nowrap;
}
.btn-watch-together:hover {
    background:  rgba(0,210,245,0.2);
    border-color: var(--accent-cyan);
    transform:   translateY(-1px);
}
.btn-watch-together svg { flex-shrink: 0; }

/* Mobile full width */
@media (max-width: 768px) {
    .btn-watch-together {
        width:           100%;
        justify-content: center;
    }
}