/* =========================================================================
   Scrum Boards phase 2 — card comments + @mentions (Wave 2 "comments" stream,
   2026-08-09; mentions ship with comments per the CEO decision).

   Styles ScrumCardComments.razor (Components/Boards), which mounts inside the
   card detail modal. Prefix ocsb-cmt- keeps it inside the board family without
   touching oc-scrum-board.css (owned elsewhere).

   Colour rule: --oc-* tokens only, never a raw hex (check-oc-tokens.ps1 fails
   the build otherwise). Dark mode needs no overrides here because every colour
   below flips with its token.
   ========================================================================= */

.ocsb-cmt {
    margin-top: 1rem;
    font-family: var(--oc-font-sans);
}

.ocsb-cmt-head {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .5rem;
}

.ocsb-cmt-empty {
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
    margin: .25rem 0;
}

/* ---------------------------------------------------------------- composer */

.ocsb-cmt-composer {
    position: relative;
    margin-bottom: .75rem;
}

.ocsb-cmt-editing {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--oc-fs-sm);
    color: var(--oc-amber-700);
    margin-bottom: .25rem;
}

/* The editor box: formatting strip (MarkdownToolbar, Embedded) on top, textarea
   beneath, one border around both — the same silhouette as OcRichTextEditor. */
.ocsb-cmt-editor {
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-card-bg);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.ocsb-cmt-editor:focus-within {
    border-color: var(--oc-info);
    box-shadow: 0 0 0 3px var(--oc-info-bg);
}

/* The formatting strip, as the box's top band. MarkdownToolbar lives in
   Components/Oc and is shared with the EOS todo drawer, so it must not be
   restyled globally - Embedded="true" adds this modifier and nothing else
   changes for the drawer.

   The base .oc-md-toolbar rules are ALSO restated here on purpose. The only
   other copy sits in TodoEditDrawer.razor.css, which is SCOPED CSS with no
   ::deep, so it compiles to .oc-md-toolbar[b-<scope>] and matches nothing
   inside a child component. Relying on it here would leave the strip bare. */
.ocsb-cmt-editor .oc-md-toolbar--embedded {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: .25rem .375rem;
    background: var(--oc-surface-2);
    border: 0;
    border-bottom: 1px solid var(--oc-border);
    border-radius: 0;
}

.ocsb-cmt-editor .oc-md-toolbar--embedded .oc-md-btn {
    border: 0;
    background: transparent;
    padding: .25rem .5rem;
    min-width: 1.75rem;
    color: var(--oc-color-text);
    font-size: var(--oc-fs-sm);
    line-height: 1;
    border-radius: var(--oc-radius-sm);
    cursor: pointer;
}

.ocsb-cmt-editor .oc-md-toolbar--embedded .oc-md-btn:hover {
    background: var(--oc-gray-200);
}

.ocsb-cmt-editor .oc-md-toolbar--embedded .oc-md-spacer {
    width: 1px;
    height: 1.125rem;
    background: var(--oc-border);
    margin: 0 .25rem;
}

.ocsb-cmt-input {
    display: block;
    width: 100%;
    padding: .5rem .625rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--oc-color-text);
    font-size: var(--oc-fs-sm);
    line-height: var(--oc-lh-normal);
    resize: vertical;
}

.ocsb-cmt-input:focus { outline: none; }

.ocsb-cmt-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .375rem;
}

.ocsb-cmt-spacer { flex: 1 1 auto; }

.ocsb-cmt-check {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
    cursor: pointer;
    margin: 0;
}

/* ---------------------------------------------------------- mention picker */

.ocsb-cmt-picker {
    position: absolute;
    z-index: 10;
    min-width: 14rem;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--oc-bg-elevated);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
    box-shadow: var(--oc-shadow-md);
    padding: .25rem;
    display: flex;
    flex-direction: column;
}

.ocsb-cmt-picker-item {
    display: flex;
    align-items: center;
    gap: .375rem;
    text-align: left;
    border: none;
    background: transparent;
    padding: .375rem .5rem;
    border-radius: var(--oc-radius-sm);
    font-size: var(--oc-fs-sm);
    color: var(--oc-color-text);
    cursor: pointer;
}

.ocsb-cmt-picker-item:hover {
    background: var(--oc-color-surface-hover);
}

/* ----------------------------------------------------------------- thread */

.ocsb-cmt-item {
    border: 1px solid var(--oc-border-soft);
    border-radius: var(--oc-radius-md);
    background: var(--oc-card-bg);
    padding: .5rem .625rem;
    margin-bottom: .5rem;
}

.ocsb-cmt-item.is-pinned {
    border-color: var(--oc-info-border);
    background: var(--oc-info-bg);
}

/* Internal = owner-tenant-only. The amber wash matches the "internal" badge so
   the frank channel is unmistakable next to comments a guest can also read. */
.ocsb-cmt-item.is-internal {
    border-color: var(--oc-amber-600);
    background: var(--oc-amber-bg);
}

.ocsb-cmt-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: var(--oc-fs-sm);
    margin-bottom: .25rem;
}

.ocsb-cmt-pinicon { color: var(--oc-info); }

.ocsb-cmt-author { font-weight: 600; }

.ocsb-cmt-time,
.ocsb-cmt-edited {
    color: var(--oc-text-muted);
    font-size: var(--oc-fs-xs);
}

/* The per-comment actions are house OcIconButtons (Wave 3 "designsystem"), which
   bring their own ghost styling. Only the delete tint is board-specific. */
.ocsb-cmt-actbtn--danger:hover { color: var(--oc-danger); }

.ocsb-cmt-body {
    font-size: var(--oc-fs-sm);
    line-height: var(--oc-lh-normal);
    overflow-wrap: anywhere;
}

.ocsb-cmt-body p:last-child { margin-bottom: 0; }

/* The @mention chip the renderer swaps in for @[Name](user:ID) tokens.
   --oc-info-text, NOT --oc-info: the base hue is tuned to sit on the page
   background, and on --oc-info-bg it measures 3.93:1 in light mode — under the
   4.5:1 AA floor. The -text variant is the one paired with -bg (7.12:1 light,
   8.99:1 dark). Same pairing violation, and the same fix, as .ocsb-bulkbar
   label in PR 11680. */
.ocsb-cmt-mention {
    color: var(--oc-info-text);
    background: var(--oc-info-bg);
    border-radius: var(--oc-radius-sm);
    padding: 0 .25rem;
    font-weight: 600;
    white-space: nowrap;
}