/* src/components/basic/XWUIItem/XWUIItem.css */
/**
 * XWUIItem Component Styles
 * Styles for XWUIItem component that renders JSON config as HTML
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

/* Base item styles */
.xwui-item {
    position: relative;
    width: 100%;
    transition: all 0.2s ease;
    border-radius: var(--xwui-item-radius, 6px);
}

/* Status-based background colors */
.xwui-item-status-before_start {
    background-color: var(--status-before-start) !important;
    /* Logical property: resolves to the reading-start edge in both directions,
       so this needs no [dir="rtl"] mirror override any more. */
    border-inline-start: 3px solid var(--status-before-start-border);
}

.xwui-item-status-processing {
    background-color: var(--status-processing) !important;
    border-inline-start: 3px solid var(--status-processing-border);
    color: var(--status-processing-text);
}

.xwui-item-status-processing * {
    color: var(--status-processing-text);
}

.xwui-item-status-error {
    background-color: var(--status-error) !important;
    border-inline-start: 3px solid var(--status-error-border);
    color: var(--status-error-text);
}

.xwui-item-status-error * {
    color: var(--status-error-text);
}

.xwui-item-status-pass {
    /* No background color - use default */
    background-color: transparent;
}

/* Non-clickable items stay on the DEFAULT cursor - no pointer, no hover
   highlight. Only items that are actually interactive (`canClick !== false`,
   which adds `.xwui-item-clickable`) get the pointer + hover bg feedback.
   A lot of display-only item instances were inheriting pointer cursor
   from a parent rule; `cursor: default` here explicitly resets that.
   `:hover` is intentionally silent for non-clickable items. */
.xwui-item:not(.xwui-item-clickable) {
    cursor: default;
}
.xwui-item:not(.xwui-item-clickable):hover {
    background-color: inherit;
}

.xwui-item-clickable {
    cursor: pointer;
}

.xwui-item-clickable:hover:not(.xwui-item-status-before_start):not(.xwui-item-status-processing):not(.xwui-item-status-error):not(.xwui-item-status-pass):not(.xwui-item-no-hover) {
    background-color: var(--xwui-item-bg-hover, var(--bg-hover));
}

/* Hover effects for status items - slightly darker. Opt-out via
   `.xwui-item-no-hover` (set by XWUIItemConfig.hoverHighlight = false).
   These only fire when the item is ALSO clickable - otherwise status
   items would still highlight on hover despite being display-only. */
.xwui-item-clickable.xwui-item-status-before_start:hover:not(.xwui-item-no-hover) {
    background-color: var(--status-before-start-hover) !important;
}

.xwui-item-clickable.xwui-item-status-processing:hover:not(.xwui-item-no-hover) {
    background-color: var(--status-processing-hover) !important;
}

.xwui-item-clickable.xwui-item-status-error:hover:not(.xwui-item-no-hover) {
    background-color: var(--status-error-hover) !important;
}

/* When hover highlight is disabled, force no background change on hover - including inside higher-level ancestor hover rules that might bleed in. */
.xwui-item-no-hover:hover {
    background-color: transparent !important;
}

/* Base item - token-driven density (overridden per size class below) */
.xwui-item {
    --xwui-item-font-size: var(--xwui-size-font-m, 14px);
    --xwui-item-pad-y: var(--xwui-size-pad-y-m, 6px);
    --xwui-item-pad-x: var(--xwui-size-pad-x-m, 14px);
    --xwui-item-icon-size: var(--xwui-size-icon-m, 16px);
    --xwui-item-image-size: calc(var(--xwui-item-icon-size) * 2);
    --xwui-item-gap: max(4px, calc(var(--xwui-item-icon-size) * 0.5));
    --xwui-item-line-height: 1.4;
    font-size: var(--xwui-item-font-size);
    line-height: var(--xwui-item-line-height);
    padding: var(--xwui-item-pad-y) var(--xwui-item-pad-x);
    box-sizing: border-box;
}

