:root {
    --indigo: #2204be;
    --indigo-light: #3d28d4;
    --indigo-soft: #eceafb;
    --white: #ffffff;
    --bs-primary: var(--indigo);
    --bs-primary-rgb: 34, 4, 190;
}

body {
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.text-indigo { color: var(--indigo) !important; }
.bg-indigo { background-color: var(--indigo) !important; }
.link-indigo { color: var(--indigo); text-decoration: none; font-weight: 500; }
.link-indigo:hover { color: var(--indigo-light); }

.btn-primary {
    --bs-btn-bg: var(--indigo);
    --bs-btn-border-color: var(--indigo);
    --bs-btn-hover-bg: var(--indigo-light);
    --bs-btn-hover-border-color: var(--indigo-light);
    --bs-btn-active-bg: #180394;
    --bs-btn-active-border-color: #180394;
}

.btn-outline-primary {
    --bs-btn-color: var(--indigo);
    --bs-btn-border-color: var(--indigo);
    --bs-btn-hover-bg: var(--indigo);
    --bs-btn-hover-border-color: var(--indigo);
}

.app-body {
    min-height: 100dvh;
    background: linear-gradient(165deg, var(--indigo-soft) 0%, var(--white) 45%, #f8f9ff 100%);
}

.app-body-form { padding-bottom: 2rem; }
.max-form { max-width: 520px; margin: 0 auto; }

.brand-logo {
    max-height: 72px;
    width: auto;
    object-fit: contain;
}

.brand-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 1rem;
    background: var(--indigo);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
}

.brand-company {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
}

.brand-slogan {
    font-weight: 600;
    color: var(--indigo);
    font-size: 0.95rem;
}

.toast-zone {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 1080;
}

.alert-indigo {
    background: var(--indigo);
    color: #fff;
    border: none;
    border-radius: 1rem;
}

.welcome-panel {
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(34, 4, 190, 0.08), rgba(255, 255, 255, 0.95));
    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.welcome-name {
    line-height: 1.3;
}

#feedbackAlert.alert-indigo {
    background: var(--indigo);
    color: #fff;
    border: none;
}

.btn-animated {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-animated:active {
    transform: scale(0.97);
}

.checkmark-circle {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo), var(--indigo-light));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirmation-card,
.sent-summary-card {
    max-width: 420px;
    border-radius: 1.25rem;
}

.message-preview,
.confirm-preview {
    white-space: pre-wrap;
    line-height: 1.65;
    font-size: 0.95rem;
    color: #333;
}

.confirm-preview {
    background: var(--indigo-soft);
    border: 1px solid rgba(34, 4, 190, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mur Laethitia */
.app-body-mur {
    background: linear-gradient(180deg, var(--indigo) 0%, #2e0ac9 28%, var(--indigo-soft) 55%, var(--white) 100%);
    padding-bottom: 2rem;
}

.mur-hero-inner {
    max-width: 540px;
    margin: 0 auto;
}

.mur-hero .brand-company {
    color: rgba(255, 255, 255, 0.75);
}

.mur-hero .brand-slogan {
    color: #fff;
}

.mur-hero .brand-fallback {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.mur-title {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.mur-subtitle { font-size: 1rem; opacity: 0.95; }
.mur-subtitle-small { font-size: 0.85rem; opacity: 0.88; }

.mur-feed { max-width: 540px; margin: 0 auto; }

.message-card {
    border-radius: 1.25rem !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease;
}

.message-card:active { transform: scale(0.99); }

.message-card-left { border-left: 4px solid var(--indigo); }
.message-card-right { border-right: 4px solid var(--indigo-light); }

.message-author { color: var(--indigo); font-weight: 600; }
.message-body {
    line-height: 1.65;
    color: #333;
    font-size: 0.95rem;
}

.fab-message {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
    animation: fabPulse 2.5s ease-in-out infinite;
}

@keyframes fabPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(34, 4, 190, 0.35); }
    50% { box-shadow: 0 12px 32px rgba(34, 4, 190, 0.5); }
}

.empty-wall { border-radius: 1.25rem; }

/* Admin */
.app-body-admin { background: #f4f4f8; }
.admin-main { max-width: 540px; margin: 0 auto; }
.admin-login { max-width: 420px; padding-top: 2rem; }
.admin-logout { text-align: center; padding-bottom: 1rem; }
.admin-message-card { border-radius: 1rem !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}