/* ============================================================
   Chat of a project (D-047) — the conversation and its form.
   Only theme variables, no hardcoded colors.

   The body of a message is PLAIN TEXT: the view escapes it with Site::e(),
   the script writes it with textContent, and the line breaks are kept HERE,
   by white-space: pre-wrap — never by markup built out of what was typed.
   ============================================================ */

.chat { margin-bottom: var(--space-6); }
.chat__partial { margin: 0 0 var(--space-3); }
.chat__empty   { margin: 0; }

/* ── Who is doing what right now (D-050): the bottom-left corner of the
   conversation (28/09/26, before that under the title) ──
   The window wraps the scrolling log and does not scroll itself, so the line
   laid on its corner stays put while the messages move under it. One entry
   per Claude chat at work, a pulsing dot in front of each; nobody at work:
   the muted idle sentence, no dot. The line is ALWAYS there. The log keeps
   a bottom padding of the line's height (set by the script from the real
   height, this default covers one line without it) so the last message is
   never under it. Pointer events pass through: the line covers messages,
   it must not catch the wheel or a click meant for them. */
.chat-window { position: relative; }
.chat-presence {
    position:         absolute;
    bottom:           0;
    left:             0;
    z-index:          1;
    display:          flex;
    flex-wrap:        wrap;
    gap:              var(--space-1) var(--space-4);
    max-width:        100%;
    padding:          var(--space-1) var(--space-3);
    border:           1px solid var(--color-border);
    border-left:      0;
    border-bottom:    0;
    border-top-right-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);
    box-shadow:       var(--shadow-sm);
    color:            var(--color-text-muted);
    font-size:        16px;
    line-height:      1.5;
    pointer-events:   none;
}
.chat-presence__item,
.chat-presence__idle {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
    min-width:   0;
    overflow-wrap: anywhere;
}
.chat-presence__idle   { color: var(--color-text-muted); }
.chat-presence__author { font-weight: var(--font-weight-semibold); color: var(--color-primary-dark); }
.chat-presence__dot {
    flex:             none;
    width:            0.5rem;
    height:           0.5rem;
    margin-right:     var(--space-1);
    border-radius:    50%;
    background-color: var(--color-success);
    animation:        chat-presence-pulse 1.6s ease-in-out infinite;
}
@keyframes chat-presence-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-presence__dot { animation: none; }
}

/* ── New messages while reading higher up (georgi, 12/10/26) ──
   The log does not follow someone reading older messages, so a message that
   came in meanwhile went unseen. The pill, centred just above the presence
   line, says how many came in; a click scrolls to the FIRST of them, which
   flashes for 2 s (a still outline for those who asked for no motion).
   Reaching the bottom of the log puts it away. The script sets its `bottom`
   from the real height of the presence line; this default covers one line.
   Centred with left/right/auto margins, not a transform: .btn:active has its
   own transform, and it would throw the pill sideways at every click. */
.chat-new {
    position:      absolute;
    bottom:        3.25rem;
    left:          0;
    right:         0;
    z-index:       2;
    width:         max-content;
    max-width:     calc(100% - 2 * var(--space-4));
    margin:        0 auto;
    border-radius: var(--radius-full);
    box-shadow:    var(--shadow-md);
    white-space:   nowrap;
}
.chat-new[hidden] { display: none; }
.chat-msg--flash { animation: chat-msg-flash 2s ease-out; }
@keyframes chat-msg-flash {
    0%, 40% { box-shadow: 0 0 0 3px var(--color-primary-light); }
    100%    { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-msg--flash { animation: none; outline: 2px solid var(--color-primary-light); }
}

/* ── The conversation: it scrolls inside the card, the form stays in view ── */
.chat-log {
    display:             flex;
    flex-direction:      column;
    gap:                 var(--space-3);
    max-height:          60vh;
    margin:              0;
    padding:             0 0 2.75rem;   /* room for one presence line; the script sets the real height */
    overflow-y:          auto;
    overscroll-behavior: contain;
    list-style:          none;
}
.chat-msg {
    padding:          var(--space-3) var(--space-4);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    background-color: var(--color-bg-card);
}
/* Written by a Claude chat: its own tint and a stronger label, so nobody
   mistakes it for a person's message (the same care as Claude's ideas). */
.chat-msg--ai {
    border-color:     var(--color-primary-light);
    background-color: var(--color-primary-lighter);
}
.chat-msg__head {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-2);
}
.chat-msg__icon   { color: var(--color-text-muted); }
.chat-msg__author { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.chat-msg--ai .chat-msg__icon,
.chat-msg--ai .chat-msg__author { color: var(--color-primary-dark); }
.chat-msg--ai .chat-msg__author { font-weight: var(--font-weight-bold); }
.chat-msg__time {
    margin-left: auto;
    color:       var(--color-text-muted);
    font-size:   var(--font-size-xs);
    white-space: nowrap;
}
.chat-msg__body {
    margin-top:    var(--space-2);
    white-space:   pre-wrap;
    overflow-wrap: anywhere;
    color:         var(--color-text);
    line-height:   1.6;
}

/* ── The form, and the line that sends decisions to the ideas ── */
.chat__footer {
    flex-direction: column;
    align-items:    stretch;
    scroll-margin-top: var(--space-16);
}
.chat-form .form-group { margin-bottom: 0; }
.chat-form textarea    { width: 100%; resize: vertical; }
/* The error of a refused message (422/429/network), printed by the script
   under the box and kept until the next attempt; `hidden` = nothing to say. */
.chat-form [data-chat-error][hidden] { display: none; }
.chat-form__actions {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    margin-top:      var(--space-3);
}
.chat-form__actions .form-hint { margin: 0; }
.chat__ideas {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin:      0;
}

@media (max-width: 640px) {
    .chat-form__actions { flex-direction: column; align-items: stretch; }
    .chat-msg__time     { margin-left: 0; }
}