.tg-assistant {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1200;
}

.tg-assistant-launcher {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    box-shadow: var(--shadow-sm);
    color: var(--accent-ink);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tg-assistant.is-open .tg-assistant-launcher {
    opacity: 0;
    pointer-events: none;
}

.tg-assistant-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;
    width: min(400px, calc(100vw - 24px));
    height: min(590px, calc(100vh - 40px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.tg-assistant.is-open .tg-assistant-panel {
    display: flex;
}

.tg-assistant-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.tg-assistant-head-title {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tg-assistant-head-sub {
    color: var(--text-faint);
    font-size: 0.7rem;
}

.tg-assistant-close {
    display: grid;
    width: 34px;
    height: 34px;
    margin-left: auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.tg-assistant-log {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 16px;
}

.tg-assistant-msg {
    max-width: 88%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.tg-assistant-msg--bot {
    align-self: flex-start;
}

.tg-assistant-msg--user {
    align-self: flex-end;
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: var(--accent-soft);
    color: var(--text);
}

.tg-assistant-sources,
.tg-assistant-feedback {
    display: flex;
    max-width: 88%;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.tg-assistant-source,
.tg-assistant-feedback-btn {
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-soft);
    font-size: var(--portal-micro);
}

.tg-assistant-typing,
.tg-assistant-feedback-label {
    color: var(--text-faint);
    font-size: 0.7rem;
}

.tg-assistant-foot {
    padding: 12px;
    border-top: 1px solid var(--line);
}

.tg-assistant-form {
    display: flex;
    gap: 8px;
}

.tg-assistant-input {
    min-height: 42px;
    flex: 1;
    resize: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    outline: 0;
    background: var(--surface);
}

.tg-assistant-input:focus {
    border-color: var(--accent);
}

.tg-assistant-send {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
}

.tg-assistant-disclaimer {
    margin: 8px 0 0;
    color: var(--text-faint);
    font-size: var(--portal-micro);
    text-align: center;
}

/* Human support channels inside the assistant launcher. Discord is the primary
   option and email remains available as a fallback. */
.tg-assistant-channels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.tg-assistant-channels-label {
    color: var(--text-soft);
    font-size: var(--portal-small);
}

.tg-assistant-channel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.tg-assistant-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--portal-small);
    font-weight: 600;
    text-decoration: none;
}

.tg-assistant-channel:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-link);
}

.tg-assistant-channel:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The channel glyphs arrive from components.js at their natural size. */
.tg-assistant-channel svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.support-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-soft);
    font-size: var(--portal-micro);
}

.support-status::before,
.support-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-faint);
    content: '';
}

.support-status--open::before,
.support-status--new::before,
.support-unread-dot {
    background: var(--accent);
}

.support-status--in_progress::before,
.support-status--triaged::before,
.support-status--planned::before {
    background: var(--warning);
}

.support-status--resolved::before,
.support-status--done::before {
    background: var(--success);
}

.support-ticket-row,
.support-feedback-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    text-align: left;
}

.support-ticket-row.is-unread {
    border-bottom-color: var(--accent);
}

.support-ticket-row-main {
    min-width: 0;
    flex: 1;
}

.support-ticket-subject {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-ticket-meta,
.support-msg-author {
    color: var(--text-faint);
    font-size: var(--portal-micro);
}

.support-unread-chip {
    padding: 3px 6px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    color: var(--accent);
    font-size: var(--portal-micro);
}

.support-thread {
    display: flex;
    max-height: 430px;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    margin-block: 18px;
}

.support-msg {
    max-width: 88%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 0.82rem;
    white-space: pre-wrap;
}

.support-msg--agent {
    align-self: flex-end;
    border-color: var(--accent);
    background: var(--accent-soft);
}

.support-rating {
    color: var(--warning);
}

@media (max-width: 768px) {
    .tg-assistant-launcher {
        width: 50px;
        padding: 0;
        justify-content: center;
    }

    .tg-assistant-launcher-label {
        display: none;
    }

    .tg-assistant-panel {
        position: fixed;
        inset: 8px;
        width: auto;
        height: auto;
    }

    .tg-assistant-input {
        font-size: 16px;
    }
}

/* ===== BEGIN restored-from-HEAD (redesign drop recovery) ===== */
/* Rules that existed before the redesign and that the app still depends on:
   every class targeted here had NO styling at all afterwards, so the markup
   was rendering unstyled. Appended so they win on equal specificity.
   Delete everything between the BEGIN/END markers to undo the restoration. */
/* TiviGlass support system styles.
   Loaded on every page by components.js (for the floating assistant widget) and
   used by the portal Support tab, the admin Support inbox, and the help center.
   Everything resolves through the shared design tokens in tokens.css so it
   tracks light/dark themes automatically. */

/* ===== Floating virtual-assistant widget ===== */

.tg-assistant {
position: fixed;
right: clamp(12px, 3vw, 28px);
bottom: clamp(12px, 3vw, 28px);
z-index: 1200;
font-family: inherit;
}
.tg-assistant-escalate {
align-self: flex-start;
}
.support-feedback-row-head {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
flex-wrap: wrap;
}
/* ===== END restored-from-HEAD ===== */