/*
 * THE FRAME (AUUI-T-3), after today's frame.css and workspace.css (ui/public/frame/ in
 * AUM/AURISA.git): the top bar and its menus, and under it the list column on the left and
 * the open part in the middle; on a phone one part at a time, a line on top saying which,
 * and the bottom bar that picks it. Every colour and measure is a token (tokens.css).
 */

.app { height: 100dvh; display: grid; grid-template-rows: var(--top) auto minmax(0, 1fr); }

/* --- the top bar --- */
.top {
  position: relative; z-index: 30; min-width: 0;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4) 0 var(--space-5);
  background: var(--frame); color: var(--on-frame);
}
.here { display: flex; align-items: center; min-width: 0; }
.home { display: flex; align-items: center; flex: none; }
.top .logo { height: 22px; margin-right: var(--space-5); }
.top .mark { display: none; width: 44px; height: 44px; }
.top .gap { flex: 1; }
.chev { width: 12px; height: 12px; flex: none; color: var(--on-frame-muted); }
.tile {
  min-width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0 var(--space-1); white-space: nowrap;
  border-radius: var(--radius-s); background: var(--paper); color: var(--petrol); font: 700 9.5px/1 var(--display);
}
.company {
  display: flex; align-items: center; gap: var(--space-3); max-width: 280px; height: 34px; min-width: 0;
  padding: 0 var(--space-3) 0 var(--space-2);
  background: var(--on-frame-soft); border: var(--border-width-thin) solid var(--on-frame-edge); border-radius: var(--radius-s);
  color: var(--on-frame);
}
.company b { font-weight: 650; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.end { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.today { display: flex; align-items: center; gap: var(--space-2); color: var(--on-frame-muted); font-size: 14px; font-weight: 550; white-space: nowrap; }
.today:hover { color: var(--on-frame); }
.today svg { width: 16px; height: 16px; flex: none; }
.bell { display: none; position: relative; padding: var(--space-1); background: none; border: 0; border-radius: var(--radius-round); color: var(--on-frame-muted); }
.bell:hover, .bell[aria-current] { color: var(--on-frame); background: var(--on-frame-soft); }
.bell svg { width: 20px; height: 20px; }
.person { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); background: none; border: 0; border-radius: var(--radius-round); color: var(--on-frame-muted); }
.person:hover { background: var(--on-frame-soft); }
.avatar {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-round); background: var(--paper); color: var(--petrol); font: 700 12.5px/1 var(--ui);
}

/* --- the line under the top bar while a connection to the chat is lost (frame.js, `Lost`); empty, it has no height --- */
.lost:not(:empty) {
  padding: var(--space-3) var(--space-5); background: var(--hold-soft); color: var(--hold-ink);
  border-bottom: var(--border-width-thin) solid var(--hold-edge); font-size: 13.5px; overflow-wrap: anywhere;
}
.lost b { font-weight: 650; }

/* --- the one menu: over the page, by what opened it, whole in the screen; menu.js places it --- */
.menu-wrap { display: flex; align-items: stretch; min-width: 0; }
.menu {
  position: fixed; z-index: 40;
  min-width: 240px; max-width: min(360px, calc(100vw - var(--space-6))); overflow-y: auto;
  padding: var(--space-2); border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 50px -12px var(--shadow), 0 0 0 var(--border-width-thin) var(--line);
}
.menu .item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-3) var(--space-4); border: 0; border-left: var(--border-width) solid transparent; border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: none; color: var(--ink); text-align: left; font-size: 14.5px; overflow-wrap: anywhere;
}
.menu .item:hover { background: var(--ground); }
.menu .item[aria-current] { border-left-color: var(--ink); font-weight: 650; }
.menu svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.menu .grow { flex: 1; min-width: 0; }
.menu small { color: var(--muted); font-size: 13px; }
.menu hr { border: 0; border-top: var(--border-width-thin) solid var(--line); margin: var(--space-2) var(--space-2); }
.menu .label { padding: var(--space-2) var(--space-4); font-size: 12.5px; color: var(--muted); }
.menu .choices { list-style: none; margin: 0; padding: 0; }
.menu .who { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-width: 0; }
.menu .who div { min-width: 0; overflow-wrap: anywhere; }
.menu .who b { display: block; font-weight: 650; }
.menu .who small { display: block; line-height: 1.3; }
.theme { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); font-size: 14.5px; }
.seg { display: flex; margin-left: auto; padding: var(--space-1); background: var(--ground); border: var(--border-width-thin) solid var(--line); border-radius: var(--radius-s); }
.seg button { padding: var(--space-1) var(--space-3); background: none; border: 0; border-radius: var(--radius-s); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px var(--shadow); }

