/* ==========================================================================
   TK - Live with Tim · Frontend CSS — True single line + rich expanded state
   ========================================================================== */

:root {
    /* ---- Plum palette (upcoming / default) ----
       deep plum  #6e4a63  ·  bar bg #efe6ec  ·  icon #5e3e54
       title #4a3043  ·  muted #7a5a70 */
    --lwtim-card-bg:           #efe6ec;
    --lwtim-card-border:       #6e4a63;
    --lwtim-bar-icon:          #5e3e54;
    --lwtim-eyebrow:           #5e3e54;
    --lwtim-bar-dot:           rgba(94,62,84,0.40);
    --lwtim-title:             #4a3043;
    --lwtim-date:              #1e120a;
    --lwtim-countdown:         #7a5a70;
    --lwtim-teaser:            #7a5a70;
    --lwtim-zoom-ctx:          #7a5a70;
    --lwtim-btn-ask-bg:        #6e4a63;
    --lwtim-btn-ask-color:     #faf6f9;
    --lwtim-btn-cal-color:     #5e3e54;
    --lwtim-btn-cal-border:    rgba(94,62,84,0.30);
    --lwtim-ask-badge-bg:      rgba(250,246,249,0.25);
    --lwtim-ask-badge-color:   #faf6f9;
    --lwtim-cal-menu-bg:       #faf6f9;
    --lwtim-zoom-live-bg:      #c0492f;
    --lwtim-zoom-soon-bg:      #7c8a3f;
    /* ---- Live state (terracotta) ---- */
    --lwtim-live-bg:           #f7ddd5;
    --lwtim-live-icon:         #c0492f;
    --lwtim-live-eyebrow:      #a83b25;
    --lwtim-live-countdown:    #a83b25;
    --lwtim-live-btn-ask-bg:   #c0492f;
    /* ---- Expanded panel / form ---- */
    --lwtim-panel-bg:          #e7dae2;
    --lwtim-panel-border:      rgba(94,62,84,0.13);
    --lwtim-input-border:      rgba(94,62,84,0.25);
    --lwtim-input-bg:          #faf6f9;
    --lwtim-submit-bg:         #6e4a63;
    --lwtim-submit-color:      #faf6f9;
    --lwtim-msg-success:       #1D9E75;
    --lwtim-msg-error:         #c0492f;
}

.lwtim-banner {
    background: var(--lwtim-card-bg);
    border-radius: 8px;
    overflow: visible;
    font-family: 'DM Sans', sans-serif;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.lwtim-banner * { box-sizing: border-box; }

.lwtim-banner.lwtim-live { background: var(--lwtim-live-bg); }

/* ------------------------------------------------------------------
   The single line
   ------------------------------------------------------------------ */

.lwtim-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    min-height: 56px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.lwtim-bar-icon {
    font-size: var(--text-s, 15px);
    color: var(--lwtim-bar-icon);
    line-height: 1;
    flex-shrink: 0;
}

.lwtim-live .lwtim-bar-icon { color: var(--lwtim-live-icon); }

.lwtim-bar-title {
    font-size: var(--text-s, 15px);
    font-weight: 700;
    color: var(--lwtim-title);
    white-space: nowrap;
    flex-shrink: 0;
}

.lwtim-live .lwtim-bar-title { color: var(--lwtim-live-eyebrow); }

.lwtim-bar-dot {
    font-size: var(--text-s, 15px);
    color: var(--lwtim-bar-dot);
    flex-shrink: 0;
}

.lwtim-bar-date {
    font-size: var(--text-s, 15px);
    font-weight: 600;
    color: var(--lwtim-date);
    white-space: nowrap;
    flex-shrink: 0;
}

.lwtim-bar-cd {
    font-size: var(--text-xs, 13px);
    font-weight: 600;
    color: var(--lwtim-countdown);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    background: rgba(94,62,84,0.10);
    padding: 1px 8px;
    border-radius: 20px;
}

.lwtim-live .lwtim-bar-cd { color: var(--lwtim-live-countdown); background: rgba(192,73,47,0.14); }

.lwtim-bar-spacer { flex: 1; min-width: 8px; }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.lwtim-btn {
    font-size: var(--text-xs, 13px);
    font-weight: 600;
    border-radius: 5px;
    padding: 5px 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    line-height: 1.3;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.lwtim-btn:hover { opacity: 0.82; text-decoration: none; }
.lwtim-btn i     { font-size: var(--text-xs, 13px); }

.lwtim-btn-ask  { background: var(--lwtim-btn-ask-bg); color: var(--lwtim-btn-ask-color); }
.lwtim-live .lwtim-btn-ask { background: var(--lwtim-live-btn-ask-bg); }

.lwtim-ask-chev { transition: transform 0.2s ease; }
.lwtim-btn-ask[aria-expanded="true"] .lwtim-ask-chev { transform: rotate(180deg); }

.lwtim-btn-cal {
    background: transparent;
    color: var(--lwtim-btn-cal-color);
    border: 1px solid var(--lwtim-btn-cal-border);
    font-weight: 500;
}

.lwtim-btn-zoom      { background: var(--lwtim-zoom-live-bg); color: #fff; }
.lwtim-btn-zoom-soon { background: var(--lwtim-zoom-soon-bg); color: #fff; }

.lwtim-ask-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--lwtim-ask-badge-bg);
    color: var(--lwtim-ask-badge-color);
    border-radius: 20px;
    padding: 0 5px;
    line-height: 15px;
}

/* ------------------------------------------------------------------
   Expanded panel — popover anchored to the banner
   ------------------------------------------------------------------ */

/* Backdrop: dims page + catches outside clicks. Toggled by JS. */
.lwtim-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31,18,10,0.18);
    z-index: 9998;
}
.lwtim-backdrop.lwtim-backdrop-open { display: block; }

