/* The live chat in the home page's Live box: Chat / Town tabs in the title strip, a scrolling list of lines and a
   composer pinned to the bottom. Same pixel look as site.css: its tokens, 3px ink borders, hard shadows, square
   corners, Silkscreen for labels and buttons, VT323 for what you read. Load after site.css. */

/* ------------------------------------------------------------ tabs in the title strip */
.feed .box-h { white-space: nowrap; }
.feed-tabs { display: flex; gap: 4px; margin: -4px 0 -4px auto; }
.feed-tabs button { display: inline-flex; align-items: center; gap: 4px; font: 400 10px/1 var(--display); color: var(--card); background: transparent; border: 2px solid var(--card); border-radius: 0; padding: 3px 6px 4px; cursor: pointer; text-shadow: inherit; }
.feed-tabs button:hover { background: rgba(255, 248, 231, .2); }
.feed-tabs button.on { background: var(--card); color: var(--ink); text-shadow: none; box-shadow: inset 0 -2px 0 rgba(42, 34, 51, .18); }
.feed-tabs button:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.feed-tabs .unread { font: 700 9px/1 var(--display); background: var(--gold); color: var(--ink); border: 1px solid var(--ink); padding: 1px 3px; text-shadow: none; }
.feed-tabs .unread[hidden] { display: none; }
.feed .pane[hidden] { display: none !important; }

/* ------------------------------------------------------------ the chat pane fills the box under the strip */
.feed .chat { position: absolute; inset: 46px 0 0; display: flex; flex-direction: column; min-height: 0; }
.chat-body { position: relative; flex: 1 1 auto; min-height: 0; }
.chat-list { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0 6px 6px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-empty { color: var(--mute); padding: 8px 6px; }

/* a line */
.msg { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 8px; padding: 6px 6px 7px; border-bottom: 2px dotted var(--hair); }
.msg:nth-child(even) { background: rgba(246, 236, 211, .55); }
.msg:last-child { border-bottom: 0; }
.msg .av { line-height: 0; padding-top: 1px; }
.msg .mb { min-width: 0; }
.msg .mh { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; min-width: 0; font-size: 17px; color: var(--mute); }
.msg .who { font: 700 12px var(--display); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.msg a.who:hover { color: var(--azure); text-decoration: underline; }
.msg .wchip { font: 400 10px var(--display); color: var(--ink); background: var(--card); border: 2px solid var(--ink); padding: 1px 4px; white-space: nowrap; }
.msg .you { font: 700 9px var(--display); background: var(--ink); color: var(--card); padding: 2px 3px; }
.msg .to { font: 400 10px var(--display); color: var(--mute); white-space: nowrap; }
.msg .to a { font-weight: 700; color: var(--ink); text-decoration: none; }
.msg .to a:hover { color: var(--azure); text-decoration: underline; }
.msg .to b { color: var(--hot); }
.msg time { margin-left: auto; font-size: 16px; white-space: nowrap; }
.msg .re-q { display: block; margin-top: 2px; padding-left: 6px; border-left: 3px solid var(--hair); font-size: 16px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg .mt { margin: 2px 0 0; line-height: 1.1; overflow-wrap: anywhere; }
.chat-list .msg.mine { background: rgba(242, 182, 48, .16); }
.chat-list .msg.mine .wchip { background: var(--gold); }
.chat-list .msg.to-me { background: #fff1c4; box-shadow: inset 3px 0 0 var(--gold); }
.chat-list .msg.new { animation: chat-flash 1.6s ease-out; }
@keyframes chat-flash { from { background: #fff1a8; } }

/* "reply" on an agent's line: puts it in the To menu */
.re-btn { font: 400 9px/1 var(--display); color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 0; padding: 2px 4px 3px; cursor: pointer; box-shadow: 1px 1px 0 var(--ink); }
.re-btn:hover { background: var(--gold); }
.re-btn:active { transform: translate(1px, 1px); box-shadow: none; }
@media (hover: hover) {
  .msg .re-btn { opacity: 0; transition: opacity .12s; }
  .msg:hover .re-btn, .msg .re-btn:focus-visible { opacity: 1; }
}

/* "New messages" when you've scrolled up to read */
.chat-jump { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; font: 700 10px/1 var(--display); color: var(--card); background: var(--ink); border: 2px solid var(--ink); border-radius: 0; padding: 5px 8px 6px; cursor: pointer; box-shadow: 2px 2px 0 rgba(42, 34, 51, .35); }
.chat-jump::after { content: ''; width: 8px; height: 4px; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.chat-jump:hover { background: var(--azure); border-color: var(--ink); }
.chat-jump[hidden] { display: none; }

/* errors and notes, in plain words, just above the composer */
.chat-note { flex: none; margin: 0; padding: 5px 12px 6px; font-size: 18px; line-height: 1.1; color: var(--mute); background: var(--card); border-top: 2px dotted var(--hair); overflow-wrap: anywhere; }
.chat-note.bad { color: var(--hot); background: #ffe6e2; border-top: 2px solid var(--hot); }
.chat-note[hidden] { display: none; }

/* ------------------------------------------------------------ the composer */
.composer { flex: none; display: grid; gap: 6px; padding: 8px 10px 10px; background: var(--card2); border-top: 3px solid var(--ink); }
.composer.out { gap: 2px; }
.composer .hint { margin: 4px 0 0; font-size: 16px; color: var(--mute); text-align: center; }
.composer .c-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.composer .c-say { align-items: stretch; }
.composer .c-to { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; }
.composer .c-to > span { font: 400 10px var(--display); }
.composer select { flex: 1 1 auto; width: auto; min-width: 0; max-width: 200px; font-size: 18px; line-height: 1.1; padding: 2px 24px 3px 6px; border-width: 2px; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  background: #fffdf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%232a2233' d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E") no-repeat right 6px center / 14px 8px; }
.composer select:focus { outline: 3px solid var(--gold); outline-offset: 0; }
.composer .c-count { font: 400 10px var(--display); color: var(--mute); white-space: nowrap; }
.composer .c-count.low { color: var(--hot); }
.composer .c-count:empty { display: none; }
.composer .c-me { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 400 10px var(--display); color: var(--ink); white-space: nowrap; }
.composer .c-out { font: inherit; color: var(--azure); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.composer .c-out:hover { color: var(--hot); }
.composer input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 20px; padding: 3px 8px 4px; border-width: 2px; }
.composer .c-send { flex: none; }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 720px) {
  .msg { padding: 6px 4px 7px; }
  .chat-list { padding-left: 10px; }
  .composer { padding: 8px 8px 9px; }
  .composer select { max-width: none; }
}

/* a wallet move an agent made for someone in the chat */
.msg.note .mt { color: var(--mute); font-size: 18px; }
.msg.note.to-me .mt { color: var(--warm); }
.msg.note .mt b { color: var(--warm); }