/* ============================================================================
   SUPPORT WIDGET — floating WhatsApp button, live chat launcher + panel
   Loaded only on SaaS pages (see enqueue_frontend_assets()). Uses the same
   --n6saas-* design tokens defined in n6saas-frontend.css's :root block, so
   it automatically follows any custom accent color set in Settings.
   ============================================================================ */

.n6saas-support-widget {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.n6saas-support-launchers {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999991;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.n6saas-support-launchers.n6saas-support-launchers-hidden { display: none; }

.n6saas-support-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    color: #fff;
}
.n6saas-support-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); color: #fff; }

.n6saas-fab-whatsapp { background: #25D366; }
.n6saas-fab-chat { background: var(--n6saas-accent, #6366f1); }

.n6saas-support-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--n6saas-danger, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--n6saas-bg, #0f0f13);
}
.n6saas-support-badge[hidden] { display: none; }

/* ── Panel ─────────────────────────────────────────────────────────────── */
/* Positioned independently of .n6saas-support-launchers (rather than as a
   flex sibling stacked above it) so its own height can never change where
   the launcher row sits, and — the actual cause of the panel rendering
   above the top of the screen — so its max-height is measured against the
   viewport directly instead of being pushed upward by flex layout on top
   of an already-miscalculated height. */
.n6saas-support-panel {
    position: fixed;
    right: 20px;
    bottom: 150px; /* clears the launcher stack at its tallest — WhatsApp + Chat buttons (52px each) plus the 12px gap between them = 116px, plus a 20px+14px margin either side of bottom:20px */
    width: 340px;
    max-width: calc(100vw - 40px);
    height: 480px;
    max-height: calc(100vh - 175px);  /* fallback for browsers without dvh */
    max-height: calc(100dvh - 175px); /* actual current visible viewport — 100vh on mobile reflects the address-bar-hidden max, not what's really on screen, which is what let the top get cut off */
    background: var(--n6saas-surface, #1c1c26);
    border: 1px solid var(--n6saas-border, #2a2a38);
    border-radius: var(--n6saas-radius-lg, 16px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999990;
}
.n6saas-support-panel[hidden] { display: none; }

.n6saas-support-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--n6saas-border, #2a2a38);
    background: var(--n6saas-bg-alt, #16161d);
    flex-shrink: 0;
}
.n6saas-support-panel-heading { font-size: 15px; font-weight: 700; color: var(--n6saas-text, #f1f1f4); }
.n6saas-support-panel-sub { font-size: 12px; color: var(--n6saas-text-secondary, #9a9ab0); margin-top: 2px; }
.n6saas-support-panel-actions { display: flex; gap: 4px; }

.n6saas-support-icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--n6saas-text-secondary, #9a9ab0);
    cursor: pointer;
}
.n6saas-support-icon-btn:hover { background: var(--n6saas-surface-hover, #24242f); color: var(--n6saas-text, #f1f1f4); }

.n6saas-support-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.n6saas-support-loading,
.n6saas-support-empty {
    margin: auto;
    text-align: center;
    color: var(--n6saas-text-dim, #6b6b80);
    font-size: 13px;
    padding: 20px;
}

/* Message bubbles */
.n6saas-support-msg { display: flex; flex-direction: column; max-width: 82%; }
.n6saas-support-msg-client { align-self: flex-end; align-items: flex-end; }
.n6saas-support-msg-admin { align-self: flex-start; align-items: flex-start; }

.n6saas-support-msg-bubble {
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    word-break: break-word;
}
.n6saas-support-msg-client .n6saas-support-msg-bubble {
    background: var(--n6saas-accent, #6366f1);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.n6saas-support-msg-admin .n6saas-support-msg-bubble {
    background: var(--n6saas-surface-hover, #24242f);
    color: var(--n6saas-text, #f1f1f4);
    border-bottom-left-radius: 4px;
}
.n6saas-support-msg-time {
    font-size: 10.5px;
    color: var(--n6saas-text-dim, #6b6b80);
    margin-top: 3px;
    padding: 0 4px;
}

/* History list */
.n6saas-support-history-list { display: flex; flex-direction: column; gap: 6px; }
.n6saas-support-history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 12px;
    background: var(--n6saas-bg-alt, #16161d);
    border: 1px solid var(--n6saas-border, #2a2a38);
    border-radius: var(--n6saas-radius-sm, 8px);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.n6saas-support-history-item:hover { border-color: var(--n6saas-accent, #6366f1); }
.n6saas-support-history-subject { font-size: 13px; font-weight: 600; color: var(--n6saas-text, #f1f1f4); }
.n6saas-support-history-meta { font-size: 11px; color: var(--n6saas-text-dim, #6b6b80); }

.n6saas-support-newbtn {
    margin-top: 4px;
    padding: 10px;
    background: transparent;
    border: 1px dashed var(--n6saas-border, #2a2a38);
    border-radius: var(--n6saas-radius-sm, 8px);
    color: var(--n6saas-accent, #6366f1);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
}
.n6saas-support-newbtn:hover { border-color: var(--n6saas-accent, #6366f1); }

/* ── Composer ──────────────────────────────────────────────────────────── */
.n6saas-support-composer {
    border-top: 1px solid var(--n6saas-border, #2a2a38);
    padding: 10px 12px;
    background: var(--n6saas-bg-alt, #16161d);
    flex-shrink: 0;
}
.n6saas-support-subject-input {
    width: 100%;
    background: var(--n6saas-surface, #1c1c26);
    border: 1px solid var(--n6saas-border, #2a2a38);
    border-radius: var(--n6saas-radius-sm, 8px);
    color: var(--n6saas-text, #f1f1f4);
    font-size: 12.5px;
    font-family: inherit;
    padding: 7px 10px;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.n6saas-support-subject-input:focus { outline: none; border-color: var(--n6saas-accent, #6366f1); }
.n6saas-support-subject-input[hidden] { display: none; }

.n6saas-support-input-row { display: flex; gap: 8px; align-items: flex-end; }
.n6saas-support-textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    background: var(--n6saas-surface, #1c1c26);
    border: 1px solid var(--n6saas-border, #2a2a38);
    border-radius: var(--n6saas-radius-sm, 8px);
    color: var(--n6saas-text, #f1f1f4);
    font-size: 13px;
    font-family: inherit;
    padding: 8px 10px;
    max-height: 90px;
    box-sizing: border-box;
}
.n6saas-support-textarea:focus { outline: none; border-color: var(--n6saas-accent, #6366f1); }

.n6saas-support-send-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--n6saas-accent, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.n6saas-support-send-btn:hover { background: var(--n6saas-accent-hover, #4f46e5); }
.n6saas-support-send-btn:disabled { opacity: .5; cursor: default; }

@media (max-width: 480px) {
    .n6saas-support-launchers { right: 12px; bottom: 12px; }
    .n6saas-support-panel {
        right: 12px;
        bottom: 140px;
        width: calc(100vw - 24px);
        height: calc(100vh - 160px);
        height: calc(100dvh - 160px);
    }
}

/* ============================================================================
   TELEGRAM SECTION — rendered on the Wallet page, after the balance/deposit
   and transaction history layout.
   ============================================================================ */
.n6saas-telegram-section {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--n6saas-surface, #1c1c26);
    border: 1px solid var(--n6saas-border, #2a2a38);
    border-radius: var(--n6saas-radius, 12px);
}
.n6saas-telegram-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(46, 166, 224, .15);
    color: #2ea6e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.n6saas-telegram-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.n6saas-telegram-title { font-size: 14.5px; font-weight: 700; color: var(--n6saas-text, #f1f1f4); }
.n6saas-telegram-desc { font-size: 12.5px; color: var(--n6saas-text-secondary, #9a9ab0); }
.n6saas-telegram-btn {
    flex-shrink: 0;
    padding: 9px 18px;
    background: #2ea6e0;
    color: #fff;
    border-radius: var(--n6saas-radius-sm, 8px);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.n6saas-telegram-btn:hover { background: #2591c7; color: #fff; }

@media (max-width: 560px) {
    .n6saas-telegram-section { flex-wrap: wrap; }
    .n6saas-telegram-btn { width: 100%; text-align: center; }
}