@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-semibold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

/*
 * Haplo design system foundation.
 * Tokens are intentionally scoped to .haplo-ui so the plugin does not mutate
 * WordPress, WooCommerce, or theme variables outside a Haplo surface.
 */
.haplo-ui {
    color-scheme: light;

    --haplo-color-background: #fff7f1;
    --haplo-color-layer-01: #ffffff;
    --haplo-color-layer-02: #f7f2ee;
    --haplo-color-layer-03: #eee5df;
    --haplo-color-text: #2b1b14;
    --haplo-color-text-secondary: #655850;
    --haplo-color-text-placeholder: #75675f;
    --haplo-color-border: #d8ccc4;
    --haplo-color-border-strong: #8d7d74;
    --haplo-color-accent: #ff4d2e;
    --haplo-color-accent-hover: #ef4328;
    --haplo-color-accent-active: #d83a22;
    --haplo-color-on-accent: #2b1b14;
    --haplo-color-interactive: #2b1b14;
    --haplo-color-interactive-hover: #473127;
    --haplo-color-interactive-active: #160d09;
    --haplo-color-on-interactive: #ffffff;
    --haplo-color-focus: #0f62fe;
    --haplo-color-success: #0e6027;
    --haplo-color-success-bg: #edf7ee;
    --haplo-color-warning: #704800;
    --haplo-color-warning-bg: #fff4d6;
    --haplo-color-danger: #b81920;
    --haplo-color-danger-hover: #951219;
    --haplo-color-danger-bg: #fff1f1;
    --haplo-color-info: #0043ce;
    --haplo-color-info-bg: #edf5ff;

    --haplo-font-sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    --haplo-font-mono: "IBM Plex Mono", Consolas, monospace;
    --haplo-font-size-caption: 0.75rem;
    --haplo-font-size-label: 0.8125rem;
    --haplo-font-size-body: 0.9375rem;
    --haplo-font-size-body-lg: 1.0625rem;
    --haplo-font-size-heading-sm: 1.25rem;
    --haplo-font-size-heading: clamp(1.75rem, 3vw, 2.5rem);

    --haplo-space-01: 0.125rem;
    --haplo-space-02: 0.25rem;
    --haplo-space-03: 0.5rem;
    --haplo-space-04: 0.75rem;
    --haplo-space-05: 1rem;
    --haplo-space-06: 1.5rem;
    --haplo-space-07: 2rem;
    --haplo-space-08: 2.5rem;
    --haplo-space-09: 3rem;
    --haplo-space-10: 4rem;

    --haplo-control-height: 3rem;
    --haplo-radius: 0.125rem;
    --haplo-radius-round: 999rem;
    --haplo-shadow-raised: 0 0.5rem 1.5rem rgb(43 27 20 / 8%);
    --haplo-content-wide: 90rem;
    --haplo-content-reading: 45rem;

    box-sizing: border-box;
    margin: 0;
    color: var(--haplo-color-text);
    background: var(--haplo-color-background);
    font-family: var(--haplo-font-sans);
    font-size: var(--haplo-font-size-body);
    font-synthesis: none;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.haplo-ui *,
.haplo-ui *::before,
.haplo-ui *::after {
    box-sizing: inherit;
}

.haplo-ui :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) {
    margin-block-start: 0;
}

.haplo-ui :where(h1, h2, h3, h4) {
    color: var(--haplo-color-text);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.haplo-ui h1 {
    margin-block-end: var(--haplo-space-04);
    font-size: var(--haplo-font-size-heading);
    font-weight: 500;
}

.haplo-ui h2 {
    margin-block-end: var(--haplo-space-04);
    font-size: var(--haplo-font-size-heading-sm);
}

.haplo-ui h3,
.haplo-ui h4 {
    margin-block-end: var(--haplo-space-03);
    font-size: 1rem;
}

.haplo-ui p {
    margin-block-end: var(--haplo-space-05);
}

.haplo-ui :where(img, svg, video) {
    display: block;
    max-inline-size: 100%;
}

.haplo-ui :where(button, input, select, textarea) {
    font: inherit;
}

.haplo-ui a {
    color: var(--haplo-color-text);
    text-decoration-color: var(--haplo-color-accent);
    text-decoration-thickness: 0.125rem;
    text-underline-offset: 0.2em;
}

.haplo-ui a:hover {
    color: var(--haplo-color-accent-active);
}

.haplo-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 0.125rem solid var(--haplo-color-focus);
    outline-offset: 0.125rem;
}

