/* live_consultation.css
   ───────────────────────
   Shared styling for every Live Consultation page (seeker directory,
   astrologer dashboard, and the /live-consultation/test redirector).
   Layered on top of vachmi_jyotish_style.css, which supplies the shared
   site chrome (navbar, footer, .content-section panels, .page-title,
   .jyotish_button, night-sky body background) -- this file only adds the
   astrologer directory / chat / call layout that doesn't exist anywhere
   else on the site yet. */

#lc-status-line { font-size: 0.9rem; color: #ddd; min-height: 1.3em; margin-top: 6px; }
#lc-status-line.error { color: #ff9caf; }
[hidden] { display: none !important; }

/* ── Astrologer directory: a grid of cards (multiple per row on wider
   screens, auto-collapsing to one per row on narrow ones), each card
   itself split into a square photo/initials block (left) and the
   astrologer's details (right); the online/busy status dot is pinned to
   the card's own top-right corner. Modeled on the reference site's
   talk-to-astrologer list layout. ────────────────────────────────────── */
.astrologer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 10px;
    width: 100%;
}
/* 2026-09: redesigned as a full-bleed photo card -- the astrologer's
   photo (or initials, when there's no photo_url) fills the entire card
   as a background layer, darkened so white text stays readable over any
   photo, with the name/rating/specialization/languages/rate/actions
   overlaid on a dark scrim across the bottom half. .avatar and .details
   are both position:absolute children stacked on top of the image via
   z-index, rather than the old side-by-side thumbnail+text layout. */
.astrologer-card {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 320px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.475);
    border-radius: 10px;
    background: #1a1a2e;
}
.astrologer-card .status-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #1a1a2e;
    z-index: 3;
}
/* Green = online and free right now; light red = currently busy with
   another session (still bookable -- a new session just queues behind
   it, see the status-label text). */
