/*
    Bosun, built to Atlassian Design System conventions.
    https://atlassian.design

    Atlaskit is React and this application is Livewire, so the components below
    are hand-built to ADS's published specifications rather than imported.
    Every value comes from a token in tokens.css -- no raw hex here -- so a
    dark theme means redefining that file, not auditing this one.

    Component names follow ADS so the mapping stays legible: .ads-lozenge is
    Lozenge, .ads-button is Button, .ads-section-message is SectionMessage.
*/

/* ================================================================ reset */

body:has(.app) {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--ds-surface);
}

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    font: var(--ds-font-body);
    color: var(--ds-text);
    background: var(--ds-surface);
    -webkit-font-smoothing: antialiased;
}

.app *,
.app *::before,
.app *::after { box-sizing: border-box; }

.app [x-cloak] { display: none !important; }

.app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.app a { color: var(--ds-link); }

/*
    ADS focus: a 2px outline in the focus ring colour, offset so it reads on
    both light and filled surfaces. Never removed without replacement.
*/
.app :focus { outline: none; }
.app :focus-visible {
    outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
    outline-offset: 1px;
    border-radius: var(--ds-radius-xsmall);
}

/* ================================================================ Button */

.ads-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-050);
    height: 32px;
    padding: 0 var(--ds-space-150);
    font: var(--ds-font-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-small);
    white-space: nowrap;
    transition: background-color 100ms ease-out;
}

.ads-button:hover:not(:disabled) { background: var(--ds-background-neutral-hovered); }

.ads-button[data-appearance="primary"] {
    color: var(--ds-text-inverse);
    background: var(--ds-background-brand-bold);
}

.ads-button[data-appearance="primary"]:hover:not(:disabled) {
    background: var(--ds-background-brand-bold-hovered);
}

.ads-button[data-appearance="subtle"] { background: transparent; }
.ads-button[data-appearance="subtle"]:hover:not(:disabled) {
    background: var(--ds-background-neutral-subtle-hovered);
}

.ads-button:disabled {
    color: var(--ds-text-disabled);
    background: var(--ds-background-disabled, var(--ds-background-neutral));
    cursor: not-allowed;
}

/* Text-only affordance inside body copy. */
.ads-link-button {
    padding: 0;
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-link);
    background: none;
}

.ads-link-button:hover { text-decoration: underline; }

/* ================================================================ Lozenge */

/*
    ADS Lozenge: 11px bold uppercase on a subtle accent fill. Appearances map
    to the three derived thread states -- 'moved' for work waiting on us,
    'inprogress' for work waiting on them, 'default' for done.
*/
.ads-lozenge {
    display: inline-block;
    max-width: 200px;
    padding: 0 var(--ds-space-050);
    font-family: var(--ds-font-family-body);
    font-size: 11px;
    font-weight: var(--ds-font-weight-bold);
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--ds-radius-xsmall);
    color: var(--ds-text-accent-gray);
    background: var(--ds-background-accent-gray-subtlest);
}

.ads-lozenge[data-appearance="moved"] {
    color: var(--ds-text-accent-orange);
    background: var(--ds-background-accent-orange-subtlest);
}

.ads-lozenge[data-appearance="inprogress"] {
    color: var(--ds-text-accent-blue);
    background: var(--ds-background-accent-blue-subtlest);
}

.ads-lozenge[data-appearance="success"] {
    color: var(--ds-text-accent-green);
    background: var(--ds-background-accent-green-subtlest);
}

.ads-lozenge[data-appearance="removed"] {
    color: var(--ds-text-danger);
    background: var(--ds-background-accent-red-subtlest);
}

/* ================================================================ Avatar */

.ads-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--ds-text-inverse);
    font-weight: var(--ds-font-weight-medium);
    border-radius: var(--ds-radius-full);
}

/* AvatarGroup: overlapped, each ringed in the surface colour to separate. */
.ads-avatar-group { display: flex; align-items: center; }
.ads-avatar-group .ads-avatar { box-shadow: 0 0 0 2px var(--ds-surface); }
.ads-avatar-group .ads-avatar + .ads-avatar { margin-left: var(--ds-space-negative-050, -4px); }

