/* t-gu.com — one stylesheet. Colours only in :root (DESIGN.md "warm paper ledger"); restyle = edit this block. */
:root{
  --paper:#f7f6f2; --card:#fffefb; --field:#fcfbf7;
  --ink:#1c1b18; --muted:#6b675d;
  --line:#d8d4c8; --line2:#e8e4da;
  --accent:#1f6b4a; --accent-ink:#fff; --accent-hover:#185539; --accent-ring:rgba(31,107,74,.15);
  --ok:#3d8b6e; --warn:#9a3412; --warn-bg:#fdf0e8; --warn-line:#e7c3ad;
  --mine:#e6efe9; --theirs:#fffefb; --system:#6b675d;
  --overlay:rgba(28,27,24,.86); --on-overlay:#f7f6f2;   /* the picture viewer / sheet backdrop stay dark in both themes */
  --strip:#1c1b18; --strip-ink:#f7f6f2; --qr-bg:#fff;   /* operator header strip; a QR code always on white (scanners) */
  color-scheme:light;
  --sans:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
/* TGU-B16 dark: follows the device unless 「画面の色」 pins light / dark (<html data-theme>, written by render_page) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --paper:#191815; --card:#22211d; --field:#2a2924;
  --ink:#ecebe5; --muted:#a8a498;
  --line:#45423a; --line2:#2f2d28;
  --accent:#55b88b; --accent-ink:#0c1b13; --accent-hover:#6cc79d; --accent-ring:rgba(85,184,139,.28);
  --ok:#6cc79d; --warn:#f2a57f; --warn-bg:#3b231a; --warn-line:#74412c;
  --mine:#21382c; --theirs:#22211d; --system:#a8a498;
  --overlay:rgba(0,0,0,.86); --strip:#0d0c0a; --strip-ink:#ecebe5;
  color-scheme:dark;
}
}
:root[data-theme="dark"]{
  --paper:#191815; --card:#22211d; --field:#2a2924;
  --ink:#ecebe5; --muted:#a8a498;
  --line:#45423a; --line2:#2f2d28;
  --accent:#55b88b; --accent-ink:#0c1b13; --accent-hover:#6cc79d; --accent-ring:rgba(85,184,139,.28);
  --ok:#6cc79d; --warn:#f2a57f; --warn-bg:#3b231a; --warn-line:#74412c;
  --mine:#21382c; --theirs:#22211d; --system:#a8a498;
  --overlay:rgba(0,0,0,.86); --strip:#0d0c0a; --strip-ink:#ecebe5;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);-webkit-text-size-adjust:100%}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}
a{color:var(--accent)}

/* ---- forms / buttons ---- */
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
input,textarea,select{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:3px;padding:9px 10px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.btn-primary,.btn-secondary,.btn-danger{display:inline-block;font:inherit;font-weight:600;border-radius:4px;padding:9px 16px;cursor:pointer;text-align:center;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{opacity:.55;cursor:default}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:var(--warn);color:var(--accent-ink);border:1px solid var(--warn)}
.btn-link{background:none;border:none;color:var(--accent);font:inherit;font-size:13px;padding:4px 0;cursor:pointer;text-align:left}
.stack{display:flex;flex-direction:column;gap:12px}
.hint{margin:0;font-size:13px;color:var(--muted)}
.form-error{margin:0;font-size:13px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:3px;padding:8px 10px}
.notice{border:1px solid var(--line);background:var(--card);border-radius:4px;padding:12px;font-size:13px}
.notice p{margin:0 0 6px}
details.tips{font-size:13px;color:var(--muted);border-top:1px solid var(--line2);padding-top:8px}
details.tips summary{cursor:pointer}

/* ---- login / invite / setup card ---- */
.auth{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:48px 16px}
.auth-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:24px 20px}
.auth-title{margin:0 0 20px;font-size:17px;font-weight:600;letter-spacing:.02em}
.step-title{margin:0;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
.step-no{font:12px var(--mono);color:var(--muted)}
/* password + 「表示」 on one row (TGU-R2); the label's own text stays above */
.pw-row{display:flex;gap:6px}
.pw-row input{flex:1;min-width:0;width:auto}
.pw-toggle{flex:none;padding:0 12px;white-space:nowrap}
.login-memo{padding:6px 8px;border-radius:4px;background:var(--paper);color:var(--ink);overflow-wrap:anywhere}
.help-os{margin:8px 0 0;font-size:14px;font-weight:600}
.help-steps ol,.help-steps ul{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.6}
.help-steps .icon{display:inline-block;width:18px;height:18px;vertical-align:-4px}   /* icons inside a sentence */
.choice{display:flex;flex-direction:column;gap:8px}
.choice-item{display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;background:var(--field);border:1px solid var(--line);border-radius:4px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.choice-item span{font-size:12px;color:var(--muted)}
.choice-item[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.qr:empty{display:none}
.qr{align-self:center;padding:8px;background:var(--qr-bg);border:1px solid var(--line2)}
.qr img{display:block;width:180px;height:180px;image-rendering:pixelated}
.backup-list{margin:0;padding-left:28px;columns:2;font-size:14px;line-height:1.9}

/* ---- operator panel (DESIGN.md: dark header strip, bordered tables, mono data) ---- */
body.admin{font-size:14px}
.admin-bar{display:flex;justify-content:space-between;align-items:center;background:var(--strip);color:var(--strip-ink);padding:10px 16px}
.admin-brand{color:var(--strip-ink);text-decoration:none;font-weight:600}
.admin-role{font-size:12px;opacity:.8}
.admin-nav{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--card);padding:0 12px}
.admin-nav a{padding:10px 12px;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.admin-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.admin-main{max-width:1100px;margin:0 auto;padding:20px 16px 48px}
.admin-main h1{font-size:18px;font-weight:600;margin:0 0 16px}
.admin-main h2{font-size:14px;font-weight:600;margin:0 0 8px}
.flash{border:1px solid var(--line);background:var(--card);border-left:3px solid var(--ok);padding:8px 12px;margin:0 0 16px}
.panel{background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:16px;margin:0 0 16px}
.search{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.search input{flex:1;min-width:200px}
.search select,.search input[type="date"]{width:auto}
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line2);border-radius:4px;margin:0 0 12px}
table{border-collapse:collapse;width:100%}
th{background:var(--paper);color:var(--muted);font-size:12px;font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
tr:last-child td{border-bottom:none}
.num{text-align:right}
.muted{color:var(--muted)}
.small{font-size:12px}
.clip{max-width:420px;overflow:hidden;text-overflow:ellipsis}
.row-error td{background:var(--warn-bg)}
.pager{color:var(--muted);font-size:12px}
.pager a{margin:0 6px}
.badge{display:inline-block;font-size:11px;border-radius:3px;padding:1px 7px;white-space:nowrap}
.badge-neutral{background:var(--line2);color:var(--muted)}
.badge-ok{background:rgba(61,139,110,.12);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:16px;margin:0 0 16px}
.kv dt{color:var(--muted);font-size:12px}
.kv dd{margin:0}
form.inline{display:inline-flex;gap:8px;align-items:flex-end;margin:0 8px 8px 0;flex-wrap:wrap}
form.inline label{flex-direction:row;align-items:center;gap:8px}
form.inline select{width:auto}
.actions{white-space:nowrap}
.btn-link.danger{color:var(--warn)}
ul.plain{margin:0;padding-left:18px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.thread{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.reply{background:var(--card);border:1px solid var(--line2);border-radius:4px;padding:10px 12px}
.reply-admin{border-left:3px solid var(--accent)}
.reply header{font-size:12px;margin:0 0 4px}
.reply-body{white-space:normal;overflow-wrap:anywhere}
.copy-src{font-size:13px}

/* ---- chat (messenger restraint: flat surfaces, 1px dividers, one accent, system fonts) ---- */
body.chat-page{height:100%;overflow:hidden}
/* minmax(0,…): a plain 1fr track grows to its content's min-content width — one long no-wrap reply quote pushed the
   chat to 499px on a 390px phone and hid the header buttons off-screen (2026-10-15) */
.app{display:grid;grid-template-columns:320px minmax(0,1fr);height:100dvh;width:100%;overflow:clip}
/* overflow:clip above = nothing inside the app can make the page wider than the screen, so the phone can never shift
   sideways (the owner's phone stayed shifted after one overflow, 2026-10-15) */
.icon{width:22px;height:22px;display:block}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:none;color:var(--ink);border-radius:4px;cursor:pointer;padding:0;font:inherit}
.icon-btn:hover{background:var(--line2)}
.bar{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);background:var(--card);padding-top:env(safe-area-inset-top)}
.bar-title{margin:0;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-title-btn{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1;border:none;background:none;padding:4px 0;cursor:pointer;text-align:left;color:var(--ink);font:inherit}
.bar-sub{font-size:12px;color:var(--muted)}
/* a long group name / alias must truncate, never widen the page (a phone then zooms the whole app out — 2026-10-15) */
.bar-title-btn>*{max-width:100%}
.bar-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-actions{display:flex;gap:2px;margin-left:auto}
.pane-list{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--card);min-height:0}
.pane-list .bar-title{flex:1}
.conn,.push-off{margin:0;padding:8px 14px;font-size:13px;border-bottom:1px solid var(--line2)}
.conn{background:var(--warn-bg);color:var(--warn)}
.push-off{background:var(--paper);color:var(--muted)}
/* 使い方のヒント (2026-10-19): a quiet strip like .push-off, one tip at a time */
.tips{padding:4px 6px 8px 14px;border-bottom:1px solid var(--line2);background:var(--paper);font-size:13px;color:var(--ink)}
.tips-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}
.tips-close{width:30px;height:30px}
.tips-close .icon{width:16px;height:16px}
.tips-text{margin:0 8px 2px 0;line-height:1.55}
.tips-actions{margin:0;display:flex;gap:16px;flex-wrap:wrap}
.group-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.group-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pic name time" "pic last badges";gap:2px 10px;padding:10px 14px;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none}
.group-pic{grid-area:pic;align-self:center}
.group-pic .avatar{width:42px;height:42px;font-size:16px}
.group-pic .avatar-group{border-radius:10px}
.group-item:hover{background:var(--paper)}
.group-item.active{background:var(--mine)}
.group-name{grid-area:name;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-time{grid-area:time;font-size:11px;color:var(--muted)}
.group-last{grid-area:last;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.draft-mark{color:var(--warn)}
/* report sheet (TGU-A6): radio rows */
.choices{border:none;margin:0;padding:0;gap:8px}
.choices legend{font-size:13px;color:var(--muted);padding:0;margin-bottom:4px}
.choice{flex-direction:row;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
.choice input{width:auto;margin:0}
/* ↓ / @ buttons (TGU-A5): anchored above the composer box, so they rise with the reply chip and attachment chips and
   never cover them; absolutely positioned inside .composer (position:relative) → nothing widens the page */
.fabs{position:absolute;right:12px;bottom:calc(100% + 10px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;z-index:2}
.scroll-fab{pointer-events:auto;position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.scroll-fab .icon{width:22px;height:22px;transform:rotate(-90deg)}
#fab-at{color:var(--accent)}
.fab-count{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;display:inline-flex;align-items:center;justify-content:center}
/* 写真とファイル sheet (TGU-A4) */
.file-tabs{display:flex;border-bottom:1px solid var(--line)}
.file-tab{flex:1;border:none;background:none;padding:10px;font:inherit;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.file-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px}
.file-cell{position:relative;aspect-ratio:1;border:none;padding:0;background:var(--field);cursor:pointer;display:flex;align-items:center;justify-content:center}
.file-cell img{width:100%;height:100%;object-fit:cover;display:block}
.file-cell .att-play{position:relative;inset:auto;margin:0}
.file-list{display:flex;flex-direction:column}
.file-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line2);background:none;padding:10px 16px;font:inherit;color:var(--ink);cursor:pointer}
.group-badges{grid-area:badges;display:flex;gap:4px;align-items:center}
.badge-unread{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.badge-mention{font-weight:700;color:var(--accent)}
.muted-mark{font-size:11px;color:var(--muted)}
.empty{color:var(--muted);font-size:13px;padding:16px 14px;margin:0}
.pane-chat{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--paper)}
.chat{display:flex;flex-direction:column;min-height:0;flex:1;position:relative}
.chat.dropping::after{content:"ここにドロップして添付";position:absolute;inset:52px 12px 12px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--accent);background:var(--card);color:var(--accent);font-weight:600;border-radius:6px;opacity:.95}
.chat-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 8px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.load-older{align-self:center;margin:4px 0 10px;border:1px solid var(--line);background:var(--card);border-radius:4px;padding:6px 12px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.day{align-self:center;font-size:12px;color:var(--muted);margin:12px 0 6px}
.unread-line{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;margin:8px 0}
.unread-line::before,.unread-line::after{content:"";flex:1;border-top:1px solid var(--accent)}
.msg-system{align-self:center;font-size:12px;color:var(--system);margin:6px 0}
.msg{display:flex;align-items:flex-end;gap:8px;margin-top:8px;max-width:100%;position:relative}
.msg.grouped{margin-top:2px}
.msg.mine{flex-direction:row-reverse}
.avatar{width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover;align-self:flex-start}
.avatar-gap{width:32px;flex:none}
.avatar-initial{display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:hsl(var(--hue) 35% 30%);background:hsl(var(--hue) 30% 88%)}
.bubble{max-width:min(560px,78%);background:var(--theirs);border:1px solid var(--line2);border-radius:4px 10px 10px 10px;padding:6px 10px;overflow-wrap:anywhere}
.msg.mine .bubble{background:var(--mine);border-color:transparent;border-radius:10px 4px 10px 10px}
.msg.grouped .bubble{border-radius:10px}
.who{display:flex;gap:6px;align-items:center;font-size:12px;margin:0 0 2px}
.who-name{color:var(--muted);font-weight:600}
.who-badge{font-size:10px;line-height:1;padding:2px 5px;border-radius:3px;background:var(--ink);color:var(--paper)}
.text{margin:0;white-space:pre-wrap}
/* text formatting (TGU-B8): elements built by bodyNodes(), never from HTML */
.text .fmt-code{font-family:var(--mono);font-size:.9em;padding:0 3px;border-radius:3px;background:var(--line2)}
.text .fmt-pre{margin:4px 0;padding:6px 8px;border-radius:4px;background:var(--line2);overflow-x:auto;white-space:pre;font:12px/1.5 var(--mono)}
.text .fmt-quote{margin:2px 0;padding:0 0 0 8px;border-left:3px solid var(--accent);color:var(--muted);white-space:pre-wrap}
.format-btn{font-weight:700;font-size:14px;letter-spacing:-.5px}
.text a{color:var(--accent);word-break:break-all}
.mention{color:var(--accent);font-weight:600}
.deleted{margin:0;color:var(--muted);font-style:italic;font-size:13px}
.meta{display:flex;gap:6px;justify-content:flex-end;font-size:11px;color:var(--muted);margin-top:2px}
.meta-pin{color:var(--accent)}
.quote{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;border:none;border-left:3px solid var(--line);background:var(--paper);padding:4px 8px;margin:0 0 4px;border-radius:2px;cursor:pointer;font:inherit;color:var(--ink)}
.quote-who{font-size:12px;font-weight:600;color:var(--muted)}
.quote-text{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.reactions{display:flex;gap:4px;flex-wrap:wrap;margin:0 40px}
.msg.mine .reactions{justify-content:flex-end}
.msg .reactions{position:absolute;bottom:-20px;left:0;right:0}
.msg:has(.reactions){margin-bottom:22px}
.rx{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:1px 8px;font-size:12px;cursor:pointer}
.rx-mine{border-color:var(--accent);background:var(--mine)}
.msg-more{opacity:0;width:30px;height:30px;color:var(--muted);align-self:center}
.msg:hover .msg-more,.msg-more:focus-visible{opacity:1}
.flash-msg .bubble{box-shadow:0 0 0 3px var(--accent-ring)}
/* readers under a message (TGU-R1): lined up with the bubble — after the 32px avatar + 8px gap, or flush right for mine */
.readers{display:flex;align-items:center;gap:2px;align-self:flex-start;margin:2px 0 0 40px;padding:0;border:none;background:none;cursor:pointer;color:var(--muted)}
.readers.mine{align-self:flex-end;margin-left:0}
.readers.direct{margin-left:0}
.readers .avatar{width:18px;height:18px;font-size:10px;align-self:center}
.readers-more{font-size:11px;margin-left:3px}
.member-seen{font-size:12px;color:var(--muted);white-space:nowrap}
.member-seen.online{color:var(--accent);font-weight:600}
.atts{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.att-media{position:relative;display:block;border:none;padding:0;background:none;cursor:zoom-in;max-width:280px}
.att-media img{display:block;max-width:100%;height:auto;max-height:280px;border-radius:6px;object-fit:cover}
.att-play{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;background:var(--overlay)}
.att-play::after{content:"";position:absolute;left:17px;top:13px;border-left:14px solid var(--paper);border-top:9px solid transparent;border-bottom:9px solid transparent}
.att-file{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:4px;padding:8px 10px;color:var(--ink);text-decoration:none;max-width:320px}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-meta{font-size:11px;color:var(--muted);flex:none}
.composer{border-top:1px solid var(--line);background:var(--card);padding:6px 8px calc(6px + env(safe-area-inset-bottom));position:relative}
/* multi-select (TGU-B10): the bar takes the composer's place; a selected message is outlined */
.select-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:2px}
.select-bar[hidden]{display:none}
.select-count{font-size:13px;font-weight:600}
.select-actions{display:flex;flex-wrap:wrap;gap:6px}
.select-actions .btn-secondary{padding:6px 10px;font-size:13px}
.select-actions .btn-secondary.danger{color:var(--warn);border-color:var(--warn)}
.select-actions [hidden]{display:none}
.chat.selecting .composer-row,.chat.selecting .reply-chip,.chat.selecting .att-chips,.chat.selecting .composer-note,.chat.selecting .mention-pop{display:none}
.chat.selecting .msg{cursor:pointer}
.msg.selected .bubble{outline:2px solid var(--accent);outline-offset:2px}
.composer-row{display:flex;align-items:flex-end;gap:6px}
.composer-row textarea{flex:1;resize:none;min-height:40px;max-height:160px;line-height:1.5;border-radius:4px}
.send-btn{width:42px;height:40px;border:none;border-radius:4px;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}   /* long-press = send options (B9) */
.send-btn:disabled{opacity:.55}
.composer-note{margin:4px 8px;font-size:13px;color:var(--muted)}
.reply-chip{display:flex;gap:8px;align-items:center;font-size:12px;padding:4px 8px;margin:0 0 6px;border-left:3px solid var(--accent);background:var(--paper)}
.chip-label{font-weight:600;flex:none}
.chip-text{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.att-chips{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.att-chip{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:4px;padding:2px 2px 2px 8px;font-size:12px;max-width:100%;background:var(--field)}
.att-chip.error{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)}
.att-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.att-chip-meta{color:var(--muted)}
.att-chip .icon-btn{width:26px;height:26px}
.att-chip-orig{font-size:11px;white-space:nowrap}
.mention-pop{position:absolute;bottom:100%;left:48px;list-style:none;margin:0;padding:4px 0;background:var(--card);border:1px solid var(--line);border-radius:4px;min-width:200px;max-height:240px;overflow-y:auto}
.mention-pop li{display:flex;gap:8px;align-items:center;padding:6px 12px;cursor:pointer}
.mention-pop li[aria-selected="true"]{background:var(--mine)}
.sheet{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet-panel{background:var(--card);width:100%;max-width:520px;max-height:80dvh;display:flex;flex-direction:column;border-radius:10px 10px 0 0;padding-bottom:env(safe-area-inset-bottom)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line2)}
.sheet-head h2{margin:0;font-size:15px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-body{overflow-y:auto}
.pad{padding:16px}
.member-list,.result-list{list-style:none;margin:0;padding:0}
.member-row{display:flex;gap:10px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line2)}
.member-name{flex:1}
.rx-emoji{width:24px;text-align:center}
.result{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line2);background:none;padding:10px 16px;cursor:pointer;font:inherit;color:var(--ink)}
.result-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.result-text{font-size:14px}
.search-form{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.search-form .btn-primary{flex-shrink:0;white-space:nowrap}   /* 「検索」 stays one line on a phone */
.search-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line2)}   /* B7 */
.search-tools select,.search-tools input{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--field);color:var(--ink)}
.search-day{display:flex;gap:6px;align-items:center}
.search-day .btn-secondary{padding:6px 10px;font-size:13px}
.menu{display:flex;flex-direction:column}
.menu-item{border:none;border-bottom:1px solid var(--line2);background:none;text-align:left;padding:13px 16px;font:inherit;cursor:pointer;color:var(--ink)}
.menu-item.danger{color:var(--warn)}
.menu-item.with-icon{display:flex;align-items:center;gap:14px}
.menu-item.with-icon .icon{color:var(--muted);flex:none}
.menu-item.danger .icon{color:var(--warn)}
.fwd{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--accent);margin:0 0 2px}
.fwd .icon{width:14px;height:14px}
.fwd strong{font-weight:600}
@media (pointer:coarse){
  /* a tap opens the message menu (with コピー), so the browser's own long-press selection must not get in the way */
  .bubble{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .msg.swipe-ready .bubble{box-shadow:0 0 0 2px var(--accent-ring)}
}
.rx-pick{display:flex;justify-content:space-around;padding:10px 8px;border-bottom:1px solid var(--line2)}
.rx-pick-btn{font-size:22px;border:1px solid transparent;background:none;border-radius:8px;width:44px;height:44px;cursor:pointer}
.rx-pick-btn.rx-mine{border-color:var(--accent);background:var(--mine)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:4px;font-size:13px;z-index:30;max-width:90vw}
.viewer{border:none;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:var(--overlay);color:var(--on-overlay)}
.viewer::backdrop{background:var(--overlay)}
.viewer[open]{display:flex;flex-direction:column}
.viewer-bar{display:flex;gap:12px;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.viewer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.viewer-count{font-size:12px;opacity:.8}
.viewer-btn{color:var(--on-overlay);background:none;border:1px solid currentColor;border-radius:4px;padding:4px 10px;font:inherit;font-size:13px;text-decoration:none;cursor:pointer}
.viewer-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 8px 16px}
.viewer-stage.actual{overflow:auto;align-items:flex-start;justify-content:flex-start}
.viewer-media{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.viewer-stage.actual .viewer-media{max-width:none;max-height:none;cursor:zoom-out}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:none;background:none;color:var(--on-overlay);font-size:40px;cursor:pointer}
.viewer-nav.prev{left:4px}
.viewer-nav.next{right:4px}
.only-narrow{display:none}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .pane-chat{display:none}
  body.in-chat .pane-list{display:none}
  body.in-chat .pane-chat{display:flex}
  .only-narrow{display:inline-flex}
  .chat-empty{display:none}
  .bubble{max-width:82%}
  .msg-more{display:none}
  .sheet-panel{max-width:none}
}

/* ---- DM side: profile, contacts, tappable authors ---- */
.avatar-btn,.who-btn{border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.avatar-btn{align-self:flex-start;border-radius:50%}
.who-btn:hover .who-name{text-decoration:underline}
.member-row-wrap{list-style:none}
.row-btn{display:flex;gap:10px;align-items:center;width:100%;padding:8px 16px;border:none;border-bottom:1px solid var(--line2);background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.row-btn:hover{background:var(--paper)}
.row-btn .avatar{width:36px;height:36px}
.contact-names{display:flex;flex-direction:column;flex:1;min-width:0}
.contact-names .member-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-sub{font-size:12px;color:var(--muted)}
.contact-time{font-size:11px;color:var(--muted);flex:none}
.contacts-tools{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line2)}
.contacts-tools input{flex:1}
.contacts-tools .btn-link{white-space:nowrap}
.my-code{margin:0;padding:12px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line2)}
.my-code strong{color:var(--ink);letter-spacing:.06em}
.profile-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px 16px;border-bottom:1px solid var(--line2)}
.profile-head .avatar{width:76px;height:76px;font-size:30px;align-self:center}
.profile-name{display:flex;gap:6px;align-items:center;font-size:18px;font-weight:600;max-width:100%;overflow-wrap:anywhere;text-align:center}
.profile-sub{font-size:13px;color:var(--muted)}
.my-code-big{margin:0;font-size:22px;letter-spacing:.1em}
.block-list{list-style:none;margin:0;padding:0}
.block-list li{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line2)}
.block-list li>:last-child{flex-shrink:0;white-space:nowrap;margin-left:12px}   /* the action never breaks into 「ログア／ウト」 */

/* ---- new message / new group ---- */
.pane-list{position:relative}
.group-list{padding-bottom:84px}
.fab{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(28,27,24,.25);z-index:5}
.fab:hover{background:var(--accent-hover)}
.fab .icon{width:24px;height:24px}
.member-row-wrap{display:flex;align-items:center}
.row-action{padding:0 16px;white-space:nowrap}
.pick-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 0}
.pick-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--mine);border-radius:16px;padding:2px 10px 2px 2px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.pick-chip .avatar{width:22px;height:22px;font-size:11px;flex:none}
.pick-chip{max-width:100%}
.pick-chip span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-mark{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none}
.pick-mark.on{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--card)}
.pick-foot{position:sticky;bottom:0;padding:10px 16px;background:var(--card);border-top:1px solid var(--line2)}
.pick-next{width:100%}
.pad-x{padding:0 16px}

