/* Apple Vibe Theme - Apple Native UI Design System */

:root {
    /* Apple Brand Color Fallbacks */
    --apple-primary-fallback: #0071E3;
    --apple-secondary-fallback: #1D1D1F;
    --apple-accent-fallback: #0077ED;

    /* Dynamic Storefront Color Aliases */
    --color-primary: var(--apple-primary-fallback);
    --color-secondary: var(--apple-secondary-fallback);
    --color-accent: var(--apple-accent-fallback);

    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --accent-color: var(--color-accent);
    --theme-primary: var(--color-primary);
    --theme-secondary: var(--color-secondary);
    --theme-accent: var(--color-accent);

    /* Apple Palette Aliased to Dynamic Tenant Colors */
    --apple-blue: var(--primary-color);
    --apple-blue-hover: var(--accent-color);
    --apple-blue-active: #0062C4;
    --apple-dark: var(--secondary-color);
    --apple-grey-bg: #F5F5F7;
    --apple-subtle-grey: #E8E8ED;
    --apple-text-secondary: #86868B;
    --apple-border: rgba(0, 0, 0, 0.08);
    --apple-success: #34C759;
    --apple-warning: #FF9500;
    --apple-danger: #FF3B30;

    --primary-rgb: 0, 113, 227;
    --secondary-rgb: 29, 29, 31;
    --accent-rgb: 0, 119, 237;
    --livewire-progress-bar-color: var(--primary-color);
}

/* System Font Stack - SF Pro Inspired */
body, button, input, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "Plus Jakarta Sans", -apple-system-subheadline, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Suppress Livewire's built-in top progress bar — replaced by iOS overlay */
#livewire-progress {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =====================================================
   iOS UIActivityIndicatorView — Full-Page Overlay
   Matches native Apple UIKit visual behaviour:
   - Frosted glass backdrop (UIVisualEffectView)
   - 12-blade radial spinner (UIActivityIndicatorView .large)
   - Stepped rotation animation (native UIKit rendering)
   ===================================================== */

/* Outer overlay — covers the whole viewport */
#ios-activity-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.18s linear;
    will-change: opacity;
}

/* Active state — shown during navigation / requests */
#ios-activity-overlay.ios-loading {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Frosted glass backdrop — iOS UIVisualEffectView(UIBlurEffect) */
#ios-activity-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(242, 242, 247, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    pointer-events: none;
}

/* Pill container — like iOS UIActivityIndicatorView card */
#ios-activity-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    min-width: 82px;
    min-height: 82px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

/* The SVG spinner — 38px large indicator size matching iOS UIKit */
#ios-activity-spinner {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: block;
    animation: ios-activity-spin 0.85s steps(12, end) infinite;
    transform-origin: center center;
}

/* The 12 blades — Apple system dark gray (#3C3C43) for high contrast and clarity */
#ios-spinner-blades {
    fill: #3C3C43;
}