/* Size classes - set density tokens only (numbered + legacy aliases) */
:is(.xwui-item-size-4xs,.xwui-item-size-xxxxs) {
    --xwui-item-font-size: var(--xwui-size-font-4xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-4xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-4xs);
    --xwui-item-icon-size: var(--xwui-size-icon-4xs);
}
:is(.xwui-item-size-3xs,.xwui-item-size-xxxs) {
    --xwui-item-font-size: var(--xwui-size-font-3xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-3xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-3xs);
    --xwui-item-icon-size: var(--xwui-size-icon-3xs);
}
:is(.xwui-item-size-2xs,.xwui-item-size-xxs) {
    --xwui-item-font-size: var(--xwui-size-font-2xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-2xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-2xs);
    --xwui-item-icon-size: var(--xwui-size-icon-2xs);
}
.xwui-item-size-xs {
    --xwui-item-font-size: var(--xwui-size-font-xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-xs);
    --xwui-item-icon-size: var(--xwui-size-icon-xs);
}
:is(.xwui-item-size-s,.xwui-item-size-sm) {
    --xwui-item-font-size: var(--xwui-size-font-s);
    --xwui-item-pad-y: var(--xwui-size-pad-y-s);
    --xwui-item-pad-x: var(--xwui-size-pad-x-s);
    --xwui-item-icon-size: var(--xwui-size-icon-s);
}
:is(.xwui-item-size-m,.xwui-item-size-md) {
    --xwui-item-font-size: var(--xwui-size-font-m);
    --xwui-item-pad-y: var(--xwui-size-pad-y-m);
    --xwui-item-pad-x: var(--xwui-size-pad-x-m);
    --xwui-item-icon-size: var(--xwui-size-icon-m);
}
:is(.xwui-item-size-l,.xwui-item-size-lg) {
    --xwui-item-font-size: var(--xwui-size-font-l);
    --xwui-item-pad-y: var(--xwui-size-pad-y-l);
    --xwui-item-pad-x: var(--xwui-size-pad-x-l);
    --xwui-item-icon-size: var(--xwui-size-icon-l);
}
.xwui-item-size-xl {
    --xwui-item-font-size: var(--xwui-size-font-xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-xl);
    --xwui-item-icon-size: var(--xwui-size-icon-xl);
}
:is(.xwui-item-size-2xl,.xwui-item-size-xxl) {
    --xwui-item-font-size: var(--xwui-size-font-2xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-2xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-2xl);
    --xwui-item-icon-size: var(--xwui-size-icon-2xl);
}
:is(.xwui-item-size-3xl,.xwui-item-size-xxxl) {
    --xwui-item-font-size: var(--xwui-size-font-3xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-3xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-3xl);
    --xwui-item-icon-size: var(--xwui-size-icon-3xl);
}
:is(.xwui-item-size-4xl,.xwui-item-size-xxxxl) {
    --xwui-item-font-size: var(--xwui-size-font-4xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-4xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-4xl);
    --xwui-item-icon-size: var(--xwui-size-icon-4xl);
}

/* Legacy alias classes - inherit token vars from numbered equivalents above */
.xwui-item-size-s { --xwui-item-font-size: var(--xwui-size-font-s); --xwui-item-pad-y: var(--xwui-size-pad-y-s); --xwui-item-pad-x: var(--xwui-size-pad-x-s); --xwui-item-icon-size: var(--xwui-size-icon-s); }
.xwui-item-size-m { --xwui-item-font-size: var(--xwui-size-font-m); --xwui-item-pad-y: var(--xwui-size-pad-y-m); --xwui-item-pad-x: var(--xwui-size-pad-x-m); --xwui-item-icon-size: var(--xwui-size-icon-m); }
.xwui-item-size-l { --xwui-item-font-size: var(--xwui-size-font-l); --xwui-item-pad-y: var(--xwui-size-pad-y-l); --xwui-item-pad-x: var(--xwui-size-pad-x-l); --xwui-item-icon-size: var(--xwui-size-icon-l); }

/* Text overflow styles */
.xwui-item-text-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: var(--max-lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.xwui-item-text-expandable-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs, 8px);
}

