/* Inbox
   ------------------------------------------------------------------------
   The shared inbox: the conversation list down the left, the open thread
   on the right, and — opened from the thread's header — the customer's
   context beside it. One workspace on paper, the list column on ivory.

   Three columns on a wide page, two with the context closed; under 1180px
   the context takes the thread's place; under 760px the columns become
   screens, chosen by the URL (`is-thread-open`, `is-panel-open`), with a
   Back control in the thread's header. A quiet, conversation-first inbox
   on the Kairo tokens; every colour is a token or an app alias. */

.main--inbox .page-content--inbox {
  max-width: none;
  padding-top: 20px;
}

.ib-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* Channels and Settings, side by side at the heading's end. */
.ib-top__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.ib-title {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.ib-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--k-color-muted);
}

.ib-nothing {
  padding: 40px 24px;
}

/* --- Controls shared across the columns ---------------------------------- */

/* The `hidden` attribute wins over any display rule below: the note form
   and a submit-on-change button are hidden by script, not by class. */
.ib-workspace [hidden] {
  display: none !important;
}

.ib-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  color: var(--k-color-muted);
  background: transparent;
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
  text-decoration: none;
  list-style: none;
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}

.ib-icon::-webkit-details-marker {
  display: none;
}

.ib-icon__glyph {
  width: 20px;
  height: 20px;
  flex: none;
}

.ib-icon:hover,
.ib-icon.is-on,
.ib-icon[aria-expanded="true"],
details[open] > .ib-icon {
  color: var(--k-color-violet-deep);
  background: var(--k-color-lavender);
}

.ib-icon.is-on .ib-icon__glyph {
  fill: var(--k-color-lavender);
}

.ib-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--k-color-violet-deep);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.ib-text-button:hover {
  text-decoration: underline;
}

.ib-inline-form {
  display: contents;
}

.ib-inline {
  display: inline-block;
  min-height: 36px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--k-color-violet-deep);
  text-decoration: none;
}

.ib-inline:hover {
  text-decoration: underline;
}

.ib-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-violet-deep);
  background: var(--k-color-lavender);
  border-radius: 50%;
}

/* --- The workspace ---------------------------------------------------------- */

.ib-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: max(620px, calc(100dvh - 180px));
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
}

.ib-workspace > * {
  min-width: 0;
  min-height: 0;
}

.ib-workspace.is-panel-open {
  grid-template-columns: 290px minmax(0, 1fr) 270px;
}

/* --- The list --------------------------------------------------------------- */

.ib-list {
  display: flex;
  flex-direction: column;
  background: var(--k-color-ivory);
  border-inline-end: 1px solid var(--k-color-line);
  border-start-start-radius: calc(var(--k-radius-panel) - 1px);
  border-end-start-radius: calc(var(--k-radius-panel) - 1px);
}

.ib-list__controls {
  flex: none;
  padding: 14px 16px 0;
}

.ib-platforms {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}

.ib-platform {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--k-color-muted);
  background: transparent;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}

.ib-platform .source-mark {
  margin: 0;
}

.ib-platform .ib-icon__glyph {
  width: 22px;
  height: 22px;
}

.ib-platform:hover {
  background: var(--k-color-lavender-soft);
}

.ib-platform[aria-current="true"] {
  color: var(--k-color-violet-deep);
  background: var(--k-color-lavender);
}

/* A channel that is not connected, or needs attention, says so with a dot:
   the button stays, so a quiet channel is told apart from a dropped one. */
.ib-platform--not_connected {
  opacity: 0.45;
}

.ib-platform__mark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--k-color-warning);
  border: 2px solid var(--k-color-ivory);
  border-radius: 50%;
}

.ib-platform--not_connected .ib-platform__mark {
  background: var(--k-color-control-border);
}

.ib-queue {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.ib-queue__select {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 4px 20px 4px 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--k-color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ib-queue__source {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--k-color-muted);
  white-space: nowrap;
}

.ib-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  border-bottom: 1px solid var(--k-color-line);
}

.ib-search__field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--k-color-muted);
}

.ib-search__field .ib-icon__glyph {
  width: 18px;
  height: 18px;
}

.ib-search__field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--k-color-ink);
  background: transparent;
  border: 0;
  outline-offset: 0;
}

.ib-search__field input::placeholder {
  color: var(--k-color-muted);
}

