/*
 * THE WIDGET'S PARTS, one rule set for each kind of thing it shows. No
 * colour, typeface size, spacing, radius, border width or measure is written
 * here: every one is a token (tokens.css), the layout at each width among
 * them.
 */
@import url('tokens.css');

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { height: 100vh; padding: var(--space-4); background: var(--ground); color: var(--ink); font: var(--text-size)/var(--text-leading) var(--ui); display: flex; flex-direction: column; gap: var(--space-4); }
button, input { font: inherit; color: inherit; }

/*
 * A notice: one short sentence that says where the chat stands. Whom the
 * widget is signed in as stands on one line, cut short, so the chat keeps the
 * frame's height; the chat's words that follow it are shown whole.
 */
.notice { margin: 0; padding: var(--space-4) var(--space-6); background: var(--surface); color: var(--muted); border: var(--border-width) solid var(--line); border-radius: var(--radius-m); }
.notice.brief { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
 * A panel: words the person reads before going on, and the one way on; or
 * the question before an act that ends something, with the act and the way
 * to keep things as they are.
 */
.panel { padding: var(--space-4) var(--space-6); background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-m); }
.panel p { margin: 0 0 var(--space-4); }
.opened .panel { min-height: 0; overflow-y: auto; margin: var(--space-3) 0; background: var(--ground); }
.about .answers { flex-shrink: 0; }
.answers { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* A heading: what a pane is about. */
.heading { margin: 0 0 var(--space-3); font-size: var(--heading-size); overflow-wrap: anywhere; }

/* What a person presses: one act of each pane, and the quiet ones beside it. */
.act { padding: var(--space-3) var(--space-4); background: var(--act); color: var(--on-act); border: var(--border-width) solid var(--act); border-radius: var(--radius-s); cursor: pointer; }
.quiet, .back { padding: var(--space-2) var(--space-3); background: none; color: var(--act); border: var(--border-width) solid var(--line); border-radius: var(--radius-s); cursor: pointer; }
.back { display: var(--back); }

/* A field a person types into. */
.field { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-s); }
.field:focus { outline: var(--border-width) solid var(--act); border-color: var(--act); }

/*
 * The chat: the list, and the open conversation beside it or in its place,
 * at the frame's height under the notice. The list scrolls inside its own
 * column, and so do the lines of a conversation, between its title and the
 * field that writes one, so the frame never scrolls them away from each
 * other.
 */
.chat { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--columns); grid-template-rows: minmax(0, 1fr); gap: var(--space-4); }
.conversations { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 0; }
.chat.open .conversations { display: var(--list-beside-open); }
.conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--space-4); background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-m); }
.chat:not(.open) .conversation { display: var(--open-beside-list); }

/* A list: rows of one kind, each a press that opens or does what it names, or a row that is no press. */
.list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-m); overflow-y: auto; }
.list:empty { display: none; }
.list li + li { border-top: var(--border-width) solid var(--line); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); background: none; border: 0; text-align: left; cursor: pointer; }
.item[aria-current] { background: var(--act-soft); }
.row { padding: var(--space-3) var(--space-4); }
/* The person's contacts and their heading, under their conversations, taking at most their share of the column, so the list keeps the rest. */
.contacts { flex-shrink: 0; max-height: var(--contacts-height); display: flex; flex-direction: column; min-height: 0; }
/* A row of the list is one line of each: its title, its people and its last line, each cut short; the open conversation shows them whole. */
.item .title { font-weight: var(--title-weight); }
.item .title, .item .people, .item .last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .people, .item .last { grid-column: 1 / -1; font-size: var(--small-size); line-height: var(--small-leading); color: var(--muted); }
.item .last:empty { display: none; }
.untitled { color: var(--muted); font-style: italic; }

/* A person of the company: their name, the agent's tag, and whether they are online. */
.contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); min-width: 0; }
.contact .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.presence { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--small-size); color: var(--muted); }
.presence::before { content: ''; width: var(--mark-size); height: var(--mark-size); background: var(--line); border-radius: var(--radius-round); }
.presence[data-online="true"]::before { background: var(--act); }

