/* ∅ のウェブ版だけの書式。本家の style.css の後に読む */

/* 名前の後ろの出所の印。塗っていない小さな○と出所の名前を、淡い字で添える。押すとその出所に縮め、縮めているあいだは○を塗る。
   窓はブルスコブルー、フィードは臙脂（iPhone 版の Source.feedColor）。仮の語の○は点線だ */
.nm-in .src {
  display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: calc(var(--stamp-fs) * 0.92); color: var(--blusco); opacity: .6; white-space: nowrap;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.nm-in .src.feed { color: #a0404e; }
:root[data-theme="dark"] .nm-in .src.feed { color: #e0857f; }
.nm-in .src i { flex: none; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.nm-in .src.tmp i { border-style: dotted; }
.nm-in .src.on { opacity: 1; }
.nm-in .src.on i { background: currentColor; }
.nm-in .src:hover { opacity: 1; }

/* 会話に縮めているあいだは、会話の印を出さない。会話はもう線に並んでいる */
#page.in-convo .cv { display: none; }

#page .empty { text-align: center; color: var(--stamp); font-size: 12.5px; padding: 40vh 20px 0; }

/* 上のカプセル。縮めているあいだだけ、蛇腹の印を出す */
#here {
  position: absolute; left: 0; right: 0; top: calc(22px + env(safe-area-inset-top)); z-index: 21;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
#here[hidden] { display: none; }
#here > * { pointer-events: auto; }
#here .cap {
  position: relative; width: 52px; height: 30px; border: 0; border-radius: 16px; display: grid; place-items: center; color: var(--ink);
  background: rgb(var(--w) / .82); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 0 0 .7px rgb(var(--k) / .18), 0 4px 16px rgba(0, 0, 0, .08); cursor: pointer;
}
#here .cap svg { width: 22px; height: 11px; transition: transform .25s; }
#here .cap:hover svg { transform: scaleX(.8); }
/* 印の外の細い輪。ゆっくり明滅し、読んでいるあいだは速い。光の強さ --b は breath.js が渡す */
#here .cap::after {
  content: ""; position: absolute; inset: -3px; border-radius: 19px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(58, 141, 255, calc(.15 + .5 * var(--b, 0))), 0 0 calc(2px + 4px * var(--b, 0)) rgba(58, 141, 255, calc(.3 * var(--b, 0)));
}
#here .keep {
  border: 0; border-radius: 14px; padding: 6px 12px; font-size: 12px; color: var(--blusco); cursor: pointer;
  background: rgb(var(--w) / .9); box-shadow: 0 0 0 .7px rgb(var(--bl) / .4);
}
#here .pcard {
  width: min(320px, calc(100% - 32px)); padding: 12px 14px; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 .7px rgb(var(--k) / .14), 0 8px 28px rgba(0, 0, 0, .1); animation: zeroUp .25s ease-out;
}
#here .pcard .ph { display: flex; align-items: center; gap: 10px; }
#here .pcard img, #here .pcard .ph > i { width: 40px; height: 40px; border-radius: 50%; background: var(--fill); flex: none; }
#here .pcard b { display: block; font-size: 14px; }
#here .pcard small { color: var(--stamp); font-size: 11.5px; }
#here .pcard p { margin: 8px 0 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* 下の帯。iPhone 版の Bar と同じ並びだ。左から自分のアイコン（42px）・ガラスの書く欄（角22px）・ブルスコ時計（52px）を、
   下の端でそろえて10px ずつあけて置く。帯そのものに地は敷かない。前は本家のドックの楕円に書く欄を入れ、時計は帯の外の右上にあった（2026-10-22、大田垣の指摘） */
#dock {
  left: 14px; right: 14px; width: auto; transform: none; bottom: calc(6px + env(safe-area-inset-bottom));
  padding: 0; gap: 10px; align-items: flex-end; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
/* アイコンは時計（52px）と並べて見劣りしない46px にする。パソコンでは本家のドックの寸法（22px）が勝っていたので、.desk の書き方でも上書きする（2026-10-22、大田垣の指摘） */
#dock .me, .desk #dock .me { width: 46px; height: 46px; flex: none; }
#dock .me img, #dock .me i, .desk #dock .me img, .desk #dock .me i { width: 46px; height: 46px; }
#dock .me.loading::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(58, 141, 255, calc(.25 + .75 * var(--b, 0)));
}
#dock .write {
  flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 6px;
  padding: 11px 16px; border-radius: 22px; cursor: text;
  background: rgb(var(--w) / .82); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 0 0 .7px rgb(var(--k) / .18), 0 6px 24px rgba(0, 0, 0, .08);
}
#dock .write .lock { font-size: 11px; color: var(--blusco); }
#dock .write textarea {
  flex: 1; min-width: 0; border: 0; outline: none; background: none; resize: none; padding: 0; margin: 0;
  font: inherit; font-size: 15px; line-height: 21px; color: var(--ink); max-height: 126px; overflow-y: auto;
}
#dock .write textarea::placeholder { color: rgb(var(--k) / .32); }
:root:not(.desk) #dock .write textarea { font-size: 16px; }
/* 帯の中の時計は、いつも出す。スクロールで出入りさせない */
#dock .clock.docked, #dock .clock.docked[hidden] {
  position: relative; right: auto; bottom: auto; flex: none; width: 52px; height: 52px; display: block;
  opacity: 1; pointer-events: auto; animation: none;
}
#page { padding-bottom: 80px; }