.ib-more {
  position: relative;
}

.ib-filter-count {
  position: absolute;
  top: 4px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  color: var(--k-color-paper);
  background: var(--k-color-violet-deep);
  border-radius: 50%;
}

.ib-more__body {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: 4;
  display: grid;
  gap: 12px;
  width: 260px;
  padding: 14px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-control);
  box-shadow: var(--k-shadow-raised);
}

.ib-field {
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.ib-field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--k-color-ink);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-control);
}

.ib-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-control);
  overflow: hidden;
}

.ib-sort__option {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 8px;
  font-size: 13px;
  color: var(--k-color-ink);
  text-decoration: none;
}

.ib-sort__option + .ib-sort__option {
  border-inline-start: 1px solid var(--k-color-control-border);
}

.ib-sort__option:hover {
  text-decoration: underline;
}

.ib-sort__option[aria-current="true"] {
  font-weight: 600;
  color: var(--k-color-paper);
  background: var(--k-color-violet-deep);
}

.ib-more__actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ib-results {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.ib-results__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  color: var(--k-color-violet-deep);
  text-decoration: none;
}

.ib-results__clear .ib-icon__glyph {
  width: 14px;
  height: 14px;
}

.ib-rows {
  flex: 1;
  padding: 0 0 16px;
  overflow: auto;
}

/* One row: the avatar with the channel's lozenge on its shoulder, the name
   with the wait beside it, the last thing said, then who owns it. The open
   row sits on lavender with its avatar on paper — no bar or stripe, as the
   rest of the dashboard marks what is current. */
.ib-row {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  color: var(--k-color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--k-color-line);
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}

.ib-row:hover {
  background: var(--k-color-lavender-soft);
}

.ib-row.is-open {
  background: var(--k-color-lavender);
}

.ib-row__avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--k-color-violet-deep);
  background: var(--k-color-lavender);
  border-radius: 50%;
}

.ib-row.is-open .ib-row__avatar {
  background: var(--k-color-paper);
}

.ib-row__avatar .source-mark {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  margin: 0;
  font-size: 9px;
  border: 2px solid var(--k-color-ivory);
  box-sizing: content-box;
}

.ib-row__content {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.ib-row__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ib-row__name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ib-row__when {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
  white-space: nowrap;
}

.ib-row__preview {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ib-row__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 17px;
  font-size: 12px;
  color: var(--k-color-muted);
}

.ib-row__priority {
  display: inline-flex;
  color: var(--k-color-violet-deep);
}

.ib-row__priority .ib-icon__glyph {
  width: 12px;
  height: 12px;
  fill: var(--k-color-violet-deep);
}

.ib-row__flag {
  color: var(--k-color-warning);
}

.ib-row__flag--waiting,
.ib-row__flag--closed,
.ib-row__flag--snoozed {
  color: var(--k-color-muted);
}

.ib-row__owner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ib-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

/* --- The thread ------------------------------------------------------------- */

.ib-thread {
  display: flex;
  flex-direction: column;
  background: var(--k-color-paper);
  border-end-end-radius: calc(var(--k-radius-panel) - 1px);
  border-start-end-radius: calc(var(--k-radius-panel) - 1px);
}

.ib-thread--none {
  justify-content: center;
}

.ib-thread__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 10px;
}

.ib-person {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ib-person > div {
  min-width: 0;
}

.ib-person__name {
  margin: 0;
  overflow: hidden;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ib-person__meta {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-color-muted);
}

.ib-person__meta .source-mark {
  width: 16px;
  height: 16px;
  margin-inline-end: 6px;
  font-size: 9px;
}

.ib-thread__actions {
  display: flex;
  flex: none;
  gap: 2px;
}

.ib-menu {
  position: relative;
}

.ib-menu__body {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: 4;
  display: grid;
  min-width: 200px;
  padding: 6px;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-control);
  box-shadow: var(--k-shadow-raised);
}

.ib-menu__body p {
  margin: 4px 8px 6px;
  font-size: 12px;
  color: var(--k-color-muted);
}

.ib-menu__item {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--k-color-ink);
  text-align: start;
  background: none;
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
}

.ib-menu__item:hover {
  background: var(--k-color-lavender-soft);
}

.ib-thread__status {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 22px 8px;
  font-size: 12px;
  color: var(--k-color-muted);
  border-bottom: 1px solid var(--k-color-line);
}

