/* Lynk Rooms — ภาษาภาพเดียวกับห้องรวมของ lynk-for-code (ui.py #bdrawer) ขยายเป็นหน้าเต็ม
   ของคุณขวา (ฟองสีส้มจาง) · ของคนอื่นซ้าย แมว + ชื่อสีเดียวกับแมว · อ้างอิงอยู่ในฟอง · เวลาอยู่มุมฟอง */
:root{
  --bg:#1f1e1d; --bg2:#262524; --card:#2b2a28; --line:#3a3836; --pill:#3d3b38;
  --ink:#e8e6e3; --mut:#a8a49e; --dim:#7a766f;
  --accent:#d97757; --accent-2:#e69a7d; --ok:#7ee2a8; --bad:#f2938c; --warn:#ffd28e;
  --mine:rgba(217,119,87,.16); --mine-line:rgba(217,119,87,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 "IBM Plex Sans Thai","Sukhumvit Set",system-ui,sans-serif}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::placeholder{color:var(--dim)}
[hidden]{display:none!important}
.vh{position:absolute;left:-9999px}
.sub{font-size:12px;color:var(--mut)}
.msg{min-height:1.4em;font-size:13px;color:var(--mut);margin:10px 0 0}
.msg.err{color:var(--bad)}
.brand{font-size:17px;font-weight:600;letter-spacing:.01em}
.logo{display:block;height:30px;width:auto}
.logo-lg{height:48px;margin-bottom:6px}

button.primary{height:40px;padding:0 16px;border-radius:10px;border:0;background:var(--accent);color:#1c1b19;font-weight:600;cursor:pointer}
button.primary:hover{background:var(--accent-2)}
button.primary:disabled{opacity:.55;cursor:default}
button.ghost{height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.icon-btn:hover{border-color:var(--dim)}
.link-btn{background:none;border:0;color:var(--mut);cursor:pointer;padding:4px 0;font-size:12px;text-align:left}
.link-btn:hover{color:var(--ink)}
input,textarea{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:0 12px}
input{height:40px;width:100%}

/* ล็อกอิน */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-card{width:100%;max-width:360px;display:flex;flex-direction:column}
.login-card .brand{font-size:22px}
.login-card .sub{margin:4px 0 22px;font-size:13px}
.login-card form{display:flex;flex-direction:column;gap:8px}
.login-card label{font-size:13px;color:var(--mut)}
.login-card button{margin-top:6px}

/* โครง */
.app{height:100%;display:flex}
.side{width:264px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg2);border-right:1px solid var(--line)}
.side-top{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 10px 16px}
.room-list{flex:1;overflow-y:auto;padding:4px 8px}
.side-act{padding:6px 16px 10px}
.link-btn.strong{color:var(--accent);font-size:13px;font-weight:500}
.side-foot{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-top:1px solid var(--line)}
.side-foot .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-h{padding:12px 8px 4px;font-size:11.5px;font-weight:500;color:var(--dim)}
.nav-row{display:flex;align-items:center;gap:10px;padding:0 8px;height:44px;border-radius:10px;cursor:pointer;border:0;background:transparent;width:100%;text-align:left}
.nav-row:hover{background:var(--card)}
.nav-row[aria-current="page"]{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.nav-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-row.unread .nm{font-weight:600}
.hash{width:28px;height:28px;border-radius:8px;background:var(--pill);color:var(--accent);font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.badge.pend{background:var(--warn);color:#1c1b19}
.badge.new{background:var(--accent);color:#1c1b19}
.ravatar svg{display:block}
.human-av{border-radius:50%;background:var(--pill);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;color:var(--mut)}

/* ห้อง */
.room{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
/* แผงโปร่ง (แบบลิ้นชักห้องรวมของ lynk-for-code): หัวห้องกับช่องพิมพ์ลอยอยู่บนฟีด ข้อความเลื่อนลอดใต้ · ทึบ 82% + เบลอ
   เบลอดีกว่าทึบสนิท เพราะยังรู้สึกว่าบทสนทนาอยู่ข้างหลัง ไม่ใช่ถูกตัดขาด */
.glass{background:rgba(31,30,29,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.room-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;flex-direction:column;gap:8px;padding:12px 20px 10px;border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:10px;min-height:32px}
.room-title{font-size:15.5px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-members{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rmem{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 4px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:12.5px}
.rmem:hover{border-color:var(--dim)}

.feed{flex:1;overflow-y:auto;padding:104px 20px 110px;scroll-padding-bottom:110px;display:flex;flex-direction:column;gap:10px}
.bempty{margin:auto;text-align:center;color:var(--dim);font-size:13px;line-height:1.7}
.rday{text-align:center;color:var(--dim);font-size:11px;margin:8px 0 2px}
.rrow{display:flex;align-items:flex-end;gap:8px;max-width:min(78%,720px);align-self:flex-start}
.rrow.mine{align-self:flex-end;flex-direction:row-reverse}
.rrow .ravatar{margin-bottom:2px}
.rcol{display:flex;flex-direction:column;min-width:0}
.rrow.mine .rcol{align-items:flex-end}
.rname{font-size:11.5px;font-weight:600;margin:0 0 3px 4px}
.rbub{background:var(--card);border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:8px 13px 6px;min-width:0}
.rrow.mine .rbub{border-radius:16px 16px 5px 16px;background:var(--mine);border-color:var(--mine-line)}
.rquote{font-size:11.5px;color:var(--dim);border-left:2px solid var(--line);padding-left:8px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.rtext{font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.mention{color:var(--accent);font-weight:600}
.rtime{font-size:10px;color:var(--dim);text-align:right;margin-top:3px;font-variant-numeric:tabular-nums}
.rfoot{font-size:10.5px;color:var(--dim);margin:3px 5px 0}
.rtag{font-size:10.5px;padding:1px 7px;border-radius:9px;background:var(--pill);color:var(--mut);margin-left:6px;font-weight:500}
.rtag.warn{background:#3b3222;color:var(--warn)}
.rrow.delivery .rbub{border-color:rgba(126,226,168,.35)}
.rev{font-size:11px;color:var(--mut);margin-top:4px}
.rrow.ghost .rbub{background:transparent;border:1px dashed var(--warn)}
.rrow.typing{align-items:center;gap:8px}
.rtyping{font-size:12px;color:var(--dim)}
/* จุดสามจุดค่อย ๆ โผล่ทีละจุด (steps) — คนอ่านว่า «กำลังพิมพ์» ไม่ใช่ป้ายนิ่ง */
.rell{display:inline-block;width:1.2em;text-align:left;animation:rell 1.5s steps(3,end) infinite;overflow:hidden;vertical-align:bottom}
@keyframes rell{0%{width:0}100%{width:1.2em}}
/* แมว: ยกกฎทั้งชุดจากลิ้นชักห้องรวมของ lynk-for-code — live = ตัวที่กำลังจะตอบขยับ · poke = แตะแล้วย่อ ลอย หมุนหลัง ลงพื้น
   (anticipation/action/settle) หมุนที่กล่อง HTML สามชั้น (Safari ไม่รองรับ 3D บนลูกของ SVG) */
.ravatar{display:inline-flex;align-items:flex-end;justify-content:center;flex:0 0 auto}
.ravatar .reyes{transform-box:fill-box;transform-origin:50% 50%}
.ravatar.live .rbody{animation:rbob 1.1s ease-in-out infinite}
.ravatar.live .reyes{animation:rblink 3.2s ease-in-out infinite}
.ravatar .rear{transform-box:fill-box;transform-origin:50% 100%}
.ravatar .rtail{transform-box:fill-box;transform-origin:0% 100%}
.ravatar.live .rtail{animation:rtail 1.6s ease-in-out infinite}
@keyframes rtail{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
.ravatar.live .rear{animation:rear 2.6s ease-in-out infinite}
.ravatar.live .rear.r{animation-delay:1.3s}
@keyframes rear{0%,84%,100%{transform:rotate(0)}92%{transform:rotate(-10deg)}}
@keyframes rbob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2.5px) scale(1.05,.94)}}
.feed .ravatar{cursor:pointer}
.ravatar.poke{position:relative;z-index:1}          
.ravatar{position:relative}
.rstage{position:absolute;inset:0;pointer-events:none}
.rstage .rpillow{transform-box:fill-box;transform-origin:50% 100%}
.ravatar.poke .rstage .rpillow{animation:rpillow .88s ease-in-out}
@keyframes rpillow{0%{transform:scale(1,1)}
 8%{transform:scale(1.02,.96)}
 16%,86%{transform:scale(1,1)}
 92%{transform:scale(1.025,.95)}
 100%{transform:scale(1,1)}}
.rflip{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.rface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rface.rlb{transform:translateZ(var(--z,0))}   
.rface.rlm{transform:translateZ(var(--z,0))}   
.rface.rlf{transform:translateZ(var(--z,0))}   
.rface.rrear{transform:rotateY(180deg)}
.ravatar.poke .rlb,.ravatar.poke .rlm,.ravatar.poke .rlf{animation:rzflat .88s ease-in-out}
@keyframes rzflat{0%,12%{transform:translateZ(var(--z,0))}
 22%{transform:translateZ(0)}
 32%,70%{transform:translateZ(var(--z,0))}
 80%{transform:translateZ(0)}
 90%,100%{transform:translateZ(var(--z,0))}}
.ravatar.poke .rflip{animation:rspin .88s cubic-bezier(.34,1.56,.64,1)}
@keyframes rspin{0%{transform:translateY(0) rotateY(0deg) scale(1,1)}
 12%{transform:translateY(0) rotateY(0deg) scale(1.12,.88)}
 22%{transform:translateY(-6px) rotateY(90deg) scale(1,1.04)}
 32%{transform:translateY(-9px) rotateY(180deg) scale(1,1.03)}
 70%{transform:translateY(-9px) rotateY(180deg) scale(1,1.02)}
 80%{transform:translateY(-6px) rotateY(270deg) scale(1,1.03)}
 90%{transform:translateY(0) rotateY(360deg) scale(1,.94)}
 100%{transform:translateY(0) rotateY(360deg) scale(1,1)}}
.ravatar.poke{animation:rlight .88s ease-in-out}
@keyframes rlight{0%,12%{filter:none}22%{filter:brightness(.8)}32%,70%{filter:none}80%{filter:brightness(.8)}90%,100%{filter:none}}
.ravatar.poke .rear{animation:rpokeear .88s ease-in-out}
.ravatar.poke .rear.r{animation-delay:.06s}
.ravatar.poke .rtail{animation:rpoketail .88s ease-in-out}
.ravatar.poke .reyes{animation:rblink .88s ease-in-out}
@keyframes rpokeear{0%,100%{transform:rotate(0)}35%{transform:rotate(-17deg)}70%{transform:rotate(7deg)}}
@keyframes rpoketail{0%,100%{transform:rotate(0)}30%{transform:rotate(26deg)}65%{transform:rotate(-12deg)}}
@keyframes rblink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}


.composer-wrap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:10px 20px 12px}
.composer{display:flex;align-items:flex-end;gap:8px;position:relative}
/* พิมพ์ @ แล้วเลือกสมาชิก — popover ลอยเหนือช่องพิมพ์ ไม่ดันช่องขึ้น (แบบเดียวกับห้องรวม) */
.roommenu{display:none;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--card);position:absolute;left:0;right:54px;bottom:100%;margin-bottom:6px;max-height:40vh;overflow:auto;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.roommenu.on{display:flex}
.roommenu .lm{margin:0 4px 2px}
.roommenu button{text-align:left;border:0;border-radius:7px;padding:7px 9px;background:transparent;color:inherit;font-size:13.5px;cursor:pointer}
.roommenu button.on,.roommenu button:hover{background:var(--mine)}
.roommenu button small{color:var(--dim);margin-left:6px}
.composer textarea{flex:1;min-height:46px;max-height:180px;padding:12px 14px;resize:none;line-height:1.45;border-radius:14px;background:var(--bg2)}
/* ปุ่มส่ง = ปุ่มเดียวกับจอแชตของ lynk-for-code: ลูกศรในกล่องสีหลัก มืดลงเมื่อไม่มีข้อความ */
.send{width:46px;height:46px;border-radius:14px;border:0;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .12s,opacity .12s}
.send:hover:not(:disabled){background:#e08562}
.send:disabled{opacity:.35;cursor:default}
.hint{font-size:11px;color:var(--dim);margin:6px 2px 0}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;color:var(--mut)}
.empty strong{color:var(--ink);font-size:16px}

/* ห้องใหม่ */
.dialog{width:min(440px,calc(100% - 32px));border:1px solid var(--line);border-radius:14px;background:var(--bg2);color:var(--ink);padding:20px}
.dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dialog h2{margin:0 0 14px;font-size:16px}
.dialog form{display:flex;flex-direction:column;gap:8px}
.dialog label{font-size:13px;color:var(--mut);margin-top:6px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 5px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--mine)}
.row-end{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}

.only-phone{display:none}
@media (max-width:720px){
  /* iOS ซูมหน้าทั้งหน้าเมื่อโฟกัสช่องที่ตัวอักษรเล็กกว่า 16px แล้วค้างซูมไว้ — จอเลยล้นซ้ายขวา (มือถือ 23 ก.ย. 2569)
     แก้ที่ต้นเหตุ: ช่องกรอกทุกช่องบนมือถือใช้ 16px · ไม่ล็อกการซูมของผู้ใช้ */
  input,textarea,select{font-size:16px}
  html,body{overflow-x:hidden}
  .side{width:100%;border-right:0}
  .app.in-room .side{display:none}
  .app:not(.in-room) .room{display:none}
  .only-phone{display:flex}
  .feed{padding:12px 14px 8px}
  .rrow{max-width:88%}
  .composer-wrap{padding:8px 14px 12px}
  .room-head{padding:10px 14px 8px}
  .feed{padding-top:98px;padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.ravatar.live .rbody,.ravatar.live .reyes,.ravatar.live .rear,.ravatar.live .rtail,.rell,.ravatar.poke,.ravatar.poke *{animation:none}}

/* อนุมัติในห้อง */
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.acts button{height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:12.5px}
.acts button.yes{background:var(--accent);border-color:var(--accent);color:#1c1b19;font-weight:600}
.acts button:disabled{opacity:.5}

/* เชื่อมเอเจนต์ */
select{height:40px;width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:0 10px}
.radios{display:flex;flex-direction:column;gap:6px}
.radio{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)!important;margin:0!important}
.radio input{width:auto;height:auto}
.kv{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.kv span{font-size:12px;color:var(--mut)}
.kv code{font-size:12px;background:#171615;border:1px solid var(--line);border-radius:8px;padding:6px 8px;overflow-x:auto;white-space:nowrap}
.copy{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:12px}
.wait{font-size:13px;color:var(--warn);margin:12px 0 0}
.wait.ok{color:var(--ok)}
#connect-dialog{width:min(580px,calc(100% - 32px))}
#connect-step1,#connect-step2{display:flex;flex-direction:column;gap:8px}
.agent-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.agent-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:10px}
.agent-row .nm{flex:1;min-width:0}
.agent-row .st{font-size:11.5px;color:var(--dim)}
.agent-row .st.on{color:var(--ok)}

/* แต่งตัวแมว — แผงเดียวกับลิ้นชักห้องรวม (แบบ · ดวงตา · สี) */
.lt{font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.lm{color:var(--dim);font-size:11.5px;margin-top:8px}
.lkrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lkgrid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.lkgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:280px}
.lkopt{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:9px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;min-width:0}
.lkopt small{font-size:10px;color:var(--dim);white-space:normal;text-align:center;line-height:1.25;word-break:keep-all}
.lkopt.on{border-color:var(--accent);background:var(--mine)}
.lksw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.lksw.on{border-color:#fff}
.rmem .rdress{border:0;background:none;padding:0;margin:0;cursor:pointer;display:inline-flex;border-radius:50%}

/* เมนู ⋯ ของห้อง (บอร์ด Main): โผล่เมื่อชี้แถว · บนมือถือใช้ปุ่มที่หัวห้อง */
.nav-row .more{width:28px;height:28px;border-radius:7px;border:0;background:var(--pill);color:var(--ink);display:none;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.nav-row:hover .more,.nav-row:focus-within .more{display:flex}
.nav-row:hover .badge,.nav-row:focus-within .badge{display:none}
.rmenu{position:fixed;width:230px;padding:5px;border-radius:10px;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;z-index:30}
.rmenu button{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:7px;color:var(--ink);font-size:13px;background:transparent;border:0;cursor:pointer;text-align:left;width:100%}
.rmenu button:hover{background:var(--pill)}
.rmenu button.danger{color:var(--danger,#e08a7a)}
.rmenu .sep{height:1px;background:var(--line);margin:4px 6px}
/* แผงสมาชิก (บอร์ด AgentInRoom) */
#members-dialog{width:min(560px,calc(100% - 32px))}
.mlist{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.mrow{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mhead{display:flex;align-items:center;gap:10px}
.mhead .nm{flex:1;min-width:0}
.mhead .st{font-size:12px;color:var(--dim)}
.mhead .st.warn{color:var(--warn)}
.mbody{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.seg-l{font-size:12px;color:var(--mut)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{height:32px;padding:0 12px;border:0;background:transparent;color:var(--mut);cursor:pointer;font-size:13px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--mine);color:var(--ink)}
.mact{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.mact button{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:12.5px}
.mact button.danger{color:var(--danger,#e08a7a)}
.chip.add{border-style:dashed}

/* ใบอนุมัติที่หมดเวลาแล้วแต่ยังโพสต์ให้ได้ (แผนข้อ 4) — จางกว่าใบที่ยังรอ */
.rrow.lapsed{opacity:.72}

/* ท่า «ตอบโพสต์นี้» (24 ก.ย. 2569) */
.rrow{position:relative}
.rreply{flex:0 0 auto;align-self:center;border:1px solid var(--line);background:var(--card);color:var(--dim);border-radius:50%;width:26px;height:26px;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,transform .15s;margin-left:2px}
.rrow:hover .rreply,.rreply:focus-visible,.rrow:hover .rreact,.rreact:focus-visible{opacity:1}
.racts{display:flex;align-items:center;gap:3px;align-self:center}
.rreact{flex:0 0 auto;border:1px solid var(--line);background:var(--card);border-radius:50%;width:26px;height:26px;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,transform .15s}
.rreact:hover{border-color:var(--dim);transform:scale(1.12)}
@media (hover:none){.rreact{display:none}}
.rbadges{display:flex;gap:4px;flex-wrap:wrap;margin:2px 4px 0}
.rbadges:empty{display:none}
.rbadge{font-size:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1px 7px;color:var(--dim)}
.rreply:hover{color:var(--ink);border-color:var(--dim);transform:scale(1.08)}
@media (hover:none){.rreply{display:none}}                 /* มือถือ: ปัดขวา/กดค้างแทน */
.rrow.swiping{transition:none}
.rrow{transition:transform .18s ease}
.replybar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);border-left:2px solid var(--accent);padding:4px 8px;margin:0 0 6px;background:var(--card);border-radius:0 8px 8px 0}
.replybar .rb-arrow{color:var(--accent)}
.replybar .rb-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replybar .rb-x{border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:6px}
.replybar .rb-x:hover{color:var(--ink);background:var(--mine)}