/* ================================================================ Textfield */

.ads-textfield {
    width: 100%;
    height: 32px;
    padding: 0 var(--ds-space-075);
    font: var(--ds-font-body);
    color: var(--ds-text);
    background: var(--ds-background-input);
    border: var(--ds-border-width) solid var(--ds-border-input);
    border-radius: var(--ds-radius-small);
    transition: background-color 100ms ease-out, border-color 100ms ease-out;
}

.ads-textfield::placeholder { color: var(--ds-text-subtlest); }
.ads-textfield:hover { background: var(--ds-background-input-hovered); }

.ads-textfield:focus {
    background: var(--ds-background-input);
    border-color: var(--ds-border-focused);
    box-shadow: inset 0 0 0 1px var(--ds-border-focused);
    outline: none;
}

/* ================================================================ SectionMessage */

.ads-section-message {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150);
    font: var(--ds-font-body);
    color: var(--ds-text);
    background: var(--ds-background-accent-blue-subtlest);
    border-radius: var(--ds-radius-small);
}

.ads-section-message-icon { flex: none; color: var(--ds-text-brand); margin-top: 1px; }
.ads-section-message-content { flex: 1 1 auto; min-width: 0; }

/* ================================================================ Menu */

.ads-menu {
    position: absolute;
    top: calc(100% + var(--ds-space-050));
    right: 0;
    z-index: 40;
    min-width: 220px;
    padding: var(--ds-space-050);
    background: var(--ds-surface-overlay);
    border-radius: var(--ds-radius-small);
    box-shadow: var(--ds-shadow-overlay);
}

.ads-menu-heading {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
    margin: 0;
    padding: var(--ds-space-100) var(--ds-space-150);
}

.ads-menu-item {
    display: block;
    width: 100%;
    padding: var(--ds-space-075) var(--ds-space-150);
    font: var(--ds-font-body);
    color: var(--ds-text);
    text-align: left;
    text-decoration: none;
    border-radius: var(--ds-radius-small);
}

.ads-menu-item:hover { background: var(--ds-background-neutral-subtle-hovered); }

/* ================================================================ Top navigation */

/*
    ADS navigation: a top bar carrying product identity and account, with the
    side navigation beneath it holding the product's own sections.
*/
.app-topbar {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    flex: none;
    height: 48px;
    padding: 0 var(--ds-space-100);
    background: var(--ds-surface);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.app-logo {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-050);
    text-decoration: none;
    color: var(--ds-text);
    border-radius: var(--ds-radius-small);
}

.app-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 13px;
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-inverse);
    background: var(--ds-background-brand-bold);
    border-radius: var(--ds-radius-small);
}

.app-logo-name { font: var(--ds-font-heading-xsmall); }

.app-topbar-spacer { flex: 1 1 auto; }

/* Mailbox switcher: present, inert, and honest about being inert. */
.app-mailbox {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    flex: none;
    padding: var(--ds-space-050) var(--ds-space-100);
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-small);
    cursor: default;
}

.app-mailbox-dot {
    width: 8px;
    height: 8px;
    background: var(--ds-text-accent-teal);
    border-radius: var(--ds-radius-full);
}

.app-mailbox-address {
    font-family: var(--ds-font-family-code);
    font-size: 12px;
    color: var(--ds-text-subtle);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-account { position: relative; flex: none; }
.app-account-button { display: flex; padding: 0; border-radius: var(--ds-radius-full); }

/* ================================================================ Side navigation */

.app-body { display: flex; flex: 1 1 auto; min-height: 0; }

.app-sidenav {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 240px;
    padding: var(--ds-space-100);
    background: var(--ds-surface-sunken);
    border-right: var(--ds-border-width) solid var(--ds-border);
    overflow-y: auto;
}

.app-sidenav-heading {
    margin: 0;
    padding: var(--ds-space-100) var(--ds-space-150) var(--ds-space-050);
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-subtlest);
}

