/* Search page (#/search) — TEAM-M
 * ภาษาดีไซน์ชุดเดียวกับ messages.css: การ์ดขาวโปร่ง rgba(255,255,255,.62) + blur(14px),
 * ขอบขาว .65, เงาฟ้า rgba(80,140,220,.15), ชื่อ #1f3350 / รอง #7d92ad */

.sr-wrap{display:flex;flex-direction:column;height:100dvh;min-height:0}

/* ---- แถบบน: ปุ่มย้อนกลับ + ช่องค้นหา ---- */
.sr-top{display:flex;align-items:center;gap:10px;flex:none;
  padding:16px 14px 10px;padding-top:calc(16px + env(safe-area-inset-top))}
.sr-top .icon-btn{flex:none;background:var(--card-glass);
  border-color:rgba(255,255,255,.85);color:var(--card-ink);
  box-shadow:0 3px 10px rgba(80,140,220,.12);transition:transform .16s ease}
.sr-top .icon-btn:active{transform:scale(.9)}

.sr-field{flex:1;display:flex;align-items:center;gap:10px;min-width:0;cursor:text;
  padding:11px 12px 11px 16px;border-radius:26px;
  background:var(--card-glass);border:1px solid var(--card-brd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(80,140,220,.15), inset 0 1px 0 rgba(255,255,255,.9);
  transition:border-color .15s, box-shadow .15s}
.sr-field:focus-within{border-color:var(--accent);
  box-shadow:0 4px 18px rgba(47,139,255,.22), inset 0 1px 0 rgba(255,255,255,.9)}
.sr-field svg{width:18px;height:18px;flex:none;color:var(--card-ink-dim)}
.sr-field input{flex:1;min-width:0;font-size:15px;color:var(--card-ink)}
.sr-field input::placeholder{color:var(--card-ink-dim)}
.sr-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.sr-clear{flex:none;width:26px;height:26px;border-radius:50%;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;color:var(--card-ink-dim);
  background:rgba(190,215,240,.45);transition:transform .14s, color .12s}
.sr-clear[hidden]{display:none}
.sr-clear:active{transform:scale(.86);color:#2f8bff}

/* ---- ผลลัพธ์ ---- */
.sr-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:4px 14px calc(20px + env(safe-area-inset-bottom))}

.sr-sec{margin-bottom:18px}
.sr-sec-title{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--card-ink-dim);
  margin:2px 4px 9px}

.sr-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin-bottom:10px;padding:12px 14px;border-radius:20px;
  background:var(--card-glass);border:1px solid var(--card-brd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(80,140,220,.15);
  animation:srCardIn .34s cubic-bezier(.22,.9,.3,1) backwards;
  transition:transform .13s}
.sr-card:active{transform:scale(.985)}
@keyframes srCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sr-name{font-weight:700;font-size:15px;color:var(--card-ink);max-width:100%}
.sr-sub{font-size:12px;color:var(--card-ink-dim);margin-top:2px}
.sr-chev{display:flex;flex:none;color:var(--card-ink-dim);opacity:.8}
.sr-chev svg{width:15px;height:15px}

/* การ์ดข้อความ: ชื่อแชท + เวลา / ผู้ส่ง + ข้อความ */
.sr-msg{align-items:flex-start}
.sr-msg-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.sr-msg-top .sr-name{flex:1;min-width:0}
.sr-time{flex:none;font-size:11.5px;color:var(--card-ink-dim);white-space:nowrap}
.sr-msg-body{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;
  color:#5d7593;word-break:break-word;overflow-wrap:anywhere}
.sr-from{font-weight:600;color:var(--card-ink-dim);margin-right:4px}

/* ไฮไลต์คำค้น */
.sr-body mark{background:rgba(47,139,255,.22);color:var(--card-ink);
  border-radius:4px;padding:0 2px;font-weight:700}

/* ---- สถานะ: ชวนค้นหา / ไม่พบผลลัพธ์ ---- */
.sr-state{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:56px 22px;text-align:center}
.sr-state-ico{display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;margin-bottom:8px;color:#2f8bff;
  background:rgba(47,139,255,.14);box-shadow:0 8px 22px rgba(47,139,255,.18)}
.sr-state-ico svg{width:26px;height:26px}
.sr-state strong{font-size:15px;color:var(--card-ink)}
.sr-state span{font-size:13px;color:var(--card-ink-dim);line-height:1.5}

/* ---- จอแคบ ---- */
@media (max-width:420px){
  .sr-top{padding:14px 12px 8px;padding-top:calc(14px + env(safe-area-inset-top))}
  .sr-body{padding:4px 12px calc(18px + env(safe-area-inset-bottom))}
}
@media (max-width:374px){
  .sr-top{padding:12px 8px 8px;padding-top:calc(12px + env(safe-area-inset-top));gap:8px}
  .sr-body{padding:4px 8px calc(16px + env(safe-area-inset-bottom))}
  .sr-card{padding:11px 12px;gap:10px;border-radius:18px}
}

/* ---- ผู้ติดต่อที่ยังไม่มีห้องแชท → กดแล้วสร้างใหม่ ---- */
.sr-contact .sr-newdm{display:block;margin-top:2px;font-size:11.5px;color:var(--card-ink-dim)}
.sr-card.is-busy{opacity:.6;pointer-events:none}
.sr-card.is-busy .sr-chev{animation:srPulse .9s ease infinite}
@keyframes srPulse{0%,100%{opacity:.35}50%{opacity:1}}