/* Inbox, thread & search — bubbles, composer, unread dots. Uses app.css variables. */

/* device-offline warning strip (under the inbox header) */
.inbox-warn {
  background: var(--amber-bg); color: var(--amber);
  font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 10px; margin: 0 0 8px;
}

/* thread list */
.thread-row { min-height: 64px; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: transparent; }
.unread-dot.on { background: var(--accent); }
.thread-row .row-title.unread { font-weight: 700; }
.thread-snippet { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-snippet.unread { color: var(--ink); }
.thread-time { flex-shrink: 0; align-self: flex-start; margin-top: 6px; }

/* thread header (customer name → profile) */
.thread-name {
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; padding: 2px 0;
  min-height: 44px; min-width: 0;
}
.thread-name-main {
  display: block; font-size: 18px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* day separators */
.day-sep { text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; margin: 16px 0 8px; }

/* thread fills its container: header pinned, messages scroll, composer footer */
.thread-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.thread-wrap .view-head { flex: 0 0 auto; }

/* bubbles — the message list is the scroll area */
.msg-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.msg { display: flex; flex-direction: column; }
.msg.in { align-items: flex-start; }
.msg.out { align-items: flex-end; }
.bubble { max-width: 78%; border-radius: 16px; padding: 9px 13px; font-size: 15px; line-height: 1.35; }
.bubble.in { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble.out { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.bubble-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.bubble-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted); margin: 3px 6px 8px;
}

/* outbound status chips */
.msg-chip { font-size: 11px; font-weight: 600; }
.msg-chip.queued { color: var(--amber); }
.msg-chip.sent { color: var(--muted); }
.msg-chip.failed { color: var(--danger); }
.msg-chip.scheduled { color: var(--accent); }
/* the tiny inline Cancel link next to a scheduled chip */
.link.tiny { font-size: 11px; }

/* media in bubbles */
.bubble-thumb-btn { display: block; background: none; border: 0; padding: 0; margin: 2px 0; cursor: pointer; }
.bubble-thumb {
  display: block; width: 200px; max-width: 100%; height: 200px;
  object-fit: cover; border-radius: 12px; background: var(--line);
}
.bubble-file {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 12px; margin: 2px 0;
  font: inherit; font-size: 14px; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
}
.bubble.out .bubble-file { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.media-full {
  display: block; width: 100%; min-height: 180px; max-height: 60dvh;
  object-fit: contain; border-radius: 12px; background: var(--line);
}

/* composer — a footer at the bottom of the thread flex column (never overlaps) */
.composer {
  flex: 0 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 2px);
}
/* mobile: the thread owns the full height; seat the composer just above the
   fixed bottom tabs (its own padding makes room for them). */
body.mobile #main:has(.thread-wrap) { padding-bottom: 0; }
body.mobile .composer { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 8px); }
/* Text field is its own full-width row; the controls (attach · AI · Open in Messages ·
   schedule · send) sit in one row beneath it. The SMS link's auto margin pushes the
   schedule + send pair to the right edge while attach/AI/link stay grouped on the left. */
.composer-input-row { display: flex; margin-bottom: 8px; }
.composer-input { flex: 1; width: 100%; min-height: 46px; max-height: 112px; resize: none; overflow-y: auto; }
.composer-row { display: flex; align-items: center; gap: 4px; }
.composer-send { flex-shrink: 0; min-height: 44px; }
/* The SMS link fills the gap between the left icons and the right send pair and centers
   on one line (no wrap) — attach/AI stay left, schedule/send stay right. */
.composer-sms { flex: 1; justify-content: center; white-space: nowrap; min-width: 0; }

/* Pending photo attachments — a thumb strip above the input until Send. */
.composer-media { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.composer-media-thumb { position: relative; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.composer-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.composer-media-x {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px;
  border: 0; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 15px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}