/* De RoMeet — หน้าจองในแอป LINE
   สีตาม CI บริษัท: เขียว + ส้ม บนพื้นขาวอุ่น
   - เขียว (--accent*) = สีหลักของแอป: ปุ่มหลัก ตัวเลือกที่กดอยู่ ลิงก์
   - ส้ม (--or*) = สีรอง: จุดเน้นเล็ก ๆ เช่น "วันนี้" ในปฏิทิน
   สองห้องมีสีประจำ ใช้ทุกหน้า (ตารางจอง ตารางรวม การจองของฉัน):
     บ้าน 22 = ส้ม (.or) · บ้าน 43 = เขียว (.gr) — ผูกกับ roomId ใน app.js (ROOM_LANE)
   สีพื้นสด (--or / --gr) ใช้เป็นพื้นของช่องที่เลือกเท่านั้น
   ตัวอักษรบนพื้นอ่อนใช้ --*-ink ที่ผ่าน 4.5:1 เสมอ
   แดงข้อผิดพลาด (--crit) เป็นแดงเลือดหมู ตั้งใจให้ต่างจากส้มชัดเจน
   --muted ผ่าน 4.5:1 ทั้งบน --app และ --card · --faint ใช้กับของที่กดไม่ได้เท่านั้น
   ฟอนต์: ตัวหนังสือไทยใช้ Plex Sans Thai เสมอ (Plex Mono ไม่มีอักษรไทย)
   mono ใช้กับตัวเลขเวลาเท่านั้น */

:root{
  --app:#FAF7F2;
  --card:#FFFFFF;
  --surface2:#F1ECE4;
  --line:#DCD4C8;
  --line-soft:#ECE6DC;
  --ink:#1F2A1C;
  --ink-2:#3E4838;
  --muted:#625D53;
  --faint:#BDB5A8;
  --accent:#4E8A3A;
  --accent-strong:#336B25;
  --accent-soft:#E5F0DD;
  --accent-line:#A6CB93;
  --or:#EE8A3C;
  --or-ink:#8C3F0C;
  --or-soft:#FDE8D6;
  --gr:#3F7F2F;
  --gr-ink:#2E5F22;
  --gr-soft:#E2EFD8;
  --sel-fg:#FFFFFF;
  --sel-on-or:#2B1405;
  --ok:#336B25;
  --crit:#A4201A;
  --on-crit:#FFFFFF;
  --scrim:rgba(31,26,18,.42);
  --pop:0 10px 36px -10px rgba(45,35,20,.28), 0 2px 8px rgba(45,35,20,.08);
  --row:42px;

  --f-body:"IBM Plex Sans Thai","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --app:#1A1F17;
    --card:#232A1F;
    --surface2:#2D3527;
    --line:#3B4433;
    --line-soft:#2B3325;
    --ink:#EEF0E8;
    --ink-2:#CBD1C2;
    --muted:#A3AA99;
    --faint:#596151;
    --accent:#86BE6C;
    --accent-strong:#9ED283;
    --accent-soft:#283A20;
    --accent-line:#4D6E3D;
    --or:#F29A55;
    --or-ink:#F7B784;
    --or-soft:#45301E;
    --gr:#7DB863;
    --gr-ink:#B2DC9B;
    --gr-soft:#25391C;
    --sel-fg:#12180E;
    --sel-on-or:#2B1405;
    --ok:#9ED283;
    --crit:#F2877A;
    --on-crit:#2A0B07;
    --scrim:rgba(0,0,0,.6);
    --pop:0 12px 40px -8px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--app);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft);color:var(--ink)}
.t{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}

/* ---------- ฟอร์ม ---------- */
.form{padding:16px 16px 0;position:relative}
.glabel{font-size:.86rem;font-weight:600;color:var(--ink);margin:22px 0 7px;padding-left:2px;line-height:1.4}
.glabel .sub-l{font-weight:400;color:var(--muted);font-size:.8rem;margin-left:4px}
.card{background:var(--card);border-radius:13px;border:1px solid var(--line-soft);overflow:hidden}
.card.err{border-color:var(--crit)}

.editbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;
  padding:8px 8px 8px 13px;margin-bottom:14px;font-size:.86rem;color:var(--ink-2)
}
.editbar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editbar b{color:var(--ink);font-weight:600}
.editbar button{
  flex:none;border:1px solid var(--accent-line);background:var(--card);color:var(--accent-strong);
  border-radius:9px;padding:6px 11px;min-height:38px;font-size:.82rem;font-weight:500
}

.frow{
  display:flex;align-items:center;gap:8px;width:100%;min-height:52px;
  background:none;border:none;padding:10px 10px 10px 14px;text-align:left;font-size:.95rem
}
.frow .k{flex:1;font-weight:500}
.val{
  font-size:.95rem;font-variant-numeric:tabular-nums;font-weight:500;
  padding:3px 9px;border-radius:7px;color:var(--accent-strong);white-space:nowrap
}
.frow[aria-expanded="true"] .val{background:var(--accent-soft)}
.frow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:11px}
.chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.frow[aria-expanded="true"] .chev{transform:rotate(90deg)}

/* ---------- หัวข้อ ---------- */
.tinput{width:100%;font:inherit;font-size:1rem;padding:13px 14px;border:none;background:none;color:var(--ink);caret-color:var(--accent-strong)}
.tinput:focus{outline:none}
.card:focus-within{border-color:var(--accent-line)}
.card.err:focus-within{border-color:var(--crit)}
.tinput::placeholder{color:var(--muted);opacity:1}
.fieldhint{font-size:.84rem;color:var(--crit);margin:6px 2px 0;font-weight:500}
.qchips{
  display:flex;gap:6px;overflow-x:auto;padding:9px 2px 2px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
  mask-image:linear-gradient(to right,#000 88%,transparent)
}
.qchips::-webkit-scrollbar{display:none}
.qchips button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 13px;min-height:38px;font-size:.84rem;color:var(--ink-2)}

/* ---------- ความยาวประชุม ---------- */
.durs{display:flex;gap:6px;flex-wrap:wrap}
.durs button{
  border:1px solid var(--line);background:var(--card);border-radius:10px;
  padding:7px 12px;min-height:40px;font-size:.86rem;color:var(--ink-2)
}
.durs button[aria-pressed="true"]{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--sel-fg);font-weight:600}

/* ---------- ตารางสองเลน ---------- */
.board{position:relative}
.board.loading{min-height:200px;display:grid;place-items:center}
.bhead,.bgrid{display:grid;grid-template-columns:46px 1fr 1fr;column-gap:6px}
.bhead{position:sticky;top:0;z-index:5;background:var(--app);padding:6px 0}
.lane-h{text-align:center;font-size:.86rem;font-weight:600;border-radius:9px;padding:5px 0}
.lane-h.or{background:var(--or-soft);color:var(--or-ink)}
.lane-h.gr{background:var(--gr-soft);color:var(--gr-ink)}
.lane-h::before{content:"";display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px;vertical-align:1px}
.lane-h.or::before{background:var(--or)}
.lane-h.gr::before{background:var(--gr)}
.bgrid{padding-top:8px}
.btime{
  grid-column:1;align-self:start;transform:translateY(-.62em);
  font-family:var(--f-mono);font-size:.76rem;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;padding-right:2px
}
.btime.half{color:var(--muted);font-size:.68rem}
.cell{
  position:relative;border:0;border-top:1px solid var(--line-soft);background:var(--card);
  min-height:var(--row);padding:0 8px;text-align:left;color:var(--sel-fg)
}
.cell.or:hover:not(:disabled):not(.sel){background:var(--or-soft)}
.cell.gr:hover:not(:disabled):not(.sel){background:var(--gr-soft)}
.cell:disabled{background:var(--surface2);cursor:default;opacity:.55}
.cell.sel{border-top-color:transparent}
.cell.sel.or{background:var(--or);color:var(--sel-on-or)}
.cell.sel.gr{background:var(--gr);color:var(--sel-fg)}
.cell.sel.first{border-radius:9px 9px 0 0}
.cell.sel.last{border-radius:0 0 9px 9px}
.cell.sel.first.last{border-radius:9px}
.cell.sel.bad{background:var(--crit);color:var(--on-crit)}
.cell span{font-family:var(--f-mono);font-size:.82rem;font-weight:500;font-variant-numeric:tabular-nums;color:inherit}
.cell.bad span{color:var(--on-crit)}
.cell:focus-visible{outline-offset:-2px;z-index:2}
.bk{
  margin:2px 0;border-radius:9px;padding:4px 9px;overflow:hidden;min-width:0;
  display:flex;flex-direction:column;justify-content:flex-start;line-height:1.3
}
.bk.or{background:var(--or-soft);color:var(--or-ink)}
.bk.gr{background:var(--gr-soft);color:var(--gr-ink)}
.bk b{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk small{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.bk.hit{box-shadow:inset 0 0 0 2px var(--crit)}
.rules{font-size:.8rem;color:var(--muted);margin:12px 2px 0;line-height:1.5}

/* ---------- แถบยืนยันติดขอบล่าง ---------- */
.bar{
  position:sticky;bottom:0;z-index:6;margin:18px -16px 0;padding:10px 16px 12px;
  background:var(--app);border-top:1px solid var(--line-soft);
  box-shadow:0 -8px 20px -14px rgba(30,36,25,.35)
}
.msg{font-size:.88rem;font-weight:500;margin:0 2px;line-height:1.45}
.msg.bad{color:var(--crit)}
.msg.good{color:var(--ink)}
.ok-dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--accent);margin-right:7px;vertical-align:1px}
.ok-dot.or{background:var(--or)}
.ok-dot.gr{background:var(--gr)}
.sugg{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
.sugg-k{font-size:.8rem;color:var(--muted)}
.sugg button{
  border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-strong);
  border-radius:99px;padding:6px 13px;min-height:38px;font-size:.84rem;font-weight:500;font-variant-numeric:tabular-nums
}
.sugg button.alt.or{background:var(--or-soft);border-color:transparent;color:var(--or-ink)}
.sugg button.alt.gr{background:var(--gr-soft);border-color:transparent;color:var(--gr-ink)}
.note{font-size:.8rem;color:var(--muted);margin:7px 2px 0;line-height:1.45}
.btn{
  width:100%;border:1px solid var(--accent-strong);background:var(--accent-strong);color:var(--sel-fg);
  border-radius:12px;padding:12px;min-height:50px;font-weight:600;font-size:.98rem;margin-top:10px
}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:none;color:var(--ink-2);border-color:var(--line);font-weight:500;margin-top:8px}