.status-dot.online { background: #3ddc84; }
.status-dot.busy { background: #ff6b6b; }
.astrologer-card .avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    /* Slightly darkens the photo (or the initials-fallback's background
       color) so the white overlay text in .details stays readable
       regardless of what's in the photo -- kept light (close to 1) so the
       image itself still reads as bright, not murky. */
    filter: brightness(0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    z-index: 1;
}
.astrologer-card .details {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    /* Fades from solid black at the very bottom up to transparent, so
       the scrim only darkens the lower half of the photo where the text
       actually sits. Lightened from the original (0.92/0.65) so the photo
       stays visibly brighter behind the text. */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0) 100%);
    color: #fff;
}
.astrologer-card .name { font-weight: 700; font-size: 1rem; margin-bottom: 2px; color: #fff; }
/* Only ever rendered for the busy case now -- see renderDirectory() in
   seeker.html -- the dot alone conveys plain "online". */
.astrologer-card .status-label { font-size: 0.74rem; margin-bottom: 6px; }
.status-label.busy { color: #ff9b9b; }
.astrologer-card .rating { font-size: 0.8rem; color: #fff; margin-bottom: 4px; }
.astrologer-card .rating .stars { color: #fff; }
.astrologer-card .rating .experience { color: #fff; }
.astrologer-card .meta-line {
    font-size: 0.78rem;
    color: #fff;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.astrologer-card .rate { font-weight: 700; color: #fff; font-size: 0.88rem; margin: 6px 0 8px; }
/* All 3 mode buttons (chat/voice/video) always stay on one row -- on
   laptop AND on mobile -- rather than wrapping to a second line.
   flex-wrap:nowrap + flex:1/min-width:0 on each button lets them shrink
   evenly to fit whatever width the card has, with ellipsis as a safety
   net on the very narrowest phones instead of wrapping. */
.astrologer-card .action-row { display: flex; gap: 5px; flex-wrap: nowrap; }
.astrologer-card .action-row .jyotish_button {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 7px 4px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    /* .jyotish_button (vachmi_jyotish_style.css) is display:inline-flex
       with default justify-content:flex-start, so its label sits at the
       left edge of the (flex-stretched) button -- text-align:center above
       has no effect on flex children. Re-centering here, scoped to cards,
       so the label is centered without touching the shared button class
       used elsewhere on the site. */
    justify-content: center;
}
.empty-note { color: #ddd; font-size: 0.9rem; text-align: center; padding: 24px 0; width: 100%; }

@media (max-width: 480px) {
    .astrologer-card .details { padding: 10px; }
    .astrologer-card .action-row { gap: 4px; }
    .astrologer-card .action-row .jyotish_button { padding: 6px 2px; font-size: 10.5px; }
}

/* ── Astrologer's own controls ───────────────────────────────────────── */
.astrologer-controls-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Chat panel ───────────────────────────────────────────────────────── */
#transcript {
    height: 300px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 12px;
    font-size: 0.9rem;
    width: 100%;
}
.msg { margin-bottom: 8px; }
.msg .who { font-weight: 700; margin-right: 6px; }
.msg.user .who { color: #7ad0ff; }
.msg.astrologer .who { color: #FA812F; }
.msg.system .who { color: #ccc; }
.msg .when { color: #999; font-size: 0.75rem; margin-left: 6px; }
.chat-input { display: flex; gap: 8px; margin-top: 12px; width: 100%; }
.chat-input input {
    flex: 1;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px;
    color: #fff;
}
.chat-input input:disabled { opacity: 0.5; cursor: not-allowed; }

.rating-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.15); width: 100%; }
.star-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #666;
    cursor: pointer;
    padding: 2px 4px;
    margin: 0;
}
.star-btn.selected, .star-btn:hover { color: #FA812F; }
.rating-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    padding: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    margin: 8px 0;
    resize: vertical;
    min-height: 50px;
}

/* ── Session page: video column (left) + chat column (right), stacking
   to a single column (video on top) on narrow screens -- same
   flex-collapse trick as the old .lc-columns: when #call-panel is
   `hidden` (chat-only sessions), .session-chat-col automatically expands
   to fill the row alone, no extra rule needed. ─────────────────────── */
/* width:100% is required, not decorative -- #chat-panel is a
   .content-section, and the site's .content-section { display:flex;
   flex-wrap:wrap; } rule means a direct child (this div) would otherwise
   just shrink-to-fit instead of taking the full row, same flexbox quirk
   documented throughout this feature's other panels. */
.session-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}
.session-columns > .call-panel { flex: 1 1 380px; margin: 0; }
.session-columns > .session-chat-col { flex: 1 1 420px; min-width: 0; }

/* ── Call panel: other party gets the big pane, local self-view is a
   small picture-in-picture overlay, matching standard video call apps. ── */
.call-controls-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.call-videos { position: relative; margin-top: 0; }
.call-videos.voice-mode .video-box { display: none; }
.call-videos .video-box { background: #000; border-radius: 8px; overflow: hidden; }
.call-videos .video-remote-wrap .video-box { width: 100%; height: 340px; }
.call-videos .video-local-wrap { position: absolute; bottom: 10px; right: 10px; width: 120px; }
.call-videos .video-local-wrap .video-box { width: 120px; height: 90px; border: 2px solid #1a1a2e; border-radius: 6px; }
.call-videos .video-local-wrap .video-label { display: none; }
.call-videos .video-box video { width: 100%; height: 100%; object-fit: cover; }
.call-videos .video-label { font-size: 0.78rem; color: #ccc; margin-top: 2px; }

/* ── Time spent + credits strip. Two copies exist in the markup (see
   _chat_panel.html): one below the video for voice/video sessions, one
   in the chat column for chat-only sessions -- only one is ever visible
   at a time (see .lc-session-meta-chat below), so the numbers are never
   shown twice at once. ───────────────────────────────────────────────── */
.lc-session-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    color: #ddd;
}
.lc-session-meta .lc-call-timer { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.lc-session-meta .lc-credits-used { color: #FA812F; font-weight: 600; }
.lc-session-meta .lc-credits-balance { color: #7ee6a0; }

/* The chat-column copy is only relevant when there's no video panel to
   put it below -- hidden by default, shown only in chat-only mode (see
   lcOpenChat() in live_consultation_common.js, which sets this class on
   #chat-panel from the session's mode). */
.lc-session-meta-chat { display: none; margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 12px; }
#chat-panel.mode-chat .lc-session-meta-chat { display: flex; }