.haplo-ui :where(input, select, textarea):focus-visible {
    outline-offset: -0.125rem;
}

.haplo-ui :where(button, [role="button"]):disabled,
.haplo-ui [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.56;
}

.haplo-ui [hidden],
.haplo-ui .is-hidden {
    display: none;
}

.haplo-visually-hidden,
.haplo-ui .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.haplo-skip-link {
    position: fixed;
    z-index: 10000;
    inset-block-start: var(--haplo-space-03);
    inset-inline-start: var(--haplo-space-03);
    translate: 0 -200%;
    min-block-size: var(--haplo-control-height);
    padding: var(--haplo-space-04) var(--haplo-space-05);
    background: var(--haplo-color-interactive);
    color: var(--haplo-color-on-interactive);
}

.haplo-skip-link:focus {
    translate: 0 0;
}

/* Layout primitives */
.haplo-stack {
    display: flex;
    flex-direction: column;
    gap: var(--haplo-stack-gap, var(--haplo-space-05));
}

.haplo-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--haplo-cluster-gap, var(--haplo-space-03));
}

.haplo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--haplo-grid-min, 18rem)), 1fr));
    gap: var(--haplo-grid-gap, var(--haplo-space-05));
}

.haplo-section {
    inline-size: min(100%, var(--haplo-content-wide));
    margin-inline: auto;
    padding: var(--haplo-space-07);
}

.haplo-divider {
    block-size: 1px;
    margin-block: var(--haplo-space-06);
    border: 0;
    background: var(--haplo-color-border);
}

/* Branding */
.haplo-brand {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    color: inherit;
    text-decoration: none;
}

.haplo-brand img,
.haplo-brand__wordmark {
    inline-size: auto;
    block-size: 2rem;
    max-inline-size: 10rem;
    object-fit: contain;
}

.haplo-brand--mark img,
.haplo-brand__mark {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 0.625rem;
}

/* Cards and surfaces */
.haplo-card {
    min-inline-size: 0;
    padding: var(--haplo-space-06);
    border: 1px solid var(--haplo-color-border);
    border-radius: var(--haplo-radius);
    background: var(--haplo-color-layer-01);
}

.haplo-card--raised {
    box-shadow: var(--haplo-shadow-raised);
}

.haplo-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--haplo-space-05);
    margin-block-end: var(--haplo-space-05);
    padding-block-end: var(--haplo-space-05);
    border-block-end: 1px solid var(--haplo-color-border);
}

.haplo-card__title {
    margin: 0;
    font-size: 1.125rem;
}

.haplo-card__description,
.haplo-muted {
    color: var(--haplo-color-text-secondary);
}

/* Buttons */
.haplo-button,
.haplo-action-button,
.haplo-secondary-button,
.haplo-track-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--haplo-space-03);
    min-block-size: var(--haplo-control-height);
    padding-inline: var(--haplo-space-06);
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--haplo-color-interactive);
    color: var(--haplo-color-on-interactive);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.haplo-button:hover,
.haplo-action-button:hover,
.haplo-track-button:hover {
    background: var(--haplo-color-interactive-hover);
    color: var(--haplo-color-on-interactive);
}

.haplo-button:active,
.haplo-action-button:active,
.haplo-track-button:active {
    background: var(--haplo-color-interactive-active);
}

.haplo-button--accent,
.haplo-button--primary,
.haplo-button-primary,
.haplo-button[data-variant="accent"] {
    background: var(--haplo-color-accent);
    color: var(--haplo-color-on-accent);
}

.haplo-button--accent:hover,
.haplo-button--primary:hover,
.haplo-button-primary:hover,
.haplo-button[data-variant="accent"]:hover {
    background: var(--haplo-color-accent-hover);
    color: var(--haplo-color-on-accent);
}

.haplo-button--secondary,
.haplo-secondary-button {
    border-color: var(--haplo-color-border-strong);
    background: var(--haplo-color-layer-01);
    color: var(--haplo-color-text);
}