.ib-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ib-state i {
  width: 6px;
  height: 6px;
  background: var(--k-color-violet);
  border-radius: 50%;
}

.ib-state--waiting i,
.ib-state--snoozed i,
.ib-state--closed i {
  background: var(--k-color-control-border);
}

.ib-owner {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ib-owner__label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ib-owner__label .ib-icon__glyph {
  width: 16px;
  height: 16px;
}

.ib-owner select {
  max-width: 220px;
  min-height: 44px;
  padding: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--k-color-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* The transcript: the customer's bubbles on the start side, the merchant's
   on the end side in lavender, the team's notes in the warning pair in
   the middle — set apart because they were never sent. */
.ib-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  min-height: 120px;
  margin: 0;
  padding: 22px 28px;
  overflow: auto;
  list-style: none;
}

.ib-day {
  padding-bottom: 4px;
  font-size: 12px;
  color: var(--k-color-muted);
  text-align: center;
}

.ib-message {
  width: fit-content;
  max-width: 78%;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--k-color-ink) 5%, var(--k-color-paper));
  border-radius: var(--k-radius-panel);
  overflow-wrap: anywhere;
}

.ib-message--outbound {
  align-self: flex-end;
  background: var(--k-color-lavender-soft);
}

.ib-message--note {
  align-self: center;
  max-width: 90%;
  background: var(--k-color-warning-bg);
  border-radius: var(--k-radius-control);
}

.ib-message__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  font-size: 12px;
}

.ib-message__meta strong {
  font-weight: 600;
}

.ib-message--note .ib-message__meta strong {
  color: var(--k-color-warning);
}

.ib-message__meta span {
  color: var(--k-color-muted);
}

.ib-message__body {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.65;
}

.ib-message__body p {
  margin: 0;
}

.ib-message__body p + p {
  margin-top: 0.5em;
}

.ib-message__body--described {
  font-style: italic;
  color: var(--k-color-muted);
}

.ib-message__delivery {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--k-color-muted);
}

.ib-message__delivery--failed {
  color: var(--k-color-error);
}

/* --- The composer ----------------------------------------------------------- */

.ib-composer {
  flex: none;
  margin: 8px 22px 20px;
  overflow: clip;
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-control);
}

.ib-composer.is-note {
  background: var(--k-color-warning-bg);
  border-color: color-mix(in srgb, var(--k-color-warning) 35%, transparent);
}

.ib-composer__tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
}

.ib-composer__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--k-color-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ib-composer__tab .source-mark {
  width: 16px;
  height: 16px;
  margin: 0;
  font-size: 9px;
}

.ib-composer__tab[aria-pressed="true"] {
  color: var(--k-color-violet-deep);
  border-bottom-color: var(--k-color-violet);
}

.ib-compose__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--k-color-ink);
  background: transparent;
  border: 0;
  resize: vertical;
  field-sizing: content;
}

.ib-compose__input:disabled {
  color: var(--k-color-muted);
}

.ib-compose__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 10px;
}

.ib-compose__via {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.ib-compose__via--note {
  color: var(--k-color-warning);
}

.ib-send {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--k-color-paper);
  background: var(--k-color-violet);
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
}

.ib-send .ib-icon__glyph {
  width: 16px;
  height: 16px;
}

.ib-send:hover {
  background: var(--k-color-violet-deep);
}

.ib-send:disabled {
  color: var(--k-color-ink-soft);
  background: var(--k-color-line);
  cursor: not-allowed;
}

.ib-send--note {
  color: var(--k-color-ink);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
}

.ib-send--note:hover {
  background: var(--k-color-lavender-soft);
}

.ib-composer__tab .ib-icon__glyph {
  width: 16px;
  height: 16px;
}

/* The AI suggestion: Neo's draft, read before it is used. Set as text, not
   a field, because it is edited only once it is in the reply box. */
.ib-suggest__text {
  min-height: 76px;
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--k-color-ink);
  white-space: pre-wrap;
}

.ib-suggest__text.is-loading {
  color: var(--k-color-muted);
}

.ib-suggest__text.is-failed {
  color: var(--k-color-warning);
}

.ib-suggest__actions {
  display: flex;
  gap: 8px;
}