/* ---------- ปฏิทินเลือกวัน ---------- */
.picker{
  position:absolute;left:14px;right:14px;z-index:20;background:var(--card);border:1px solid var(--line-soft);
  border-radius:15px;box-shadow:var(--pop);padding:6px;display:none
}
.picker.on{display:block;animation:pop .16s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}}
.cal{padding:4px 4px 6px}
.calhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.calhd b{font-weight:600;font-size:.95rem;color:var(--ink)}
.calhd button{width:42px;height:42px;border:0;border-radius:10px;background:transparent;color:var(--accent-strong);display:grid;place-items:center}
.calhd svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.calhd button:disabled{color:var(--faint);cursor:default}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.calwd{font-size:.76rem;color:var(--muted);padding:4px 0}
.calgrid button{
  position:relative;height:42px;border:0;border-radius:10px;background:transparent;color:var(--ink);
  font-family:var(--f-mono);font-size:.92rem;font-variant-numeric:tabular-nums
}
.calgrid button:disabled{color:var(--faint);cursor:default}
.calgrid button.past{opacity:.45}
.calgrid button.today{color:var(--or-ink);font-weight:600}
.calgrid button.today::after{background:var(--or)}
.calgrid button.today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:99px;background:currentColor}
.calgrid button[aria-pressed="true"]{background:var(--accent-strong);color:var(--sel-fg);font-weight:600}