.haplo-button--secondary:hover,
.haplo-secondary-button:hover {
    border-color: var(--haplo-color-text);
    background: var(--haplo-color-layer-02);
    color: var(--haplo-color-text);
}

.haplo-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--haplo-color-text);
}

.haplo-button--ghost:hover {
    background: var(--haplo-color-layer-02);
}

.haplo-button--danger,
.haplo-button-danger {
    background: var(--haplo-color-danger);
    color: #ffffff;
}

.haplo-button--danger:hover,
.haplo-button-danger:hover {
    background: var(--haplo-color-danger-hover);
    color: #ffffff;
}

.haplo-button--danger-ghost {
    border-color: var(--haplo-color-danger);
    background: transparent;
    color: var(--haplo-color-danger);
}

.haplo-button--danger-ghost:hover {
    background: var(--haplo-color-danger-bg);
    color: var(--haplo-color-danger-hover);
}

.haplo-button-done {
    background: var(--haplo-color-success);
    color: #ffffff;
}

.haplo-button-done:hover {
    background: #094c1e;
    color: #ffffff;
}

.haplo-button--icon {
    inline-size: var(--haplo-control-height);
    padding-inline: 0;
}

.haplo-button[aria-busy="true"]::before,
.haplo-action-button[aria-busy="true"]::before {
    content: "";
    inline-size: 1rem;
    block-size: 1rem;
    border: 0.125rem solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: haplo-spin 700ms linear infinite;
}

/* Form controls */
.haplo-field {
    display: grid;
    gap: var(--haplo-space-03);
    min-inline-size: 0;
}

.haplo-field__label,
.haplo-ui label.haplo-label {
    color: var(--haplo-color-text);
    font-size: var(--haplo-font-size-label);
    font-weight: 600;
}

.haplo-field__hint {
    margin: 0;
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-caption);
}

.haplo-field__error {
    margin: 0;
    color: var(--haplo-color-danger);
    font-size: var(--haplo-font-size-label);
    font-weight: 600;
}

.haplo-input,
.haplo-select,
.haplo-textarea,
.haplo-ui .haplo-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    appearance: none;
    inline-size: 100%;
    min-block-size: var(--haplo-control-height);
    margin: 0;
    padding: 0 var(--haplo-space-05);
    border: 0;
    border-block-end: 1px solid var(--haplo-color-border-strong);
    border-radius: 0;
    background: var(--haplo-color-layer-02);
    color: var(--haplo-color-text);
    box-shadow: none;
    caret-color: var(--haplo-color-accent-active);
}

.haplo-textarea,
.haplo-ui .haplo-field textarea {
    min-block-size: 7rem;
    padding-block: var(--haplo-space-04);
    line-height: 1.5;
    resize: vertical;
}

.haplo-select,
.haplo-ui .haplo-field select {
    padding-inline-end: 2.75rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--haplo-color-text) 50%),
        linear-gradient(135deg, var(--haplo-color-text) 50%, transparent 50%);
    background-position:
        calc(100% - 1.25rem) 50%,
        calc(100% - 0.875rem) 50%;
    background-repeat: no-repeat;
    background-size: 0.375rem 0.375rem;
}

.haplo-ui :where(.haplo-input, .haplo-select, .haplo-textarea, .haplo-field input, .haplo-field select, .haplo-field textarea)::placeholder {
    color: var(--haplo-color-text-placeholder);
    opacity: 1;
}

.haplo-ui :where(.haplo-input, .haplo-select, .haplo-textarea, .haplo-field input, .haplo-field select, .haplo-field textarea):disabled {
    border-color: var(--haplo-color-border);
    background: var(--haplo-color-layer-03);
    color: var(--haplo-color-text-secondary);
    -webkit-text-fill-color: var(--haplo-color-text-secondary);
    opacity: 1;
}

.haplo-ui :where(.haplo-input, .haplo-select, .haplo-textarea, .haplo-field input, .haplo-field select, .haplo-field textarea)[aria-invalid="true"] {
    border-block-end-color: var(--haplo-color-danger);
    box-shadow: inset 0 -1px 0 var(--haplo-color-danger);
}

