/* v6.5.40 modal and messenger card cleanup
   Purpose: remove the extra load-in modal action buttons, reserve real card space for
   Messenger history actions, and tighten page clearances without touching existing handlers. */

/* Messenger history cards: reserve a real right-side action column so Rename/Archive
   never sit over conversation text. This intentionally overrides older absolute-position
   patches from v6.5.38 while preserving the same DOM and click handlers. */
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-list,
body .stage > section.view.page-view.is-active[data-view="messenger"] #threadList {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 92px !important;
  grid-template-rows: auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--cream, #e4d6bd) 10%, transparent) !important;
  border-radius: 12px !important;
  background: rgba(15, 19, 16, 0.72) !important;
  box-sizing: border-box !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card.is-active {
  border-color: color-mix(in srgb, var(--amber, #c77a4b) 72%, transparent) !important;
  background: color-mix(in srgb, var(--amber, #c77a4b) 8%, rgba(15, 19, 16, 0.78)) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button {
  grid-column: 1 !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 96px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 10px 14px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) minmax(42px, max-content) !important;
  grid-template-areas:
    "avatar title date"
    "avatar preview preview"
    "avatar workspace workspace" !important;
  column-gap: 10px !important;
  row-gap: 6px !important;
  align-items: start !important;
  text-align: left !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button .avatar {
  grid-area: avatar !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button .thread-name {
  grid-area: title !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 84%, transparent) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button .thread-time {
  grid-area: date !important;
  justify-self: end !important;
  max-width: 64px !important;
  min-width: 0 !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 45%, transparent) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button .thread-preview {
  grid-area: preview !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--cream, #e4d6bd) 56%, transparent) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button .thread-card-foot {
  grid-area: workspace !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button .thread-workspace {
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-card-actions {
  grid-column: 2 !important;
  position: static !important;
  inset: auto !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 10px 10px 10px 0 !important;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.16)) !important;
  box-sizing: border-box !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-card-actions .thread-rename,
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-card-actions .thread-archive-card {
  position: static !important;
  inset: auto !important;
  grid-column: auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}

/* The load-in welcome notification should stay simple: Walkthrough, Continue, Open Dashboard.
   New Conversation and New Workspace remain visible on the actual app surfaces. */
.personal-welcome-modal + #modalActions .action-new-conversation,
.personal-welcome-modal + #modalActions .action-new-workspace,
#modalActions [data-welcome-new-conversation],
#modalActions [data-welcome-new-workspace] {
  display: none !important;
}

/* Modal spacing: keep the notification clean and aligned after the extra buttons are removed. */
.modal.is-large-modal .modal-panel {
  margin: auto !important;
}

.modal.is-large-modal #modalActions {
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding-top: 4px !important;
}

.modal.is-large-modal #modalActions .modal-btn {
  flex: 0 0 auto !important;
}

/* General client-side width safety for the surfaces in the screenshots. */
body .stage > section.view.page-view.is-active[data-view="messenger"],
body .stage > section.view.page-view.is-active[data-view="dashboard"],
body .stage > section.view.page-view.is-active[data-view="files"] {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .messenger-shell,
body .stage > section.view.page-view.is-active[data-view="messenger"] .messenger-layout,
body .stage > section.view.page-view.is-active[data-view="messenger"] .messenger-panel,
body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-list-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 960px) {
  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-button {
    grid-column: 1 !important;
    padding: 12px 12px 8px !important;
  }

  body .stage > section.view.page-view.is-active[data-view="messenger"] .thread-card > .thread-card-actions {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 12px 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background: transparent !important;
  }
}

@media (max-width: 640px) {
  .modal.is-large-modal .modal-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 16px !important;
  }

  .modal.is-large-modal #modalActions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .modal.is-large-modal #modalActions .modal-btn {
    width: 100% !important;
  }
}