.lwtim-question-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 420px;
    max-width: calc(100vw - 28px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: var(--lwtim-panel-bg);
    border: 0.5px solid var(--lwtim-panel-border);
    border-radius: 10px;
    padding: 14px;
    z-index: 9999;
    box-shadow: 0 14px 44px rgba(40,22,38,0.3);
    -webkit-overflow-scrolling: touch;
}

/* little arrow pointing up to the button */
.lwtim-question-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 60px;
    width: 13px;
    height: 13px;
    background: var(--lwtim-panel-bg);
    border-left: 0.5px solid var(--lwtim-panel-border);
    border-top: 0.5px solid var(--lwtim-panel-border);
    transform: rotate(45deg);
}

.lwtim-live .lwtim-question-panel {
    background: var(--lwtim-live-bg);
    border-color: rgba(192,73,47,0.22);
}
.lwtim-live .lwtim-question-panel::before {
    background: var(--lwtim-live-bg);
    border-color: rgba(192,73,47,0.22);
}

.lwtim-question-panel.lwtim-panel-open {
    display: block;
    animation: lwtim-in 0.16s ease;
}

@keyframes lwtim-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Detail block — the richer info shown only when expanded */
.lwtim-detail {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lwtim-panel-border);
}

.lwtim-detail-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-xs, 13px);
    color: #1e120a;
    margin-bottom: 5px;
}

.lwtim-detail-line i { font-size: var(--text-xs, 13px); color: #7a5a70; flex-shrink: 0; }

.lwtim-detail-teaser { color: var(--lwtim-teaser); font-style: italic; }

.lwtim-detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 9px;
    flex-wrap: wrap;
}

.lwtim-zoom-ctx {
    font-size: var(--text-2xs, 11px);
    color: var(--lwtim-zoom-ctx);
    display: flex;
    align-items: center;
    gap: 5px;
}

.lwtim-zoom-ctx i { font-size: var(--text-xs, 13px); }

/* Calendar dropdown */
.lwtim-cal-wrap { position: relative; }

.lwtim-cal-menu {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    background: var(--lwtim-cal-menu-bg);
    border: 0.5px solid rgba(94,62,84,0.18);
    border-radius: 6px;
    min-width: 165px;
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}

.lwtim-cal-menu.lwtim-cal-open { display: block; }

.lwtim-cal-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-size: var(--text-xs, 13px);
    color: #1e120a;
    text-decoration: none;
    border-bottom: 0.5px solid rgba(94,62,84,0.10);
    transition: background 0.1s;
}