.haplo-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--haplo-space-03);
    min-block-size: var(--haplo-control-height);
    padding-block: 0.875rem;
    cursor: pointer;
}

.haplo-check input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0.0625rem 0 0;
    accent-color: var(--haplo-color-interactive);
}

.haplo-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--haplo-space-05);
}

.haplo-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--haplo-space-03);
    padding-block-start: var(--haplo-space-05);
    border-block-start: 1px solid var(--haplo-color-border);
}

/* Status and feedback */
.haplo-badge,
.haplo-pill,
.haplo-store-state,
.haplo-status-pill,
.haplo-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--haplo-space-02);
    min-block-size: 1.75rem;
    padding-inline: var(--haplo-space-03);
    border: 1px solid var(--haplo-color-border);
    border-radius: var(--haplo-radius-round);
    background: var(--haplo-color-layer-02);
    color: var(--haplo-color-text);
    font-size: var(--haplo-font-size-label);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.haplo-badge::before,
.haplo-store-state::before,
.haplo-status-pill::before,
.haplo-status-badge::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.haplo-badge--success,
.haplo-store-state.is-open,
.haplo-badge[data-status="completed"],
.haplo-status-pill--completed,
.haplo-status-badge-completed {
    border-color: #b7dbbf;
    background: var(--haplo-color-success-bg);
    color: var(--haplo-color-success);
}

.haplo-badge--warning,
.haplo-badge[data-status="pending"],
.haplo-badge[data-status="on-hold"],
.haplo-status-pill--pending,
.haplo-status-pill--on-hold,
.haplo-status-badge-pending,
.haplo-status-badge-on-hold {
    border-color: #ead18a;
    background: var(--haplo-color-warning-bg);
    color: var(--haplo-color-warning);
}

.haplo-badge--danger,
.haplo-store-state.is-closed,
.haplo-badge[data-status="cancelled"],
.haplo-badge[data-status="failed"],
.haplo-status-pill--cancelled,
.haplo-status-pill--failed,
.haplo-status-badge-cancelled,
.haplo-status-badge-failed {
    border-color: #efb8bc;
    background: var(--haplo-color-danger-bg);
    color: var(--haplo-color-danger);
}

.haplo-badge--info,
.haplo-badge[data-status="processing"],
.haplo-badge[data-status^="haplo-"],
.haplo-status-pill--processing,
.haplo-status-pill[class*="haplo-status-pill--haplo-"],
.haplo-status-badge-processing,
.haplo-status-badge[class*="haplo-status-badge-haplo-"] {
    border-color: #b8cdf6;
    background: var(--haplo-color-info-bg);
    color: var(--haplo-color-info);
}

.haplo-notice,
.haplo-message {
    display: grid;
    grid-template-columns: 0.25rem minmax(0, 1fr);
    gap: var(--haplo-space-04);
    min-block-size: var(--haplo-control-height);
    margin-block-end: var(--haplo-space-05);
    padding: var(--haplo-space-04) var(--haplo-space-05);
    border: 1px solid var(--haplo-color-border);
    background: var(--haplo-color-layer-01);
    color: var(--haplo-color-text);
}

.haplo-notice::before,
.haplo-message::before {
    content: "";
    background: var(--haplo-color-info);
}

.haplo-message:empty {
    display: none;
}

.haplo-form-status {
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-label);
}

.haplo-icon-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-weight: 600;
}

.haplo-notice--success::before,
.haplo-message-success::before {
    background: var(--haplo-color-success);
}

.haplo-notice--warning::before,
.haplo-message-warning::before {
    background: var(--haplo-color-warning);
}

.haplo-notice--error::before,
.haplo-message-error::before,
.haplo-error::before {
    background: var(--haplo-color-danger);
}

.haplo-empty {
    display: grid;
    place-items: center;
    min-block-size: 10rem;
    padding: var(--haplo-space-07);
    border: 1px dashed var(--haplo-color-border-strong);
    background: var(--haplo-color-layer-01);
    color: var(--haplo-color-text-secondary);
    text-align: center;
}