/* The reader's thumbs on the suggestion, beside the line saying who drafted
   it: quiet until pressed, then the violet of the tab it belongs to. */
.ib-suggest__basis {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ib-suggest__vote {
  display: flex;
  gap: 2px;
}

.ib-vote {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--k-color-muted);
  background: transparent;
  border: 0;
  border-radius: var(--k-radius-control);
  cursor: pointer;
}

.ib-vote .ib-icon__glyph {
  width: 16px;
  height: 16px;
}

.ib-vote:hover:not(:disabled) {
  color: var(--k-color-ink);
  background: var(--k-color-lavender-soft);
}

.ib-vote[aria-pressed="true"] {
  color: var(--k-color-violet-deep);
  background: var(--k-color-lavender-soft);
}

.ib-vote[aria-pressed="true"] .ib-icon__glyph {
  fill: currentColor;
  fill-opacity: 0.2;
}

.ib-vote:disabled {
  opacity: 0.4;
  cursor: default;
}

/* A conversation with one of the store's providers, said once between the
   thread's status and its transcript, in the lavender of Neo's own words. */
.ib-provider {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 10px 22px 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-lavender-ink);
  background: var(--k-color-lavender);
  border-radius: var(--k-radius-control);
}

.ib-provider .ib-icon__glyph {
  flex: none;
  width: 16px;
  height: 16px;
}

.ib-provider span {
  flex: 1;
}

.ib-provider__link {
  flex: none;
  font-weight: 600;
  color: inherit;
}

/* The inbox's settings: one form a row, a name and a number corrected in
   place with Remove beside them, and the form that adds one below. */
.ib-providers__list {
  display: grid;
  margin: 0;
  padding: 0 20px;
  list-style: none;
}

.ib-providers__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--k-color-line);
}

.ib-providers__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ib-providers__form .field__input {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
}

.ib-providers__form .button,
.ib-providers__remove {
  margin-top: 0;
}

.ib-providers__phone {
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.ib-providers__form--new {
  align-items: flex-end;
  padding: 16px 20px 4px;
}

.ib-providers__hint {
  margin: 0;
  padding: 0 20px 20px;
  font-size: 13px;
  color: var(--k-color-muted);
}

/* Customer knowledge, the settings' second tab: the team's own skills for
   the suggested reply, one row each — the name the agent calls it by, when
   it is read, when it last changed — with its text on a page of its own,
   since an entry can run long. The name is a slug and reads left to right
   whatever the page's direction. */
.ib-knowledge__list {
  display: grid;
  margin: 0;
  padding: 0 20px;
  list-style: none;
}

.ib-knowledge__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--k-color-line);
}

.ib-knowledge__text {
  flex: 1 1 280px;
  min-width: 0;
}

.ib-knowledge__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--k-color-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ib-knowledge__name:hover {
  color: var(--k-color-violet-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ib-knowledge__description {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-muted);
}

.ib-knowledge__description--missing {
  font-style: italic;
}

.ib-knowledge__meta {
  margin: 0;
  font-size: 12px;
  color: var(--k-color-muted);
  font-variant-numeric: tabular-nums;
}

.ib-knowledge__actions {
  display: flex;
  gap: 8px;
}

.ib-knowledge__actions .button {
  margin-top: 0;
}

.ib-knowledge__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 20px;
}

.ib-knowledge__form .field__input {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
}

/* The text as it will be read: a plain, resizable block, taller than a line. */
.ib-knowledge__body {
  min-height: 240px;
  resize: vertical;
  line-height: 1.5;
}

.ib-knowledge__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ib-knowledge__buttons .button {
  margin-top: 0;
}

/* Stands where the reply box would be when nothing can go out: the
   reason, in the notice's warning pair. */
.ib-guard {
  margin: 0 12px 10px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--k-color-warning);
  background: var(--k-color-warning-bg);
  border-radius: var(--k-radius-control);
}

.ib-compose__kept {
  margin: 0 16px 10px;
  font-size: 12px;
  color: var(--k-color-muted);
}

/* --- About the customer ----------------------------------------------------- */

.ib-context {
  padding: 10px 18px 24px;
  overflow: auto;
  background: var(--k-color-ivory);
  border-inline-start: 1px solid var(--k-color-line);
  border-end-end-radius: calc(var(--k-radius-panel) - 1px);
  border-start-end-radius: calc(var(--k-radius-panel) - 1px);
}

