/* Shared visual system for Conversations, Sent, Trash, Following, and Followers. */
.messages-page,
.cadaii-floating-chat-panel {
  --messages-control-height: 2.375rem;
  --messages-control-radius: .6rem;
  --messages-border: var(--color-border, #dbe3ea);
  --messages-surface: var(--color-surface, #fff);
  --messages-soft: var(--brand-primary-soft, #eaf6fb);
}

.messages-page {
  --chat-border: var(--messages-border);
  --chat-bg: var(--messages-surface);
  --chat-soft: var(--messages-soft);
  overflow-x: clip;
}

.messages-page-header {
  gap: 1rem;
}

.messages-layout {
  overflow: hidden;
  border: 1px solid var(--messages-border);
  border-radius: 1rem;
  background: var(--messages-surface);
  box-shadow: var(--shadow-sm);
}

.messages-list-panel,
.messages-preview-panel {
  min-width: 0;
  min-height: 0;
}

.messages-tabs {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  white-space: nowrap;
}

.messages-tabs a,
.messages-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .55rem .85rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  color: var(--color-text, #17212b);
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.messages-tabs a:hover,
.messages-tabs button:hover {
  border-color: var(--messages-border);
  background: var(--messages-soft);
  text-decoration: none;
}

.messages-tabs a.active,
.messages-tabs a[aria-current="page"],
.messages-tabs button.is-active,
.messages-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--brand-primary, #08689a) 28%, var(--messages-border));
  background: var(--brand-primary, #08689a);
  color: #fff;
}

.messages-page .message-tabs {
  margin: 0;
  border-bottom: 0;
}

.messages-subtabs {
  padding: .65rem !important;
  border-bottom: 1px solid var(--messages-border);
}

.messages-subtabs button {
  padding: .55rem .75rem !important;
  border: 1px solid transparent !important;
  border-radius: .65rem !important;
  font-size: .78rem !important;
}

.messages-action-btn,
.messages-icon-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--messages-control-height);
  padding: .48rem .72rem;
  border: 1px solid var(--messages-border);
  border-radius: var(--messages-control-radius);
  background: var(--messages-surface);
  color: var(--color-text, #17212b);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.messages-action-btn:hover,
.messages-icon-btn:hover {
  border-color: color-mix(in srgb, var(--brand-primary, #08689a) 45%, var(--messages-border));
  background: var(--messages-soft);
  color: var(--brand-primary, #08689a);
  text-decoration: none;
}

.messages-action-btn.is-danger,
.messages-icon-btn.is-danger {
  border-color: color-mix(in srgb, var(--color-danger, #b91c1c) 25%, var(--messages-border));
  color: var(--color-danger, #b91c1c);
}

.messages-action-btn.is-danger:hover,
.messages-icon-btn.is-danger:hover {
  border-color: var(--color-danger, #b91c1c);
  background: color-mix(in srgb, var(--color-danger, #b91c1c) 8%, #fff);
}

.messages-action-btn.is-primary,
.messages-icon-btn.is-primary {
  border-color: var(--brand-primary, #08689a);
  background: var(--brand-primary, #08689a);
  color: #fff;
}

.messages-action-btn.is-primary:hover,
.messages-icon-btn.is-primary:hover {
  background: var(--brand-primary-dark, #07577f);
  color: #fff;
}

.messages-icon-btn {
  width: var(--messages-control-height);
  min-width: var(--messages-control-height);
  padding: 0;
}

.messages-action-btn:disabled,
.messages-icon-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.messages-action-btn[hidden],
.messages-icon-btn[hidden] {
  display: none !important;
}

.messages-action-btn:focus-visible,
.messages-icon-btn:focus-visible,
.messages-tabs a:focus-visible,
.messages-tabs button:focus-visible,
.messages-list-row button:focus-visible,
.messages-list-row input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary, #08689a) 38%, transparent);
  outline-offset: 2px;
}

.messages-toolbar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.messages-toolbar > * {
  flex: 0 0 auto;
}

.messages-toolbar[hidden] {
  display: none !important;
}

.messages-list-row {
  transition: background-color .15s ease, box-shadow .15s ease;
}

.messages-list-row.is-previewing,
.messages-list-row[aria-selected="true"] {
  background: var(--messages-soft);
}

.messages-empty-state {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .5rem;
  min-height: 12rem;
  padding: 2rem;
  color: var(--color-muted, #64748b);
  text-align: center;
}

.messages-empty-state h2,
.messages-empty-state p {
  margin: .15rem 0;
}

.messages-empty-state i {
  font-size: 2.5rem;
}

.cadaii-message-bulk-toolbar.messages-toolbar {
  padding: .7rem .85rem;
  background: var(--messages-soft);
}

.messages-trash-toolbar {
  gap: .4rem;
  overflow: visible;
}

.messages-trash-toolbar .cadaii-message-management-status {
  flex: 1 1 0;
  min-width: 0;
  margin-left: .25rem;
}

.cadaii-message-bulk-toolbar.messages-toolbar > span {
  line-height: var(--messages-control-height);
}

.cadaii-message-management-status {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-readonly-preview.messages-preview-panel {
  background: var(--messages-surface);
}

.messages-preview-content {
  width: 100%;
}

.messages-preview-content footer {
  display: flex;
  justify-content: flex-end;
}

.cadaii-chat-thread-heading {
  min-width: 0;
}

.cadaii-chat-thread-heading > div:nth-child(2) {
  min-width: 0;
}

.cadaii-chat-thread-heading [data-chat-title],
.cadaii-chat-thread-heading [data-chat-presence] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cadaii-chat-thread-heading > .messages-icon-btn {
  border: 1px solid var(--messages-border);
  background: var(--messages-surface);
}

.cadaii-chat-image-actions.messages-toolbar {
  display: flex !important;
  flex-flow: row nowrap;
  justify-content: flex-end;
}

.cadaii-chat-image-actions .messages-action-btn {
  padding: .42rem .62rem;
  font-size: .72rem;
}

.cadaii-chat-conversation-toolbar {
  flex: 0 0 auto;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--messages-border);
  background: var(--messages-soft);
}

.cadaii-chat-conversation-toolbar > span {
  font-size: .78rem;
  line-height: var(--messages-control-height);
  white-space: nowrap;
}

.cadaii-chat-conversation-toolbar .cadaii-message-management-status {
  margin-left: 0;
}

.cadaii-chat-list-row:has(.cadaii-chat-select-check) {
  grid-template-columns: auto minmax(0, 1fr);
}

.cadaii-chat-list-row.is-selected {
  background: var(--messages-soft);
  box-shadow: inset 3px 0 0 var(--brand-primary, #08689a);
}

.cadaii-chat-list-row.is-unread {
  background: color-mix(in srgb, var(--brand-primary, #08689a) 6%, var(--messages-surface));
}

.cadaii-chat-list-row.is-unread .cadaii-chat-list-copy strong,
.cadaii-chat-list-row.is-unread .cadaii-chat-list-copy > span {
  color: var(--color-text, #17212b);
  font-weight: 800;
}

.cadaii-chat-unread-dot {
  display: none;
  width: .48rem;
  height: .48rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: var(--brand-primary, #08689a);
  vertical-align: .08rem;
}

.cadaii-chat-list-row.is-unread .cadaii-chat-unread-dot {
  display: inline-block;
}

.cadaii-chat-select-check {
  align-self: stretch;
  cursor: pointer;
}

.cadaii-chat-select-check input {
  cursor: pointer;
}

.messages-readonly-list .cadaii-message-folder-row.is-readonly {
  grid-template-columns: minmax(0, 1fr);
}

.conversation-preview-icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--messages-soft);
  color: var(--brand-primary, #08689a);
  font-size: 1.5rem;
}

.conversation-preview-messages {
  display: grid;
  gap: .75rem;
}

.conversation-preview-message {
  width: min(88%, 36rem);
  padding: .8rem;
  border: 1px solid var(--messages-border);
  border-radius: .85rem;
  background: var(--messages-surface);
}

.conversation-preview-message.is-mine {
  justify-self: end;
  background: var(--messages-soft);
}

.conversation-preview-message header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .4rem;
  font-size: .78rem;
}

.conversation-preview-message time {
  color: var(--color-muted, #64748b);
  white-space: nowrap;
}

.conversation-preview-message > div {
  overflow-wrap: anywhere;
}

.cadaii-chat-composer {
  grid-template-columns: minmax(0, 1fr) var(--messages-control-height) !important;
  align-items: end;
  gap: .5rem !important;
}

.cadaii-chat-composer > .messages-icon-btn {
  width: var(--messages-control-height);
  height: var(--messages-control-height);
  border-radius: var(--messages-control-radius);
}

.cadaii-chat-composer textarea {
  min-height: var(--messages-control-height);
  border-radius: var(--messages-control-radius);
}

@media (max-width: 48rem) {
  .messages-page-header {
    align-items: stretch !important;
  }

  .messages-page-header > div {
    min-width: 0;
  }

  .messages-page-header .messages-tabs {
    width: 100%;
  }

  .messages-readonly-layout {
    height: calc(100dvh - 11rem);
  }

  .messages-readonly-preview {
    padding: 1rem;
  }

  .cadaii-message-bulk-toolbar.messages-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .cadaii-message-management-status {
    max-width: 12rem;
    margin-left: 0;
  }

  .messages-readonly-back {
    margin-bottom: .75rem;
  }
}

@media (max-width: 640px) {
  .messages-trash-toolbar {
    padding-inline: .55rem;
  }

  .messages-trash-toolbar .messages-trash-action-label {
    display: none;
  }

  .messages-trash-toolbar .messages-trash-responsive-action {
    width: var(--messages-control-height);
    min-width: var(--messages-control-height);
    padding: 0;
  }

  .messages-tabs a,
  .messages-tabs button {
    min-height: var(--messages-control-height);
    padding: .5rem .7rem;
  }

  .messages-mobile-hide {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cadaii-chat-thread-heading {
    flex-wrap: nowrap;
    padding: .6rem;
  }

  .cadaii-chat-thread-actions {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
  }

  .cadaii-chat-image-actions.messages-toolbar {
    justify-content: flex-end;
  }

  .cadaii-chat-image-actions .messages-action-btn {
    width: var(--messages-control-height);
    min-width: var(--messages-control-height);
    padding: 0;
  }

  .cadaii-chat-conversation-toolbar {
    padding: .6rem;
  }

  .cadaii-chat-conversation-toolbar .cadaii-message-management-status {
    max-width: 10rem;
    margin-left: 0;
  }

  .cadaii-message-folder-open {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    gap: .65rem;
  }

  .cadaii-message-folder-open > img {
    width: 2.65rem;
    height: 2.65rem;
  }

  .messages-empty-state {
    padding: 1.25rem;
  }
}