:root {
    --fruuli-mint: #72F27A;
    --fruuli-teal: #19C7B5;
    --fruuli-accent: #FF6B8A;
    --fruuli-ink: #11212B;
    --fruuli-grad: linear-gradient(135deg, var(--mud-palette-secondary), var(--mud-palette-primary));
    --fruuli-grad-soft: linear-gradient(135deg, rgba(var(--mud-palette-secondary-rgb), 0.14), rgba(var(--mud-palette-primary-rgb), 0.1));
    --fruuli-grad-brand: linear-gradient(135deg, var(--fruuli-mint), var(--fruuli-teal));
    --fruuli-grad-active: linear-gradient(135deg, rgba(114, 242, 122, 0.22), rgba(25, 199, 181, 0.18));
    --fruuli-glow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.14);
    --fruuli-glow-strong: 0 6px 18px rgba(var(--mud-palette-primary-rgb), 0.22);
    --fruuli-glow-brand: 0 4px 12px rgba(25, 199, 181, 0.22);
    --fruuli-glow-brand-strong: 0 6px 18px rgba(25, 199, 181, 0.32);
    --fruuli-ring-brand: inset 0 0 0 1px rgba(var(--mud-palette-primary-rgb), 0.5);
    --fruuli-shadow-flat: 0 1px 2px rgba(0, 0, 0, 0.1);
    --fruuli-bubble-own: color-mix(in srgb, var(--fruuli-mint) 30%, var(--mud-palette-surface));
    --fruuli-bubble-own-hover: color-mix(in srgb, var(--fruuli-mint) 40%, var(--mud-palette-surface));
    --fruuli-radius: 16px;
    --fruuli-radius-lg: 24px;
    --fruuli-radius-input: 12px;
    --fruuli-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fruuli-track-word: 0.04em;
    --fruuli-track-code: 0.22em;
}

body {
    background-color: var(--mud-palette-background);
    background-image:
        radial-gradient(900px 520px at 0% -5%, rgba(var(--mud-palette-secondary-rgb), 0.08), transparent 55%),
        radial-gradient(760px 460px at 100% 8%, rgba(var(--mud-palette-primary-rgb), 0.06), transparent 52%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.mud-layout,
.mud-main-content {
    background: transparent;
}

/* Brand lockup */
.fruuli-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
}

.fruuli-brand-mark {
    width: 30px;
    height: 31px;
    flex-shrink: 0;
    animation: fruuli-float 4.5s ease-in-out infinite;
}

.fruuli-brand-word {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.fruuli-wordmark {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: var(--fruuli-track-word);
    background: var(--fruuli-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fruuli-tagline {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 900px) {
    .fruuli-tagline {
        display: none;
    }
}

/* Login */
.fruuli-login-card {
    border-radius: var(--fruuli-radius-lg) !important;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent) !important;
    backdrop-filter: blur(18px);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 18px 44px rgba(11, 24, 32, 0.18);
}

.fruuli-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.75rem;
}

.fruuli-login-mark {
    width: 84px;
    height: 88px;
}

.fruuli-login-word {
    font-size: 1.9rem;
}

/* Chrome surfaces */
.mud-appbar {
    background-color: color-mix(in srgb, var(--mud-palette-appbar-background) 82%, transparent) !important;
    color: var(--mud-palette-appbar-text) !important;
    backdrop-filter: blur(14px);
}

.mud-appbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--mud-palette-divider);
    pointer-events: none;
}

.mud-drawer {
    background-color: color-mix(in srgb, var(--mud-palette-drawer-background) 88%, transparent) !important;
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--mud-palette-divider);
}

.mud-paper {
    transition: box-shadow 0.25s var(--fruuli-ease), transform 0.25s var(--fruuli-ease);
}

/* Navigation */
.mud-nav-link {
    border-radius: 12px;
    margin: 2px 0;
    font-weight: 600;
    transition: background-color 0.2s var(--fruuli-ease), color 0.2s var(--fruuli-ease);
}

.mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--fruuli-grad-active);
    color: var(--mud-palette-primary);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-primary-rgb), 0.28);
    border-inline-end-width: 0;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Buttons */
.mud-button-filled-primary:not(:disabled) {
    background: var(--fruuli-grad-brand) !important;
    color: var(--fruuli-ink) !important;
    box-shadow: var(--fruuli-ring-brand), var(--fruuli-glow-brand);
    transition: box-shadow 0.2s var(--fruuli-ease), transform 0.15s var(--fruuli-ease);
}

.mud-button-filled-primary:not(:disabled) .mud-icon-root {
    color: var(--fruuli-ink);
}

.mud-button-filled-primary:not(:disabled):hover {
    box-shadow: var(--fruuli-ring-brand), var(--fruuli-glow-brand-strong);
    transform: translateY(-1px);
}

.mud-button-filled-primary:not(:disabled):active {
    transform: scale(0.985);
}

