.msg-status-open { background: var(--sbv2-amber-soft, #fef9c3); color: var(--sbv2-amber, #92400e); }
/* Pulsing dot on open (unresolved) messages — mirrors the order-processing pulse pattern.
   Keeps the badge visually scannable without a second read of the label text. */
.msg-status-open::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 4px;
    vertical-align: middle;
    opacity: 0.85;
    animation: status-dot-pulse 1.8s ease-in-out infinite;
}
.msg-status-resolved { background: var(--sbv2-moss-soft, #dcfce7); color: var(--sbv2-moss, #15803d); }

.msg-stock-badge {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}
.msg-stock-in { background: var(--sbv2-moss-soft, #dcfce7); color: var(--sbv2-moss, #15803d); }
.msg-stock-out { background: var(--sbv2-tint, #f3f4f6); color: var(--sbv2-muted, #6b7280); }
.msg-stock-reserved { background: var(--sbv2-amber-soft, #fef9c3); color: var(--sbv2-amber, #92400e); }

.msg-type-badge {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}
.msg-type-complaint { background: var(--sbv2-rust-soft, #fee2e2); color: var(--sbv2-rust, #b91c1c); }
.msg-type-showroom-visit { background: var(--sbv2-teal-soft, #ccfbf1); color: var(--sbv2-teal, #0f766e); }
.msg-type-return-exchange { background: var(--sbv2-indigo-soft, #eef2ff); color: var(--sbv2-indigo, #4338ca); }
.msg-type-address-correction { background: var(--sbv2-amber-soft, #fef3c7); color: var(--sbv2-amber, #92400e); }
.msg-type-showroom-conflict { background: var(--sbv2-amber-soft, #fef3c7); color: var(--sbv2-amber, #92400e); }
.msg-type-dealer-lead { background: #d1fae5; color: #065f46; }
.msg-type-sourcing-lead { background: var(--sbv2-indigo-soft, #eef2ff); color: var(--sbv2-indigo, #4338ca); }
.msg-type-reservation-lead { background: var(--sbv2-teal-soft, #ccfbf1); color: var(--sbv2-teal, #0f766e); }
.msg-type-offer-lead { background: var(--sbv2-amber-soft, #fef9c3); color: var(--sbv2-amber, #92400e); }
.msg-type-hours-question { background: #f3f4f6; color: #374151; }
.msg-type-shipping-lead { background: var(--sbv2-indigo-soft, #eef2ff); color: var(--sbv2-indigo, #4338ca); }

.msg-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sbv2-ink-2, #444444);
    margin: 0 0 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.5rem;
}
.msg-attachment {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--sbv2-tint, #EEEEEE);
}
.msg-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.msg-attachment:focus-visible {
    outline: 2px solid var(--sbv2-ink, #111111);
    outline-offset: 2px;
}

.msg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--sbv2-muted, #666666);
}
.msg-sender { font-weight: 500; color: var(--sbv2-ink-2, #444444); }
.msg-contact { color: var(--sbv2-muted, #666666); text-decoration: none; }
.msg-contact:hover { color: var(--sbv2-ink, #111111); text-decoration: underline; }
.msg-contact:focus-visible {
    outline: 2px solid var(--sbv2-ink, #111111);
    outline-offset: 2px;
    border-radius: 2px;
}
.msg-date { margin-left: auto; white-space: nowrap; }
.msg-action-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--sbv2-tint, #EEEEEE);
    color: var(--sbv2-ink-2, #444444);
    text-decoration: none;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.msg-action-link:hover {
    background: var(--sbv2-ink, #111111);
    color: var(--sbv2-paper, #FFFFFF);
}
.msg-action-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--sbv2-ink, #111111);
    background: var(--sbv2-ink, #111111);
    color: var(--sbv2-paper, #FFFFFF);
}

.msg-followup-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--sbv2-tint, #EEEEEE);
    color: var(--sbv2-muted, #666666);
    text-decoration: none;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.msg-followup-link:hover {
    background: var(--sbv2-line, #E0E0E0);
    color: var(--sbv2-ink, #111111);
}
.msg-followup-link:focus-visible {
    outline: 2px solid var(--sbv2-ink, #111111);
    outline-offset: 2px;
    border-radius: 2px;
    color: var(--sbv2-ink, #111111);
}

.msg-replies {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--sbv2-tint, #EEEEEE);
}
.msg-reply {
    background: var(--sbv2-tint, #F7F7F7);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}
.msg-reply-author {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--sbv2-ink, #111111);
}
.msg-reply-date {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--sbv2-muted, #666666);
}
.msg-reply-text {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--sbv2-ink-2, #444444);
    white-space: pre-wrap;
}

.msg-reply-form {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: var(--space-sm);
}
.msg-reply-form textarea {
    width: 100%;
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    font: inherit;
    font-size: 0.875rem;
    resize: vertical;
}
.msg-reply-submit {
    align-self: flex-start;
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--sbv2-ink, #111111);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}

.msg-reply-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.msg-reply--participant {
    border-left: 2px solid var(--sbv2-line-strong, #CCCCCC);
    padding-left: 0.5rem;
}
.msg-reply-as {
    margin: 0;
    font-size: 0.75rem;
    color: var(--sbv2-muted, #666666);
}
.msg-ai-draft-btn {
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--sbv2-ink, #111111);
    font-weight: 500;
    font-size: 0.75rem;
    cursor: pointer;
}
.msg-ai-draft-btn:hover {
    background: #f3f4f6;
}
.msg-ai-draft-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.msg-ai-draft-feedback {
    font-size: 0.75rem;
    color: #6b7280;
}

.msg-decision {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
}
.msg-decision-refund { background: var(--sbv2-moss-soft, #dcfce7); color: var(--sbv2-moss, #15803d); }
.msg-decision-replace { background: var(--sbv2-amber-soft, #fef9c3); color: var(--sbv2-amber, #92400e); }
.msg-decision-reject { background: var(--sbv2-rust-soft, #fee2e2); color: var(--sbv2-rust, #b91c1c); }

.msg-decision-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.msg-decision-select-label,
.msg-decision-amount-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 140px;
    font-size: 0.75rem;
    color: var(--sbv2-muted, #666666);
}
.msg-decision-select,
.msg-decision-amount {
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    padding: 0.375rem 0.5rem;
    font: inherit;
    font-size: 0.875rem;
}

.msg-offer {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
}
.msg-offer-pending { background: var(--sbv2-amber-soft, #fef9c3); color: var(--sbv2-amber, #92400e); }
.msg-offer-accepted { background: var(--sbv2-moss-soft, #dcfce7); color: var(--sbv2-moss, #15803d); }
.msg-offer-declined { background: var(--sbv2-rust-soft, #fee2e2); color: var(--sbv2-rust, #b91c1c); }

.msg-offer-actions {
    display: flex;
    gap: 0.5rem;
}
.msg-offer-accept,
.msg-offer-decline {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    background: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}
.msg-offer-accept { border-color: var(--sbv2-moss, #15803d); color: var(--sbv2-moss, #15803d); }
.msg-offer-decline { border-color: var(--sbv2-rust, #b91c1c); color: var(--sbv2-rust, #b91c1c); }

.messages-compose-offer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.messages-compose-offer input {
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    font: inherit;
    font-size: 0.875rem;
    max-width: 200px;
}

.messages-compose-floor {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.messages-compose-floor input[type="text"] {
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    font: inherit;
    font-size: 0.875rem;
    max-width: 200px;
}
.messages-compose-carry-help {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: normal;
}

.msg-floor-info {
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--sbv2-muted, #666666);
}

.toolbar-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--sbv2-ink-2, #444444);
    text-decoration: none;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.pagination-link:hover {
    background: var(--sbv2-tint, #EEEEEE);
    border-color: var(--sbv2-muted-2, #AAAAAA);
    color: var(--sbv2-ink, #111111);
}
.pagination-link:focus-visible {
    outline: 2px solid var(--sbv2-ink, #111111);
    outline-offset: 2px;
    color: var(--sbv2-ink, #111111);
}

.page-indicator {
    font-size: 0.8125rem;
    color: var(--sbv2-muted, #666666);
}

.messages-pagination-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}

@media (max-width: 768px) {
    .msg-thumb { width: 44px; height: 44px; }
    .msg-top { flex-direction: column; gap: 0.25rem; }
    .msg-date { margin-left: 0; }
    .msg-meta { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
}

/* ≤480px: tighter card padding + larger action button hit area */
@media (max-width: 480px) {
    .msg-card { padding: var(--space-sm); gap: var(--space-sm); }
    .msg-followup-link,
    .msg-action-link { min-height: 44px; padding: 0 0.875rem; font-size: 0.8125rem; }
}

/* Touch screens: action links must be tap-friendly (WCAG 2.5.5 — 44×44 px min) */
@media (hover: none) {
    .msg-followup-link,
    .msg-action-link { min-height: 44px; padding: 0 0.875rem; }
}

/* Messages toolbar: wrap to 2 rows on narrow phones so heading + pagination
   don't collide. Prev/Next links get min-height:44px for touch targets
   (WCAG 2.5.5). The bottom pagination strip gets the same treatment. */
@media (max-width: 480px) {
    .messages-toolbar {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    .messages-title {
        flex: 1 1 100%;
    }
    .messages-search-wrap {
        flex: 1 1 100%;
    }
    .pagination-link {
        min-height: 44px;
        padding: 0 0.875rem;
    }
    .messages-pagination-bottom {
        flex-wrap: wrap;
    }
}
@media (hover: none) {
    .pagination-link {
        min-height: 44px;
        padding: 0 0.875rem;
    }
}

/* Transport (shared with messages/wishlist) */
.transport-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.transport-card {
    padding: var(--space-md);
    border: 1px solid var(--sbv2-tint, #EEEEEE);
    border-radius: var(--radius-md);
    transition: border-color var(--duration) var(--ease);
}

.transport-card:hover {
    border-color: var(--sbv2-line-strong, #CCCCCC);
}

.transport-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}

.transport-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.transport-date {
    font-size: 0.8125rem;
    color: var(--sbv2-muted, #666666);
    white-space: nowrap;
}

.transport-details {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--sbv2-muted, #666666);
    margin: 0.25rem 0 0.5rem;
}

.transport-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.transport-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.transport-status-pending { background: #f3f4f6; color: #6b7280; font-style: italic; }
.transport-status-unassigned { background: #f3f4f6; color: #4b5563; }
.transport-status-assigned { background: #eff6ff; color: #1d4ed8; }
.transport-status-started { background: var(--sbv2-amber-soft, #fef9c3); color: var(--sbv2-amber, #92400e); }
.transport-status-completed { background: var(--sbv2-moss-soft, #dcfce7); color: var(--sbv2-moss, #15803d); }
.transport-status-unknown { background: var(--sbv2-rust-soft, #fee2e2); color: var(--sbv2-rust, #b91c1c); }

.transport-type-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    margin-right: 0.375rem;
}
.transport-type-1 { background: #eff6ff; color: #1d4ed8; }
.transport-type-2 { background: var(--sbv2-amber-soft, #fef3c7); color: var(--sbv2-amber, #92400e); }
.transport-type-3 { background: #fef8ee; color: #b45309; }

/* Transport card as link */
a.transport-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--sbv2-paper, #FFFFFF);
}

/* Transport filter bar */
.transport-filter {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}
.transport-filter-range {
    font-size: 0.875rem;
    color: var(--sbv2-muted, #666666);
}
.transport-filter-nav {
    display: flex;
    gap: var(--space-sm);
}
.transport-filter-btn {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-sm);
    color: var(--sbv2-ink-2, #444444);
    text-decoration: none;
    transition: all var(--duration) var(--ease);
}
.transport-filter-btn:hover {
    background: var(--sbv2-tint, #EEEEEE);
    color: var(--sbv2-ink, #111111);
}
.transport-filter .bilag-new-btn {
    margin-left: auto;
}

/* Transport form */
.transport-form {
    max-width: 600px;
}
.transport-form-group {
    margin-bottom: var(--space-md);
}
.transport-form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--sbv2-ink-2, #444444);
}
.transport-form-group input,
.transport-form-group select,
.transport-form-group textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color var(--duration) var(--ease);
    background: var(--sbv2-paper, #FFFFFF);
}
.transport-form-group input:focus,
.transport-form-group select:focus,
.transport-form-group textarea:focus {
    outline: none;
    border-color: var(--sbv2-ink, #111111);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.transport-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.transport-bilag-notice {
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

/* Transport on bilag view */
.transport-bilag-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.transport-bilag-link {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    background: #dbeafe;
    color: #1d4ed8;
}

@media (max-width: 640px) {
    .transport-form-row {
        grid-template-columns: 1fr;
    }
    .transport-filter {
        flex-direction: column;
        align-items: flex-start;
    }
    .transport-filter .bilag-new-btn {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    /* Transport create/detail pages (.bilag-page without .salgsbilag-v2) render
       inside the account-v2 ops-shell, whose real sticky header (.ops-topbar)
       and footer (.mbn) already sit outside the scrollable .ops-content. The
       generic .mp-edit-topbar mobile rule (my-products.css, built for the old
       full-page product-edit layout) switches it to position:fixed, which here
       stacks on top of .ops-topbar instead of sitting below it and leaves the
       content underneath hidden. Keep it sticky inside .ops-content — same
       approach already used for .salgsbilag-v2.mp-edit-v2 (bilag.css). */
    .bilag-page:not(.salgsbilag-v2) .mp-edit-topbar {
        position: sticky;
        top: 0;
        left: auto;
        right: auto;
        box-shadow: none;
        padding: 8px 0;
        margin-bottom: 8px;
    }

    /* Minimize vertical spacing so the create/detail view fits between the
       header and the fixed merchant bottom nav without needing to scroll. */
    .account-page.bilag-page:not(.salgsbilag-v2) { padding: 14px 16px; }
    .transport-form-group { margin-bottom: var(--space-sm); }
    .transport-form-group label { margin-bottom: 4px; }
    .transport-form-group input,
    .transport-form-group select,
    .transport-form-group textarea { padding: 0.625rem 0.75rem; }
    .transport-form .form-actions { padding-top: var(--space-sm); }
}