/* ============================================================
   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;
}

/* ---------------- 3. mobile 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;
  }
}