.mud-button-root:disabled {
    color: var(--mud-palette-action-disabled) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.mud-button-filled:disabled {
    border: 1px solid var(--mud-palette-divider);
}

.mud-button-root:disabled .mud-icon-root,
.mud-icon-button:disabled .mud-icon-root {
    color: var(--mud-palette-action-disabled) !important;
}

.mud-button-root {
    border-radius: 12px;
}

.mud-icon-button {
    transition: background-color 0.2s var(--fruuli-ease), transform 0.15s var(--fruuli-ease);
}

.mud-icon-button:active {
    transform: scale(0.92);
}

/* Chat bubbles */
.mud-chat-bubble {
    transition: background-color 0.2s var(--fruuli-ease);
    animation: fruuli-bubble-in 0.28s var(--fruuli-ease) both;
}

.mud-chat-bubble.mud-chat-filled-primary {
    background: var(--fruuli-bubble-own) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.28);
    box-shadow: var(--fruuli-shadow-flat);
}

.mud-chat-header.chat-sender .chat-sender-name {
    color: var(--mud-palette-primary);
}

.mud-chat-end .mud-chat-header.chat-sender {
    flex-direction: row-reverse;
}

/* Avatars */
.mud-avatar.mud-avatar-filled-primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Inputs */
.mud-input.mud-input-outlined {
    border-radius: var(--fruuli-radius-input);
}

.mud-input-outlined-border {
    border-radius: var(--fruuli-radius-input);
    transition: border-color 0.2s var(--fruuli-ease);
}

/* Chips & badges */
.mud-chip.mud-chip-filled.mud-chip-color-primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Theme toggle in settings */
.theme-toggle-group {
    border-radius: 14px;
    overflow: hidden;
}

/* Dialogs & menus */
.mud-dialog,
.mud-popover {
    border-radius: var(--fruuli-radius) !important;
    animation: fruuli-pop-in 0.22s var(--fruuli-ease) both;
}

/* Loading */
.mud-progress-circular-circle {
    stroke: var(--mud-palette-primary);
}

/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--mud-palette-primary-rgb), 0.45) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(var(--mud-palette-primary-rgb), 0.35);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.6);
    background-clip: content-box;
}

/* Lottie hosts */
.fruuli-lottie {
    flex-shrink: 0;
}

.fruuli-lottie svg,
.fruuli-lottie canvas {
    width: 100% !important;
    height: 100% !important;
}

.fruuli-lottie-xs { width: 22px; height: 22px; }
.fruuli-lottie-sm { width: 48px; height: 48px; }
.fruuli-lottie-md { width: min(160px, 40vw); height: min(160px, 40vw); }
.fruuli-lottie-lg { width: min(200px, 52vw); height: min(200px, 52vw); }

.fruuli-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2rem 1.5rem;
    animation: fruuli-rise 0.6s var(--fruuli-ease) both;
}

.fruuli-typing-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Chats panel */
.mud-list-item {
    border-radius: 12px;
    transition: background-color 0.2s var(--fruuli-ease), transform 0.15s var(--fruuli-ease);
}

.mud-list-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.mud-list-item.mud-selected-item {
    background: var(--fruuli-grad-active) !important;
    color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-primary-rgb), 0.28);
}

.mud-badge {
    font-weight: 700;
}

/* Dialogs */
.mud-dialog {
    border: 1px solid var(--mud-palette-divider);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(11, 24, 32, 0.22);
}

.mud-dialog-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mud-overlay-dialog {
    backdrop-filter: blur(2px);
}

.mud-snackbar {
    border-radius: var(--fruuli-radius) !important;
    border: 1px solid var(--mud-palette-divider);
}

/* Mobile chrome */
@media (max-width: 768px) {
    body {
        background-image:
            radial-gradient(520px 360px at 0% -5%, rgba(var(--mud-palette-secondary-rgb), 0.09), transparent 60%),
            radial-gradient(440px 320px at 100% 6%, rgba(var(--mud-palette-primary-rgb), 0.07), transparent 55%);
    }

    .fruuli-brand-mark {
        width: 26px;
        height: 27px;
    }

    .fruuli-wordmark {
        font-size: 1.05rem;
    }

    .fruuli-login-card {
        border-radius: var(--fruuli-radius) !important;
        padding: 1.5rem !important;
    }

    .fruuli-login-mark {
        width: 64px;
        height: 67px;
    }

    .fruuli-login-word {
        font-size: 1.5rem;
    }

    .mud-dialog {
        border-radius: var(--fruuli-radius) !important;
    }
}

/* Motion primitives */
@keyframes fruuli-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes fruuli-breath {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { transform: scale(1.03); filter: drop-shadow(0 0 8px rgba(114, 242, 122, 0.22)); }
}

@keyframes fruuli-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fruuli-bubble-in {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fruuli-pop-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.fruuli-rise { animation: fruuli-rise 0.7s var(--fruuli-ease) both; }
.fruuli-float { animation: fruuli-float 4.5s ease-in-out infinite; }
.fruuli-breath { animation: fruuli-breath 3.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .fruuli-rise,
    .fruuli-float,
    .fruuli-breath,
    .fruuli-brand-mark,
    .mud-chat-bubble,
    .mud-dialog,
    .mud-popover {
        animation: none !important;
    }
}