.xwui-item-text-expandable {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: var(--max-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    transition: all 0.3s ease;
}

.xwui-item-text-expandable.xwui-item-text-expanded {
    -webkit-line-clamp: unset;
    display: block;
}

.xwui-item-text-expand-btn {
    flex-shrink: 0;
    width: calc(var(--xwui-item-icon-size, 16px) * 1.5);
    height: calc(var(--xwui-item-icon-size, 16px) * 1.5);
    min-width: calc(var(--xwui-item-icon-size, 16px) * 1.5);
    padding: 0;
    border: var(--border-control-width, var(--border-width-regular, 1.5px)) var(--border-control-style, solid) var(--border-control-color, var(--border-color));
    border-radius: var(--radius-control, var(--radius-xs, 4px));
    background: var(--control-bg);
    color: var(--control-text);
    cursor: pointer;
    font-size: var(--xwui-item-font-size, 14px);
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.xwui-item-text-expand-btn:hover {
    background: var(--control-bg-hover);
    border-color: var(--accent-primary);
}

.xwui-item-text-expand-btn:active {
    transform: scale(0.95);
}

/* Content block */
.xwui-item-content-block {
    display: flex;
    align-items: center;
    gap: var(--xwui-item-gap, var(--spacing-xs, 8px));
    flex-wrap: wrap;
    text-align: inherit;
}

/* Text styles */
.xwui-item-text {
    line-height: 1.5;
    text-align: inherit;
}

.xwui-item-text-bold {
    font-weight: 600;
}

/* Identifiers, keys, clock times: the theme owns the monospace family. */
.xwui-item-text-mono {
    font-family: var(--font-mono, var(--font-family-mono, monospace));
}

.xwui-item-text-subdued {
    color: var(--text-secondary);
    opacity: 0.8;
}

.xwui-item-text-timestamp {
    font-size: 0.85em;
    color: var(--text-tertiary);
}

.xwui-item-select-text {
    user-select: text;
    -webkit-user-select: text;
}

/* Icon styles - scale with parent `.xwui-item-size-*` */
.xwui-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    height: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    flex-shrink: 0;
}

.xwui-item-icon svg {
    width: 100%;
    height: 100%;
}

/* Image styles - scale with parent `.xwui-item-size-*` */
.xwui-item-image {
    width: var(--xwui-item-image-size, var(--xwui-size-m, 32px));
    height: var(--xwui-item-image-size, var(--xwui-size-m, 32px));
    object-fit: cover;
    flex-shrink: 0;
}

.xwui-item-image-circle {
    border-radius: 50%;
}

.xwui-item-image-square {
    border-radius: 4px;
}

/* Progress bar */
.xwui-item-progress-bar {
    width: 100%;
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.xwui-item-progress-fill {
    height: 100%;
    background-color: var(--accent-primary);
    transition: width 0.3s ease;
}

/* User stack */
.xwui-item-user-stack {
    display: flex;
    align-items: center;
    position: relative;
}

.xwui-item-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    object-fit: cover;
    position: relative;
    /* Logical property: start-edge overlap in both directions, no mirror needed. */
    margin-inline-start: -8px;
}

.xwui-item-user-avatar:first-child {
    margin-inline-start: 0;
}

/* Collapsed item */
.xwui-item-collapsed {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Standard layout */
.xwui-item-standard-layout {
    display: flex;
    align-items: center;
    gap: var(--xwui-item-gap, var(--spacing-xs, 8px));
    width: 100%;
    min-height: calc(var(--xwui-item-icon-size, 16px) + var(--xwui-item-pad-y, 6px) * 2);
}

.xwui-item-drag-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.xwui-item-drag-handle:hover {
    opacity: 1;
}

.xwui-item-expand-icon {
    width: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    height: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.xwui-item-expand-icon.xwui-item-expanded {
    transform: rotate(90deg);
}

[dir="rtl"] .xwui-item-expand-icon.xwui-item-expanded {
    transform: rotate(-90deg) scaleX(-1);
}

.xwui-item-primary-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: inherit;
}

.xwui-item-add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 4px);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.2s ease;
}

.xwui-item:hover .xwui-item-add-button {
    opacity: 1;
}

.xwui-item-add-button:hover {
    background-color: var(--bg-hover);
}

/* XL layout (chat_bubble only) */
.xwui-item-xl-layout {
    display: flex;
    gap: var(--xwui-item-gap, var(--spacing-sm, 12px));
    width: 100%;
}

.xwui-item-checkbox {
    margin-top: 2px;
    flex-shrink: 0;
    width: calc(var(--xwui-item-icon-size, 16px) * 0.9);
    height: calc(var(--xwui-item-icon-size, 16px) * 0.9);
}

.xwui-item-xl-avatar-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

/* Avatar wrapper: same approach as xwui-item-content-block - no flex-direction
   reversal. `dir` is set directly on this element (see XWUIItem.view.ts), and
   `text-align: start` resolves off that own-element direction, so it needs no
   [dir="rtl"]/[dir="ltr"] mirror pair any more. */