.lwtim-cal-opt:last-child { border-bottom: none; }
.lwtim-cal-opt:hover      { background: #e7dae2; text-decoration: none; color: #1e120a; }
.lwtim-cal-opt i          { font-size: var(--text-xs, 13px); color: #7a5a70; }

/* Submit form */
.lwtim-submit-form { margin-bottom: 12px; }

.lwtim-question-input {
    width: 100%;
    border: 1px solid var(--lwtim-input-border);
    border-radius: 5px;
    background: var(--lwtim-input-bg);
    padding: 8px 10px;
    font-size: var(--text-xs, 13px);
    font-family: 'DM Sans', sans-serif;
    resize: vertical;
    box-sizing: border-box;
    color: #1e120a;
}

.lwtim-question-input:focus { outline: none; border-color: var(--lwtim-card-border); }

.lwtim-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.lwtim-char-count                  { font-size: var(--text-2xs, 11px); color: #7a5a70; }
.lwtim-char-count.lwtim-char-warn  { color: #c0492f; }

.lwtim-submit-btn {
    background: var(--lwtim-submit-bg);
    color: var(--lwtim-submit-color);
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: var(--text-xs, 13px);
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: opacity 0.15s;
}

.lwtim-submit-btn:hover    { opacity: 0.85; }
.lwtim-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.lwtim-submit-msg                    { font-size: var(--text-2xs, 11px); margin-top: 5px; min-height: 16px; }
.lwtim-submit-msg.lwtim-msg-success  { color: var(--lwtim-msg-success); }
.lwtim-submit-msg.lwtim-msg-error    { color: var(--lwtim-msg-error); }

/* Questions list */
.lwtim-empty {
    font-size: var(--text-xs, 13px);
    color: #7a5a70;
    font-style: italic;
    margin: 0;
}

.lwtim-q-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lwtim-q-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #faf6f9;
    border: 0.5px solid rgba(94,62,84,0.12);
    border-radius: 5px;
    padding: 9px 12px;
    position: relative;
}

.lwtim-q-item.lwtim-asked-live { border-left: 2px solid #c0492f; }

.lwtim-upvote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 26px;
}

.lwtim-upvote-btn {
    background: none;
    border: 1px solid rgba(94,62,84,0.22);
    color: #7a5a70;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}

.lwtim-upvote-btn:hover         { border-color: #6e4a63; color: #6e4a63; }
.lwtim-upvote-btn.lwtim-upvoted { background: #6e4a63; border-color: #6e4a63; color: #faf6f9; }
.lwtim-upvote-count             { font-size: 11px; color: #7a5a70; font-variant-numeric: tabular-nums; }

.lwtim-q-body { flex: 1; min-width: 0; }

.lwtim-q-text {
    font-size: var(--text-xs, 13px);
    color: #1e120a;
    margin: 0 0 3px;
    line-height: 1.45;
    word-break: break-word;
}

.lwtim-q-meta   { display: flex; align-items: center; gap: 6px; }
.lwtim-q-author { font-size: var(--text-2xs, 11px); color: #7a5a70; }

.lwtim-live-badge {
    font-size: 10px;
    background: rgba(192,73,47,0.10);
    color: #c0492f;
    border: 0.5px solid rgba(192,73,47,0.25);
    border-radius: 3px;
    padding: 1px 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.lwtim-delete-btn {
    background: none;
    border: none;
    color: #7a5a70;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
    flex-shrink: 0;
    align-self: flex-start;
}

.lwtim-q-item:hover .lwtim-delete-btn { opacity: 1; }
.lwtim-delete-btn:hover                { color: #c0492f; }

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

/* Tablet / narrow desktop: let the bar wrap, popover stays anchored */
@media (max-width: 760px) {
    .lwtim-bar { flex-wrap: wrap; min-height: 0; padding: 10px 14px; gap: 6px 8px; }
    .lwtim-bar-spacer { flex-basis: 100%; height: 0; }
    .lwtim-btn-ask { margin-left: auto; }
    .lwtim-btn-zoom, .lwtim-btn-zoom-soon { margin-left: 0; }
}

/* Phones: popover becomes a fixed bottom sheet, full width */
@media (max-width: 560px) {
    .lwtim-bar { padding: 10px 12px; }
    .lwtim-bar-date { font-size: var(--text-xs, 13px); }
    .lwtim-bar-title { font-size: var(--text-xs, 13px); }

    .lwtim-question-panel,
    .lwtim-live .lwtim-question-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 82vh;
        border-radius: 14px 14px 0 0;
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
        animation: lwtim-sheet-in 0.2s ease;
    }
    /* no arrow on the bottom sheet */
    .lwtim-question-panel::before { display: none; }

    /* grab handle at the top of the sheet */
    .lwtim-question-panel::after {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 4px;
        background: rgba(94,62,84,0.30);
    }
    .lwtim-detail { margin-top: 8px; }

    .lwtim-detail-actions { gap: 8px; }
    .lwtim-cal-menu { left: 0; right: auto; }
}

@keyframes lwtim-sheet-in {
    from { opacity: 0.6; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}