/* Loop Chat 切片 2 — 樣式 (styles)
   LoopGigi 品牌粉紅 #D62598 做點綴，其餘跟 WhatsApp 式乾淨：白底列表、
   淺灰對話區、大掣大字、手機行先。冇裝飾性多餘嘢（簡單鐵規）。 */

:root {
  --lc-pink: #D62598;
  --lc-pink-dark: #b01c7e;
  --lc-pink-soft: #fbe3f2;
  --lc-line: #e4e4e4;
  --lc-chat-bg: #f0ece7;
  --lc-text: #1c1c1e;
  --lc-grey: #7a7a7a;
}

* { box-sizing: border-box; }

body.lc-body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--lc-text);
  background: #fff;
}

/* ---------- 獨立頁面骨架 (standalone page) ---------- */
.lc-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.lc-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--lc-pink); color: #fff;
}
.lc-topbar .lc-logo { font-size: 19px; font-weight: 700; }
.lc-topbar .lc-demo-badge {
  background: #fff; color: var(--lc-pink-dark);
  font-size: 11px; font-weight: 700; border-radius: 8px; padding: 2px 7px;
}
.lc-topbar select {
  margin-left: auto; border: none; border-radius: 8px; padding: 5px 6px;
  font-size: 13px; background: #fff; color: var(--lc-text);
}
.lc-demo-note { background: #fff6fb; color: var(--lc-pink-dark); font-size: 12px; padding: 5px 14px; border-bottom: 1px solid var(--lc-line); }
.lc-panes { display: flex; flex: 1; min-height: 0; }
.lc-pane-list { width: 100%; overflow-y: auto; }
.lc-pane-chat { display: none; flex: 1; min-width: 0; }
.lc-pane-chat.lc-open { display: flex; }
.lc-pane-chat > .lc-chat { flex: 1; }
.lc-dock-btn {
  border: 1px solid #fff; background: transparent; color: #fff;
  border-radius: 8px; padding: 5px 9px; font-size: 13px; cursor: pointer;
}

/* ---------- 新對話揀人版面 (new-chat picker) ---------- */
.lc-pane-picker { display: none; flex: 1; min-width: 0; min-height: 0; }
.lc-panes.lc-picking .lc-pane-picker { display: flex; }
.lc-panes.lc-picking .lc-pane-list,
.lc-panes.lc-picking .lc-pane-chat { display: none !important; }
.lc-list-head {
  position: sticky; top: 0; z-index: 2; min-height: 60px;
  display: flex; align-items: center; padding: 6px 8px 6px 14px;
  background: #fff; border-bottom: 1px solid var(--lc-line);
}
.lc-list-title { font-size: 17px; font-weight: 700; }
.lc-plus-btn {
  flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0;
  border: none; border-radius: 50%; background: var(--lc-pink); color: #fff;
  font-size: 28px; line-height: 1; font-weight: 500; cursor: pointer;
}
.lc-plus-btn:active { background: var(--lc-pink-dark); }
.lc-picker {
  display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
  overflow-y: auto; background: #F7F5F2; color: var(--lc-text);
}
.lc-picker-head {
  position: sticky; top: 0; z-index: 2; min-height: 56px;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: #fff; border-bottom: 1px solid var(--lc-line);
}
.lc-picker-back { flex: none; width: 44px; height: 44px; padding: 0; }
.lc-picker-title { font-size: 17px; font-weight: 700; }
.lc-picker-status {
  margin: 12px 14px 0; padding: 10px 12px; border: 1px solid var(--lc-pink-soft);
  border-radius: 12px; background: #fff; color: var(--lc-pink-dark); font-size: 14px;
}
.lc-picker-groups { padding: 6px 14px 20px; }
.lc-picker-group-title {
  margin: 18px 2px 8px; color: var(--lc-grey);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.lc-picker-group { display: flex; flex-direction: column; gap: 8px; }
.lc-picker-row {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 64px;
  padding: 9px 12px; border: 1px solid var(--lc-line); border-radius: 16px;
  background: #fff; color: var(--lc-text); font: inherit; text-align: left; cursor: pointer;
}
.lc-picker-row:active { background: #fff8fc; }
.lc-picker-row:disabled { cursor: default; opacity: 0.62; }
.lc-picker-row .lc-avatar { width: 44px; height: 44px; font-size: 18px; }
.lc-picker-mid { flex: 1; min-width: 0; }
.lc-picker-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-picker-sub { margin-top: 2px; color: var(--lc-grey); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-picker-info { margin-top: 2px; color: var(--lc-grey); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-switch-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--lc-grey); font-size: 12px; font-weight: 600;
}
.lc-switch-dot { width: 10px; height: 10px; border-radius: 50%; background: #aaa; }
.lc-switch-on .lc-switch-dot { background: #2e9e4f; }
.lc-picker-chevron { flex: none; color: var(--lc-pink-dark); font-size: 24px; line-height: 1; }
.lc-picker-empty { padding: 14px 12px; color: var(--lc-grey); font-size: 14px; }

/* ---------- Admin 會員搜尋 (member search, Admin only) ---------- */
.lc-member-search {
  margin: 14px 14px 0; padding: 12px;
  border: 1px solid var(--lc-line); border-radius: 16px; background: #fff;
}
.lc-member-search-label { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--lc-grey); }
.lc-member-search-row { display: flex; gap: 8px; }
.lc-member-search-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--lc-line); border-radius: 12px;
  background: #fff; color: var(--lc-text); font: inherit; font-size: 15px;
}
.lc-member-search-btn {
  flex: none; min-height: 44px; padding: 8px 16px;
  border: none; border-radius: 12px; background: var(--lc-pink); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.lc-member-search-btn:disabled { opacity: 0.55; cursor: default; }
.lc-member-search-result { margin-top: 8px; }
.lc-member-search-result:empty { margin-top: 0; }

@media (prefers-color-scheme: dark) {
  .lc-picker { background: #191414; color: #f7f2ef; }
  .lc-picker-head, .lc-picker-row, .lc-picker-status, .lc-member-search { background: #292121; border-color: #453737; color: #f7f2ef; }
  .lc-member-search-input { background: #191414; border-color: #453737; color: #f7f2ef; }
  .lc-picker-row:active { background: #332727; }
  .lc-picker-sub, .lc-picker-group-title, .lc-picker-empty { color: #c9bab5; }
}

/* ---------- 編輯個人資料版 (profile editor) ---------- */
.lc-pane-profile { display: none; flex: 1; min-width: 0; min-height: 0; }
.lc-panes.lc-profiling .lc-pane-profile { display: flex; }
.lc-panes.lc-profiling .lc-pane-list,
.lc-panes.lc-profiling .lc-pane-chat { display: none !important; }
.lc-profile-btn {
  flex: none; width: 40px; height: 40px; margin-right: 10px; padding: 0;
  border: none; cursor: pointer;
}
.lc-profile {
  display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
  overflow-y: auto; background: #F7F5F2; color: var(--lc-text);
}
.lc-profile-head {
  position: sticky; top: 0; z-index: 2; min-height: 56px;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: #fff; border-bottom: 1px solid var(--lc-line);
}
.lc-profile-back { flex: none; width: 44px; height: 44px; padding: 0; }
.lc-profile-title { font-size: 17px; font-weight: 700; }
.lc-profile-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 14px 24px; }
.lc-profile-avatar-box { display: flex; justify-content: center; }
.lc-profile-avatar { width: 84px; height: 84px; font-size: 34px; }
.lc-profile-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.lc-profile-photo-btn {
  align-self: center; border: 1px solid var(--lc-line); border-radius: 20px;
  padding: 9px 18px; background: #fff; color: var(--lc-pink-dark);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.lc-profile-photo-btn:disabled { opacity: 0.6; cursor: default; }
.lc-profile-file { display: none; }
.lc-profile-label { margin-top: 8px; color: var(--lc-grey); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.lc-profile-input {
  border: 1px solid var(--lc-line); border-radius: 12px; padding: 12px 14px;
  font: inherit; font-size: 16px; background: #fff; color: var(--lc-text);
}
.lc-profile-input:focus { outline: 2px solid var(--lc-pink-soft); border-color: var(--lc-pink); }
.lc-profile-save {
  border: none; border-radius: 12px; padding: 13px;
  background: var(--lc-pink); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.lc-profile-save:active { background: var(--lc-pink-dark); }
.lc-profile-save:disabled { opacity: 0.6; cursor: default; }
.lc-profile-status {
  padding: 10px 12px; border: 1px solid var(--lc-pink-soft);
  border-radius: 12px; background: #fff; color: var(--lc-pink-dark); font-size: 14px;
}
.lc-profile-status.lc-profile-error { border-color: #eec2c2; color: #a33; }

@media (prefers-color-scheme: dark) {
  .lc-profile { background: #191414; color: #f7f2ef; }
  .lc-profile-head, .lc-profile-input, .lc-profile-photo-btn, .lc-profile-status { background: #292121; border-color: #453737; color: #f7f2ef; }
  .lc-profile-label { color: #c9bab5; }
}

/* 桌面：左右兩欄並排 */
@media (min-width: 721px) {
  .lc-pane-list { width: 340px; border-right: 1px solid var(--lc-line); flex: none; }
  .lc-pane-chat { display: flex; }
  .lc-pane-chat.lc-empty { align-items: center; justify-content: center; color: var(--lc-grey); }
  .lc-back { display: none !important; }
}
/* 手機：開咗對話就全屏，列表讓路 */
@media (max-width: 720px) {
  .lc-panes.lc-chatting .lc-pane-list { display: none; }
  .lc-pane-chat { display: none; }
  .lc-panes.lc-chatting .lc-pane-chat { display: flex; }
}

/* ---------- 對話列表 (conversation list) ---------- */
.lc-list { display: flex; flex-direction: column; }
.lc-list-item {
  display: flex; gap: 11px; align-items: center; width: 100%;
  padding: 11px 14px; background: #fff; border: none; border-bottom: 1px solid var(--lc-line);
  cursor: pointer; text-align: left; font: inherit;
}
.lc-list-item:active { background: #fafafa; }
.lc-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--lc-pink-soft); color: var(--lc-pink-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
}
/* 有相嗰陣 .lc-avatar 係 img：圓形裁切，尺寸照跟上面同各上下文規則
   （清單 46px／標題列 38px／揀人行 44px），底色留粉紅軟色，載入前唔會白一塊。 */
.lc-avatar-img { object-fit: cover; }
/* 自己頭像掣入面張相：填滿成個 40px 掣面 */
.lc-profile-btn-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lc-list-mid { flex: 1; min-width: 0; }
.lc-list-top { display: flex; align-items: baseline; gap: 8px; }
.lc-list-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-list-time { margin-left: auto; flex: none; font-size: 12px; color: var(--lc-grey); }
.lc-list-time.lc-unread-time { color: var(--lc-pink); font-weight: 700; }
.lc-list-bottom { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lc-list-preview {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--lc-grey);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--lc-pink); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 對話視圖 (chat view) ---------- */
.lc-chat { display: flex; flex-direction: column; min-height: 0; background: var(--lc-chat-bg); }
.lc-chat-head {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--lc-line);
}
.lc-chat-head .lc-avatar { width: 38px; height: 38px; font-size: 16px; }
.lc-chat-head-text { flex: 1; min-width: 0; }
.lc-chat-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-chat-sub { font-size: 12px; color: var(--lc-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-icon-btn {
  flex: none; border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--lc-pink-dark); padding: 6px;
}
.lc-msgs { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 5px; }
.lc-row { display: flex; }
.lc-row.lc-mine { justify-content: flex-end; }
.lc-bubble {
  max-width: 78%; padding: 7px 10px 5px; border-radius: 12px;
  background: #fff; font-size: 15px; line-height: 1.35; word-break: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.lc-row.lc-mine .lc-bubble { background: var(--lc-pink-soft); }
.lc-bubble.lc-deleted { color: var(--lc-grey); font-style: italic; background: #ececec; }
.lc-meta { font-size: 10.5px; color: var(--lc-grey); text-align: right; margin-top: 2px; }
/* 出訊息者名牌：喺人哋嘅泡泡入面頂部，細字粉紅深色，同內文分得開。
   泡泡底色日夜模式都係淺色（#fff／#ececec，冇深色覆寫），所以
   --lc-pink-dark 喺兩種模式下都睇得清。 */
.lc-sender { font-size: 12px; font-weight: 700; color: var(--lc-pink-dark); margin-bottom: 2px; }
/* 名牌㩒得嗰陣（host 接咗 onOpenMember）：平時個樣唔變，只係滑鼠指針
   加 hover／㩒落去先出底線做提示，唔好成日劃線搞到花晒。 */
.lc-sender-link { cursor: pointer; }
.lc-sender-link:hover, .lc-sender-link:active { text-decoration: underline; }
.lc-composer {
  display: flex; gap: 8px; padding: 8px 10px;
  /* 輸入列係成個窗最底嗰行（獨立頁＋手機全屏浮動窗都係）：底部加 iPhone 安全區，
     避開 Home 指示條；env() 內置 0px 後備，冇安全區嘅裝置同舊瀏覽器維持原本 8px。 */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--lc-line);
}
.lc-input {
  flex: 1; min-width: 0; border: 1px solid var(--lc-line); border-radius: 20px;
  padding: 10px 14px; font-size: 15px; font: inherit;
}
.lc-input:focus { outline: 2px solid var(--lc-pink-soft); border-color: var(--lc-pink); }
.lc-send {
  flex: none; border: none; border-radius: 20px; padding: 10px 18px;
  background: var(--lc-pink); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.lc-send:active { background: var(--lc-pink-dark); }

/* ---------- Host 頁浮動窗口 (floating docked boxes) ---------- */
.lc-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  border: none; border-radius: 26px; padding: 13px 20px;
  background: var(--lc-pink); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.lc-launcher .lc-badge { background: #fff; color: var(--lc-pink-dark); }
.lc-boxes {
  position: fixed; right: 12px; bottom: 12px; z-index: 59;
  display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px;
  max-width: calc(100vw - 24px);
}
.lc-box {
  width: 328px; max-width: calc(100vw - 24px); height: 460px; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px);
  background: #fff; border: 1px solid var(--lc-line); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); overflow: hidden;
  display: flex; flex-direction: column;
}
.lc-box > .lc-chat, .lc-box > .lc-list { flex: 1; min-height: 0; }
.lc-box > .lc-list { overflow-y: auto; }
.lc-box-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: var(--lc-pink); color: #fff; font-weight: 700; font-size: 15px;
}
.lc-box-head .lc-icon-btn { color: #fff; margin-left: auto; }
.lc-box-head .lc-title { flex: 1; }

/* 手機上浮動窗口變全屏（跟 PM 定案：mobile full-screen） */
@media (max-width: 720px) {
  .lc-boxes { right: 0; bottom: 0; left: 0; }
  .lc-box { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .lc-boxes .lc-box:not(:last-child) { display: none; } /* 一次睇一個，唔好疊到亂 */
}

/* staging 真後台版：未登入提示 (sign-in gate) */
.lc-signin { padding: 24px 16px; text-align: center; font-size: 16px; }
.lc-signin-btn { display: inline-block; background: #D62598; color: #fff; padding: 10px 22px; border-radius: 8px; text-decoration: none; font-weight: bold; }

/* ---------- 成員資料版 (member info) ---------- */
.lc-pane-info { display: none; flex: 1; min-width: 0; min-height: 0; }
.lc-panes.lc-infoing .lc-pane-info { display: flex; }
.lc-panes.lc-infoing .lc-pane-list,
.lc-panes.lc-infoing .lc-pane-chat { display: none !important; }
.lc-head-clickable { cursor: pointer; }
.lc-info {
  display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%;
  overflow-y: auto; background: #F7F5F2; color: var(--lc-text);
}
.lc-info-head {
  position: sticky; top: 0; z-index: 2; min-height: 56px;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: #fff; border-bottom: 1px solid var(--lc-line);
}
.lc-info-back { flex: none; width: 44px; height: 44px; padding: 0; }
.lc-info-title { font-size: 17px; font-weight: 700; }
.lc-info-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 14px 24px; }
.lc-info-member {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 14px;
  border: 1px solid var(--lc-line); border-radius: 16px; background: #fff;
}
.lc-info-avatar-box { display: flex; justify-content: center; }
.lc-info-avatar { width: 72px; height: 72px; font-size: 30px; }
.lc-info-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.lc-info-name { text-align: center; font-size: 17px; font-weight: 700; }
.lc-info-row { display: flex; gap: 10px; font-size: 14px; }
.lc-info-label { flex: none; width: 86px; color: var(--lc-grey); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.lc-info-value { flex: 1; min-width: 0; }
.lc-info-add {
  margin: 0 14px 24px; padding: 14px;
  border: 1px solid var(--lc-line); border-radius: 16px; background: #fff;
}
.lc-info-add-title { margin-bottom: 10px; font-size: 15px; font-weight: 700; }
.lc-info-add-result { margin-top: 10px; }
.lc-info-add-result:empty { margin-top: 0; }
.lc-info-add-name { font-size: 16px; font-weight: 600; }
.lc-info-add-email { margin-top: 2px; color: var(--lc-grey); font-size: 13px; }
.lc-info-add-btn { margin-top: 10px; }
.lc-info-add-status { margin-top: 10px; color: var(--lc-pink-dark); font-size: 14px; }

@media (prefers-color-scheme: dark) {
  .lc-info { background: #191414; color: #f7f2ef; }
  .lc-info-head, .lc-info-member, .lc-info-add { background: #292121; border-color: #453737; color: #f7f2ef; }
  .lc-info-label { color: #c9bab5; }
  .lc-picker-info { color: #c9bab5; }
}