/* Styles for dashboard.html only (Messages look). Markup: dashboard.html + js/dashboard-render.js + js/dashboard-signin.js. */
:root {
  --blue: #007aff;
  --gray-bubble: #e9e9eb;
  --bubble-blue-top: #6cb2f8;    /* outgoing bubble gradient, top -> bottom (as in iOS Messages) */
  --bubble-blue-bottom: #3f8ff0; /* also the tail colour */
  --sidebar-bg: #f2f2f7;
  --line: #d1d1d6;
  --text: #000;
  --muted: #8e8e93;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Signed-out page (js/dashboard-signin.js) ----------
   Full page: light grey background, one white rounded card. Wide screens: two columns (intro left, form right).
   Phones (under 840px): one column. The Email field's label sits in its top border when focused or filled. */
.signin {
  min-height: 100%;
  display: flex;
  flex-direction: column; /* card, then the Help / Privacy / Terms footer under it */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f0f4f9;
}
.signin[hidden] { display: none; }

.si-card {
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 36px 36px 36px;
  background: #fff;
  border-radius: 28px;
  color: #1f1f1f;
}
.si-logo { display: block; width: 48px; height: 48px; }
.si-title { margin: 24px 0 16px; font-size: 44px; font-weight: 400; line-height: 1.15; }
.si-sub { margin: 0; font-size: 16px; line-height: 1.5; }

.si-form { padding-top: 72px; }
.si-step { display: flex; flex-direction: column; }
.si-step[hidden] { display: none; }

.si-field { position: relative; }
.si-input {
  width: 100%;
  height: 56px;
  padding: 0 15px;
  font: inherit;
  font-size: 16px;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid #747775;
  border-radius: 4px;
  outline: none;
}
.si-input:focus { border: 2px solid #0b57d0; padding: 0 14px; }
.si-label {
  position: absolute;
  left: 12px;
  top: 50%;
  padding: 0 4px;
  font-size: 16px;
  color: #444746;
  background: #fff;
  transform: translateY(-50%);
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
  pointer-events: none;
}
.si-input:focus + .si-label,
.si-input:not(:placeholder-shown) + .si-label { top: 0; font-size: 12px; }
.si-input:focus + .si-label { color: #0b57d0; }

.si-status { min-height: 20px; margin: 8px 0 0; font-size: 14px; color: #b3261e; }
.si-actions { display: flex; justify-content: flex-end; margin-top: 56px; }
.si-next {
  min-width: 80px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  background: #0b57d0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.si-next:hover { background: #0a4fbf; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.si-next:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.si-next:disabled { opacity: 0.6; cursor: default; }
.si-check { margin: 0; font-size: 16px; line-height: 1.5; }

/* Google-style extras (js/dashboard-signin.js): blue bold text that looks like links but does nothing yet */
.si-textlink { color: #0b57d0; font-weight: 500; letter-spacing: 0.1px; }
.si-forgot { align-self: flex-start; margin-top: 12px; font-size: 14px; }
.si-guest { margin: 40px 0 0; font-size: 14px; line-height: 1.43; color: #444746; }
.si-actions { align-items: center; gap: 24px; }
.si-create { padding: 0 12px; font-size: 14px; }
.si-footer {
  width: 100%;
  max-width: 1040px;
  display: flex;
  justify-content: space-between; /* language picker left, Help / Privacy / Terms right */
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 16px 32px 24px;
  font-size: 14px;
  color: #1f1f1f;
}
.si-links { display: flex; gap: 32px; }

/* Language picker (js/dashboard-language.js): Google-style text + small dark triangle, no border or background.
   The native <select> covers the visible text invisibly, so it opens the system picker (phones included)
   and the control is as wide as the chosen language's name. 16px on the select stops iOS zooming on focus. */
.si-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
}
.si-lang-text { font-size: 14px; color: #1f1f1f; white-space: nowrap; }
.si-lang::after { /* down-pointing triangle */
  content: '';
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #444746;
}
.si-lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.si-lang:focus-within { outline: 2px solid #0b57d0; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 839px) {
  .signin { justify-content: flex-start; padding: 0; background: #fff; } /* column layout: start at the top */
  .si-card { grid-template-columns: 1fr; gap: 24px; padding: 24px; border-radius: 0; }
  .si-title { font-size: 36px; }
  .si-form { padding-top: 0; }
  .si-actions { margin-top: 32px; }
  .si-footer { justify-content: flex-start; padding: 8px 24px 16px; gap: 4px 20px; } /* one row from the left: picker, then links */
  .si-links { gap: 20px; }
}

/* ---------- Layout ----------
   One pane at every width, like iPhone Messages: the visitor list (data-view="list") or one conversation
   (data-view="thread"). js/dashboard.js sets data-view; the round "‹" button in the header goes back to the list. */
.app { display: flex; height: 100%; }
.app[hidden] { display: none; }

.sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
}
.thread { display: none; }
.app[data-view="thread"] .sidebar { display: none; }
.app[data-view="thread"] .thread { display: flex; }
.list { flex: 1; overflow-y: auto; padding: 8px; }
.empty { margin: 32px 0; text-align: center; color: var(--muted); font-size: 15px; }
.sign-out {
  padding: 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--blue);
  font-size: 15px;
}

.thread { flex: 1; flex-direction: column; min-width: 0; } /* display is set by the Layout rules above */
/* iPhone Messages header (js/dashboard-render.js renderHeader): contact photo centered, white name pill
   "Michelle ›" overlapping its bottom, round white back button on the left (phones). Frosted, no divider line. */
.thread-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 16px 10px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.thread-title { display: flex; flex-direction: column; align-items: center; }
/* .thread-title prefix outranks the generic .avatar size used by the letter fallback */
.thread-title .contact-photo {
  display: flex;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 28px;
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
}
.contact-name { font-size: 17px; font-weight: 700; color: #000; }
.contact-chevron { font-size: 20px; line-height: 1; color: #b0b0b5; }
.back {
  display: block;
  position: absolute;
  left: 14px;
  top: 16px;
  width: 48px;
  height: 48px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  color: #000;
  font-size: 34px;
  line-height: 1;
}
.thread-body { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 12px 20px; background: #fff; isolation: isolate; } /* isolation keeps the tails (z-index -1) above this white background */

/* ---------- Sidebar rows ---------- */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover; /* AI face photos (img.avatar) */
  background: linear-gradient(#a5aab5, #858a96);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 18px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}
.row:hover { background: rgba(0, 0, 0, 0.04); }
.row.is-selected { background: var(--blue); color: #fff; }
.row-dot {
  position: absolute;
  left: 5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--blue);
}
.row-dot[hidden] { display: none; }
.row.is-selected .row-dot { background: #fff; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-top { display: flex; justify-content: space-between; gap: 8px; }
.row-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-time { flex: none; font-size: 13px; color: var(--muted); }
.row-preview { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-selected .row-time, .row.is-selected .row-preview { color: rgba(255, 255, 255, 0.85); }

/* ---------- Conversation ---------- */
.separator { margin: 12px 0 6px; text-align: center; font-size: 12px; font-weight: 500; color: var(--muted); }
/* iPhone Messages bubbles (js/dashboard-render.js bubblePair): blue question on the right, gray answer on the left.
   The tail is drawn by ::before (bubble colour) and ::after (page colour cut-out), so .thread-body must stay white. */
.bubble {
  position: relative;
  max-width: min(70%, 420px);
  margin-bottom: 8px;
  padding: 9px 15px;
  border-radius: 20px;
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.bubble::before,
.bubble::after { content: ""; position: absolute; bottom: 0; z-index: -1; height: 20px; } /* behind the bubble: no seam on the gradient */
.bubble-out { align-self: flex-end; background: linear-gradient(var(--bubble-blue-top), var(--bubble-blue-bottom)); color: #fff; }
.bubble-out::before { right: -7px; width: 20px; background: var(--bubble-blue-bottom); border-bottom-left-radius: 16px 14px; }
.bubble-out::after { right: -26px; width: 26px; background: #fff; border-bottom-left-radius: 10px; }
.bubble-in { align-self: flex-start; background: var(--gray-bubble); color: var(--text); }
.bubble-in::before { left: -7px; width: 20px; background: var(--gray-bubble); border-bottom-right-radius: 16px 14px; }
.bubble-in::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }

/* ---------- Phones: wider bubbles ---------- */
@media (max-width: 700px) {
  .bubble { max-width: 78%; }
}

/* ---------- iMessage input bar (dashboard.html #compose; look only, nothing is sent) ---------- */
.compose {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
}
.compose-plus {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  color: #000;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
.compose-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px 0 16px;
  border: 1px solid #d1d1d6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.compose-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: #000;
}
.compose-input::placeholder { color: #a1a1a6; }
.compose-wave { flex: none; width: 22px; height: 22px; fill: #8e8e93; }

/* Click answers in the gray bubble (js/dashboard-render.js answerContent): title, then the URL as a link below it */
.bubble-title { display: block; }
.bubble-link { display: block; color: inherit; text-decoration: underline; }

/* ---------- Swipe to delete (js/dashboard-swipe.js, js/dashboard-render.js swipeableRow) ----------
   The row slides left over a red Delete button, like iPhone Messages. touch-action lets the list still scroll. */
.swipe { position: relative; overflow: hidden; }
/* Square corners while swipeable, so the red button never peeks out at rounded edges */
.swipe .row { border-radius: 0; background: #fff; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.swipe .row:hover { background: #f5f5f7; }
.swipe .row.is-selected { background: var(--blue); }
.swipe-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88px; /* SWIPE_BUTTON_WIDTH in js/dashboard-utils.js */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #ff3b30;
}
.swipe-delete svg { width: 26px; height: 26px; fill: #fff; }