/* ===========================================================================
   Use case 1 — messaging specifics.

   Only what is unique to the chat app: the contact list, the delivery ticks and
   the conversation thread. Everything else (coordinate system, Sova screen, app
   header, input bar, agent pill, cursor, playback controls) lives in kit.css.
   =========================================================================== */

.uc-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}



.uc-row {
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    height: calc(70 * var(--u));
    padding-inline: calc(15 * var(--u));
    position: relative;
}



.uc-row + .uc-row::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(70 * var(--u));
    inset-inline-end: 0;
    border-block-start: 1px solid #f1f2f4;
}



/* highlight used by the tap and by the scan sweep */
.uc-row-hl {
    position: absolute;
    inset: 0;
    background: var(--uc-accent, #059669);
    opacity: 0;
    pointer-events: none;
}



.uc-avatar--1 { background: #34a0a4; }


.uc-avatar--2 { background: #e08b57; }


.uc-avatar--3 { background: #7a86c9; }


.uc-avatar--4 { background: #c76f8e; }



.uc-row-text { flex: 1; min-width: 0; }



.uc-row-name {
    font-size: calc(13.5 * var(--u));
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.uc-row-preview {
    font-size: calc(11.5 * var(--u));
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-block-start: calc(3 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(4 * var(--u));
}



.uc-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(5 * var(--u));
    flex: none;
}



.uc-row-time {
    font-size: calc(10 * var(--u));
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}



/* --- delivery ticks ----------------------------------------------------- */

.uc-tick {
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
    /* flex: none is load-bearing — as a flex child of .uc-row-preview the tick
       would otherwise shrink to nothing and the preview text would run over it */
    flex: none;
    width: calc(17 * var(--u));
    height: calc(11 * var(--u));
    position: relative;
}



.uc-tick svg {
    width: calc(11 * var(--u));
    height: calc(11 * var(--u));
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}



/* second check sits slightly ahead of the first */
.uc-tick svg + svg { inset-inline-start: calc(5.5 * var(--u)); opacity: 0; }



.uc-tick.is-delivered svg + svg { opacity: 1; }


.uc-tick.is-read { color: #38bdf8; }


.uc-tick.is-read svg + svg { opacity: 1; }



/* --- conversation thread (pushes in over the list) ---------------------- */

.uc-thread {
    position: absolute;
    inset-block-start: 0;
    /* stop at y=480 — the bottom of the visible band — so that flex-end lays the
       messages out just above the card's clip line rather than below it */
    inset-block-end: calc(170 * var(--u));
    inset-inline: 0;
    background: #f4f7f5;
    display: flex;
    flex-direction: column;
    z-index: 2;
    /* hidden in the poster state so the contact list is what shows through;
       the animator drives it with GSAP autoAlpha + xPercent */
    opacity: 0;
    visibility: hidden;
}



.uc-thread-header {
    display: flex;
    align-items: center;              /* see .uc-sova-header for why */
    gap: calc(10 * var(--u));
    height: calc(92 * var(--u));
    padding-inline: calc(15 * var(--u));
    padding-block-start: calc(38 * var(--u));
    background: var(--uc-accent, #059669);
    color: #fff;
    flex: none;
}



.uc-thread-avatar {
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    font-size: calc(12 * var(--u));
}



.uc-thread-name {
    font-size: calc(14 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
}



.uc-thread-body {
    flex: 1;
    /* bottom padding clears BOTH the input bar (y=432) and the agent pill
       (y=392), which floats above the thread — the thread box ends at y=480 */
    padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(98 * var(--u));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(8 * var(--u));
}



.uc-msg-in {
    align-self: flex-start;
    background: #fff;
    border-radius: calc(12 * var(--u));
    border-start-start-radius: calc(3 * var(--u));
    padding: calc(9 * var(--u)) calc(11 * var(--u));
    box-shadow: 0 1px calc(2 * var(--u)) rgba(15, 23, 42, 0.08);
    width: calc(150 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--u));
}



.uc-msg-out {
    align-self: flex-end;
    max-width: calc(224 * var(--u));
    background: #d9fdd3;
    border-radius: calc(12 * var(--u));
    border-start-end-radius: calc(3 * var(--u));
    padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u));
    box-shadow: 0 1px calc(2 * var(--u)) rgba(15, 23, 42, 0.08);
    font-size: calc(12.5 * var(--u));
    color: #111827;
    text-align: start;
}



.uc-msg-out-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(4 * var(--u));
    margin-block-start: calc(3 * var(--u));
}



.uc-msg-out-time {
    font-size: calc(9.5 * var(--u));
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}