/* ---------- แถบแท็บ ---------- */
.tabbar{
  display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft);
  background:var(--app);flex:none;padding-bottom:env(safe-area-inset-bottom)
}
.tabbar button{background:none;border:none;padding:8px 2px 9px;min-height:56px;font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar .ic{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-current="page"]{color:var(--accent-strong);font-weight:600}
.tabbar button[aria-current="page"] .ic{stroke-width:2.1}

/* ---------- รายการ ---------- */
.list{padding:14px 16px 24px}
.list > .btn{max-width:260px}
.daygrp{margin-bottom:22px}
.dayhd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.dayhd h3{font-size:.9rem;color:var(--accent-strong);margin:0;font-weight:600}
.dayhd .mini{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:4px 11px;color:var(--accent-strong);border-color:var(--accent-line)}
.dayhd .mini svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:none}
.row .tm{font-family:var(--f-mono);font-size:.82rem;color:var(--ink-2);flex:none;width:94px;padding-top:1px;font-variant-numeric:tabular-nums}
.row .mn{flex:1;min-width:0}
.row .mn b{display:block;font-weight:600;font-size:.92rem;line-height:1.4;overflow-wrap:anywhere}
.row .mn small{color:var(--muted);font-size:.8rem}
.rm{display:inline-block;font-size:.78rem;font-weight:600;padding:.02em .5em;border-radius:5px;margin-right:6px}
.rm.or{background:var(--or-soft);color:var(--or-ink)}
.rm.gr{background:var(--gr-soft);color:var(--gr-ink)}
.empty{color:var(--muted);font-size:.88rem;padding:6px 0;margin:0}
.empty.bad{color:var(--crit)}

.mycard{border:1px solid var(--line-soft);background:var(--card);border-radius:12px;padding:12px 13px;margin-bottom:10px}
.mycard b{display:block;font-size:.95rem;margin-bottom:2px;overflow-wrap:anywhere}
.mycard .meta{font-size:.84rem;color:var(--muted);margin-bottom:10px}
.mycard .ask{font-size:.86rem;color:var(--crit);font-weight:500;margin:0 0 7px}
.mycard .ctl{display:flex;gap:8px}
.mini{border:1px solid var(--line);background:none;border-radius:9px;padding:6px 14px;min-height:42px;font-size:.86rem;color:var(--ink-2)}
.mini.danger{color:var(--crit);border-color:var(--line)}
.mini.solid{background:var(--crit);border-color:var(--crit);color:var(--on-crit);font-weight:500}
.mini:disabled{opacity:.55;cursor:default}

/* ---------- หน้าจอผลลัพธ์ / โหลด / error ---------- */
.screen{
  position:fixed;inset:0;background:var(--app);z-index:40;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:28px 22px;text-align:center
}
.screen.on{display:flex}
.tick{width:56px;height:56px;border-radius:99px;background:var(--accent-soft);color:var(--ok);display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px}
.tick svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tick.warn{background:none;border:2px solid var(--crit);color:var(--crit)}
.screen h2{font-size:1.2rem;margin:0 0 4px;font-weight:600}
.screen h2:focus{outline:none}
.screen .sub{color:var(--muted);font-size:.9rem;margin:0 0 18px;max-width:34ch;white-space:pre-line;min-height:1.6em}
#scLoading .sub{margin:14px 0 0}
.bubble{
  width:100%;max-width:320px;text-align:left;background:var(--accent-soft);
  border-radius:4px 14px 14px 14px;padding:11px 13px;font-size:.88rem;line-height:1.65;
  white-space:pre-line;color:var(--ink);font-variant-numeric:tabular-nums;user-select:text;-webkit-user-select:text
}
.screen .btn{max-width:260px}
.spin{width:28px;height:28px;border-radius:99px;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- ยืนยันก่อนส่งเข้ากลุ่ม ---------- */
.sheet{position:fixed;inset:0;z-index:45;background:var(--scrim);display:none;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
.sheet-in{
  width:100%;max-width:480px;background:var(--card);border-radius:18px 18px 0 0;
  padding:20px 18px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--pop);
  animation:rise .22s cubic-bezier(.2,.8,.2,1)
}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
.sheet h2{font-size:1.08rem;margin:0 0 2px;font-weight:600}
.sheet .sub{color:var(--muted);font-size:.86rem;margin:0 0 12px}
.sheet .bubble{max-width:none}
.sheet .btn{margin-top:14px}
.sheet .btn.ghost{margin-top:8px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:16px;right:16px;bottom:calc(66px + env(safe-area-inset-bottom));z-index:60;
  background:var(--ink);color:var(--app);border-radius:12px;padding:11px 14px;font-size:.88rem;line-height:1.5;
  box-shadow:var(--pop);opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)
}
.toast.on{opacity:1;transform:none}
.toast.bad{background:var(--crit);color:var(--on-crit)}

@media (prefers-reduced-motion:reduce){
  .spin{animation-duration:2.4s}
  .picker.on,.sheet-in{animation:none}
  .chev,.toast{transition:none}
}