/* ============================================================
   The Tech Pad — Inbox polish (space + contact + message tools)
   ------------------------------------------------------------
   Companion stylesheet for local/inbox-polish.js.

   1) Desktop: the chat header no longer repeats the contact name /
      phone — that identity already lives in the right-hand contact
      pane. The header identity comes BACK automatically whenever the
      contact pane is closed (Details toggled off) so the agent never
      loses track of who they are talking to.
   2) Mobile (<=760px): contact identity + AI mode + Details + Resolve
      move BELOW the send button (flex `order`, no DOM surgery — React
      keeps owning the nodes) and collapse behind a slim handle strip.
      Scrolling the thread up reveals them; returning to the newest
      message hides them again. Back navigation becomes a floating
      pill over the thread so it costs zero vertical space.
   3) The mobile Details drawer (`.mobile-details-open`, toggled by
      inbox-mobile.js) never had any CSS — the contact pane is
      display:none below 1150px, so tapping Details did nothing.
      Fixed here as a right-side slide-over + backdrop.
   4) Contact rename affordance (pencil) + rename modal.
   5) Per-message actions: copy, edit & resend, hide-for-team
      tombstone.
   ============================================================ */

/* ---------------- 1. desktop: no duplicated identity ---------------- */

@media (min-width: 1151px) {
  .shared-inbox:has(> aside.contact-pane:not(.hidden)) main.chat-pane > header.chat-header > .chat-person {
    display: none;
  }
  .shared-inbox:has(> aside.contact-pane:not(.hidden)) main.chat-pane > header.chat-header {
    justify-content: flex-end;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  /* identity gone -> the row is just controls, so it can be compact */
  .shared-inbox:has(> aside.contact-pane:not(.hidden)) main.chat-pane > header.chat-header .chat-actions button {
    padding: 5px 10px;
  }

  .shared-inbox:has(> aside.contact-pane:not(.hidden)) main.chat-pane > header.chat-header .ai-segmented button {
    padding: 4px 9px;
  }
}

/* ---------------- shared: rename pencil ---------------- */

.ip-rename-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid #cfe0d8;
  border-radius: 7px;
  background: #fff;
  color: #0d6a4e;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.ip-rename-btn:hover {
  background: #e9f7f1;
  border-color: #86c3ac;
}

.contact-pane h3 .ip-rename-btn {
  margin-left: 8px;
}

/* ---------------- rename modal ---------------- */

.ip-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 28, 22, 0.5);
}

.ip-modal {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(4, 32, 24, 0.28);
}

.ip-modal h3 {
  margin: 0;
  font-size: 16px;
}

.ip-modal p {
  margin: 0;
  font-size: 11.5px;
  color: #6d7f77;
}

.ip-modal input {
  width: 100%;
  padding: 11px;
  border: 1px solid #ccd9d3;
  border-radius: 11px;
  font: inherit;
}

.ip-modal footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ip-modal button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #badfce;
  border-radius: 10px;
  background: #fff;
  color: #087552;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ip-modal button.ip-primary {
  background: #087552;
  border-color: #087552;
  color: #fff;
}

.ip-modal button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* ---------------- toast ---------------- */

.ip-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 11px 14px;
  border-radius: 12px;
  background: #0d2b22;
  color: #eaf6f1;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: 0 16px 40px rgba(4, 32, 24, 0.32);
}

.ip-toast.ip-error {
  background: #7d2b22;
}

.ip-toast button {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(234, 246, 241, 0.45);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* ---------------- 5. per-message actions ---------------- */

.message-thread article.message-bubble {
  position: relative;
}

.ip-msg-more {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: #4a5c55;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.message-thread article.message-bubble:hover .ip-msg-more,
.ip-msg-more:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .ip-msg-more {
    opacity: 0.55;
  }
}

/* hidden ("deleted for your team") message: tombstone, footer kept */
article.message-bubble.ip-msg-deleted > *:not(footer):not(.ip-msg-more) {
  display: none !important;
}

article.message-bubble.ip-msg-deleted::before {
  content: "🚫 Deleted for your team";
  display: block;
  padding-right: 22px;
  color: #7d8b84;
  font-size: 11.5px;
  font-style: italic;
}

.ip-msg-menu {
  position: fixed;
  z-index: 1450;
  width: 232px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid #dbe6e1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(4, 32, 24, 0.22);
}

.ip-msg-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #123f34;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ip-msg-menu button:hover {
  background: #eaf6f1;
}

.ip-msg-menu button.ip-danger {
  color: #a5372c;
}

.ip-msg-menu button.ip-danger:hover {
  background: #fbeeec;
}