.ib-context__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.ib-context__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ib-context__person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 20px;
  font-size: 14px;
}

.ib-section {
  border-top: 1px solid var(--k-color-line);
}

.ib-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.ib-section summary::-webkit-details-marker {
  display: none;
}

.ib-section summary span {
  font-size: 20px;
  font-weight: 400;
  color: var(--k-color-muted);
  transition: transform var(--k-duration-fast) var(--k-ease-standard);
}

.ib-section[open] > summary span {
  transform: rotate(45deg);
}

.ib-section__body {
  padding: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
}

.ib-section__body p {
  margin: 0 0 8px;
}

.ib-facts {
  margin: 0;
  font-size: 12px;
}

.ib-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ib-facts dt {
  flex: none;
  color: var(--k-color-muted);
}

.ib-facts dd {
  margin: 0;
  text-align: end;
  overflow-wrap: anywhere;
}

.ib-orders,
.ib-activity {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.ib-orders li {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--k-color-line);
}

.ib-orders small,
.ib-activity small {
  display: block;
  font-size: 12px;
  color: var(--k-color-muted);
}

.ib-orders__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

/* An order still owed a shipment is ruled in violet down its leading
   edge, so the open ones stand out of the whole history at a glance. */
.ib-orders .ib-orders__order--open {
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--k-color-violet);
}

.ib-orders__order--void strong {
  color: var(--k-color-muted);
  text-decoration: line-through;
}

.ib-section__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: inherit;
}

.ib-orders__open-count {
  padding: 2px 8px;
  border-radius: var(--k-radius-pill);
  background: var(--k-color-violet-soft);
  color: var(--k-color-violet-deep);
  font-size: 11px;
  font-weight: 600;
}

.ib-activity li {
  padding: 6px 0;
  font-size: 12px;
}

/* --- Empty states ----------------------------------------------------------- */

.ib-empty {
  padding: 40px 24px;
  text-align: center;
}

.ib-empty h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 20px;
}

.ib-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--k-color-muted);
}

.ib-empty--list {
  padding: 32px 18px;
}

.ib-empty--list strong {
  display: block;
  margin-bottom: 4px;
}

.ib-empty--list .button {
  margin-top: 12px;
}

.ib-back {
  display: none;
}

.ib-workspace :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--k-color-violet-deep);
  outline-offset: 2px;
}

/* --- Narrower columns ------------------------------------------------------- */

@container page (width <= 1060px) {
  .ib-workspace,
  .ib-workspace.is-panel-open {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .is-panel-open .ib-thread {
    display: none;
  }

  .ib-context {
    padding: 14px 22px;
    border-inline-start: 0;
  }

  .ib-thread__head {
    flex-wrap: wrap;
    gap: 6px;
  }

  .ib-thread__actions {
    margin-inline-start: auto;
  }

  .ib-person .ib-avatar {
    display: none;
  }

  .ib-messages {
    padding: 18px;
  }

  .ib-message {
    max-width: 90%;
  }
}

/* One column: screens, chosen by the URL. The list until a thread is named,
   then the thread with its Back, then the context with its close. */
@container page (width <= 760px) {
  .ib-workspace,
  .ib-workspace.is-panel-open {
    display: block;
    height: auto;
    min-height: calc(100dvh - 190px);
  }

  .ib-list {
    min-height: calc(100dvh - 190px);
    border: 0;
    border-radius: var(--k-radius-panel);
  }

  .ib-rows {
    overflow: visible;
  }

  .ib-thread,
  .ib-context {
    display: none;
  }

  .is-thread-open .ib-list {
    display: none;
  }

  .is-thread-open .ib-thread {
    display: flex;
  }

  .is-thread-open.is-panel-open .ib-thread {
    display: none;
  }

  .is-thread-open.is-panel-open .ib-context {
    display: block;
    border-radius: var(--k-radius-panel);
  }

  .ib-back {
    display: inline-flex;
    width: 36px;
  }

  .ib-thread__head {
    justify-content: flex-start;
    padding: 12px 12px 0;
  }

  .ib-person {
    flex: 1;
  }

  .ib-person__name {
    font-size: 17px;
  }

  .ib-thread__status {
    padding: 0 14px 8px;
  }

  .ib-owner select {
    max-width: 150px;
  }

  .ib-messages {
    min-height: 220px;
    max-height: 60dvh;
    padding: 18px 14px;
  }

  .ib-composer {
    margin: 8px 12px 14px;
  }

  .ib-top {
    margin-bottom: 12px;
  }

  .ib-title {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ib-section summary span,
  .ib-row,
  .ib-icon,
  .ib-platform {
    transition: none;
  }
}

/* --- The customer page's composer -------------------------------------------
   A person's page carries the inbox's reply and close on a thread the
   inbox is waiting on. The same rules, drawn on that page's grid. */

.queue-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--k-color-line);
}

