/* Quick chat: the pane, its round button, and the agent picker. */
@layer views {
  /* Quick chat: a full-height pane on the right, over the current
     view, holding one thread column (thread-view.js). */
  .quick-chat {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    border-left: 1px solid var(--line);
    background: var(--surface-column);
    box-shadow: -8px 0 24px var(--shadow-sheet);
  }
  /* Its round button, fixed at the bottom right on every view but Agents
     (shell.js names the view on the body) and hidden while the pane or a
     phone's drawer is open.
     It sits outside the shell, over the brief's overlay too. */
  .quick-chat-fab.icon-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 24;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 0 0 1px var(--line), 0 6px 20px var(--shadow-pop);
    cursor: pointer;
  }
  .quick-chat-fab.icon-button:hover { background: var(--side); }
  body:not([data-view]) .quick-chat-fab,
  body[data-view="agents"] .quick-chat-fab,
  body:has(.shell.panel-open) .quick-chat-fab,
  .quick-chat-fab[aria-expanded="true"] { display: none; }
  .quick-chat-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--line);
  }
  /* The picker: a button naming the agent, which gives way to a search
     field over the agents that take turns; the list drops below it, its rows the @
     picker's (.mention-option). */
  .quick-chat-picker {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  .quick-chat-agent,
  .quick-chat-search {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-control);
    background: var(--raised);
    color: var(--ink);
    font: inherit;
    /* 16px, as every text field here, so iOS does not zoom on focus. */
    font-size: 16px;
  }
  .quick-chat-agent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .quick-chat-agent:hover { border-color: var(--rule); }
  .quick-chat-agent-avatar { display: inline-flex; flex: none; }
  .quick-chat-agent-avatar[hidden] { display: none; }
  .quick-chat-agent svg { flex: none; color: var(--muted); }
  .quick-chat-agent-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .quick-chat-agent[hidden],
  .quick-chat-search[hidden] { display: none; }
  .quick-chat-agent-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 3;
    max-height: min(320px, 60vh);
    overflow: auto;
  }
  .quick-chat-agent-list {
    display: flex;
    flex-direction: column;
  }
  .quick-chat-agent-none {
    margin: 0;
    padding: 10px;
    color: var(--muted);
  }
  .quick-chat-empty {
    margin: 0;
    padding: 20px 16px;
    color: var(--muted);
  }
  .quick-chat .thread-title {
    flex: 1;
    justify-content: flex-start;
    padding: 0;
  }
  .quick-chat .thread-chips { margin-left: 0; }
  .quick-chat .thread-notice,
  .quick-chat .thread-description,
  .quick-chat .thread-subtitle,
  .quick-chat .thread-messages,
  .quick-chat .thread-request,
  .quick-chat .composer,
  .quick-chat .thread-failure {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* A message a notification opened the pane at stops clear of the bar,
     its tint whole (thread.css .thread-message[data-message-mark]). */
  .quick-chat .thread-messages { scroll-padding-top: 12px; }
  /* The picker already names the agent, so this row shows nothing: hide
     it outright rather than leave an empty, bordered strip in the pane. */
  .quick-chat .thread-header { display: none; }

  @media (max-width: 719.98px) {
    .quick-chat-fab.icon-button { right: 16px; bottom: calc(var(--nav-bar-h) + 12px); }
    /* It steps aside under the menu's backdrop, as it does for the drawer. */
    body:has(#app-menu-backdrop:not([hidden])) .quick-chat-fab { display: none; }
    .quick-chat {
      left: 0;
      /* Stops above the bottom nav bar, so its links stay reachable while
         the pane is open. */
      bottom: var(--nav-bar-h);
      width: auto;
      border-left: 0;
      box-shadow: none;
    }

    /* The pane has no name in its header, so the chips take what is left. */
    .quick-chat .thread-title { flex-basis: auto; }
  }
}