.xwui-item-xl-avatar-wrapper {
    text-align: start;
}

.xwui-item-xl-content-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.xwui-item-xl-reaction-wrapper {
    display: flex;
    align-items: center;
    /* Logical property: start-edge indent in both directions, no mirror needed. */
    padding-inline-start: 56px;
    margin-top: 4px;
    min-height: 20px;
}

.xwui-item-xl-content {
    flex: 1;
    min-width: 0;
    text-align: inherit;
}

.xwui-item-xl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm, 12px);
    text-align: inherit;
}

.xwui-item-xl-header-other {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 8px);
    flex-shrink: 0;
}

.xwui-item-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-xs, 4px) / 2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.xwui-item:hover .xwui-item-actions {
    opacity: 1;
}

.xwui-item-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 4px);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.xwui-item-action-button:hover {
    background-color: var(--bg-hover);
}

/* Search item */
.xwui-item-search-container {
    position: relative;
    width: 100%;
}

.xwui-item-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--text-tertiary);
}

/* XWUIItem.view.ts picks the -ltr/-rtl class from the resolved `direction`,
   but both mean the same thing - the reading-start edge - so both now carry
   the identical logical declaration. The class split stays (view.ts still
   toggles it) but the physical-property duplication it existed for is gone. */
.xwui-item-search-icon-ltr {
    inset-inline-start: 12px;
}

.xwui-item-search-icon-rtl {
    inset-inline-start: 12px;
}

.xwui-item-search-input {
    width: 100%;
    padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    font-size: 13px;
    transition: all 0.2s ease;
}

/* Same reasoning as .xwui-item-search-icon-ltr/-rtl above. */
.xwui-item-search-input-ltr {
    padding-inline-start: 36px;
}

.xwui-item-search-input-rtl {
    padding-inline-start: 36px;
}

.xwui-item-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    /* Focus ring using accent color with opacity - works across all themes */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

/* Group list - logical property: start-edge indent in both directions, no
   [dir] mirror needed. */
.xwui-item-group-list {
    margin-top: 4px;
    padding-inline-start: 16px;
}

.xwui-item-group-ltr {
    padding-inline-start: 16px;
}

.xwui-item-group-rtl {
    padding-inline-start: 16px;
}

/* XWUIItemGroup styles */
.xwui-item-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-xs, 4px) / 4);
}

.xwui-item-group-item {
    width: 100%;
}

.xwui-item-nested-group {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-xs, 4px) / 4);
}

/* List item spacing - for standalone items in lists */
.xwui-item-list-item {
    margin-bottom: 2px;
}

.xwui-item-list-item:last-child {
    margin-bottom: 0;
}

/* Highlighted item */
.xwui-item-highlighted {
    animation: xwui-item-highlight 1.5s ease-out;
}

@keyframes xwui-item-highlight {
    from {
        background-color: var(--accent-primary);
        opacity: 0.3;
    }
    to {
        background-color: transparent;
        opacity: 0;
    }
}

/* RTL support
 * `text-align: start` resolves off each element's own (inherited) `direction`,
 * so the [dir="rtl"]/[dir="ltr"] text-align mirror pairs that used to sit here
 * collapse into one direction-agnostic rule per class. `direction` itself and
 * the `flex-direction: row-reverse` overrides are NOT text-align and are left
 * exactly as they were - they are the real per-direction logic, not the
 * physical-property duplication this pass targets. */
.xwui-item {
    text-align: start;
}

[dir="rtl"] .xwui-item {
    direction: rtl;
}

[dir="ltr"] .xwui-item {
    direction: ltr;
}

[dir="rtl"] .xwui-item-standard-layout {
    flex-direction: row-reverse;
}

[dir="rtl"] .xwui-item-xl-layout {
    flex-direction: row-reverse;
}

.xwui-item-xl-content-wrapper {
    text-align: start;
}

.xwui-item-xl-header {
    /* DOM order is already reversed, so no need for flex-direction: row-reverse */
    text-align: start;
}

[dir="rtl"] .xwui-item-xl-header-other {
    flex-direction: row-reverse;
}

[dir="rtl"] .xwui-item-actions {
    flex-direction: row-reverse;
}

.xwui-item-content-block {
    /* DO NOT use flex-direction: row-reverse - it causes text mirroring */
    /* Let browser handle RTL text flow naturally with dir attribute */
    text-align: start;
}