@keyframes ios-activity-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Apple Frosted Glass (Liquid Retina Vibrancy) */
.apple-glass {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.apple-glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.apple-glass-dark {
    background: rgba(29, 29, 31, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Apple Diffused Ambient Drop Shadows */
.apple-shadow-sm {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.apple-shadow-md {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
}

.apple-shadow-lg {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06) !important;
}

.apple-shadow-hover {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.apple-shadow-hover:hover {
    transform: translateY(-3px) scale(1.004) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Apple Button & Interactive Styles with Dynamic Contrast */
.btn-apple-primary {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-contrast, var(--primary-text-color, #FFFFFF)) !important;
    fill: var(--primary-contrast, var(--primary-text-color, #FFFFFF)) !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-apple-primary *, .btn-apple-primary svg, .btn-apple-primary span {
    color: inherit !important;
}

.btn-apple-primary svg, .btn-apple-primary i {
    color: inherit !important;
    stroke: currentColor;
}

.btn-apple-primary svg:not([stroke="none"]),
.btn-apple-primary svg path:not([stroke="none"]),
.btn-apple-primary svg circle:not([stroke="none"]),
.btn-apple-primary svg line:not([stroke="none"]),
.btn-apple-primary svg polyline:not([stroke="none"]),
.btn-apple-primary svg rect:not([stroke="none"]) {
    stroke: currentColor !important;
}

.btn-apple-primary svg:not([fill="none"]),
.btn-apple-primary svg path:not([fill="none"]),
.btn-apple-primary svg polygon {
    fill: currentColor;
}

.btn-apple-primary .apple-spinner-blade {
    background-color: currentColor !important;
}

.btn-apple-primary:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-contrast, var(--accent-text-color, #FFFFFF)) !important;
    fill: var(--accent-contrast, var(--accent-text-color, #FFFFFF)) !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35) !important;
}

.btn-apple-primary:hover *, .btn-apple-primary:hover svg, .btn-apple-primary:hover span {
    color: inherit !important;
}

.btn-apple-primary:hover svg, .btn-apple-primary:hover i {
    stroke: currentColor !important;
}

.btn-apple-primary:active {
    transform: scale(0.97) !important;
}

.btn-apple-secondary {
    background-color: #F5F5F7 !important;
    color: var(--secondary-contrast, var(--secondary-color, #1D1D1F)) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-apple-secondary *, .btn-apple-secondary svg, .btn-apple-secondary span {
    color: inherit !important;
}

.btn-apple-secondary svg, .btn-apple-secondary i {
    color: inherit !important;
    stroke: currentColor;
}

.btn-apple-secondary svg:not([stroke="none"]),
.btn-apple-secondary svg path:not([stroke="none"]) {
    stroke: currentColor !important;
}

.btn-apple-secondary .apple-spinner-blade {
    background-color: currentColor !important;
}

.btn-apple-secondary:hover {
    background-color: #E8E8ED !important;
    color: #1D1D1F !important;
}

.btn-apple-secondary:hover * {
    color: inherit !important;
}

.btn-apple-secondary:hover svg, .btn-apple-secondary:hover i {
    stroke: currentColor !important;
}

.btn-apple-secondary:active {
    transform: scale(0.97) !important;
}

.btn-apple-secondary-filled {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--secondary-contrast, var(--secondary-text-color, #FFFFFF)) !important;
    fill: var(--secondary-contrast, var(--secondary-text-color, #FFFFFF)) !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-apple-secondary-filled *, .btn-apple-secondary-filled svg, .btn-apple-secondary-filled span {
    color: inherit !important;
}

.btn-apple-secondary-filled svg, .btn-apple-secondary-filled i {
    color: inherit !important;
    stroke: currentColor;
}

.btn-apple-secondary-filled svg:not([stroke="none"]),
.btn-apple-secondary-filled svg path:not([stroke="none"]) {
    stroke: currentColor !important;
}

.btn-apple-secondary-filled .apple-spinner-blade {
    background-color: currentColor !important;
}

.btn-apple-secondary-filled:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 14px rgba(var(--secondary-rgb), 0.25) !important;
}

.btn-apple-dark {
    background-color: #1D1D1F !important;
    border: 1px solid #1D1D1F !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-apple-dark *, .btn-apple-dark svg, .btn-apple-dark span {
    color: inherit !important;
}

.btn-apple-dark svg, .btn-apple-dark i {
    color: inherit !important;
    stroke: currentColor;
}

.btn-apple-dark svg:not([stroke="none"]),
.btn-apple-dark svg path:not([stroke="none"]) {
    stroke: currentColor !important;
}

.btn-apple-dark svg:not([fill="none"]),
.btn-apple-dark svg path:not([fill="none"]) {
    fill: currentColor;
}

.btn-apple-dark:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Universal Button Icon Color Inheritance */
button svg, a.btn svg, [role="button"] svg {
    color: inherit;
}
/* Only target buttons with EXACT dark bg class — not hover:/active: variants */
button.text-white svg,
button.text-white svg *,
.btn-apple-primary svg,
.btn-apple-secondary-filled svg,
.btn-apple-dark svg {
    color: inherit !important;
}

/* Ensure stroke-based SVG icons (fill="none") get stroke from currentColor */
button svg[fill="none"],
button svg[fill="none"] path,
button svg[fill="none"] circle,
button svg[fill="none"] line,
button svg[fill="none"] polyline,
button svg[fill="none"] rect,
a.btn svg[fill="none"],
a.btn svg[fill="none"] path,
[role="button"] svg[fill="none"],
[role="button"] svg[fill="none"] path {
    stroke: currentColor;
}

/* Stroke-current Tailwind class in SVGs inside buttons */
button svg.stroke-current,
button svg.stroke-current *,
a.btn svg.stroke-current,
[role="button"] svg.stroke-current {
    stroke: currentColor !important;
}

.btn-apple-ghost {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: gap 0.2s ease, opacity 0.2s ease !important;
}

.btn-apple-ghost:hover {
    opacity: 0.85 !important;
    gap: 7px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* iOS Segmented Control Picker */
.ios-segmented-control {
    background: #E8E8ED;
    padding: 3px;
    border-radius: 9999px;
    display: inline-flex;
    position: relative;
}

.ios-segmented-btn {
    border-radius: 9999px;
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #515154;
    transition: all 0.2s ease;
}

.ios-segmented-btn.active {
    background: #FFFFFF;
    color: #1D1D1F;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Stepper Pill - Apple Style */
.stepper-pill {
    background-color: #F5F5F7 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 9999px !important;
}

.stepper-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #FFFFFF !important;
    color: #1D1D1F !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 9999px !important;
    transition: all 0.15s ease !important;
}

.stepper-btn:hover {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
    border-color: var(--primary-color) !important;
}

.stepper-btn:active {
    transform: scale(0.92) !important;
}

/* Native iPhone Sheet / Modal */
.ios-sheet {
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12) !important;
}

.ios-sheet-handle {
    width: 36px;
    height: 5px;
    background-color: rgba(60, 60, 67, 0.25);
    border-radius: 9999px;
    margin: 8px auto 14px auto;
}

/* Native iPhone App Bottom Tab Bar */
.ios-tab-bar {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
}

/* Text Gradient Utilities */
.apple-text-gradient {
    background: linear-gradient(135deg, #1D1D1F 0%, #434344 60%, #86868B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.apple-blue-gradient {
    background: linear-gradient(135deg, #0071E3 0%, #2997FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[x-cloak] {
    display: none !important;
}

:root, html, body {
    color-scheme: light !important;
}

/* Apple Hero Carousel Seamless Crossfade & Zero-Duplication Rules */
.apple-hero-slide-enter {
    transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.apple-hero-slide-enter-start {
    opacity: 0 !important;
}
.apple-hero-slide-enter-end {
    opacity: 1 !important;
}

.apple-hero-slide-leave {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.apple-hero-slide-leave-start {
    opacity: 1 !important;
}
.apple-hero-slide-leave-end {
    opacity: 0 !important;
}

/* ==========================================================================
   Apple Native Loaders & Activity Indicators
   ========================================================================== */
.apple-spinner {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
}
.apple-spinner.apple-spinner-sm {
    width: 18px;
    height: 18px;
}
.apple-spinner.apple-spinner-lg {
    width: 36px;
    height: 36px;
}
.apple-spinner-blade {
    position: absolute;
    left: 44.5%;
    top: 37%;
    width: 11%;
    height: 26%;
    background-color: currentColor;
    border-radius: 9999px;
    animation: apple-spinner-fade 1s linear infinite;
    transform-origin: center -50%;
}
.apple-spinner-blade:nth-child(1)  { transform: rotate(0deg) translate(0, -140%); animation-delay: -1.0s; }
.apple-spinner-blade:nth-child(2)  { transform: rotate(30deg) translate(0, -140%); animation-delay: -0.916s; }
.apple-spinner-blade:nth-child(3)  { transform: rotate(60deg) translate(0, -140%); animation-delay: -0.833s; }
.apple-spinner-blade:nth-child(4)  { transform: rotate(90deg) translate(0, -140%); animation-delay: -0.75s; }
.apple-spinner-blade:nth-child(5)  { transform: rotate(120deg) translate(0, -140%); animation-delay: -0.666s; }
.apple-spinner-blade:nth-child(6)  { transform: rotate(150deg) translate(0, -140%); animation-delay: -0.583s; }
.apple-spinner-blade:nth-child(7)  { transform: rotate(180deg) translate(0, -140%); animation-delay: -0.5s; }
.apple-spinner-blade:nth-child(8)  { transform: rotate(210deg) translate(0, -140%); animation-delay: -0.416s; }
.apple-spinner-blade:nth-child(9)  { transform: rotate(240deg) translate(0, -140%); animation-delay: -0.333s; }
.apple-spinner-blade:nth-child(10) { transform: rotate(270deg) translate(0, -140%); animation-delay: -0.25s; }
.apple-spinner-blade:nth-child(11) { transform: rotate(300deg) translate(0, -140%); animation-delay: -0.166s; }
.apple-spinner-blade:nth-child(12) { transform: rotate(330deg) translate(0, -140%); animation-delay: -0.083s; }

@keyframes apple-spinner-fade {
    0% { opacity: 1; }
    100% { opacity: 0.15; }
}

/* Apple Shimmer Skeleton Loader */
.apple-shimmer {
    background: linear-gradient(90deg, #F0F0F2 0%, #F9F9FA 50%, #F0F0F2 100%);
    background-size: 200% 100%;
    animation: apple-shimmer-anim 1.5s infinite ease-in-out;
}
@keyframes apple-shimmer-anim {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Apple Native Form Fields & Inputs
   ========================================================================== */
.apple-input,
.apple-select,
.apple-textarea {
    width: 100%;
    background-color: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
    color: #1D1D1F !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.apple-input::placeholder,
.apple-textarea::placeholder {
    color: #86868B !important;
    font-weight: 400 !important;
}

.apple-input:focus,
.apple-select:focus,
.apple-textarea:focus {
    outline: none !important;
    border-color: var(--primary-color, #0071E3) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 0, 113, 227), 0.16) !important;
    background-color: #FFFFFF !important;
}

.apple-input-inset {
    background-color: #F5F5F7 !important;
    border: 1px solid transparent !important;
}
.apple-input-inset:focus {
    background-color: #FFFFFF !important;
    border-color: var(--primary-color, #0071E3) !important;
}

.dark .apple-input,
.dark .apple-select,
.dark .apple-textarea {
    background-color: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #F5F5F7 !important;
}

.dark .apple-input::placeholder,
.dark .apple-textarea::placeholder {
    color: #86868B !important;
}

.dark .apple-input:focus,
.dark .apple-select:focus,
.dark .apple-textarea:focus {
    background-color: #1C1C1E !important;
    border-color: var(--primary-color, #0071E3) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 0, 113, 227), 0.25) !important;
}

.dark .apple-input-inset {
    background-color: #2C2C2E !important;
}
.dark .apple-input-inset:focus {
    background-color: #1C1C1E !important;
}

/* Native iOS Toggle Switch */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
}
.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ios-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E9E9EB;
    border-radius: 9999px;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ios-switch-slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ios-switch input:checked + .ios-switch-slider {
    background-color: var(--primary-color, #34C759);
}
.ios-switch input:checked + .ios-switch-slider:before {
    transform: translateX(20px);
}

/* Apple Native Squircle Cards */
.apple-squircle-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Apple Modal & Action Sheet */
.apple-modal-box {
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}

/* iMessage Native Message Bubbles */
.imessage-customer-bubble {
    background: linear-gradient(180deg, var(--primary-color, #0071E3) 0%, var(--accent-color, #0077ED) 100%) !important;
    color: #FFFFFF !important;
    border-radius: 20px 20px 4px 20px !important;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 0, 113, 227), 0.25) !important;
}

.imessage-agent-bubble {
    background-color: #E9E9EB !important;
    color: #000000 !important;
    border-radius: 20px 20px 20px 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   Apple Native Pagination Pill Styling
   ========================================================================== */
.apple-pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.dark .apple-pagination {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

.apple-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1D1D1F;
    background: transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.dark .apple-page-btn {
    color: #F5F5F7;
}

.apple-page-btn:hover:not(:disabled):not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary-color, #0071E3);
}

.dark .apple-page-btn:hover:not(:disabled):not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.apple-page-btn.active {
    background-color: var(--primary-color, #0071E3) !important;
    color: var(--primary-contrast, #FFFFFF) !important;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 0, 113, 227), 0.35);
}

.apple-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Fallback override for default framework pagination */
nav[role="navigation"] .relative.inline-flex {
    border-radius: 9999px !important;
    margin: 0 2px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}