/*
    ADS side navigation item: full-width, rounded, selected state carries the
    selected background and text colour rather than a rule or a bar.
*/
.app-navitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-100);
    width: 100%;
    padding: var(--ds-space-075) var(--ds-space-150);
    font: var(--ds-font-body);
    color: var(--ds-text-subtle);
    text-align: left;
    text-decoration: none;
    border-radius: var(--ds-radius-small);
    transition: background-color 100ms ease-out, color 100ms ease-out;
}

.app-navitem:hover:not([aria-disabled="true"]) {
    color: var(--ds-text);
    background: var(--ds-background-neutral-subtle-hovered);
}

/*
    Nested navigation: the deepest current item carries the filled selected
    background, and its ancestor section is marked by weight and colour alone.
    Two filled items competing is both visually noisy and a lie about where
    the user actually is.
*/
.app-navitem[aria-current="true"] {
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-selected);
    background: var(--ds-background-selected);
}

.app-navitem[aria-current="true"]:hover { background: var(--ds-background-selected-hovered); }

.app-navitem[aria-current="page"] {
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-selected);
}

.app-navitem[aria-disabled="true"] { color: var(--ds-text-disabled); cursor: not-allowed; }

.app-navitem-count { font-variant-numeric: tabular-nums; color: var(--ds-text-subtlest); }
.app-navitem[aria-current="true"] .app-navitem-count { color: var(--ds-text-selected); }

.app-sidenav-divider {
    height: var(--ds-border-width);
    margin: var(--ds-space-150) var(--ds-space-150);
    background: var(--ds-border);
    border: 0;
}

.app-sidenav-search { padding: 0 var(--ds-space-150); }

.app-sidenav-note {
    margin: var(--ds-space-200) var(--ds-space-150) 0;
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtlest);
}

/* ================================================================ Thread list */

.app-list {
    flex: 1 1 380px;
    max-width: 380px;
    min-width: 280px;
    border-right: var(--ds-border-width) solid var(--ds-border);
    overflow-y: auto;
    background: var(--ds-surface);
}

.app-row {
    display: block;
    width: 100%;
    padding: var(--ds-space-150);
    text-align: left;
    background: var(--ds-surface);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    transition: background-color 100ms ease-out;
}

.app-row:hover { background: var(--ds-surface-hovered); }

.app-row.is-selected { background: var(--ds-background-selected); }
.app-row.is-selected:hover { background: var(--ds-background-selected-hovered); }

.app-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ds-space-100);
}

.app-row-sender {
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-row-time { flex: none; font: var(--ds-font-body-small); color: var(--ds-text-subtlest); }

.app-row-subject {
    display: block;
    margin-top: var(--ds-space-025);
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unread is weight alone: a quiet personal signal under the team-level pill. */
.app-row.is-unread .app-row-sender,
.app-row.is-unread .app-row-subject { font-weight: var(--ds-font-weight-bold); }

.app-row-snippet {
    display: block;
    margin-top: var(--ds-space-050);
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtlest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-row-foot {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    margin-top: var(--ds-space-100);
}

.app-row-readers { display: flex; margin-left: auto; }
.app-row-attach { display: inline-flex; color: var(--ds-icon-subtle); }

/* ================================================================ Reader */

.app-reader {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--ds-surface);
    overflow-y: auto;
}

.app-reader-head {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-150);
    padding: var(--ds-space-200);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.app-reader-title { flex: 1 1 auto; min-width: 0; }

.app-subject { margin: 0; font: var(--ds-font-heading-medium); }

.app-reader-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-100);
    margin: var(--ds-space-050) 0 0;
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}

.app-mono { font-family: var(--ds-font-family-code); font-size: 12px; }

.app-reader-actions { display: flex; gap: var(--ds-space-100); flex: none; }

.app-messages { padding: var(--ds-space-200); }

.app-collapsed {
    display: block;
    width: 100%;
    padding: var(--ds-space-100);
    margin-bottom: var(--ds-space-200);
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-small);
}

.app-message {
    display: flex;
    gap: var(--ds-space-150);
    padding: var(--ds-space-200) 0;
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.app-message:first-child { border-top: 0; padding-top: 0; }

/* Outbound sits on a sunken surface so direction reads without a label. */
.app-message.is-outbound {
    margin-left: var(--ds-space-300);
    padding: var(--ds-space-200);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-medium);
    border-top: 0;
}

