/* ============================================================
   Submission conversation (js-lms/submission_thread.js): a lender and the
   brokerage that sent it a case. Shared by the external workspace and the
   lender's Broker Submission popup, so it uses only the --vantage-* tokens
   both pages load from brand.css.
   ============================================================ */

.thr { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--vantage-text); }

.thr-list {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* A message cut by the top or bottom edge fades out instead of ending in a hard line. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.thr-msg {
    max-width: 86%;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--vantage-fill);
    align-self: flex-start;
}
.thr-msg.thr-mine { align-self: flex-end; background: var(--vantage-fill-2); }
.thr-msg.thr-unread { box-shadow: inset 3px 0 0 var(--vantage-brand-a); }

.thr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.thr-head strong { font-weight: 600; }
.thr time { font-size: 12px; color: var(--vantage-text); }

/* A pill inside a bubble sits on the page surface rather than the bubble's own
   tint, so its ink keeps the contrast it has everywhere else. */
.thr-msg .lms-pill-good    { background: color-mix( in srgb, var(--lms-success-ink) 11%, var(--vantage-surface) ); }
.thr-msg .lms-pill-warning { background: color-mix( in srgb, var(--lms-warning-ink) 11%, var(--vantage-surface) ); }
.thr-msg .lms-pill-bad     { background: color-mix( in srgb, var(--lms-danger-ink)  11%, var(--vantage-surface) ); }
.thr-msg .lms-pill-neutral { background: var(--vantage-surface); }
.thr-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.thr-stage {
    align-self: center;
    text-align: center;
    max-width: 92%;
    font-size: 12.5px;
    color: var(--vantage-text-2);
    padding: 2px 0;
}
.thr-stage strong { color: var(--vantage-text); font-weight: 600; }
.thr-stage .thr-body { color: var(--vantage-text); }
.thr-stage time { display: block; color: var(--vantage-text-2); }

.thr-empty, .thr-note { color: var(--vantage-text-2); margin: 0; padding: 6px 0; }
.thr-error { color: var(--lms-danger-ink, #b3261e); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.thr-retry {
    font: inherit;
    padding: 4px 10px;
    border: 1px solid var(--vantage-line);
    border-radius: 6px;
    background: transparent;
    color: var(--vantage-text);
    cursor: pointer;
}

.thr-skeleton {
    height: 44px;
    border-radius: 10px;
    background: var(--vantage-fill);
    animation: thr-pulse 1.4s ease-in-out infinite;
}
.thr-skeleton:nth-child(2) { width: 70%; align-self: flex-end; }
@keyframes thr-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .thr-skeleton { animation: none; } }

.thr-composer { display: flex; flex-direction: column; gap: 6px; }
.thr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.thr-label, .thr-row label { font-size: 12px; color: var(--vantage-text-2); }
.thr-composer select,
.thr-composer textarea {
    font: inherit;
    color: var(--vantage-text);
    background: var(--vantage-surface);
    border: 1px solid var(--vantage-line);
    border-radius: 6px;
    padding: 6px 8px;
    min-width: 0;
    max-width: 100%;
}
.thr-composer textarea { width: 100%; resize: vertical; min-height: 64px; }
.thr-composer select:focus-visible,
.thr-composer textarea:focus-visible,
.thr-send:focus-visible,
.thr-retry:focus-visible { outline: 2px solid var(--vantage-text); outline-offset: 2px; }
.thr-composer textarea[aria-invalid="true"] { border-color: var(--lms-danger-ink, #b3261e); }

.thr-actions { display: flex; align-items: center; gap: 12px; }
.thr-send {
    font: inherit;
    font-weight: 600;
    padding: 7px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--vantage-accent);
    color: var(--vantage-bg);
    cursor: pointer;
}
.thr-send:hover { opacity: 0.88; }
.thr-send:disabled { opacity: 0.5; cursor: not-allowed; }
.thr-msg-line { font-size: 12.5px; color: var(--vantage-text-2); }
.thr-composer textarea[aria-invalid="true"] ~ .thr-actions .thr-msg-line { color: var(--lms-danger-ink, #b3261e); }

@media (max-width: 480px) { .thr-msg { max-width: 100%; } }

/* ── Files (database/217) ── */
.thr-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.thr-files a { color: var(--vantage-text); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.thr-files a:focus-visible { outline: 2px solid var(--vantage-text); outline-offset: 2px; border-radius: 2px; }
.thr-file-size { font-size: 12px; color: var(--vantage-text-2); white-space: nowrap; }

.thr-attach-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.thr-attach {
    font: inherit;
    padding: 5px 12px;
    border: 1px solid var(--vantage-line);
    border-radius: 6px;
    background: transparent;
    color: var(--vantage-text);
    cursor: pointer;
}
.thr-attach:hover { background: var(--vantage-fill); }
.thr-attach:focus-visible, .thr-chip-remove:focus-visible { outline: 2px solid var(--vantage-text); outline-offset: 2px; }
.thr-pending { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.thr-pending:empty { display: none; }
.thr-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--vantage-fill); }
.thr-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.thr-chip-error .thr-file-size { color: var(--lms-danger-ink, #b3261e); }
.thr-chip-remove {
    font: inherit;
    font-size: 12px;
    padding: 2px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--vantage-text);
    text-decoration: underline;
    cursor: pointer;
}
.thr-chip-uploading { opacity: 0.8; }