/* Shared order presentation */
.haplo-order-card {
    min-inline-size: 0;
    border: 1px solid var(--haplo-color-border);
    background: var(--haplo-color-layer-01);
}

.haplo-order-card__header,
.haplo-order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--haplo-space-04);
    padding: var(--haplo-space-05);
    border-block-end: 1px solid var(--haplo-color-border);
}

.haplo-order-card__number,
.haplo-order-number {
    margin: 0;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.haplo-order-card__body {
    padding: var(--haplo-space-05);
}

.haplo-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--haplo-space-03);
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-label);
}

.haplo-order-items,
.haplo-item-meta {
    margin: 0;
    padding: 0;
    list-style: none;
}

.haplo-order-items > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--haplo-space-03);
    padding-block: var(--haplo-space-04);
    border-block-end: 1px solid var(--haplo-color-border);
}

.haplo-quantity,
.haplo-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.haplo-item-meta {
    grid-column: 2 / -1;
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-label);
}

.haplo-money,
.haplo-money :where(.amount, bdi, .woocommerce-Price-amount, .woocommerce-Price-currencySymbol) {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Shared chat */
.haplo-chat,
.haplo-chat-box,
.haplo-tracking-chat {
    border: 1px solid var(--haplo-color-border);
    background: var(--haplo-color-layer-01);
}

.haplo-chat__header,
.haplo-chat-header {
    padding: var(--haplo-space-05);
    border-block-end: 1px solid var(--haplo-color-border);
}

.haplo-chat__header :where(h2, h3),
.haplo-chat-header :where(h2, h3) {
    margin-block-end: var(--haplo-space-02);
}

.haplo-chat__header p,
.haplo-chat-header p {
    margin: 0;
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-label);
}

.haplo-chat__thread,
.haplo-chat-thread {
    display: flex;
    flex-direction: column;
    gap: var(--haplo-space-03);
    max-block-size: 22rem;
    padding: var(--haplo-space-05);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.haplo-chat__empty,
.haplo-chat-empty {
    padding: var(--haplo-space-05);
    color: var(--haplo-color-text-secondary);
    text-align: center;
}

.haplo-chat__message,
.haplo-chat-message {
    align-self: flex-start;
    inline-size: min(85%, 32rem);
    padding: var(--haplo-space-04);
    border-inline-start: 0.25rem solid var(--haplo-color-border-strong);
    background: var(--haplo-color-layer-02);
}

.haplo-chat__message--customer,
.haplo-chat-customer {
    align-self: flex-end;
    border-inline-start: 0;
    border-inline-end: 0.25rem solid var(--haplo-color-accent);
    background: #fff1ec;
}

.haplo-chat__message--courier,
.haplo-chat-courier {
    border-inline-start-color: var(--haplo-color-info);
    background: var(--haplo-color-info-bg);
}

.haplo-chat__message--restaurant,
.haplo-chat-restaurant {
    border-inline-start-color: var(--haplo-color-success);
    background: var(--haplo-color-success-bg);
}

.haplo-chat__message.is-own {
    align-self: flex-end;
    border-inline-start: 0;
    border-inline-end: 0.25rem solid var(--haplo-color-accent);
}

.haplo-chat__meta,
.haplo-chat-message > div {
    display: flex;
    justify-content: space-between;
    gap: var(--haplo-space-04);
    margin-block-end: var(--haplo-space-02);
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-caption);
}

.haplo-chat__message p,
.haplo-chat-message p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.haplo-chat__composer,
.haplo-tracking-message-form,
.haplo-courier-message-form,
.haplo-restaurant-message-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--haplo-space-03);
    padding: var(--haplo-space-05);
    border-block-start: 1px solid var(--haplo-color-border);
}

.haplo-chat__composer textarea,
.haplo-tracking-message-form textarea,
.haplo-courier-message-form textarea,
.haplo-restaurant-message-form textarea {
    inline-size: 100%;
    min-block-size: var(--haplo-control-height);
    max-block-size: 10rem;
    margin: 0;
    padding: var(--haplo-space-04) var(--haplo-space-05);
    border: 0;
    border-block-end: 1px solid var(--haplo-color-border-strong);
    border-radius: 0;
    background: var(--haplo-color-layer-02);
    color: var(--haplo-color-text);
    -webkit-text-fill-color: var(--haplo-color-text);
    caret-color: var(--haplo-color-accent-active);
    resize: vertical;
}

