/* ============================================================================
   Activity feed — variant 1b "Oś dat" (date axis).

   The layout separates two orthogonal groupings that would otherwise compete for
   the same visual channels: chronology lives entirely in the fixed left gutter
   (times, day marks, the vertical rule), which frees colour and shape on the right
   to carry activity *type*. Do not move time information into the cards.
   ========================================================================== */

.afeed {
    --af-gutter: 92px;
    /* Width of the node column and the axis's own horizontal padding. The rule that joins the
       nodes is positioned from these, so the three can never drift apart. */
    --af-node: 33px;
    --af-axis-pad: 2px;
    /* Brand. Chrome — chips, selected states, focus, the composer, hover toolbars, drop targets —
       is tinted from these. Activity *type* accents, *status* colours and semantic red/amber keep
       their own hues, because those carry meaning brand shading would erase.
       The --dxds-primary-* ramp from brand-accent.css is the source of truth; these fall back to
       the raw brand values when the DX theme has not injected it. */
    --af-brand: var(--dxds-primary-90, #4147d5);
    --af-brand-soft: var(--dxds-primary-30, #dcdefa);
    --af-brand-softer: var(--dxds-primary-10, #f0f1fd);
    --af-brand-strong: var(--dxds-primary-110, #363bb3);

    /* Brand palette, as the application already uses it:
         navy   #101a33 — wordmark
         violet #4147d5 — the DX theme accent, used for feed chrome
         orange #de590b — the "create" accent; it is the colour of Action_New.svg and of the
                          edit affordances in tag-pill.css, so a new-thing button belongs here.
       Creating therefore reads differently from filtering, which owns the violet. */
    --af-brand-1: #101a33;
    --af-brand-2: var(--dxds-primary-90, #4147d5);
    --af-brand-orange: #de590b;
    --af-brand-orange-hover: #c24d09;
    --af-ink: #101a33;

    /* Borders are a step darker than the mock-up's: the feed renders directly on the detail
       view's white background, where hairline greys disappear. */
    --af-line: #cfd5df;
    --af-line-2: #dde2ea;
    --af-muted: #5b6472;
    --af-muted-2: #838c9b;
    --af-text: #1a2233;
    --af-text-2: #2c3346;
    --af-panel-2: #f4f6f9;
    --af-surface: #f7f8fa;

    display: flex;
    flex-direction: column;
    min-height: 0;
    font-size: 13.5px;
    color: var(--af-text);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.afeed-head { padding: 2px 2px 0; }

.afeed-title { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.afeed-title h2 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; }
.afeed-title .cnt { font-size: 12px; color: var(--af-muted-2); font-weight: 600; }

/* ── Facets ───────────────────────────────────────────────────────────────── */
/* No bottom rule: with one directly above it, the create button read as a control docked in a
   toolbar strip rather than the component's primary action. Spacing separates the bands instead. */
.afeed-facets {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 4px 2px 2px;
}

/* Names what the pills do. Sized down and muted so it labels the row without competing with the
   chips themselves. */
.afacet-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--af-muted-2);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-right: 2px;
    flex-shrink: 0;
}

.afacet {
    padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--af-panel-2); border: 1px solid var(--af-line-2);
    color: var(--af-muted); cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.afacet:hover:not(:disabled) { border-color: var(--af-brand); color: var(--af-brand-strong); }
.afacet.on { background: var(--af-brand); border-color: var(--af-brand); color: #fff; }
.afacet:disabled { opacity: .45; cursor: default; }
.afacet .c { margin-left: 5px; opacity: .55; font-variant-numeric: tabular-nums; font-weight: 700; }
/* The glyph inherits the chip's colour, but DevExtreme forces `font: 14px/1 DXIcons` on every
   dx-icon — so it paints as a solid 14px shape beside a 12px label and reads much darker than the
   text at the identical colour value. Matching the label's size and taking a little weight out of
   the fill lines the two up optically. Overriding font-size alone is not enough: the shorthand
   would win, so it has to be restated after the class. */
.afacet-ic {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    vertical-align: -1px;
    margin-right: 5px;
    opacity: .6;
}
/* On the filled chip the glyph sits on brand violet, where the same softening would wash it out. */
.afacet.on .afacet-ic { opacity: .9; }

.afacet-clear {
    border: 0; background: none; cursor: pointer; padding: 5px 8px;
    font-size: 12px; font-weight: 600; color: var(--af-brand); text-decoration: underline;
}

.afeed-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--af-muted); margin-left: 4px; }

/* ── Composer ─────────────────────────────────────────────────────────────── */

/* ── Create control — split button ────────────────────────────────────────────
   Solid and detached, because the previous pale bar read as a disabled text field.
   Generous margin below so it does not look like a control docked inside a toolbar
   strip — it is the primary action of the component, standing on its own. */

.acomp-launch {
    position: relative;
    display: inline-flex;
    align-items: stretch;

    /* .afeed is a column flex container, so a flex child stretches across the full width by
       default — inline-flex does not prevent that. Without this the element spanned the whole
       feed and its box-shadow painted a full-width hairline under the button, which read as a
       toolbar rule. */
    align-self: flex-start;

    margin: 12px 0 14px;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(222, 89, 11, .28);
}

.acomp-launch-main,
.acomp-launch-caret {
    background: var(--af-brand-orange);
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: background .12s;
}

.acomp-launch-main {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 15px; height: 36px;
    border-radius: 9px 0 0 9px;
    font-size: 13px; font-weight: 650; letter-spacing: .1px;
}

.acomp-launch-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px;
    border-radius: 0 9px 9px 0;
    /* Hairline seam so the two halves read as separate targets. */
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.acomp-launch-main:hover,
.acomp-launch-caret:hover { background: var(--af-brand-orange-hover); }

/* Ink, not brand — a brand-coloured ring on a brand-coloured button is invisible. */
.acomp-launch-main:focus-visible,
.acomp-launch-caret:focus-visible { outline: 2px solid var(--af-brand-1); outline-offset: 2px; }

.acomp-plus { width: 16px; height: 16px; flex-shrink: 0; }
.acomp-launch-caret svg { width: 15px; height: 15px; }

/* ── Kind menu ────────────────────────────────────────────────────────────── */

/* Full-viewport transparent layer: closes the menu on any outside click without JS. */
.acomp-menu-backdrop { position: fixed; inset: 0; z-index: 40; }

.acomp-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 41;
    min-width: 320px; padding: 5px;
    background: #fff; border: 1px solid var(--af-line); border-radius: 11px;
    box-shadow: 0 10px 30px -8px rgba(16, 26, 51, .28), 0 2px 6px rgba(16, 26, 51, .10);
}

.acomp-menu-item {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 8px;
    background: none; cursor: pointer; text-align: left;
}
.acomp-menu-item:hover { background: var(--af-brand-softer); }
.acomp-menu-item:focus-visible { outline: 2px solid var(--af-brand); outline-offset: -2px; }

.acomp-menu-item .ic {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--k, var(--af-muted));
    background: color-mix(in srgb, var(--k, #6b7280) 12%, #fff);
}

.acomp-menu-item .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acomp-menu-item .n { font-size: 13px; font-weight: 650; color: var(--af-text); }

/* The line that says what the kind actually means — notably that a note is internal. */
.acomp-menu-item .d { font-size: 11.5px; color: var(--af-muted); line-height: 1.35; }

.acomposer {
    margin: 12px 0 6px; border: 1px solid var(--af-line);
    border-radius: 12px; overflow: hidden; background: #fff;
}

.acomp-tabs {
    display: flex; align-items: center; gap: 2px; padding: 7px 9px;
    background: var(--af-panel-2); border-bottom: 1px solid var(--af-line-2);
}

.acomp-tab {
    padding: 5px 11px; border-radius: 8px; border: 1px solid transparent;
    background: transparent; font-size: 12px; font-weight: 600; color: var(--af-muted); cursor: pointer;
}
.acomp-tab:hover { color: var(--af-text-2); background: #fff; border-color: var(--af-line-2); }
.acomp-tab.on { background: #fff; border-color: var(--af-line); color: var(--af-text); }

.acomp-reply {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; color: var(--af-muted); background: #fff;
    border: 1px dashed var(--af-line); border-radius: 8px; padding: 3px 8px; max-width: 46%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acomp-reply .x { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--af-muted-2); }

.acomp-body { padding: 10px 11px; display: flex; flex-direction: column; gap: 8px; }
.acomp-subject { width: 100%; }

/* The editor sits flush under the subject — DxHtmlEditor brings its own outer margin, which
   otherwise opens a large empty gap between the two fields. */
.acomp-editor { margin: 0; }
.acomp-editor .dxbl-html-editor { margin: 0; border-radius: 8px; }

.acomp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acomp-row .k { font-size: 11.5px; font-weight: 700; color: var(--af-muted); text-transform: uppercase; letter-spacing: .3px; }
.acomp-tagbox { flex: 1; min-width: 240px; }
.acomp-lookup { min-width: 200px; }
.acomp-date { min-width: 150px; }
.acomp-loc { flex: 1; min-width: 160px; }
.acomp-error { font-size: 12px; color: #991b1b; background: #fee2e2; border: 1px solid #fecaca; border-radius: 8px; padding: 6px 9px; }

.acomp-foot {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 11px; border-top: 1px solid var(--af-line-2); background: var(--af-panel-2);
}

/* ── Axis ─────────────────────────────────────────────────────────────────── */
.afeed-axis {
    position: relative; padding: 10px var(--af-axis-pad) 6px;
    flex: 1; min-height: 0; overflow: auto;
}

/* The single vertical rule that makes the gutter read as an axis.
   Absolute offsets resolve against the padding box, so the axis padding has to be added back or
   the rule sits left of the node centres. The -0.5px centres the 1px rule on that point. */
.afeed-axis::before {
    content: "";
    position: absolute;
    left: calc(var(--af-axis-pad) + var(--af-gutter) + var(--af-node) / 2);
    margin-left: -0.5px;
    top: 0; bottom: 18px; width: 1px; background: var(--af-line);
}

/* Nothing to plot — the rule would be a line hanging beside blank space. */
.afeed-axis.empty::before { display: none; }

.afeed-empty { padding: 28px 12px; text-align: center; color: var(--af-muted-2); font-size: 13px; }

/* ── Day marks ────────────────────────────────────────────────────────────── */
.aday { position: relative; display: flex; align-items: center; margin: 16px 0 10px; }
.aday:first-child { margin-top: 2px; }

.aday .gut {
    width: var(--af-gutter); flex-shrink: 0; text-align: right; padding-right: 14px;
    display: flex; flex-direction: column; align-items: flex-end;
}
.aday .dd { font-size: 13px; font-weight: 800; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.aday .dw { font-size: 10.5px; color: var(--af-muted-2); font-weight: 600; text-transform: capitalize; }
.aday .tick { width: 13px; height: 0; border-top: 2px solid var(--af-line); margin-left: -6px; }
.aday .rest { flex: 1; height: 1px; background: var(--af-line-2); margin-left: 8px; }
.aday .cnt { font-size: 10.5px; font-weight: 700; color: var(--af-muted-2); white-space: nowrap; margin-left: 8px; }

.aday .now {
    font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: #fff; background: #f97316; border-radius: 999px; padding: 2px 7px; margin-left: 8px;
}
.aday .now.yd { background: #94a3b8; }
.aday.today .dd { color: #9a3412; }
.aday.today .tick { border-top-color: #f97316; }
.aday.today .rest { background: #fed7aa; }

/* ── Items ────────────────────────────────────────────────────────────────── */
.aitem { position: relative; display: flex; align-items: flex-start; margin: 0 0 9px; }

.aitem .gut {
    width: var(--af-gutter); flex-shrink: 0; text-align: right; padding: 3px 14px 0 0;
    display: flex; flex-direction: column; align-items: flex-end;
}
.aitem .gut .tm { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--af-text-2); }
.aitem .gut .rl { font-size: 10.5px; color: var(--af-muted-2); }

/* The node sits on the axis rule and is the only coloured mark in the gutter.
   Opaque interior so the rule is hidden inside the ring, but no outer halo — the halo punched a
   gap in the line wider than the circle itself. */
.aitem .node { width: var(--af-node); flex-shrink: 0; display: flex; justify-content: center; padding-top: 6px; }
.aitem .node i {
    width: 9px; height: 9px; border-radius: 50%;
    background: #fff; border: 2px solid var(--a, #6b7280);
}

/* System nodes share the geometry of human ones and differ only in colour, so the axis reads as
   one sequence rather than two kinds of marker. */
.aitem .node.sys i { border-color: var(--af-muted); }

.tcard {
    flex: 1; min-width: 0; background: #fff;
    border: 1px solid var(--af-line); border-radius: 11px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
}

/* Inline reply composer, rendered directly beneath the message being answered. */
.areply { display: flex; margin: 0 0 10px calc(var(--af-gutter) + var(--af-node)); }
.areply .acomposer { flex: 1; margin: 0; border-color: var(--af-line); }
.acomposer.inline { box-shadow: 0 2px 8px rgba(15, 23, 42, .07); }
.acomp-tabs.inline { justify-content: space-between; }
.acomp-tabs.inline .acomp-reply { margin-left: 0; }

/* The coloured header bar is where activity type lives — never in the gutter. */
.tbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 11px; border-bottom: 1px solid var(--af-line-2);
    background: color-mix(in srgb, var(--a, #6b7280) 7%, #fff);
    border-left: 3px solid var(--a, #6b7280);
}
.tbar { cursor: pointer; }
.tbar .tn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--a, #6b7280); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.tbar .ch { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Header-line summary, so a collapsed row still says who and what. */
.tbar .who-inline { font-size: 12px; font-weight: 650; color: var(--af-text-2); white-space: nowrap; }
.tbar .subj-inline {
    font-size: 12.5px; color: var(--af-text); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbar .clip {
    display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
    font-size: 11px; font-weight: 700; color: var(--af-muted);
}
.tbar .clip-ic {
    width: 11px; height: 11px; display: inline-block;
    border: 1.5px solid currentColor; border-radius: 3px 3px 5px 5px; opacity: .7;
}

/* ── Collapsed / expanded ─────────────────────────────────────────────────── */
.texcerpt {
    padding: 6px 12px 9px; font-size: 12.5px; color: var(--af-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.aitem.collapsed { margin-bottom: 5px; }
.aitem.open .tcard { box-shadow: 0 1px 2px rgba(15, 23, 42, .07), 0 6px 18px -10px rgba(15, 23, 42, .18); }

/* ── Hover toolbar ────────────────────────────────────────────────────────── */
.tools {
    display: none; align-items: center; gap: 4px; margin-left: auto;
    padding-left: 8px; flex-shrink: 0;
}
.aitem:hover .tools { display: inline-flex; }

/* While a file is being dragged the toolbar must not sit under the cursor. */
.aitem.dropping .tools { display: none !important; }

.tool {
    border: 1px solid var(--af-line); border-radius: 6px; background: #fff;
    padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--af-muted); cursor: pointer;
}
.tool:hover { border-color: var(--af-brand); color: var(--af-brand-strong); background: var(--af-brand-softer); }

/* When the toolbar appears it takes the space the pills were using. */
.aitem:hover .tbar .ch { margin-left: 0; }

/* ── Whole-item drop target ───────────────────────────────────────────────── */

/* Applied to the card by DxFileInput's external drop zone, which is the authoritative signal —
   the .dropping class below only mirrors the browser's own drag events. */
.aitem.aitem-drop-hover .tcard,
.aitem.dropping .tcard {
    border-color: var(--af-brand);
    background: var(--af-brand-softer);
    box-shadow: 0 0 0 2px var(--af-brand-soft);
}
.aitem.aitem-drop-hover .texcerpt, .aitem.dropping .texcerpt,
.aitem.aitem-drop-hover .tbody, .aitem.dropping .tbody { opacity: .55; }

.aitem.aitem-drop-hover .tools { display: none !important; }

.tnic, .sysic { width: 14px; height: 14px; display: inline-block; opacity: .85; }

.tbody { padding: 10px 12px 11px; }

.chead { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.chead .who { font-size: 13px; font-weight: 700; }

.av {
    width: 34px; height: 34px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
    color: #fff; background: linear-gradient(135deg, #64748b, #475569); flex-shrink: 0;
}
.av.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.av.xs { width: 19px; height: 19px; border-radius: 6px; font-size: 8.5px; }

.subj { font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.cbody { font-size: 13px; color: var(--af-text-2); line-height: 1.55; }
.cbody p { margin: 0 0 6px; }
.cbody p:last-child { margin-bottom: 0; }

.quote {
    font-size: 11.5px; color: var(--af-muted); border-left: 2px solid var(--af-line);
    padding: 2px 0 2px 8px; margin-bottom: 6px;
}

.kvgrid { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.kv { display: flex; flex-direction: column; gap: 1px; }
.kv span { font-size: 10.5px; color: var(--af-muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.kv b { font-size: 12.5px; font-weight: 650; }
.kv .num { font-variant-numeric: tabular-nums; }

.meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--af-line-2);
}

.attach {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 5px;
    border: 1px solid var(--af-line-2); border-radius: 8px; background: var(--af-panel-2); font-size: 12px;
    min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach .sz { color: var(--af-muted-2); font-size: 11px; font-variant-numeric: tabular-nums; }

/* The chip is a download link. Space is reserved for the remove button up front so revealing it
   on hover does not reflow the row. */
.attach.removable { position: relative; padding-right: 24px; }

.attach-dl {
    display: inline-flex; align-items: center; gap: 7px;
    min-width: 0; max-width: 100%; color: inherit; text-decoration: none;
}
a.attach-dl { cursor: pointer; }
a.attach-dl:hover .nm { text-decoration: underline; color: var(--af-brand-strong); }
.attach .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.attach .x {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    display: none; align-items: center; justify-content: center;
    width: 17px; height: 17px; padding: 0;
    border: 0; border-radius: 4px; background: none; cursor: pointer;
    font-size: 14px; line-height: 1; color: var(--af-muted-2);
}
.attach:hover .x, .attach:focus-within .x { display: inline-flex; }
.attach .x:hover { background: #fee2e2; color: #991b1b; }

.pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; border: 1px solid var(--af-line-2); background: #fff; color: var(--af-muted);
}
.pill.wht { background: #fff; }
.pill.grey { background: #f3f4f6; }
.pill.red { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.pill.ppl { padding-left: 3px; }

.needs {
    display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 7px 9px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px;
}
.needs .txt { font-size: 12px; color: #991b1b; font-weight: 600; }
.needs :last-child { margin-left: auto; }

.actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ── Attachments — variant 02 "Strefa upuszczania" ────────────────────────────
   One surface is both the drop target and the browse button, so there is a single
   place to aim at. The composer gets the explicit panel; existing cards get a quiet
   strip along the bottom edge that stays visible even when empty. */

.aattach-input { display: none; }

.aattach-zone {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    min-height: 26px; min-width: 0; max-width: 100%;
}

/* Composer panel — deliberately obvious. */
.aattach.panel {
    border: 1px dashed var(--af-line);
    border-radius: 9px;
    padding: 9px 11px;
    background: var(--af-panel-2);
    transition: border-color .12s, background .12s;
}

/* Card strip — quiet, but always there, so files can be added after the fact. */
.aattach.compact {
    border-top: 1px dashed var(--af-line-2);
    padding: 7px 12px 9px;
    background: transparent;
    transition: background .12s, border-color .12s;
}
.aattach.compact.readonly { border-top-style: solid; }

/* Mounted but collapsed: costs no height until there is something to show or a file inbound. */
.aattach.hidden { display: none; }

/* File-type glyph from DocumentType, matching the documents grid. */

/* Drag feedback. `.aattach-drop-hover` is applied by DxFileInput's external drop zone. */
.aattach.over,
.aattach.aattach-drop-hover,
.aattach-drop-hover {
    border-color: var(--af-text);
    background: #eef2ff;
}

.aattach-hint { font-size: 12px; color: var(--af-muted); display: inline-flex; align-items: center; gap: 5px; }

.aattach-link {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--af-text); text-decoration: underline;
}

.aattach-add {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px dashed var(--af-line); border-radius: 7px; background: transparent;
    padding: 3px 9px; font-size: 11.5px; font-weight: 600; color: var(--af-muted); cursor: pointer;
}
.aattach-add:hover { border-color: var(--af-text-2); color: var(--af-text-2); background: #fff; }
.aattach-add .plus { font-size: 13px; line-height: 1; font-weight: 700; }

/* Must be able to shrink: a flex child defaults to min-width:auto, so a fixed minimum here pushed
   the whole card wider than its column while a file was uploading. */
.aattach-progress {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 180px; min-width: 0; max-width: 100%;
}
.aattach-progress .t {
    font-size: 11.5px; color: var(--af-muted); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aattach-bar { flex: 1 1 auto; min-width: 0; }

.aattach-error {
    font-size: 11.5px; color: #991b1b; background: #fee2e2; border: 1px solid #fecaca;
    border-radius: 7px; padding: 3px 9px; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.aitem.alert .tcard { border-color: #fecaca; }
.aitem.due .tcard { border-color: #fed7aa; }

/* ── System line — quiet register, no card ────────────────────────────────── */
.aitem.system { margin-bottom: 5px; }
.aitem.system .gut { padding-top: 1px; }

.sysline {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; color: var(--af-muted); padding: 3px 0;
}
.sysline b { color: var(--af-text-2); font-weight: 600; }
.sysline .stat { display: inline-flex; align-items: center; gap: 6px; }

/* Both ends of a transition are statuses, so both carry their own status colour and weight. */
.sysline .from { font-weight: 700; color: var(--a, var(--af-muted-2)); }
.sysline .to { font-weight: 700; color: var(--a, var(--af-text-2)); }
.sysline .arr { color: var(--af-muted-2); }
.sysline .chg { font-style: italic; }
.sysline .by { margin-left: auto; color: var(--af-muted-2); }

/* ── Narrow layouts ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .afeed { --af-gutter: 62px; }
    .aitem .gut .rl { display: none; }
}