.app-message-main { flex: 1 1 auto; min-width: 0; }

.app-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ds-space-100);
    margin-bottom: var(--ds-space-100);
}

.app-message-sender { font-weight: var(--ds-font-weight-bold); }
.app-message-address { font-family: var(--ds-font-family-code); font-size: 12px; color: var(--ds-text-subtlest); }
.app-message-time { margin-left: auto; font: var(--ds-font-body-small); color: var(--ds-text-subtlest); }

.app-body-frame {
    display: block;
    width: 100%;
    border: 0;
    background: var(--ds-surface);
}

.app-message-actions { margin-top: var(--ds-space-100); }

.app-attachments {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
    margin: var(--ds-space-200) 0 0;
    padding: 0;
    list-style: none;
}

.app-attachment {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-100) var(--ds-space-150);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-small);
}

.app-attachment-kind {
    padding: 0 var(--ds-space-050);
    font-size: 11px;
    font-weight: var(--ds-font-weight-bold);
    line-height: 16px;
    color: var(--ds-text-subtle);
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-xsmall);
}

.app-attachment-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-attachment-size { flex: none; font: var(--ds-font-body-small); color: var(--ds-text-subtlest); }

/* ================================================================ EmptyState */

.ads-empty-state {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--ds-space-600) var(--ds-space-300);
    text-align: center;
}

.app-list .ads-empty-state { padding: var(--ds-space-400) var(--ds-space-200); text-align: left; margin: 0; }

.ads-empty-state-heading { margin: 0 0 var(--ds-space-100); font: var(--ds-font-heading-small); color: var(--ds-text); }
.ads-empty-state-description { margin: 0; font: var(--ds-font-body); color: var(--ds-text-subtle); }

.app kbd {
    padding: 0 var(--ds-space-050);
    font-family: var(--ds-font-family-code);
    font-size: 12px;
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-xsmall);
}

/* ================================================================ motion */

@media (prefers-reduced-motion: reduce) {
    .app *, .app *::before, .app *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================ narrow */

@media (max-width: 1024px) {
    .app { height: auto; min-height: 100vh; overflow: visible; }
    .app-body { flex-direction: column; }
    .app-sidenav { width: auto; border-right: 0; border-bottom: var(--ds-border-width) solid var(--ds-border); }
    .app-list { max-width: none; border-right: 0; border-bottom: var(--ds-border-width) solid var(--ds-border); max-height: 45vh; }
    .app-mailbox-address { max-width: 140px; }
}

/* ================================================================ Page */

/*
    Content region for pages that are not the inbox: a scrolling column on the
    sunken surface, with cards on the raised one. ADS page layout.
*/
.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--ds-space-400);
    background: var(--ds-surface-sunken);
    overflow-y: auto;
}

.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-200);
    max-width: 960px;
    margin: 0 auto var(--ds-space-300);
}

.app-page-title { margin: 0; font: var(--ds-font-heading-large); }
.app-page-description { margin: var(--ds-space-050) 0 0; font: var(--ds-font-body); color: var(--ds-text-subtle); }

.app-card {
    max-width: 960px;
    margin: 0 auto var(--ds-space-200);
    padding: var(--ds-space-200);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
}

.app-card-flush { padding: 0; overflow: hidden; }

.app-card-title { margin: 0 0 var(--ds-space-150); font: var(--ds-font-heading-small); }
.app-card-note { margin: var(--ds-space-100) 0 0; font: var(--ds-font-body-small); color: var(--ds-text-subtle); }

.app-metric { margin: 0; font: var(--ds-font-heading-large); font-variant-numeric: tabular-nums; }

/* ================================================================ Form */

.app-invite-form { display: flex; flex-wrap: wrap; gap: var(--ds-space-200); align-items: flex-end; }
.app-field { flex: 1 1 220px; min-width: 0; }
.app-label {
    display: block;
    margin-bottom: var(--ds-space-050);
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-subtle);
}
.app-field-error { margin: var(--ds-space-050) 0 0; font: var(--ds-font-body-small); color: var(--ds-text-danger); }
.app-invite-actions { display: flex; gap: var(--ds-space-100); flex: none; }