.haplo-chat__composer textarea::placeholder,
.haplo-tracking-message-form textarea::placeholder,
.haplo-courier-message-form textarea::placeholder,
.haplo-restaurant-message-form textarea::placeholder {
    color: var(--haplo-color-text-placeholder);
    -webkit-text-fill-color: var(--haplo-color-text-placeholder);
    opacity: 1;
}

.haplo-chat__composer textarea:disabled,
.haplo-tracking-message-form textarea:disabled,
.haplo-courier-message-form textarea:disabled,
.haplo-restaurant-message-form textarea:disabled {
    background: var(--haplo-color-layer-03);
    color: var(--haplo-color-text-secondary);
    -webkit-text-fill-color: var(--haplo-color-text-secondary);
    opacity: 1;
}

.haplo-chat__feedback,
.haplo-chat-feedback {
    min-block-size: 1.5rem;
    margin: 0;
    padding-inline: var(--haplo-space-05);
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-label);
}

.haplo-chat__new-messages {
    position: sticky;
    inset-block-end: var(--haplo-space-03);
    align-self: center;
    min-block-size: 2rem;
    padding-inline: var(--haplo-space-04);
    border: 0;
    border-radius: var(--haplo-radius-round);
    background: var(--haplo-color-interactive);
    color: var(--haplo-color-on-interactive);
    font-size: var(--haplo-font-size-label);
    cursor: pointer;
}

/* Dialogs */
.haplo-dialog {
    inline-size: min(calc(100% - 2rem), 34rem);
    max-block-size: calc(100dvh - 2rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--haplo-color-border-strong);
    border-radius: 0;
    background: var(--haplo-color-layer-01);
    color: var(--haplo-color-text);
    box-shadow: 0 1rem 3rem rgb(22 13 9 / 22%);
}

.haplo-dialog::backdrop {
    background: rgb(22 13 9 / 62%);
}

.haplo-dialog__header,
.haplo-dialog__body,
.haplo-dialog__footer {
    padding: var(--haplo-space-06);
}

.haplo-dialog__header,
.haplo-dialog__footer {
    border-block-end: 1px solid var(--haplo-color-border);
}

.haplo-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--haplo-space-03);
    border-block-start: 1px solid var(--haplo-color-border);
    border-block-end: 0;
}

/* Busy and offline states */
.haplo-ui [aria-busy="true"] {
    cursor: progress;
}

.haplo-connection-state {
    display: inline-flex;
    align-items: center;
    gap: var(--haplo-space-03);
    color: var(--haplo-color-text-secondary);
    font-size: var(--haplo-font-size-label);
}

.haplo-connection-state::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--haplo-color-success);
}

.haplo-connection-state.is-offline::before,
.haplo-connection-state.is-error::before {
    background: var(--haplo-color-danger);
}

@keyframes haplo-spin {
    to { rotate: 1turn; }
}

@media (max-width: 45rem) {
    .haplo-section {
        padding: var(--haplo-space-05);
    }

    .haplo-form-grid {
        grid-template-columns: 1fr;
    }

    .haplo-card__header,
    .haplo-order-card__header,
    .haplo-order-card-header {
        flex-direction: column;
    }

    .haplo-chat__composer,
    .haplo-tracking-message-form,
    .haplo-courier-message-form,
    .haplo-restaurant-message-form {
        grid-template-columns: 1fr;
    }

    .haplo-chat__composer .haplo-button,
    .haplo-tracking-message-form .haplo-button,
    .haplo-courier-message-form .haplo-button,
    .haplo-restaurant-message-form .haplo-button {
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .haplo-ui *,
    .haplo-ui *::before,
    .haplo-ui *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

@media (forced-colors: active) {
    .haplo-ui :where(.haplo-button, .haplo-action-button, .haplo-secondary-button, .haplo-input, .haplo-select, .haplo-textarea, .haplo-badge, .haplo-card) {
        border: 1px solid CanvasText;
    }

    .haplo-badge::before,
    .haplo-store-state::before {
        forced-color-adjust: none;
    }
}