.ip-msg-menu .ip-menu-note {
  margin: 4px 4px 2px;
  color: #7c8a83;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* ============================================================
   6. DESKTOP COMPACT (>=761px) — mobile-grade density on the web
   ------------------------------------------------------------
   The bundle's desktop inbox is built on 14-22px paddings, 40px
   avatars and 16px-ish type, so a 900px-tall window fits ~11
   conversations and ~6 messages. The <=760px breakpoint already
   ships a much tighter scale (11px/9px paddings, 34px avatars,
   12px thread padding). This block ports that same scale to the
   web layout: every value below mirrors a mobile rule or sits
   between the mobile and desktop value. Purely presentational —
   no DOM, no state.
   ============================================================ */

@media (min-width: 761px) {
  /* --- shell: give the grid back the page gutter --- */
  .inbox-shell .dashboard {
    padding: 8px;
  }

  section.shared-inbox {
    border-radius: 12px;
  }

  /* --- conversation column header (title / search / filters) --- */
  section.shared-inbox .inbox-title {
    padding: 10px 12px 6px;
  }

  section.shared-inbox .inbox-title h2 {
    margin: 1px 0;
    font-size: 16px;
  }

  section.shared-inbox .inbox-title .eyebrow {
    font-size: 9.5px;
  }

  section.shared-inbox .inbox-title strong {
    padding: 4px 8px;
    font-size: 11px;
  }

  section.shared-inbox .unread-badge {
    min-width: 18px;
    height: 18px;
    font-size: 9.5px;
  }

  section.shared-inbox .conversation-search-wrap {
    margin: 0 12px 7px;
  }

  section.shared-inbox .conversation-search {
    padding: 7px 10px;
    font-size: 12px;
  }

  section.shared-inbox .inbox-filters {
    gap: 5px;
    padding: 0 12px 7px;
  }

  section.shared-inbox .inbox-filters button {
    padding: 4px 9px;
    font-size: 11px;
  }

  /* --- conversation rows: 69px -> ~50px --- */
  section.shared-inbox .conversation-list > button {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 8px 12px;
  }

  section.shared-inbox .conversation-list .contact-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  section.shared-inbox .conversation-list b {
    font-size: 12.5px;
  }

  section.shared-inbox .conversation-list small {
    margin-top: 1px;
    font-size: 11px;
  }

  /* --- chat header --- */
  main.chat-pane > header.chat-header {
    padding: 7px 12px;
  }

  main.chat-pane > header.chat-header .chat-person {
    gap: 8px;
  }

  main.chat-pane > header.chat-header .contact-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  main.chat-pane > header.chat-header .chat-person small {
    margin-top: 1px;
    font-size: 10.5px;
  }

  main.chat-pane > header.chat-header .chat-actions {
    gap: 6px;
  }

  main.chat-pane > header.chat-header .chat-actions button {
    padding: 5px 10px;
    font-size: 11.5px;
  }

  .inbox-shell main.chat-pane > header.chat-header .ai-segmented button {
    padding: 4px 8px;
    font-size: 11px;
  }

  main.chat-pane > header.chat-header .ai-mode-caption {
    font-size: 10px;
  }

  /* --- message thread --- */
  main.chat-pane > .message-thread {
    padding: 12px 14px;
    gap: 6px;
  }

  main.chat-pane .message-bubble {
    max-width: 66%;
    padding: 7px 10px;
    border-radius: 10px;
  }

  main.chat-pane .message-bubble p {
    font-size: 12.5px;
    line-height: 1.42;
  }

  main.chat-pane .message-bubble footer {
    margin-top: 3px;
    font-size: 8.5px;
  }

  /* --- AI action bar (sits above the composer) --- */
  main.chat-pane > .ai-action-bar {
    gap: 6px;
    padding: 6px 10px;
  }

  /* --- composer: 126px -> ~92px --- */
  main.chat-pane > form.reply-composer {
    padding: 7px 10px;
  }

  main.chat-pane > form.reply-composer .composer-tools {
    margin-bottom: 5px;
  }

  main.chat-pane > form.reply-composer .composer-tools select {
    padding: 4px 7px;
  }

  main.chat-pane > form.reply-composer .composer-row {
    gap: 8px;
  }

  main.chat-pane > form.reply-composer textarea {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }

  main.chat-pane > form.reply-composer .primary {
    min-width: 78px;
  }

  /* --- contact sidebar --- */
  section.shared-inbox > aside.contact-pane {
    padding: 14px 14px 20px;
  }

  section.shared-inbox > aside.contact-pane .contact-avatar.large {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  section.shared-inbox > aside.contact-pane h3 {
    margin: 8px 0 2px;
    font-size: 14.5px;
  }

  section.shared-inbox > aside.contact-pane p {
    font-size: 11.5px;
  }

  section.shared-inbox > aside.contact-pane dl {
    margin-top: 12px;
  }

  section.shared-inbox > aside.contact-pane dl div {
    padding: 7px 0;
  }

  section.shared-inbox > aside.contact-pane dd {
    font-size: 11.5px;
  }
}

/* narrower side columns => wider thread (bundle: 310 / 1fr / 250) */
@media (min-width: 1151px) {
  section.shared-inbox {
    grid-template-columns: 276px minmax(0, 1fr) 244px;
  }
}

/* 761-1150px: the bundle drops to two columns and hides the contact
   pane, so Details opens it as a right-hand slide-over instead
   (same drawer as mobile). `position: relative` is only set by the
   bundle below 760px — the drawer is absolutely positioned. */
@media (min-width: 761px) and (max-width: 1150px) {
  section.shared-inbox {
    position: relative;
    grid-template-columns: 262px minmax(0, 1fr);
  }

  .shared-inbox.mobile-details-open > aside.contact-pane {
    width: min(46%, 330px);
  }
}

/* ---------------- 3. Details drawer (<=1150px) ---------------- */

@media (max-width: 1150px) {
  .shared-inbox .mobile-drawer-backdrop {
    display: none;
  }

  .shared-inbox.mobile-details-open .mobile-drawer-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 20;
    border: 0;
    background: rgba(4, 28, 22, 0.42);
  }

  .shared-inbox.mobile-details-open > aside.contact-pane {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(88%, 350px);
    padding: 20px 16px 26px;
    overflow-y: auto;
    background: #f8fbf9;
    border-left: 1px solid #dfe8e4;
    box-shadow: -14px 0 38px rgba(6, 38, 30, 0.22);
  }

  .ip-drawer-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e3de;
    border-radius: 50%;
    background: #fff;
    color: #123f34;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }
}

/* ---------------- 2. mobile: tools below the send button ---------------- */

@media (max-width: 760px) {
  /* Explicit order on EVERY flex child: default order 0 would float any
     un-numbered child (e.g. the AI action bar) above the thread. */
  main.chat-pane.ip-mobile-tools > .message-thread {
    order: 1;
    padding-top: 48px; /* room for the floating back pill */
  }

  main.chat-pane.ip-mobile-tools > .ai-action-bar {
    order: 2;
  }

  main.chat-pane.ip-mobile-tools > form.reply-composer {
    order: 3;
    padding-bottom: 8px;
  }

  main.chat-pane.ip-mobile-tools > .ip-tools-handle {
    order: 4;
  }

  main.chat-pane.ip-mobile-tools > header.chat-header {
    order: 5;
    border-top: 1px solid #dfe7e3;
    border-bottom: 0;
    padding: 8px 9px max(8px, env(safe-area-inset-bottom));
    row-gap: 8px;
  }

  /* collapsed: the whole tools header is out of the layout */
  main.chat-pane.ip-tools-collapsed > header.chat-header {
    display: none;
  }

  /* the handle strip: identity + affordance in ~30px */
  main.chat-pane.ip-mobile-tools > .ip-tools-handle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 5px 12px;
    border: 0;
    border-top: 1px solid #e6eeea;
    background: #fff;
    color: #14493c;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  main.chat-pane.ip-tools-collapsed > .ip-tools-handle {
    padding-bottom: max(5px, env(safe-area-inset-bottom));
  }

  .ip-tools-handle .ip-handle-chev {
    flex: 0 0 auto;
    color: #0d6a4e;
    font-size: 10px;
  }

  .ip-tools-handle .ip-handle-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ip-tools-handle .ip-handle-hint {
    flex: 0 0 auto;
    color: #7b8a83;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* back navigation floats over the thread instead of eating a header row */
  main.chat-pane.ip-mobile-tools > header.chat-header .mobile-chat-back {
    display: none;
  }

  .ip-mobile-back {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #cddad4;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #123f34;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(9, 44, 35, 0.16);
  }

  /* the tools row has room now: show the phone number and Details again
     (the bundle hides both to save header width) */
  main.chat-pane.ip-mobile-tools > header.chat-header .chat-person small {
    display: block;
  }

  main.chat-pane.ip-mobile-tools > header.chat-header .chat-actions button:first-child {
    display: inline-flex;
    align-items: center;
  }

  main.chat-pane.ip-mobile-tools > header.chat-header .chat-person {
    flex: 1 1 100%;
  }

  main.chat-pane.ip-mobile-tools > header.chat-header .chat-actions {
    width: 100%;
    justify-content: flex-start;
  }
}