/*
    Synotec Bot theme
    Applies the marketing site's brand language (see synotec-marketing.css)
    to every bot page, dialog and MudBlazor component (MainLayout, ClientPage,
    AdminPage, dialogs, etc.). Kept in its own file so it can evolve without
    touching the public site stylesheet.
*/

:root {
    --bot-radius-sm: 12px;
    --bot-radius: 18px;
    --bot-radius-lg: 26px;
    --bot-shadow: 0 18px 50px rgba(17, 19, 23, .10);
    --bot-shadow-sm: 0 6px 20px rgba(17, 19, 23, .08);
}

/* Base surfaces */
.mud-typography, body {
    font-family: "Inter", "Roboto", Helvetica, Arial, sans-serif;
}

.mud-theme-background {
    background: var(--syn-bg, #f5f3ee) !important;
}

/* AppBar */
.mud-appbar {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Drawer */
.mud-drawer {
    border-right: 1px solid rgba(17, 19, 23, .1) !important;
}

.mud-nav-link-active {
    background-color: rgba(49, 85, 255, .12) !important;
    color: var(--syn-primary, #3155ff) !important;
    font-weight: 700 !important;
    border-radius: 999px;
}

.mud-nav-link .mud-nav-link-text,
.mud-nav-link .mud-icon-root {
    transition: color .15s ease;
}

/* Cards / Papers */
.mud-paper {
    border-radius: var(--bot-radius) !important;
}

.mud-paper.mud-elevation-4,
.mud-paper.mud-elevation-3 {
    box-shadow: var(--bot-shadow) !important;
}

.mud-card {
    border-radius: var(--bot-radius) !important;
    box-shadow: var(--bot-shadow-sm) !important;
}

/* Buttons */
.mud-button-root {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 750 !important;
    letter-spacing: -.01em !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.mud-button-filled-primary {
    background-color: var(--syn-primary, #3155ff) !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--syn-primary-strong, #1938d8) !important;
    box-shadow: 0 12px 30px rgba(49, 85, 255, .24) !important;
}

.mud-button-outlined-primary {
    border-color: var(--syn-primary, #3155ff) !important;
    color: var(--syn-primary, #3155ff) !important;
}

.mud-icon-button {
    transition: background-color .15s ease;
}

/* Tactile press feedback so clicking a button always feels responsive,
   even before the async loading spinner appears */
.mud-button-root:not(:disabled):active {
    transform: scale(.96) !important;
}

.mud-icon-button:not(.mud-disabled):active {
    transform: scale(.9);
}

/* Loading state: buttons that swap their label for a MudProgressCircular
   (Disabled="@_loading") must clearly show the spinner instead of looking
   like nothing is happening */
.mud-button-root:disabled {
    opacity: .85 !important;
}

.mud-button-root .mud-progress-circular {
    width: 20px;
    height: 20px;
}

.mud-button-filled-primary .mud-progress-circular,
.mud-button-filled-secondary .mud-progress-circular,
.mud-button-filled-error .mud-progress-circular,
.mud-button-filled-success .mud-progress-circular {
    color: #fff !important;
}

.mud-button-outlined-primary .mud-progress-circular,
.mud-button-text-primary .mud-progress-circular {
    color: var(--syn-primary, #3155ff) !important;
}

/* Tabs */
.mud-tabs-toolbar {
    border-radius: 999px !important;
    background: rgba(17, 19, 23, .04) !important;
    padding: 4px !important;
}

.mud-tab {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 700 !important;
}

.mud-tab.mud-tab-active {
    background: var(--syn-ink, #111317) !important;
    color: #fff !important;
}

.mud-tabs-tabbar-inner .mud-tab-slider {
    display: none;
}

/* Chips */
.mud-chip {
    border-radius: 999px !important;
    font-weight: 650 !important;
}

/* Dialogs */
.mud-dialog {
    border-radius: var(--bot-radius-lg) !important;
    box-shadow: var(--bot-shadow) !important;
}

.mud-dialog-title {
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}

/* Progress */
.mud-progress-linear.gradient-progress .mud-progress-linear-bar,
.mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--syn-primary, #3155ff) 0%, var(--syn-accent, #c7ff48) 100%) !important;
}

/* Alerts */
.mud-alert {
    border-radius: var(--bot-radius-sm) !important;
}

/* Tables */
.mud-table-root {
    border-radius: var(--bot-radius) !important;
    overflow: hidden;
}

.mud-table-toolbar {
    background: transparent !important;
}

/* Expansion panels */
.mud-expand-panel {
    border-radius: var(--bot-radius-sm) !important;
}

/* Scroll to top button */
.mud-scroll-to-top .mud-button-root {
    box-shadow: var(--bot-shadow) !important;
}

/* Skeleton */
.mud-skeleton {
    border-radius: var(--bot-radius-sm) !important;
}

@media (max-width: 760px) {
    .mud-tabs-toolbar {
        border-radius: var(--bot-radius-sm) !important;
    }
}

/* =========================================================
   Bot pages — brand components reused from the marketing site
   (ClientPage, AdminPage sections, section headers, cards)
   ========================================================= */

/* Section wrapper used for menu blocks on the client/admin pages */
.bot-section {
    padding: 0;
    border-radius: var(--bot-radius-lg) !important;
    background: var(--syn-paper, #fffdf8) !important;
    box-shadow: var(--bot-shadow) !important;
    border: 1px solid rgba(17, 19, 23, .06);
    overflow: hidden;
}

.bot-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 32px 0;
}

.bot-section__header .mud-icon-root {
    color: var(--syn-primary, #3155ff);
}

.bot-section__body {
    padding: 20px 32px 32px;
}

/* Pricing grid reused inside the bot (full feature list, 4 columns) */
.syn-pricing-grid--bot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.syn-pricing-grid--bot .syn-price-card {
    min-height: 0;
}

.syn-pricing-grid--bot .syn-price-card ul {
    max-height: none;
}

.syn-price-extra {
    margin-top: -6px !important;
    color: var(--syn-muted, #65676d);
    font-size: .78rem;
}

.syn-price-card--highlight .syn-price-extra {
    color: rgba(255, 255, 255, .58);
}

/* Current plan hero card sits above the grid, full width, brand ink color */
.syn-price-card.syn-price-card--highlight.mt-4 {
    max-width: 460px;
}

@media (max-width: 1100px) {
    .syn-pricing-grid--bot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .syn-pricing-grid--bot {
        grid-template-columns: 1fr;
    }

    .syn-price-card.syn-price-card--highlight.mt-4 {
        max-width: none;
    }
}

/* Accordion (Instagram how-it-works, advanced settings) restyled to match site cards */
.inst-accordion {
    border-radius: var(--bot-radius) !important;
    border-color: rgba(17, 19, 23, .1) !important;
    background: rgba(17, 19, 23, .015);
}

.inst-acc-head {
    padding: 16px 18px;
    border-radius: var(--bot-radius);
}

.inst-acc-icon {
    color: var(--syn-primary, #3155ff);
}

/* Trigger / feature cards */
.trigger-card {
    border-radius: var(--bot-radius-sm) !important;
    border-color: rgba(17, 19, 23, .1) !important;
}

.trigger-card:hover {
    box-shadow: var(--bot-shadow-sm) !important;
}

.inst-step-card {
    border-radius: var(--bot-radius-sm);
}

.inst-step-num {
    background: var(--syn-ink, #111317);
    border: none;
    color: #fff;
}

/* Carousel on client page */
.carousel-img {
    filter: saturate(1.02);
}

.mud-carousel {
    border-radius: var(--bot-radius-lg) !important;
    overflow: hidden;
}

/* =========================================================
   ClientPage / AdminPage section cards (menu1..menu9, admin cards)
   Give every "fade-in-section" MudPaper a brand top accent, better
   spacing and a subtle hover lift so the whole bot feels designed
   like the marketing site, not like a stock MudBlazor admin panel.
   ========================================================= */

.fade-in-section {
    position: relative;
    border-radius: var(--bot-radius-lg) !important;
    background: var(--syn-paper, #fffdf8) !important;
    box-shadow: var(--bot-shadow) !important;
    border: 1px solid rgba(17, 19, 23, .06);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.fade-in-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--syn-primary, #3155ff), var(--syn-accent, #c7ff48));
}

/* Section title row: icon chip + heading, in the site's tight letter-spacing style */
.fade-in-section > .mud-stack > .mud-typography-h4 {
    gap: 12px;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--syn-ink, #111317);
}

.fade-in-section > .mud-stack > .mud-typography-h4 .mud-icon-root {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(49, 85, 255, .1);
    color: var(--syn-primary, #3155ff);
    font-size: 1.25rem;
}

/* Sub-headings inside sections (h6, subtitle1/2) get the brand tight tracking too */
.fade-in-section .mud-typography-h6 {
    font-weight: 750;
    letter-spacing: -.015em;
}

/* Carousel wrapper card above the menu sections */
.client-page-container > .mud-paper:first-of-type {
    border-radius: var(--bot-radius-lg) !important;
    box-shadow: var(--bot-shadow) !important;
    border: 1px solid rgba(17, 19, 23, .06);
}

/* =========================================================
   AdminPage cards — align MudCard look with the brand
   ========================================================= */

.mud-tabs .mud-card {
    border: 1px solid rgba(17, 19, 23, .06);
}

.mud-card .mud-card-header {
    padding: 20px 20px 8px;
}

.mud-card .mud-card-header .mud-typography-h6 {
    font-weight: 800;
    letter-spacing: -.02em;
}

.mud-card .mud-card-content {
    padding: 16px 20px 20px;
}

/* Queue / status chips get pill shape + brand tones already via .mud-chip rule above;
   give success/error chips slightly stronger contrast in the light palette */
.mud-chip.mud-chip-color-success {
    background-color: rgba(47, 190, 107, .14) !important;
    color: #1f8a4f !important;
}

.mud-chip.mud-chip-color-error {
    background-color: rgba(229, 72, 77, .12) !important;
    color: #c22a2f !important;
}

/* =========================================================
   Global page-level polish
   ========================================================= */

/* Give the whole client/admin container comfortable breathing room */
.client-page-container {
    padding-bottom: 48px;
}

/* Buttons with StartIcon/EndIcon get a touch more presence */
.mud-button-root .mud-icon-root {
    font-size: 1.15rem;
}

/* Divider used between plan sections/cards */
.mud-divider {
    opacity: .7;
}

/* Alerts: rounder, softer, brand-tinted borders instead of default MudBlazor look.
   Informational/warning hints are toned down (lower opacity, muted border/text)
   so they read as gentle guidance rather than urgent warnings; errors stay clear. */
.mud-alert {
    opacity: .82;
    transition: opacity .15s ease;
}

.mud-alert:hover {
    opacity: 1;
}

.mud-alert-filled-error,
.mud-alert-outlined-error,
.mud-alert-filled-success,
.mud-alert-outlined-success {
    opacity: 1;
}

.mud-alert-filled-warning {
    background-color: #fff4dc !important;
    color: #8a6a2f !important;
}

.mud-alert-outlined-warning {
    border-color: rgba(245, 166, 35, .3) !important;
    color: #8a6a2f !important;
    background-color: rgba(245, 166, 35, .04) !important;
}

.mud-alert-outlined-info {
    border-color: rgba(49, 85, 255, .22) !important;
    color: var(--syn-muted, #65676d) !important;
    background-color: rgba(49, 85, 255, .03) !important;
}

.mud-alert-filled-error {
    background-color: #fde7e8 !important;
    color: #9c1d21 !important;
}

.mud-alert .mud-typography {
    font-size: .875rem;
}

/* Login/register style surfaces reused elsewhere keep consistent radius */
.mud-input-control .mud-input-outlined {
    border-radius: var(--bot-radius-sm) !important;
}

/* =========================================================
   Bot settings inputs (ClientPage "agent settings" section):
   give text fields a subtle lifted, branded feel with softer
   helper text so filling out prompts/instructions feels premium.
   ========================================================= */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--bot-radius-sm) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mud-input-control.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(49, 85, 255, .45) !important;
}

.mud-input-control.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.mud-input-control.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--syn-primary, #3155ff) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 0 4px rgba(49, 85, 255, .1);
}

.mud-input-helper-text {
    font-size: .78rem !important;
    letter-spacing: -.005em;
    color: var(--syn-muted, #65676d) !important;
    opacity: .85;
}

.mud-input-label {
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

.mud-input-control .mud-input-slot {
    font-size: .95rem;
}

@media (max-width: 760px) {
    .fade-in-section > .mud-stack > .mud-typography-h4 {
        font-size: 1.35rem;
    }
}

/* =========================================================
   Auth pages visual panel (Login, Register, ResetPassword,
   ConfirmResetPassword, 2FA setup) — consistent brand overlay
   over the background photo so every auth screen feels part
   of the same product, regardless of the underlying image.
   ========================================================= */

.auth-visual {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.auth-visual__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(17, 19, 23, .35) 0%, rgba(17, 19, 23, .78) 100%),
        radial-gradient(700px 500px at 15% 10%, rgba(49, 85, 255, .35), transparent 60%);
}

.auth-visual__brand {
    position: absolute;
    left: 32px;
    bottom: 32px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 800;
    letter-spacing: .1em;
    font-size: .82rem;
    text-transform: uppercase;
}

.auth-visual__mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(6px);
}

.auth-visual__mark img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

@media (max-width: 959px) {
    .auth-visual {
        display: none;
    }
}

/* =========================================================
   Global dialog hero header system.
   Every bot dialog uses .dlg-hero (with optional colour modifier)
   so all popups share the same branded ink header look.
   ========================================================= */

/* Base hero: dark ink background + radial glows */
.dlg-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: -24px -24px 4px;
    padding: 24px;
    background: linear-gradient(135deg, #111317 0%, #1a1d22 100%);
    position: relative;
    overflow: hidden;
}

.dlg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 220px at 90% -20%, rgba(199, 255, 72, .14), transparent 60%),
        radial-gradient(400px 200px at -10% 120%, rgba(49, 85, 255, .26), transparent 60%);
    pointer-events: none;
}

/* Error variant (BillingRetry) */
.dlg-hero--error::before {
    background:
        radial-gradient(500px 220px at 90% -20%, rgba(229, 72, 77, .22), transparent 60%),
        radial-gradient(400px 200px at -10% 120%, rgba(160, 20, 24, .3), transparent 60%);
}

/* Warning variant (BotIssues) */
.dlg-hero--warning::before {
    background:
        radial-gradient(500px 220px at 90% -20%, rgba(245, 166, 35, .24), transparent 60%),
        radial-gradient(400px 200px at -10% 120%, rgba(49, 85, 255, .18), transparent 60%);
}

/* Avatar inside hero */
.dlg-hero__avatar {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: var(--syn-accent, #c7ff48) !important;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.dlg-hero--error .dlg-hero__avatar {
    color: #ff8087 !important;
}

.dlg-hero--warning .dlg-hero__avatar {
    color: #ffc84a !important;
}

/* Title & subtitle text inside hero */
.dlg-hero__title {
    line-height: 1.15 !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    position: relative;
    z-index: 1;
}

.dlg-hero__subtitle {
    color: rgba(255, 255, 255, .62) !important;
    position: relative;
    z-index: 1;
}

/* =========================================================
   Dialogs (purchase, help, settings-test, account actions):
   premium site-like presentation reusing the brand ink header,
   soft radial glow body and pill actions instead of the plain
   default MudBlazor dialog chrome.
   ========================================================= */
.mud-dialog-content {
    padding-top: 4px !important;
}

.mud-dialog-actions {
    padding: 16px 24px 22px !important;
}

.mud-list-item {
    border-radius: var(--bot-radius-sm) !important;
}

.mud-radio-content {
    font-weight: 600;
}

/* =========================================================
   Snackbar / toast notifications
   Pill-shaped, ink background, brand accent border-left stripe
   so every notification feels part of the design system.
   ========================================================= */
.mud-snackbar {
    border-radius: 999px !important;
    box-shadow: 0 12px 40px rgba(17, 19, 23, .18) !important;
    font-weight: 650 !important;
    letter-spacing: -.01em !important;
    padding: 10px 20px 10px 16px !important;
    min-width: 260px !important;
    max-width: 440px !important;
    backdrop-filter: blur(8px);
}

.mud-snackbar.mud-alert-filled-success {
    background-color: #111317 !important;
    color: var(--syn-accent, #c7ff48) !important;
    border: 1px solid rgba(199, 255, 72, .3) !important;
}

.mud-snackbar.mud-alert-filled-error {
    background-color: #111317 !important;
    color: #ff8087 !important;
    border: 1px solid rgba(229, 72, 77, .35) !important;
}

.mud-snackbar.mud-alert-filled-info {
    background-color: #111317 !important;
    color: #fff !important;
    border: 1px solid rgba(49, 85, 255, .4) !important;
}

.mud-snackbar.mud-alert-filled-warning {
    background-color: #111317 !important;
    color: #ffc84a !important;
    border: 1px solid rgba(245, 166, 35, .35) !important;
}

/* Icon inside snackbar matches text colour */
.mud-snackbar .mud-icon-root {
    font-size: 1.15rem !important;
    opacity: .9;
}

/* Close button inside snackbar */
.mud-snackbar .mud-button-root {
    color: inherit !important;
    opacity: .7;
}

.mud-snackbar .mud-button-root:hover {
    opacity: 1;
}

/* =========================================================
   Tooltip
   Ink background + tiny radius so it matches the brand look
   ========================================================= */
.mud-tooltip {
    background-color: #111317 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    padding: 5px 10px !important;
    box-shadow: 0 4px 14px rgba(17, 19, 23, .18) !important;
}

/* =========================================================
   Select / Autocomplete
   Keep same radius as outlined text inputs
   ========================================================= */
.mud-select .mud-input-outlined .mud-input-outlined-border,
.mud-autocomplete .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--bot-radius-sm) !important;
}

.mud-popover-overflow-y-auto {
    border-radius: var(--bot-radius-sm) !important;
    box-shadow: 0 12px 40px rgba(17, 19, 23, .14) !important;
}

.mud-list-item-text {
    font-size: .92rem !important;
}

/* =========================================================
   Scroll-to-top button – lime accent pill matching site CTAs
   ========================================================= */
.mud-scroll-to-top {
    right: 24px !important;
    bottom: 32px !important;
}

.mud-scroll-to-top .mud-button-root {
    background: #111317 !important;
    color: var(--syn-accent, #c7ff48) !important;
    border: 1px solid rgba(199, 255, 72, .3) !important;
    box-shadow: 0 8px 28px rgba(17, 19, 23, .22) !important;
    padding: 8px 18px !important;
    font-weight: 750 !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

.mud-scroll-to-top .mud-button-root:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 40px rgba(17, 19, 23, .28) !important;
}

/* =========================================================
   Processing banner – brand gradient bottom border + ink bg
   ========================================================= */
.processing-banner {
    background: linear-gradient(135deg, #111317 0%, #1a1d22 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}

.processing-banner .mud-text-secondary {
    color: rgba(255, 255, 255, .6) !important;
}

.processing-banner .processing-title {
    color: #fff !important;
}

.processing-banner .mud-progress-circular {
    color: var(--syn-accent, #c7ff48) !important;
}

.processing-banner-progress.mud-progress-linear .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--syn-primary, #3155ff), var(--syn-accent, #c7ff48)) !important;
}

.processing-banner-progress.mud-progress-linear::before {
    background: rgba(255, 255, 255, .08) !important;
}

/* =========================================================
   Drawer – subtle brand accent at bottom, richer watermark
   ========================================================= */
.app-drawer {
    border-right: 1px solid rgba(17, 19, 23, .08) !important;
}

.drawer-watermark {
    padding: 20px 16px !important;
    border-top: 1px solid rgba(17, 19, 23, .07);
    gap: 10px !important;
}

.drawer-watermark img {
    width: 28px !important;
    height: 28px !important;
    opacity: .55;
}

.drawer-watermark-text {
    font-weight: 750 !important;
    letter-spacing: -.01em;
    opacity: .45;
    font-size: .78rem !important;
    text-transform: uppercase;
}

/* Nav link hover: subtle pill highlight */
.mud-nav-link:not(.mud-nav-link-active):hover {
    background-color: rgba(49, 85, 255, .06) !important;
    border-radius: 999px !important;
}

/* Brand accent line at top of the drawer */
.mud-drawer-content::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--syn-primary, #3155ff), var(--syn-accent, #c7ff48));
    margin-bottom: 6px;
}

/* =========================================================
   File drop-zone – brand glow on hover/active
   ========================================================= */
.files-dropzone {
    border-radius: var(--bot-radius) !important;
    border: 2px dashed rgba(17, 19, 23, .18) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.files-dropzone:hover {
    border-color: rgba(49, 85, 255, .4) !important;
    background-color: rgba(49, 85, 255, .03) !important;
}

.files-dropzone.dropzone-active {
    border-color: var(--syn-primary, #3155ff) !important;
    border-style: solid !important;
    background-color: rgba(49, 85, 255, .06) !important;
    box-shadow: 0 0 0 4px rgba(49, 85, 255, .12) !important;
}

/* =========================================================
   Empty states in tables and chat windows
   ========================================================= */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    gap: 8px;
    opacity: .55;
}

.chat-empty .mud-icon-root {
    font-size: 2.8rem !important;
    color: var(--syn-primary, #3155ff);
    opacity: .6;
}

/* No-data row in MudTable */
.mud-table-empty-row td {
    padding: 40px 0 !important;
    text-align: center;
    opacity: .55;
}

/* =========================================================
   Dividers – slightly softer
   ========================================================= */
.mud-divider {
    opacity: .55 !important;
}

/* =========================================================
   Switch – accent colour when checked
   ========================================================= */
.mud-switch-track.mud-checked {
    background-color: var(--syn-primary, #3155ff) !important;
}

/* =========================================================
   Checkbox – brand primary fill
   ========================================================= */
.mud-checkbox .mud-icon-root.mud-primary-text {
    color: var(--syn-primary, #3155ff) !important;
}

/* =========================================================
   Section fade-in entrance animation
   Sections slide up from 24 px below and fade in over 0.55 s.
   JS adds .is-visible via IntersectionObserver.
   ========================================================= */
.fade-in-section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger siblings so sections enter one after another */
.fade-in-section:nth-child(2) { transition-delay: .05s; }
.fade-in-section:nth-child(3) { transition-delay: .10s; }
.fade-in-section:nth-child(4) { transition-delay: .15s; }
.fade-in-section:nth-child(5) { transition-delay: .20s; }

/* =========================================================
   Page-level responsive polish
   ========================================================= */
@media (max-width: 760px) {
    .mud-snackbar {
        border-radius: 16px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }

    .mud-scroll-to-top {
        right: 12px !important;
        bottom: 20px !important;
    }

    .dlg-hero {
        padding: 20px !important;
        margin: -20px -20px 4px !important;
    }
}