/* ================================================================ Table */

.ads-table { width: 100%; border-collapse: collapse; font: var(--ds-font-body); }

.ads-table th {
    padding: var(--ds-space-150) var(--ds-space-200);
    font: var(--ds-font-body-small);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-subtle);
    text-align: left;
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.ads-table td {
    padding: var(--ds-space-150) var(--ds-space-200);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    vertical-align: middle;
}

.ads-table tbody tr:last-child td { border-bottom: 0; }
.ads-table tbody tr:hover { background: var(--ds-surface-hovered); }

.app-person { display: flex; align-items: center; gap: var(--ds-space-150); }
.app-person-text { display: flex; flex-direction: column; min-width: 0; }
.app-person-name { font-weight: var(--ds-font-weight-medium); }
.app-person-email { font: var(--ds-font-body-small); color: var(--ds-text-subtlest); }

.app-cell-subtle { color: var(--ds-text-subtle); }
.app-cell-actions { text-align: right; white-space: nowrap; }
.app-cell-actions .ads-button + .ads-button { margin-left: var(--ds-space-050); }

.app-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1024px) {
    .app-main { padding: var(--ds-space-200); }
}



/* ================================================================ Composer */

.app-composer { margin-top: var(--ds-space-300); }

.app-composer-open {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-150);
    padding: var(--ds-space-200);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-medium);
    box-shadow: var(--ds-shadow-raised);
}

.app-composer-head {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-100);
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}

.app-composer-label { font-weight: var(--ds-font-weight-bold); }

.app-composer-body {
    width: 100%;
    min-height: 160px;
    padding: var(--ds-space-150);
    font: var(--ds-font-body-large);
    color: var(--ds-text);
    background: var(--ds-background-input);
    border: var(--ds-border-width) solid var(--ds-border-input);
    border-radius: var(--ds-radius-small);
    resize: vertical;
}

.app-composer-body:focus {
    border-color: var(--ds-border-focused);
    box-shadow: inset 0 0 0 1px var(--ds-border-focused);
    outline: none;
}

.app-composer-foot { display: flex; align-items: center; gap: var(--ds-space-100); }
.app-composer-saved { margin-left: auto; font: var(--ds-font-body-small); color: var(--ds-text-subtlest); }

/* Setup */
.app-setup-address code,
.app-setup-code code {
    display: inline-block;
    padding: var(--ds-space-100) var(--ds-space-150);
    border-radius: var(--ds-radius-small);
    background: var(--ds-background-neutral);
    font-family: var(--ds-font-family-code);
    font-size: 14px;
    user-select: all;
}
.app-setup-code code { font-size: 20px; letter-spacing: 0.08em; font-weight: var(--ds-font-weight-bold); }
.app-setup-address { margin: 0; }
.app-setup-code { margin: var(--ds-space-150) 0 var(--ds-space-100); }
.app-setup-steps {
    margin: 0;
    padding-left: var(--ds-space-250);
    font: var(--ds-font-body);
    list-style: decimal;
}
.app-setup-steps li { margin-bottom: var(--ds-space-100); }
.app-card-title .app-presence-dot { margin-right: var(--ds-space-075); }