[dir="rtl"] .xwui-item-user-stack {
    flex-direction: row-reverse;
}

/* xwui-item-text-expandable-wrapper: RTL handled naturally by browser with dir attribute */

[dir="rtl"] .xwui-item-checkbox {
    order: 1;
}

[dir="rtl"] .xwui-item-xl-content {
    order: 0;
}

.xwui-item-xl-content {
    text-align: start;
}

.xwui-item-primary-content {
    text-align: start;
}

.xwui-item-text {
    text-align: start;
}

/* ==========================================================================
   Opt-in surface (layout, appearance, selectedStyle, parts, trailing, href).
   Every rule below is keyed on a class or attribute that only an opt-in key
   (or an activatable row) writes, so an item configured the original way
   renders exactly as before.

   Tokens (inheritable unless noted; set them on any ancestor):
     --xwui-item-radius, --xwui-item-min-height, --xwui-item-align,
     --xwui-item-bg-hover, --xwui-item-bg-selected, --xwui-item-ring-selected,
     --xwui-item-bar-width, --xwui-item-bar-color, --xwui-item-bar-glow,
     --xwui-item-bar-inset, --xwui-item-border, --xwui-item-border-selected,
     --xwui-item-card-bg,
     --xwui-item-divider, --xwui-item-focus-ring, --xwui-item-disabled-opacity,
     --xwui-item-title-size, --xwui-item-title-weight, --xwui-item-title-color,
     --xwui-item-title-white-space, --xwui-item-sub-font,
     --xwui-item-sub-size, --xwui-item-sub-color, --xwui-item-sub-gap,
     --xwui-item-sub-line-height, --xwui-item-meta-font, --xwui-item-meta-size,
     --xwui-item-meta-color, --xwui-item-meta-gap, --xwui-item-line-gap,
     --xwui-item-lead-size, --xwui-item-trailing-gap,
     --xwui-item-icon-tile-size, --xwui-item-icon-tile-radius,
     --xwui-item-icon-tile-bg, --xwui-item-icon-tile-fg,
     --xwui-item-icon-tile-bg-selected, --xwui-item-icon-tile-fg-selected,
     --xwui-item-dot-size, --xwui-item-dot-color, --xwui-item-dot-glow-blur.
   Density tokens --xwui-item-pad-y / -pad-x / -gap / -font-size are written
   by the size class ON the item itself, so override them on the item
   (`.my-list .xwui-item { --xwui-item-pad-y: 0 }`), not on an ancestor.
   ========================================================================== */

/* A link item looks like its div twin. */
a.xwui-item {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Keyboard focus for every activatable item (button, option, tab, link). */
.xwui-item[role="button"]:focus-visible,
.xwui-item[role="option"]:focus-visible,
.xwui-item[role="tab"]:focus-visible,
a.xwui-item:focus-visible {
    outline: 2px solid var(--xwui-item-focus-ring, var(--accent-primary));
    outline-offset: -2px;
}

.xwui-item-disabled {
    opacity: var(--xwui-item-disabled-opacity, 0.55);
    cursor: default;
}

/* Stacked layout: lead | main (title, sub, meta lines) | trailing. DOM order
   is logical; the root `dir` flips the row, so no row-reverse is needed. */
.xwui-item-layout-stacked {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--xwui-item-min-height, auto);
}

.xwui-item-stacked-layout {
    display: flex;
    align-items: var(--xwui-item-align, center);
    gap: var(--xwui-item-gap, var(--spacing-xs, 8px));
    width: 100%;
    min-width: 0;
}

.xwui-item-lead {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--xwui-item-lead-size, auto);
}

.xwui-item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.xwui-item-line {
    display: flex;
    align-items: center;
    gap: var(--xwui-item-line-gap, 8px);
    min-width: 0;
}

.xwui-item-line-start {
    flex: 1 1 auto;
    min-width: 0;
}

.xwui-item-line-end {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.xwui-item-line-title {
    font-size: var(--xwui-item-title-size, inherit);
    font-weight: var(--xwui-item-title-weight, 600);
    color: var(--xwui-item-title-color, inherit);
}

/* The title keeps to one line; tags and badges beside it never wrap under. */
.xwui-item-line-title .xwui-item-line-start > .xwui-item-content-block {
    flex-wrap: nowrap;
}

.xwui-item-line-title .xwui-item-line-start .xwui-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 'normal' lets a long title (a sentence, a fact) wrap instead. */
    white-space: var(--xwui-item-title-white-space, nowrap);
}