/* --- the parts: the list column on the left, the open part in the middle --- */
.parts { min-height: 0; display: grid; grid-template-columns: var(--left) minmax(0, 1fr); }
.part { min-width: 0; min-height: 0; overflow-y: auto; }
.part.list { background: var(--surface); border-right: var(--border-width-thin) solid var(--line); }
.part.open { background: var(--ground); }

/* --- the list of conversations (conversations.js), as today's widget draws it (widget.css in AUM/CHAT.git): each a row, its title, the mark and when beside it, and its last line under --- */
.conversations { list-style: none; margin: 0; padding: var(--space-2) 0; }
.entry {
  display: grid; gap: var(--space-1); width: 100%; padding: var(--space-4) var(--space-5);
  background: none; border: 0; border-bottom: var(--border-width-thin) solid var(--line); border-left: var(--border-width) solid transparent;
  color: var(--ink); text-align: left;
}
.entry:hover { background: var(--ground); }
.entry[aria-current] { background: var(--teal-soft); border-left-color: var(--act); }
.entry .head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.entry .title { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entry .untitled { color: var(--muted); font-style: italic; }
.entry .when { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.entry .last { font-size: 13.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entry .last:empty { display: none; }
/* My desk while anything waits on the person: its title in the colour of what waits (desk.js) */
.entry.desk.waits .title { color: var(--waits-fill); }
.part .empty { margin: 0; padding: var(--space-6) var(--space-5); color: var(--muted); font-size: 14px; }

/*
 * --- the conversation open (conversation.js), as today's widget draws one (widget.css in AUM/CHAT.git): its title
 * on top, its lines under it, each its writer, the agent's tag and when, and its text as markdown; the conversation's
 * own lines set apart; under the lines who is at work, and the line the person writes at the foot ---
 */
.conversation { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.conversation > .head {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  padding: var(--space-4) var(--space-5); background: var(--surface); border-bottom: var(--border-width-thin) solid var(--line);
}
.conversation > .head .tile { background: var(--teal-soft); color: var(--accent-ink); }
.conversation h2 { min-width: 0; font-size: 17px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation h2.untitled { color: var(--muted); font-style: italic; }
.lines { list-style: none; margin: 0; padding: var(--space-4) var(--space-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.line { min-width: 0; max-width: var(--line-measure); padding: var(--space-3) var(--space-4); background: var(--surface); border: var(--border-width-thin) solid var(--line); border-radius: var(--radius-m); }
.line[data-writer="own"] { align-self: flex-end; background: var(--teal-soft); border-color: transparent; }
.line[data-writer="chat agent"] { border-left: var(--border-width) solid var(--act); }
.line .head { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; font-size: 12.5px; color: var(--muted); }
.line .writer { min-width: 0; font-weight: 650; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.line .tag:not(:empty) { padding: 0 var(--space-2); border-radius: var(--radius-s); background: var(--teal-soft); color: var(--accent-ink); font-weight: 600; }
.line time, .line .sending { margin-left: auto; flex: none; white-space: nowrap; }
.line .said { overflow-wrap: anywhere; }
.line .said > :first-child { margin-top: 0; }
.line .said > :last-child { margin-bottom: 0; }
.line .said p, .line .said ul, .line .said ol, .line .said pre, .line .said blockquote, .line .said table { margin: var(--space-3) 0; }
.line .said ul, .line .said ol { padding-left: var(--space-6); }
.line .said h1, .line .said h2, .line .said h3, .line .said h4, .line .said h5, .line .said h6 { margin: var(--space-4) 0 var(--space-3); font-size: 15px; }
.line .said code { font: 13px/1.4 var(--mono); padding: 0 var(--space-1); background: var(--ground); border-radius: var(--radius-s); }
.line .said pre { overflow-x: auto; padding: var(--space-3); background: var(--ground); border-radius: var(--radius-s); }
.line .said pre code { padding: 0; }
.line .said blockquote { padding-left: var(--space-4); border-left: var(--border-width) solid var(--line-strong); color: var(--muted); }
.line .said table { border-collapse: collapse; display: block; overflow-x: auto; }
.line .said th, .line .said td { padding: var(--space-2) var(--space-3); border: var(--border-width-thin) solid var(--line); text-align: left; }
.line .said hr { border: 0; border-top: var(--border-width-thin) solid var(--line); }
.line .said a { text-decoration: underline; }

/* --- My desk (desk.js): its lines drawn as a conversation's are, with no place to type, and the mark where the lines not yet seen begin --- */
.conversation.desk { grid-template-rows: auto minmax(0, 1fr); }
.conversation.desk > .empty { grid-row: 2; align-self: start; }
.unseen-from { display: flex; align-items: center; gap: var(--space-3); color: var(--accent-ink); font-size: 12.5px; font-weight: 650; }
.unseen-from::before, .unseen-from::after { content: ''; flex: 1; border-top: var(--border-width-thin) solid var(--act); }
.line .said .ref { font-weight: 600; text-decoration: none; }
.line .refused { margin: var(--space-2) 0 0; color: var(--ends); font-size: 13px; }
.line.change { align-self: center; display: flex; gap: var(--space-3); max-width: 100%; padding: var(--space-1) var(--space-4); background: none; border: 0; color: var(--muted); font-size: 13px; }
.line.change time { margin: 0; }
.workers:not(:empty) { padding: var(--space-2) var(--space-5); }
.working { margin: 0; color: var(--muted); font-size: 13px; font-style: italic; }
.writing { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); background: var(--surface); border-top: var(--border-width-thin) solid var(--line); }
.writing .row { display: flex; align-items: flex-end; gap: var(--space-3); }
.writing textarea {
  flex: 1; min-width: 0; max-height: var(--writing-height); resize: none; field-sizing: content;
  padding: var(--space-3) var(--space-4); background: var(--ground); border: var(--border-width-thin) solid var(--line-strong); border-radius: var(--radius-m);
}
.send { padding: var(--space-3) var(--space-5); background: var(--act); color: var(--on-act); border: 0; border-radius: var(--radius-m); font-weight: 650; }
.send:hover { background: var(--act-hover); }
.call { justify-self: start; padding: var(--space-2) var(--space-4); background: var(--teal-soft); color: var(--accent-ink); border: 0; border-radius: var(--radius-round); font-weight: 650; }

/* --- the mark of lines the person has not seen: beside a conversation, a company in the chooser, and the chooser's button; magenta, as what waits on the person --- */
.unseen { width: var(--mark-size); height: var(--mark-size); flex: none; border-radius: var(--radius-round); background: var(--magenta); }

/* --- how many wait on the person, on the phone’s bell (desk.js), as today's count of what waits is drawn --- */
.bell .count {
  position: absolute; top: calc(-1 * var(--space-1)); right: calc(-1 * var(--space-1)); min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 var(--space-1);
  border-radius: var(--radius-round); background: var(--waits-fill); color: var(--on-waits); font: 700 11px/1 var(--display);
}

/* --- what only a phone shows: the title of the part shown, and the bottom bar that picks it --- */
.shown, .bottom { display: none; }

/*
 * --- a phone, 820 px and under as today's (phone.js in AUM/AURISA.git): one bar on top, one line:
 * the mark, the chooser, the title of the part shown in the middle, and the person's menu; one part
 * under it, the one the address shows; and under that the bottom bar, the part shown marked by its
 * soft ground and ink, never in the act colour. ---
 */
@media (max-width: 820px) {
  .app { grid-template-rows: var(--top) auto minmax(0, 1fr) auto; }
  /* two sides of one width, so the title stands in the middle whatever each side holds */
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 0 var(--space-3); gap: var(--space-3); }
  .top .logo, .top .gap, .person .chev, .today span { display: none; }
  .top .mark { display: block; }
  .here { gap: var(--space-2); }
  .company b, .company .chev { display: none; }
  .shown { display: block; max-width: 40vw; font: 650 16px/1.2 var(--display); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .top > .end { justify-self: end; gap: var(--space-3); }
  .today svg { width: 20px; height: 20px; }
  .bell { display: flex; }
  .conversations > li.desk { display: none; }
  .menu { width: calc(100vw - 2 * var(--space-3)); max-width: none; }
  .lost:not(:empty) { padding: var(--space-3) var(--space-4); }

  .parts { grid-template-columns: minmax(0, 1fr); }
  .part, .part.list { display: none; border: 0; }
  .app[data-show="list"] .part.list, .app[data-show="open"] .part.open { display: block; }
  .lines, .writing, .conversation > .head, .workers:not(:empty) { padding-left: var(--space-4); padding-right: var(--space-4); }

  .bottom {
    display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom));
    background: var(--surface); border-top: var(--border-width-thin) solid var(--line);
  }
  .bottom a {
    min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: var(--space-2) 0 var(--space-1); border-radius: var(--radius-s);
    color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap;
  }
  .bottom svg { width: 44px; height: 26px; padding: var(--space-1) var(--space-4); border-radius: var(--radius-round); }
  .bottom a[aria-current] { color: var(--accent-ink); }
  .bottom a[aria-current] svg { background: var(--teal-soft); }
}