/* Billing */
.app-billing-state-title { margin: 0; font-weight: var(--ds-font-weight-medium); }
.app-billing-state-detail { margin: var(--ds-space-050) 0 0; color: var(--ds-text-subtle); }
.app-billing-notice {
    margin: var(--ds-space-150) 0 0;
    padding: var(--ds-space-100) var(--ds-space-150);
    border-radius: var(--ds-radius-small);
    font: var(--ds-font-body);
}
.app-billing-notice[data-tone='success'] {
    background: var(--ds-background-accent-green-subtlest);
    color: var(--ds-text-accent-green);
}
.app-billing-notice[data-tone='error'] {
    background: var(--ds-background-accent-red-subtlest);
    color: var(--ds-text-danger);
}
.app-card-body { margin: 0 0 var(--ds-space-200); font: var(--ds-font-body); }
.app-card-note {
    margin: var(--ds-space-150) 0 0;
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtlest);
}
.app-billing-intervals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-100);
    margin: 0 0 var(--ds-space-150);
    padding: 0;
    border: 0;
}
.app-billing-legend { padding: 0 0 var(--ds-space-100); font: var(--ds-font-body-small); color: var(--ds-text-subtle); }
.app-billing-option {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-small);
    cursor: pointer;
}
.app-billing-option:has(input:checked) {
    border-color: var(--ds-border-selected, var(--ds-link));
    box-shadow: inset 0 0 0 1px var(--ds-border-selected, var(--ds-link));
}
.app-billing-option .ads-lozenge { margin-left: var(--ds-space-075); }
.app-billing-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-100); }
.app-billing-list { margin: 0; padding-left: var(--ds-space-200); font: var(--ds-font-body); list-style: disc; }
.app-billing-list li { margin-bottom: var(--ds-space-075); }

/* Trial indicator (FR-11.4) */
.app-trial {
    display: inline-flex;
    align-items: center;
    padding: var(--ds-space-050) var(--ds-space-100);
    margin-right: var(--ds-space-100);
    border-radius: var(--ds-radius-small);
    font: var(--ds-font-body-small);
    text-decoration: none;
    white-space: nowrap;
}
/* Low emphasis for most of the trial: present, not shouting. */
.app-trial[data-tone='quiet'] {
    color: var(--ds-text-subtle);
    background: var(--ds-background-neutral);
}
.app-trial[data-tone='urgent'] {
    color: var(--ds-text-accent-orange);
    background: var(--ds-background-accent-orange-subtlest);
    font-weight: var(--ds-font-weight-medium);
}
.app-trial[data-tone='ended'] {
    color: var(--ds-text-accent-red, var(--ds-text-danger));
    background: var(--ds-background-accent-red-subtlest);
    font-weight: var(--ds-font-weight-medium);
}
.app-trial:hover { text-decoration: underline; }

/* Presence */
.app-presence {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    margin-block: var(--ds-space-100);
    font: var(--ds-font-body-small);
    color: var(--ds-text-subtle);
}
.app-presence-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-background-accent-blue-bolder, #1868DB);
    animation: app-presence-pulse 1.6s ease-in-out infinite;
}
@keyframes app-presence-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
/* A pulse is decoration; the text carries the meaning either way. */
@media (prefers-reduced-motion: reduce) {
    .app-presence-dot { animation: none; }
}

/* Attachments */
.app-composer-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-100);
    margin-block: var(--ds-space-100);
}
.app-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-050) var(--ds-space-100);
    border-radius: var(--ds-radius-small);
    background: var(--ds-background-neutral);
    font: var(--ds-font-body-small);
    color: var(--ds-text);
}
.app-attachment-chip[data-state='uploading'] { opacity: 0.7; }
.app-attachment-name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-attachment-size { color: var(--ds-text-subtlest); }
.app-attachment-remove {
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    font-size: 16px;
    color: var(--ds-text-subtle);
    cursor: pointer;
}
.app-attachment-remove:hover { color: var(--ds-text); }
.app-attachment-error { font: var(--ds-font-body-small); color: var(--ds-text-danger); }

/* A file input that is reachable by keyboard and screen reader, but invisible:
   the visible control is the label styled as a button. */
.app-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.app-composer-blocked-title { margin: 0; font-weight: var(--ds-font-weight-medium); }
.app-composer-blocked-remedy { margin: var(--ds-space-050) 0 0; color: var(--ds-text-subtle); }

/* SectionMessage appearances beyond the default information one. */
.ads-section-message[data-appearance="warning"] {
    background: var(--ds-background-accent-orange-subtlest);
}
.ads-section-message[data-appearance="warning"] .ads-section-message-icon { color: var(--ds-text-warning); }

.ads-section-message[data-appearance="error"] {
    background: var(--ds-background-accent-red-subtlest);
}
.ads-section-message[data-appearance="error"] .ads-section-message-icon { color: var(--ds-text-danger); }