.xwui-item-line-sub {
    margin-top: var(--xwui-item-sub-gap, 2px);
    font-family: var(--xwui-item-sub-font, inherit);
    font-size: var(--xwui-item-sub-size, 0.9em);
    color: var(--xwui-item-sub-color, var(--text-secondary));
    line-height: var(--xwui-item-sub-line-height, 1.45);
    font-weight: 400;
}

.xwui-item-line-sub .xwui-item-text {
    line-height: inherit;
}

.xwui-item-line-meta {
    margin-top: var(--xwui-item-meta-gap, 2px);
    font-family: var(--xwui-item-meta-font, inherit);
    font-size: var(--xwui-item-meta-size, 0.8em);
    color: var(--xwui-item-meta-color, var(--text-tertiary));
    font-weight: 400;
}

/* Trailing column, in either layout. */
.xwui-item-trailing {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--xwui-item-trailing-gap, 8px);
    margin-inline-start: auto;
}

.xwui-item-trailing-start {
    align-self: flex-start;
}

/* Parts */
.xwui-item-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--xwui-item-icon-tile-size, 30px);
    height: var(--xwui-item-icon-tile-size, 30px);
    border-radius: var(--xwui-item-icon-tile-radius, 9px);
    background: var(--xwui-item-icon-tile-bg, var(--bg-tertiary));
    color: var(--xwui-item-icon-tile-fg, inherit);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.xwui-item-selected .xwui-item-icon-tile {
    background: var(--xwui-item-icon-tile-bg-selected, var(--accent-primary));
    color: var(--xwui-item-icon-tile-fg-selected, var(--text-on-accent, #fff));
}

.xwui-item-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--xwui-item-dot-size, 8px);
    height: var(--xwui-item-dot-size, 8px);
    border-radius: 50%;
    background: var(--xwui-item-dot-color, var(--accent-primary));
}

.xwui-item-dot-glow {
    box-shadow: 0 0 var(--xwui-item-dot-glow-blur, 10px) var(--xwui-item-dot-color, var(--accent-primary));
}

.xwui-item-dot-pulse {
    animation: xwui-item-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes xwui-item-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .xwui-item-dot-pulse {
        animation: none;
    }
}

.xwui-item-slot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Appearance */
.xwui-item-appearance-plain {
    background-color: transparent;
}

.xwui-item-appearance-card {
    background: var(--xwui-item-card-bg, var(--bg-secondary));
    border: 1px solid var(--xwui-item-border, var(--border-color));
}

.xwui-item-appearance-card.xwui-item-selected {
    border-color: var(--xwui-item-border-selected, var(--xwui-item-border, var(--border-color)));
}

.xwui-item-appearance-divided {
    border-radius: 0;
    border-block-start: 1px solid var(--xwui-item-divider, var(--border-color));
}

/* The first row of a list (its host is the first child) draws no divider. */
:first-child > .xwui-item-appearance-divided {
    border-block-start-color: transparent;
}

/* Selected styles. The hover token is pointed at the selected fill so a
   hovered selected row keeps its fill (a gradient fill is not a valid
   background-color, so hover then leaves the gradient image in place). */
.xwui-item-selected:is(.xwui-item-selected-style-fill, .xwui-item-selected-style-ring, .xwui-item-selected-style-bar) {
    --xwui-item-bg-hover: var(--xwui-item-bg-selected, color-mix(in srgb, var(--accent-primary) 14%, transparent));
    background: var(--xwui-item-bg-selected, color-mix(in srgb, var(--accent-primary) 14%, transparent));
}

.xwui-item-selected.xwui-item-selected-style-ring {
    box-shadow: inset 0 0 0 1px var(--xwui-item-ring-selected, color-mix(in srgb, var(--accent-primary) 35%, transparent));
}

.xwui-item-selected.xwui-item-selected-style-bar::before {
    content: '';
    position: absolute;
    inset-block: var(--xwui-item-bar-inset, 8px);
    inset-inline-start: 0;
    width: var(--xwui-item-bar-width, 3px);
    border-radius: var(--xwui-item-bar-width, 3px);
    background: var(--xwui-item-bar-color, var(--accent-primary));
    box-shadow: var(--xwui-item-bar-glow, none);
    pointer-events: none;
}