/* ---- settings ---- */
body.settings-page{overflow:auto}
.settings{max-width:560px;margin:0 auto;padding:16px 16px 48px}
.settings h2{font-size:15px;margin:0}
.form-ok{margin:0;font-size:13px;color:var(--ok)}
.center{text-align:center}
.att-video{position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:8px 12px 8px 8px;cursor:pointer;max-width:320px;font:inherit;color:var(--ink);text-align:left}
.att-video .att-play{position:relative;inset:auto;margin:0;flex:none;width:36px;height:36px}
.att-video .att-play::after{left:14px;top:11px;border-left-width:11px;border-top-width:7px;border-bottom-width:7px}
button.att-chip-name{border:none;background:none;padding:0;font:inherit;color:inherit;cursor:text;text-decoration:underline dotted}
.att-play{display:block}
/* several photos in one message: a tight 2-column grid (single photo keeps its natural shape) */
.atts:has(.att-media ~ .att-media){display:grid;grid-template-columns:repeat(2,minmax(0,140px));gap:4px}
.atts:has(.att-media ~ .att-media) .att-media img{width:140px;height:140px;object-fit:cover}
.atts:has(.att-media ~ .att-media) .att-video,.atts:has(.att-media ~ .att-media) .att-file{grid-column:1 / -1}
/* conversation export (admin_export.php): the page is printed to PDF — no panel chrome on paper */
@media print{.admin-bar,.admin-nav,.no-print{display:none}.admin-main{max-width:none;padding:0}.table-wrap{overflow:visible;border:0}.export-table td,.export-table th{font-size:10px;padding:4px 6px}}
/* pinned bar under the chat header (TGU-B1) */
.pin-bar{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:6px 14px;border:0;border-bottom:1px solid var(--line);background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.pin-bar[hidden]{display:none}
.pin-bar-label{font-size:11px;font-weight:600;color:var(--accent)}
.pin-bar-text{font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stranger-bar{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:8px}
.stranger-bar[hidden]{display:none}
.stranger-text{margin:0;font-size:13px;color:var(--ink)}
.stranger-actions{display:flex;flex-wrap:wrap;gap:8px}
.stranger-actions .btn-secondary{padding:6px 12px;font-size:13px}
.stranger-actions .btn-secondary.danger{color:var(--warn);border-color:var(--warn)}
/* scheduled posts (TGU-B3) */
.schedule-btn{width:auto;padding:0 8px;font-size:12px;font-weight:600;color:var(--accent)}
.scheduled-list{list-style:none;margin:0;padding:0 14px}
.scheduled-item{padding:10px 0;border-bottom:1px solid var(--line2)}
.clip-3{margin:0;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.who-badge.warn{background:transparent;color:var(--warn);border:1px solid var(--warn);white-space:nowrap}   /* 投稿制限中 (B5) */
/* polls (TGU-B2) */
.poll{display:flex;flex-direction:column;gap:6px;min-width:min(240px,62vw)}
.poll-q{font-weight:600}
.poll-meta{margin:0;font-size:11px;color:var(--muted)}
.poll-opt{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.poll-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-ring)}
.poll-opt.poll-res{cursor:pointer}   /* not .result: that is the search-result row (column flex) */
.poll-opt.poll-res:disabled{cursor:default;opacity:1;color:var(--ink)}
.poll-opt.mine{border-color:var(--accent)}
.poll-bar{position:absolute;inset:0 auto 0 0;width:var(--pct,0%);background:var(--accent-ring);pointer-events:none}
.poll-text{position:relative;flex:1}
.poll-count{position:relative;font-size:12px;color:var(--muted);white-space:nowrap}
.poll-send{align-self:flex-start;padding:6px 14px}
.poll-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px}
/* TGU-B16: pinned chats / 「未読にする」 in the list (long-press or right-click), a reply that quotes part of a message */
.group-item{-webkit-touch-callout:none}   /* iOS: the long-press opens the chat menu, not the link preview */
.pin-mark{font-size:11px;color:var(--muted)}
.badge-unread.dot{min-width:12px;width:12px;height:12px;padding:0}
.quote-pick{min-height:120px;max-height:50vh;resize:vertical;white-space:pre-wrap;user-select:text;-webkit-user-select:text}