/*
 * L2 / Apple-style continuous corners.
 *
 * Apple calls this cornerCurve.continuous. On the web, the closest native
 * equivalent is a superellipse with an exponent around four, represented by
 * superellipse(2) in CSS. It keeps the existing radius values as the size
 * token while replacing the circular arc with a continuously changing curve.
 * The fallback is the existing border-radius for browsers without corner-shape.
 */
:root {
    --l2-corner-shape: superellipse(2);
}

@supports (corner-shape: superellipse(2)) {
    :where(*, *::before, *::after) {
        corner-shape: var(--l2-corner-shape) !important;
    }

    /* Preserve primitives that are intentionally circular or capsule-shaped. */
    :where(
        [style*="border-radius: 50%"],
        [style*="border-radius:50%"],
        [style*="border-radius: 100%"],
        [style*="border-radius:100%"],
        [style*="border-radius: 999px"],
        [style*="border-radius:999px"],
        [style*="border-radius: 100px"],
        [style*="border-radius:100px"],
        [class*="avatar"],
        [class*="spinner"],
        [class*="progress"],
        [class*="badge"],
        [class*="pill"],
        .status-dot,
        .online-indicator,
        .typing-indicator
    ) {
        corner-shape: round !important;
    }

    /* The chat mode slider uses the same square L2 treatment as its frame;
       its class name contains "pill" only because it was originally a capsule. */
    :where(
        .chat-header .clean-segmented-switch.header-mode-switch,
        .chat-header .clean-segmented-switch.header-mode-switch .mode-switch-btn,
        .chat-header .clean-segmented-switch.header-mode-switch .segmented-switch-pill
    ) {
        corner-shape: var(--l2-corner-shape) !important;
    }
}

/* Chat composer: keep the dock transparent so it cannot create a full-width
   colour band behind the raised input bubble. */
#chatView .chat-main-area > .input-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep the main composer at rest as a quiet capsule. Its focused rounded-
   rectangle state is defined by the final chat-composer interaction layer. */
#chatView .chat-main-area .chat-input-area {
    border: 0 !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
    transition: none !important;
}

#chatView .chat-main-area .chat-input-area:hover,
#chatView .chat-main-area .chat-input-area:focus-within {
    border: 0 !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #chatView .chat-main-area .chat-input-area {
        transition: none !important;
    }
}