/* Choosing whom to add to the open conversation, in place of its lines: the contacts not in it, scrolling in their own box. */
.choosing { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0; }

/* The mark of lines the person has not seen. */
.unseen { align-self: center; width: var(--mark-size); height: var(--mark-size); background: var(--waits); border-radius: var(--radius-round); }

/*
 * A title with the act beside it, and the form that renames it in its
 * place. Over the open conversation the way back, where there is one, stands
 * before the title, and its people beside the acts on them; the title and
 * its people are cut short, so its lines keep the room; the rename field
 * holds the title whole.
 */
.titled { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.titled .heading { flex: 1; min-width: 0; margin: 0; }
.opened { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.opened .heading { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--title-lines); overflow: hidden; }
.about { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.about .people { flex: 1; min-width: 0; margin: 0; font-size: var(--small-size); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { margin: 0; color: var(--muted); }

/*
 * The lines of a conversation, first first, scrolling in their own box: the
 * person's own to one side, everyone else's to the other, the company's
 * Aurisa agent's framed and tagged as the agent's, and the conversation's own
 * in the middle. Which line stays in view
 * as the box changes is the widget's to keep (lines.js), not the browser's
 * scroll anchoring, which not every browser has.
 */
.reading { flex: 1; min-height: 0; display: flex; margin: var(--space-3) 0; }
.lines { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.line { align-self: flex-start; max-width: var(--line-width); padding: var(--space-2) var(--space-4); background: var(--ground); border: var(--border-width) solid var(--ground); border-radius: var(--radius-m); }
.line[data-writer="own"] { align-self: flex-end; background: var(--act-soft); border-color: var(--act-soft); }
.line[data-writer="chat agent"] { border-color: var(--act); }
.written { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin: 0; font-size: var(--small-size); line-height: var(--small-leading); color: var(--muted); }
.writer { font-weight: var(--title-weight); color: var(--ink); overflow-wrap: anywhere; }
.tag { padding: 0 var(--space-3); background: var(--act); color: var(--on-act); border-radius: var(--radius-round); }
.tag:empty { display: none; }
.said { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* A line the conversation wrote itself, on a change of its members: set apart from the people's, in the middle, small and muted, with no writer. */
.change { align-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 var(--space-3); max-width: var(--line-width); font-size: var(--small-size); line-height: var(--small-leading); color: var(--muted); text-align: center; }
/* The company's Aurisa agent called by name in a line, told apart from its plain text. */
.call { color: var(--act); font-weight: var(--title-weight); }

/*
 * The field that writes a line, and its one act; above them, the items and
 * documents brought into the line, the press that adds where the person is,
 * and the offer of the agent's name as the person types it, where there is
 * any.
 */
.writing { display: flex; flex-direction: column; gap: var(--space-3); }
.typing { display: flex; gap: var(--space-3); }
.attached { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.attached:not(:has(li, button:not([hidden]))) { display: none; }

/*
 * The items and documents a line references, each a card: its id, and the
 * title and state the page gave, a press that has the page open it; and the
 * press that takes one out of the line being written.
 */
.refs { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 100%; margin: 0; padding: 0; list-style: none; }
.refs:empty { display: none; }
.line .refs { margin-top: var(--space-2); }
.ref { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-s); font-size: var(--small-size); line-height: var(--small-leading); overflow-wrap: anywhere; }
.card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); min-width: 0; padding: var(--space-2) var(--space-3); background: none; border: 0; text-align: left; cursor: pointer; }
.card:disabled { cursor: default; }
.card .named { color: var(--muted); }
.card .title { font-weight: var(--title-weight); }
.card .state { color: var(--act); }
.card .title:empty, .card .state:empty { display: none; }
/* In the line being written a card stands on one line, its title cut short, so the lines and the field keep their room; a line sent shows it whole. */
.writing .card { flex-wrap: nowrap; }
.writing .card .named, .writing .card .state { flex-shrink: 0; white-space: nowrap; }
.writing .card .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unref { padding: 0 var(--space-2); background: none; color: var(--muted); border: 0; cursor: pointer; }