/* 基本の設定。自分のアイコンを押すと、下の帯の上に縦型のカプセルが開く。
   真ん中へは margin で寄せる。transform で寄せると、出るときの動き（puffIn）の transform に消されて右へずれた */
.basics {
  position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(76px + env(safe-area-inset-bottom)); width: min(300px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px;
  background: rgb(var(--w) / .9); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 0 0 .7px rgb(var(--k) / .18), 0 10px 32px rgba(0, 0, 0, .14); animation: zeroUp .25s ease-out;
}
.basics > button, .basics > a, .basics > .pick {
  border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: var(--ink); text-decoration: none; cursor: pointer;
}
.basics > button:hover, .basics > a:hover, .basics > .pick:hover { background: rgb(var(--k) / .05); }
.basics .out { color: #c0392b; }
.basics .find { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; border-bottom: 1px solid rgb(var(--k) / .08); margin-bottom: 4px; }
.basics .find svg { width: 16px; height: 16px; color: var(--stamp); flex: none; }
.basics .find input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.basics .seg { display: flex; gap: 4px; padding: 4px 6px; }
.basics .seg button { flex: 1; border: 0; border-radius: 10px; padding: 7px 0; font-size: 12px; background: rgb(var(--k) / .04); color: var(--ink); cursor: pointer; }
.basics .seg button.on { background: rgb(var(--bl) / .14); color: var(--blusco); font-weight: 600; }

.login .zero-note { margin: -8px 0 0; max-width: 300px; text-align: center; font-size: 12.5px; line-height: 1.7; color: var(--stamp); }

/* 線は下が新しい。投稿が少なくて画面に余るときも、下の端にそろえる */
#page:has(> .items) { display: flex; flex-direction: column; }
#page > .items { margin-top: auto; }
@keyframes zeroUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 基本の設定の窓とフィードの一覧。行を押すと線に混ぜるかを切り替え、屑かごは2回押すと消す（1回目で赤くなり、3秒で戻る） */
.basics { max-height: calc(100% - 110px); overflow-y: auto; overscroll-behavior: contain; }
.basics .slist { overflow-y: auto; max-height: 40vh; padding: 2px 0 6px; border-bottom: 1px solid rgb(var(--k) / .08); margin-bottom: 4px; }
.basics .sh { font-size: 11px; color: var(--stamp); padding: 6px 12px 2px; }
.basics .seg.flows { flex-wrap: wrap; }
.basics .seg.flows button { flex: 1 0 auto; padding: 7px 8px; color: rgb(var(--k) / .4); }
.basics .seg.flows button.on { color: var(--blusco); }
.basics .srow { display: flex; align-items: center; }
.basics .srow .mix { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; }
.basics .srow .mix:hover { background: rgb(var(--k) / .05); }
.basics .srow .mix span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basics .srow .mix i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.2px solid var(--blusco); background: var(--blusco); }
.basics .srow .mix.feed i { border-color: #a0404e; background: #a0404e; }
:root[data-theme="dark"] .basics .srow .mix.feed i { border-color: #e0857f; background: #e0857f; }
.basics .srow .mix.off i { background: none; }
.basics .srow .mix.off span { opacity: .4; }
.basics .srow .drop { flex: none; width: 34px; height: 34px; border: 0; background: none; display: grid; place-items: center; color: rgb(var(--k) / .4); border-radius: 10px; cursor: pointer; }
.basics .srow .drop svg { width: 17px; height: 17px; }
.basics .srow .drop.arm { color: #c0392b; background: rgba(192, 57, 43, .08); }

/* 上肩。返した先の書き手の顔へ尾を向けた吹き出しの印と、その顔（main.js の shoulders） */
.pmark {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px;
  border: 0; background: none; color: rgb(var(--k) / .4); cursor: pointer;
}
.pmark svg { width: 15px; height: 15px; transform: scaleX(-1); }
.pmark.mine svg { transform: none; }
.pmark img, .pmark i { width: 16px; height: 16px; border-radius: 50%; display: block; background: var(--fill); box-shadow: 0 0 0 1.2px var(--paper); }
.pmark:hover { color: var(--blusco); }

/* 書いているあいだの時計（送る壺）。積んだ分を出せるあいだは、縁が青くゆっくり明滅する。300字を超えたら赤くして積めない */
#dock .clock.jar::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.2px rgb(var(--bl) / .35);
}
#dock .clock.jar.ready::after { animation: jarBreath 2.4s ease-in-out infinite; }
#dock .clock.jar.over::after { box-shadow: 0 0 0 1.5px rgba(192, 57, 43, .8); }
#dock .clock.busy::after { animation: jarBreath .7s ease-in-out infinite; }
@keyframes jarBreath { 0%, 100% { box-shadow: 0 0 0 1.2px rgba(58, 141, 255, .3), 0 0 2px rgba(58, 141, 255, .2); } 50% { box-shadow: 0 0 0 1.6px rgba(58, 141, 255, .95), 0 0 8px rgba(58, 141, 255, .6); } }

/* 積んだ吹き出しと付けた写真。欄の上に右へ寄せて積む */
#stack {
  position: absolute; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 19;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-height: 45%; overflow-y: auto; padding: 22px 76px 10px 70px;
  /* 積んだ吹き出しの後ろは隠す（iPhone 版と同じ）。紙が磨りガラスなので、隠すのも磨りガラスにする。上の端はぼかす */
  background: rgb(var(--w) / .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px);
}
#stack[hidden] { display: none; }
#stack .piece {
  max-width: 100%; text-align: left; white-space: pre-wrap; word-break: break-word; border: 1.6px solid var(--ink); border-radius: 20px;
  padding: 8px 14px; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.5; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
#stack .pics { display: flex; gap: 6px; }
#stack .pic { border: 0; padding: 0; background: none; cursor: pointer; }
#stack .pic img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block; }
.basics .arm { color: #c0392b; background: rgba(192, 57, 43, .08); }

/* 直しているあいだの書く欄。左に鉛筆と残りの時間を出し、縁をブルスコブルーにする */
#dock .write .edmark { display: none; align-items: center; gap: 3px; color: var(--blusco); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
#dock .write .edmark svg { width: 14px; height: 14px; }
#dock .write .edmark i { font-style: normal; }
#dock .write.editing .edmark { display: inline-flex; }
#dock .write.editing { box-shadow: 0 0 0 1.2px rgb(var(--bl) / .6), 0 6px 24px rgba(0, 0, 0, .08); }

/* 紙は磨りガラスにし、後ろの机の色を透かす（2026-10-22、大田垣の依頼）。もこの地は白い紙のまま残る。
   机の色は基本の設定で、生成り・薄い黄色・薄い青色から選ぶ（html の data-desk） */
#frame { background: rgb(var(--w) / .5); -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); }
.desk #frame { box-shadow: 0 0 0 .7px rgb(var(--k) / .1), 0 24px 70px rgba(0, 0, 0, .07); }
:root[data-desk="yellow"] { --desk: #f6eecb; }
:root[data-desk="blue"] { --desk: #d9e9f2; }
:root[data-theme="dark"][data-desk="yellow"] { --desk: #1a170b; }
:root[data-theme="dark"][data-desk="blue"] { --desk: #0b161c; }
.basics .seg.desks button { display: grid; place-items: center; }
.basics .seg.desks button i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--k) / .18); }
.basics .seg.desks [data-desk="kinari"] i { background: #f4f3ef; }
.basics .seg.desks [data-desk="yellow"] i { background: #f6eecb; }
.basics .seg.desks [data-desk="blue"] i { background: #d9e9f2; }

/* 紙を磨りガラスにしたので、吹き出しと添付が地に溶け込んだ。淡い陰を付けて浮かせる（2026-10-22、大田垣の指摘）。
   もこは線の絵（svg）に陰を付けるので、卵形の形どおりに落ちる。操作の一覧を開いている吹き出しの青い光（.bub.target）は前のまま勝つ */
.moko > svg { filter: drop-shadow(0 3px 7px rgba(20, 30, 40, .10)) drop-shadow(0 1px 1.5px rgba(20, 30, 40, .08)); }
.aside > *, .bub > .attach > *, .bub.clip > .frame, .pano { filter: drop-shadow(0 3px 7px rgba(20, 30, 40, .10)) drop-shadow(0 1px 1.5px rgba(20, 30, 40, .08)); }
:root[data-theme="dark"] .moko > svg, :root[data-theme="dark"] .aside > *, :root[data-theme="dark"] .bub > .attach > * { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45)); }

/* 基本の設定の文字の大きさと英文の字 */
.basics .seg.sizes button, .basics .seg.comics button { display: grid; place-items: center; min-height: 34px; padding: 4px 0; }
.basics .seg.comics .c1 { font-family: "ShantellSans", sans-serif; font-weight: 600; font-size: 16px; }
.basics .seg.comics .c0 { font-family: "GenEiAntique", serif; font-size: 16px; }