/* ข้อมูลแชท (#/chatinfo/:id) + ตั้งค่าเพื่อน (#/contact/:userId) — Wadee Vivid Blue
 * โครงหลักใช้คลาส gp-* ของหน้าตั้งค่ากลุ่ม (group.css) · ไฟล์นี้เติมเฉพาะส่วนที่ต่างไป
 * สีใช้โทเคนทั้งหมด → ใช้ได้ทุกธีม (สว่าง/เข้ม/เย็นสบายตา/ชมพู) · พื้นหลังแชทเป็นสีโปร่งแสงทับพื้นธีม */

.ci-page .gp-body{overflow-y:auto}

/* ---- แถวหัว: คู่สนทนา + ปุ่ม "+" สร้างกลุ่ม ---- */
.ci-tiles{display:flex;align-items:flex-start;gap:14px;padding:14px 16px}
.ci-tile{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;min-height:44px;
  padding:4px 0;border-radius:16px;color:var(--ink);
  transition:transform .27s var(--ease-spring),background .15s}
.ci-tile:active{transform:scale(.94)}
.ci-tile:hover{background:rgba(var(--accent-rgb),.06)}
.ci-tile-name{max-width:72px;font-size:12.5px;font-weight:500;color:var(--ink-dim);text-align:center}
.ci-plus{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  border:2px dashed rgba(var(--accent-rgb),.45);background:transparent}
.ci-plus svg{width:28px;height:28px}

/* ---- แถวตั้งค่า (ปุ่มไปต่อ / สวิตช์) ---- */
.ci-card{padding:4px 12px}
.ci-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:6px 4px;
  text-align:left;color:var(--ink);border-radius:14px;
  transition:background .15s,transform .27s var(--ease-spring)}
button.ci-row:hover{background:rgba(var(--accent-rgb),.06)}
button.ci-row:active{transform:scale(.985)}
.ci-ico{flex:none;width:34px;height:34px;display:grid;place-items:center}
.ci-ico svg{width:30px;height:30px}
.ci-row-title{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--ink)}
.ci-row .gp-row-title{cursor:pointer}
.ci-row-val{flex:none;max-width:45%;font-size:13px;color:var(--ink-dim)}
.ci-row.danger .ci-row-title{color:var(--danger)}
.ci-line{border-top:1px solid var(--line);margin:0 4px 0 50px}

/* ---- ชีต ---- */
.ci-sheet-desc{font-size:13px;line-height:1.6;color:var(--ink-dim);margin:-6px 0 14px}
.ci-danger-cta{margin-top:4px}
.ci-input{margin-bottom:14px;font-size:15px;min-height:48px}
.ci-sheet-rows{margin:0 -4px 6px}

/* ---- ตัวเลือกพื้นหลัง ---- */
.ci-bg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ci-bg-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:16px;
  min-height:44px;border:2px solid transparent;color:var(--ink);
  transition:transform .27s var(--ease-spring),border-color .15s}
.ci-bg-opt:active{transform:scale(.95)}
.ci-bg-opt.on{border-color:var(--accent)}
.ci-bg-sw{position:relative;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  background-color:var(--bg-0);border:1px solid var(--card-brd)}
.ci-bg-b1,.ci-bg-b2{position:absolute;height:12px;border-radius:7px}
.ci-bg-b1{left:10%;top:26%;width:52%;background:var(--surface);border:1px solid var(--card-brd)}
.ci-bg-b2{right:10%;top:52%;width:46%;background:var(--grad-primary)}
.ci-bg-name{font-size:12.5px;font-weight:500;color:var(--ink-dim)}
.ci-bg-opt.on .ci-bg-name{color:var(--accent);font-weight:700}
.ci-bg-note{margin:12px 0 0;text-align:center}

/* ---- พื้นหลังห้องแชท (ใช้ทั้งในห้องแชทจริงและตัวอย่างในชีต) — โปร่งแสงทับพื้นธีม ---- */
.cbg-sky{background-image:linear-gradient(165deg,rgba(var(--vbr-38aaff),.20),rgba(var(--vbr-8cd2ff),.10) 60%,rgba(var(--vbr-38aaff),.05))}
.cbg-mint{background-image:linear-gradient(165deg,rgba(46,196,150,.20),rgba(150,230,200,.09) 60%,rgba(46,196,150,.05))}
.cbg-peach{background-image:linear-gradient(165deg,rgba(255,154,118,.22),rgba(255,214,170,.11) 60%,rgba(255,154,118,.05))}
.cbg-lavender{background-image:linear-gradient(165deg,rgba(150,120,255,.20),rgba(205,185,255,.10) 60%,rgba(150,120,255,.05))}
.cbg-sunset{background-image:linear-gradient(170deg,rgba(255,184,77,.22),rgba(255,112,150,.14))}

/* ---- การ์ดโปรไฟล์ (ตั้งค่าเพื่อน) ---- */
.ct-card{padding:16px}
.ct-head{display:flex;align-items:center;gap:14px}
.ct-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ct-name{font-size:20px;font-weight:700;color:var(--ink);min-width:0}
.ct-sub{font-size:13px;color:var(--ink-dim)}
.ct-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ct-chip{font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:var(--r-pill);
  color:var(--ink-dim);background:rgba(var(--accent-rgb),.07);border:1px solid var(--card-brd)}
.ct-chip.on{color:var(--green-ink);background:var(--green-soft);border-color:rgba(var(--green-rgb),.4)}
.ct-bio{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ct-acts{display:flex;gap:10px;margin-top:14px}
.ct-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-size:15px;font-weight:700}
.ct-btn svg{width:24px;height:24px;flex:none}

/* ---- รายการแชท: ห้องที่ปิดเสียง (ป้ายเทา + ไอคอนกระดิ่งขีดฆ่า) ---- */
.chat-card.is-muted .badge{background:var(--ink-dim);color:var(--surface)}
.chat-card .mute-ico{display:inline-flex;flex:none}
.chat-card .mute-ico svg{width:18px;height:18px;opacity:.75}

/* ---- หัวห้องแชท: แตะรูป/ชื่อคู่สนทนา → ตั้งค่าเพื่อน ---- */
.chat-peer.tappable{cursor:pointer;border-radius:14px}
.chat-peer.tappable:active{opacity:.75}

/* ---- รายชื่อเพื่อน: เครื่องหมายติดดาว ---- */
.fr-star{display:inline-flex;vertical-align:-4px;margin-right:4px}
.fr-star svg{width:18px;height:18px}