/* ─── App Card ──────────────────────────────────────────────────────────────── */
/* Extends .card (global.css) with software-page-specific layout.               */
/* Border + background gradient use the --live-* vars set per-card in global.   */
.app-card {
    border-radius: 12px;
    padding: 24px;
    gap: 0;
    transition: border-color 0.2s;
    border-color: var(--live-solid);
    background: linear-gradient(160deg, rgba(var(--live-rgb), 0.07) 0%, var(--surface) 55%);
}


/* ─── App Logo ───────────────────────────────────────────────────────────────── */
.app-logo {
    width: calc(100% - 32px);
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 16px;
}

/* ─── Card Desc — software override ─────────────────────────────────────────── */
.app-card .card-desc {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ─── Feature List ───────────────────────────────────────────────────────────── */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.feature-list li {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 5px 0 5px 18px;
    position: relative;
    border-bottom: 1px solid rgba(48,54,61,0.5);
    line-height: 1.4;
}

.feature-list li:last-child { border-bottom: none; }

.feature-list li::before {
    content: '·';
    position: absolute;
    left: 4px;
    font-size: 1.2rem;
    line-height: 1;
    top: 4px;
}

/* Bullet accent — uses the card's --live-solid brand color. */
.feature-list li::before { color: var(--live-solid); }

/* ─── Not-Available Button ──────────────────────────────────────────────────── */
/* Base .dl-unavailable state (cursor/opacity) lives in global.css. This file   */
/* only defines the custom .dl-na row + tooltip used on the software page.      */
/* CTA row — transparent, dashed border, whole row is the hover target. */
.dl-na {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px dashed rgba(128,128,128,0.35);
    width: 100%;
    cursor: help;
    transition: border-color 0.15s, color 0.15s;
}

.dl-na:hover {
    border-color: rgba(128,128,128,0.6);
    color: var(--text);
}

/* Info icon — small circle with "i", decorative only */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(128,128,128,0.3);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    flex-shrink: 0;
}

/* Tooltip — appears above the row on hover/focus */
.info-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
    z-index: 200;
    white-space: normal;
    text-align: left;
    pointer-events: none;
}

.dl-na:hover .info-tooltip,
.dl-na:focus .info-tooltip { display: block; }

/* ─── Card Manual Link ──────────────────────────────────────────────────────── */
/* Small inline link from a card to its manual on the content page.             */
.card-manual-link {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}
.card-manual-link a { color: var(--text-muted); text-decoration: underline; }
.card-manual-link a:hover { color: var(--text); }

/* ─── Version Note Code ─────────────────────────────────────────────────────── */
.app-card .version-note code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    background: var(--tag-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.76rem;
    color: #93c5fd;
}

/* ─── Support Page ──────────────────────────────────────────────────────────── */
.support-intro {
    text-align: center;
    margin-bottom: 40px;
}

.support-intro h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.support-intro p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.chat-card {
    max-width: 860px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.chat-card p {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* LHC widget overrides — keep below sticky header */
#lhc_status_container_page { margin-top: 0; }
#lhc_status_container_page,
#lhc_status_container_page * { z-index: 100 !important; }

.lhc-start-chat-form {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-radius: 8px;
    padding: 15px;
}
.lhc-start-chat-form label { color: #111827 !important; }
.lhc-start-chat-form input,
.lhc-start-chat-form textarea {
    background-color: #f9fafb !important;
    color: #111827 !important;
    border: 1px solid #d1d5db;
    border-radius: 5px;
}
.lhc-start-chat-form .lhc-accept-terms label { color: #111827 !important; }