.queue-reply {
  display: contents;
}

.queue-reply__input {
  grid-column: 1 / -1;
  grid-row: 1;
  box-sizing: border-box;
  width: 100%;
  min-height: 84px;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--k-color-ink);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-control);
  caret-color: var(--k-color-violet-deep);
  field-sizing: content;
  resize: vertical;
  transition: border-color var(--k-duration-fast) var(--k-ease-standard);
}

.queue-reply__input::placeholder {
  color: var(--k-color-muted);
}

.queue-reply__input:hover {
  border-color: var(--k-color-ink);
}

.queue-reply__input:focus-visible {
  border-color: var(--k-color-violet-deep);
}

.queue-composer__via {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--k-color-muted);
}

.queue-reply__send {
  grid-column: 3;
  grid-row: 2;
  margin-top: 0;
}

/* Close is quiet on purpose: it is the way out that sends nothing, and it
   should not compete with the reply for the eye. */
.queue-close {
  grid-column: 2;
  grid-row: 2;
  display: flex;
}

.queue-composer__close {
  min-height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-color-ink);
  background: var(--k-color-paper);
  border: 1px solid var(--k-color-control-border);
  border-radius: var(--k-radius-button);
  cursor: pointer;
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}

.queue-composer__close:hover {
  background: var(--k-color-lavender-soft);
}

/* Stands where the reply box would be when the window has closed: the
   reason, in the notice's warning pair, with the close beside it. */
.queue-thread__note {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-warning);
  background: var(--k-color-warning-bg);
  border: 1px solid color-mix(in srgb, var(--k-color-warning) 25%, transparent);
  border-radius: var(--k-radius-control);
}

.queue-thread__note + .queue-close {
  grid-column: 2 / -1;
}

@media (width <= 560px) {
  .queue-composer {
    grid-template-columns: 1fr auto;
  }

  .queue-composer__via {
    grid-column: 1 / -1;
  }

  .queue-close {
    grid-column: 1;
    grid-row: 3;
  }

  .queue-reply__send {
    grid-column: 2;
    grid-row: 3;
  }

  .queue-thread__note + .queue-close {
    grid-column: 1 / -1;
  }
}

/* An email thread's subject: on the row above the preview, and under the
   person's name in the open thread. The other channels have none, so the
   line is drawn only where there is one. */
.ib-row__subject {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--k-color-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ib-person__subject {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-color-ink);
}

/* ---- Attachments ---------------------------------------------------------
   What a customer sent that was not words, drawn as the thing itself
   (shared/_inbox_attachments): a picture capped to the bubble, a player, a
   file to download, or a word on why there is none yet. Shared with the
   customer page's feed, which loads this sheet too. */

.msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.msg-attachment {
  max-width: 100%;
}

.msg-attachment__image {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

.msg-attachment__image img {
  display: block;
  max-width: min(320px, 100%);
  max-height: 320px;
  border: 1px solid var(--k-color-line);
  border-radius: 10px;
  object-fit: contain;
  background: var(--k-color-ivory);
}

.msg-attachment__audio,
.msg-attachment__video {
  display: block;
  max-width: min(360px, 100%);
}

.msg-attachment__video {
  max-height: 320px;
  border-radius: 10px;
  background: var(--k-color-ink);
}

.msg-attachment__download,
.msg-attachment__file {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--k-color-violet-deep);
  text-decoration: none;
}

.msg-attachment__file {
  padding: 8px 12px;
  border: 1px solid var(--k-color-line);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.msg-attachment__download:hover,
.msg-attachment__file:hover {
  text-decoration: underline;
}

.msg-attachment__file small {
  color: var(--k-color-muted);
}

.msg-attachment__note {
  font-size: 14px;
  font-style: italic;
  color: var(--k-color-muted);
}