/* 画像生成の画面の骨組み（メモ 04）。見た目の型は site.css の :root（白い地に差し色 1 つ）。名前は gf- で始める */
/* 17: tensor と同じ開き方。ページは切り替えず、開いているページ（ホーム等）の上に画面全体の窓として重なる。
   重なり: 窓 10（サイトの帯 2 より上・サイトのログインの窓 .veil 20 より下）。#tool-image はページの流れの中で場所を取らない */
.gf { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; min-height: 0;
  background: var(--bg, #fff); color: var(--ink, #1d1d28);
  font-family: var(--font, system-ui, sans-serif); line-height: 1.6; overflow: hidden; }
html.gf-open, html.gf-open body { overflow: hidden; }   /* 開いている間は後ろのページを送らない（送った位置は残る） */
#tool-image { padding: 0; }
.gf .hide, .gf-veil .hide { display: none !important; }
.gf button, .gf-veil button, .gf-dock { font: inherit; cursor: pointer; }
.gf button:focus-visible, .gf-veil button:focus-visible, .gf-dock:focus-visible { outline: 2px solid color-mix(in srgb, var(--acc, #e0518f) 60%, transparent); outline-offset: 2px; }
.gf-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 頭: ×・残りポイント・言葉・タブ・（狭い時）2 枚の切り替え。17: 広い時は左の欄の一番上（tensor: × ／残クレジット／タブ） */
.gf-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 6px 12px 0; border-bottom: 1px solid var(--line, #e4e4ec); flex: none; }
.gf-left > .gf-head { padding: 8px 10px 0 8px; gap: 6px 8px; }
.gf-left > .gf-head .gf-x { order: 0; }
.gf-left > .gf-head > .gf-slot[data-slot=points] { order: 1; }
.gf-left > .gf-head .gf-sp { order: 2; }
.gf-left > .gf-head .gf-lang { order: 3; }
.gf-left > .gf-head .gf-tabs { order: 4; flex: 1 0 100%; padding-left: 4px; }
.gf[data-w=mid] .gf-left > .gf-head .gf-lang { padding: 7px; }      /* 左の欄 300px では × ・残り・言葉が 1 行に入らないので、言葉のボタンは地球の絵だけ */
.gf[data-w=mid] .gf-left > .gf-head .gf-lang span { display: none; }
.gf-x { padding: 6px; border-color: transparent; }
.gf-x:hover { border-color: var(--line, #e4e4ec); }
.gf-x .gf-ico { width: 20px; height: 20px; }
.gf-tabs { display: flex; gap: 16px; align-self: stretch; }
.gf-tab { border: 0; border-radius: 0; background: transparent; padding: 8px 2px 10px; font-weight: 600; font-size: .92rem; color: var(--dim, #6b6b7c); }
.gf-tab.on { color: var(--acc, #e0518f); box-shadow: inset 0 -2px 0 var(--acc, #e0518f); }
.gf-sp { flex: 1 1 auto; }
.gf-ib { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, #e4e4ec); border-radius: 999px; padding: 5px 12px;
  background: var(--bg, #fff); color: var(--ink, #1d1d28); font-size: .84rem; white-space: nowrap; margin-bottom: 6px; }
.gf-ib:hover { background: var(--soft, #f6f6f9); }
.gf-head > .gf-slot { margin-bottom: 6px; }
.gf-sheets { display: none; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft, #f6f6f9); }
.gf-sheet { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; background: transparent;
  padding: 6px 8px; font-size: .84rem; font-weight: 600; color: var(--dim, #6b6b7c); min-width: 0; }
.gf-sheet span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-sheet.on { background: var(--bg, #fff); color: var(--ink, #1d1d28); box-shadow: 0 1px 3px rgba(20, 20, 40, .12); }
.gf-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--acc, #e0518f);
  color: #fff; font-size: .7rem; font-style: normal; font-weight: 700; }

/* 体: 左（上下に送る欄）と右（言葉と生成・結果と履歴） */
.gf-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--gf-left, 360px) minmax(0, 1fr); gap: 12px; padding: 12px; }
.gf[data-w=wide] { --gf-left: clamp(340px, 30vw, 460px); }   /* 17: tensor の左の欄 約 460px（1536 の幅で 460） */
.gf[data-w=mid] { --gf-left: 300px; }
.gf-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line, #e4e4ec); border-radius: var(--r, 12px); background: var(--bg, #fff); }
.gf-lscroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px; display: grid; gap: 12px; align-content: start; }
.gf-lfoot { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; border-top: 1px solid var(--line, #e4e4ec); }
.gf-fb { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; border: 0; border-radius: 8px; background: transparent;
  padding: 6px 2px; font-size: .74rem; line-height: 1.25; color: var(--ink, #1d1d28); text-align: center; }
.gf-fb:hover { background: var(--soft, #f6f6f9); color: var(--acc, #e0518f); }
.gf-fb span { max-width: 100%; overflow-wrap: anywhere; }
.gf-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; --gf-res-min: 150px; }   /* 47: 右下（履歴）に必ず残す高さ（帯＋札 1 段）。言葉の箱はそれ以外を使える */
/* 言葉の箱が長くなっても、生成ボタンは隠れない（言葉の所だけが中で送れる） */
/* 18: tensor と同じく、右上は 1 つの箱に 言葉・ネガ・道具の行・枚数・生成 が入る高さだけを取り、残りは全部右下（履歴）。
   上限は高さの 6 割（言葉を何行も打った時）。前は min(62%,540px) まで中が空いたまま広がり、道具の行が箱の下に隠れていた
   47: 上限 60% → 右下に --gf-res-min だけ残した残り全部（テスターの報告 07「言葉の箱を広げたい」。06 の欄は打った分だけ画面の半分まで伸びる。18 の「主に決めてほしい事 2」の答え＝言葉の箱を勝たせる） */
.gf-top { flex: 0 1 auto; max-height: calc(100% - var(--gf-res-min, 150px) - 12px); min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line, #e4e4ec); border-radius: var(--r, 12px); background: var(--bg, #fff); }
.gf-top > .gf-slot[data-slot=prompt] { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.gf-gobar { flex: none; }   /* 18: 区切りの線と上の余白は無し（tensor と同じく、道具の行の直ぐ下に 枚数・生成。線と余白で 9px 取っていた） */
/* 18: 言葉の部品（06）の枠は骨組みの箱の枠に任せる（枠が二重で、上下 22px を食っていた） */
.gf .gf-slot[data-slot=prompt] .gp { border: 0; border-radius: 0; padding: 0; background: transparent; }
/* 18: 右下（結果と履歴）は右の列の 45% より低くしない（13 の ④）。右上は残りの中で、言葉の部品が欄を詰めて収める
   47: 45% → --gf-res-min（150px）。言葉を何行も打った時・角を引いた時は右上が伸び、右下は帯＋札 1 段まで縮む（tensor と同じ） */
.gf[data-w=wide] .gf-res, .gf[data-w=mid] .gf-res { min-height: var(--gf-res-min, 150px); }
.gf-mini { display: none; flex: none; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border: 1px solid var(--line, #e4e4ec); border-radius: var(--r, 12px); background: var(--bg, #fff); }
.gf.mini .gf-top { display: none; }
.gf.mini .gf-mini { display: flex; }
.gf-mini-sum { flex: 1 1 35%; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: transparent; padding: 6px 8px; color: var(--ink, #1d1d28); text-align: left; }
.gf-mini-sum:hover { background: var(--soft, #f6f6f9); }
.gf-mini-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-mini-go { flex: 0 0 auto; min-width: 0; max-width: 65%; width: max-content; }   /* 41: 縮んだ 1 行の帯の生成ボタン。幅 0 になって右へはみ出していた（主の報告 01。1920 幅で生成ボタンが画面の右端へ） */
.gf-mini-go > .gf-slot { width: max-content; max-width: 100%; }
.gf-res { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line, #e4e4ec); border-radius: var(--r, 12px); background: var(--bg, #fff); }
.gf-res > .gf-slot { min-height: 100%; }
.gf-bottom { display: none; }

/* 狭い時（骨組みの幅 640 未満）: tensor のスマホと同じ 2 枚。ワークスペースの一番上に言葉、一番下に生成を固定 */
.gf[data-w=narrow] .gf-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "x tabs points" "sheets sheets lang";
  align-items: center; gap: 4px 6px; padding: 4px 8px 8px; }
.gf[data-w=narrow] .gf-x { grid-area: x; }
.gf[data-w=narrow] .gf-tabs { grid-area: tabs; }
.gf[data-w=narrow] .gf-head > .gf-slot[data-slot=points] { grid-area: points; justify-self: end; margin: 0; }
.gf[data-w=narrow] .gf-sheets { grid-area: sheets; display: flex; }
.gf[data-w=narrow] .gf-lang { grid-area: lang; justify-self: end; }
.gf[data-w=narrow] .gf-sp { display: none; }
.gf[data-w=narrow] .gf-ib { padding: 7px; margin: 0; }
.gf[data-w=narrow] .gf-ib span { display: none; }
.gf.xs .gf-tabs { gap: 12px; }
.gf.xs .gf-tab { font-size: .84rem; }
.gf.xs .gf-sheet .gf-ico { display: none; }
.gf.xs .gf-sheet { font-size: .8rem; padding: 6px 4px; }
.gf[data-w=narrow] .gf-body { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; }
.gf[data-w=narrow] .gf-top, .gf[data-w=narrow] .gf-mini { display: none !important; }
.gf[data-w=narrow][data-sheet=work] .gf-right { display: none; }
.gf[data-w=narrow][data-sheet=tasks] .gf-left { display: none; }
.gf[data-w=narrow] .gf-left { border: 0; border-radius: 0; }
.gf[data-w=narrow] .gf-lscroll { padding: 2px 2px 12px; }
.gf[data-w=narrow] .gf-lscroll > .gf-slot[data-slot=prompt] { padding: 10px; border: 1px solid var(--line, #e4e4ec); border-radius: var(--r, 12px); }
.gf[data-w=narrow] .gf-lfoot { border: 1px solid var(--line, #e4e4ec); border-radius: var(--r, 12px); }
.gf[data-w=narrow] .gf-bottom { display: block; flex: none; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line, #e4e4ec); background: var(--bg, #fff); }

/* 空き場所。部品がまだはまっていない時は、はまる部品の名前を出す（マウスを乗せると、受け取る物・出す物の説明） */
.gf-slot { min-width: 0; display: grid; gap: 12px; align-content: start; }
.gf-slot > .gf-ph { display: none; }
.gf-slot.empty > .gf-ph { display: grid; }
.gf.no-ph .gf-slot.empty { display: none; }
.gf-ph { place-content: center; justify-items: center; gap: 2px; min-height: 120px; padding: 10px 12px; text-align: center; cursor: help;
  border: 1.5px dashed color-mix(in srgb, var(--acc, #e0518f) 45%, var(--line, #e4e4ec)); border-radius: 10px;
  background: color-mix(in srgb, var(--acc, #e0518f) 5%, var(--bg, #fff)); color: var(--dim, #6b6b7c); }
.gf-ph small { font-size: .74rem; }
.gf-ph b { color: var(--acc, #e0518f); font-size: .92rem; font-weight: 600; line-height: 1.35; }
.gf-slot[data-slot=model] .gf-ph { min-height: 170px; }
.gf-slot[data-slot=settings] .gf-ph { min-height: 420px; }
.gf-slot[data-slot=prompt] .gf-ph { min-height: 150px; }
.gf-slot[data-slot=go] .gf-ph, .gf-slot[data-slot=points] .gf-ph { grid-auto-flow: column; align-items: center; gap: 6px; }
.gf-slot[data-slot=go] .gf-ph { min-height: 46px; padding: 4px 14px; }
.gf-mini-go .gf-slot[data-slot=go] .gf-ph { min-height: 36px; }
.gf-slot[data-slot=points] .gf-ph { min-height: 30px; padding: 2px 12px; border-radius: 999px; }
.gf-slot[data-slot=points] .gf-ph b { font-size: .8rem; }
.gf-res > .gf-slot.empty { height: 100%; padding: 12px; display: flex; flex-direction: column; }
.gf-slot[data-slot=results] .gf-ph { flex: 1 1 auto; min-height: 220px; }
.gf-part { min-width: 0; }
.gf-part-err { margin: 0; color: var(--ng, #d43d51); font-size: .85rem; }

/* 24: Img2Img の小タブ（tensor: Img2Img／アップスケール／ADetailer顔面修復／inpaint／AIで編集）。元の絵の箱の上。
   折り返して並べる（左の欄 300px・スマホ 375 では 2 段。横に送ると隠れた札に気付かない） */
.gf-sub { display: grid; gap: 6px; }
.gf-subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.gf-subtab { flex: 0 1 auto; min-width: 0; border: 1px solid var(--line, #e4e4ec); border-radius: 999px; background: var(--soft, #f6f6f9);
  padding: 4px 11px; font-size: .8rem; font-weight: 600; line-height: 1.45; color: var(--dim, #6b6b7c); white-space: nowrap; }
.gf-subtab:hover { color: var(--ink, #1d1d28); border-color: color-mix(in srgb, var(--acc, #e0518f) 35%, var(--line, #e4e4ec)); }
.gf-subtab.on { background: color-mix(in srgb, var(--acc, #e0518f) 10%, var(--bg, #fff)); border-color: var(--acc, #e0518f); color: var(--acc, #e0518f); }
.gf-sub-note { margin: 0; color: var(--dim, #6b6b7c); font-size: .78rem; line-height: 1.5; }
.gf-sub-mask { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 7px 8px 7px 10px; border: 1px dashed var(--line, #e4e4ec); border-radius: 10px;
  background: var(--soft, #f6f6f9); font-size: .8rem; color: var(--dim, #6b6b7c); }
.gf-sub-mask > .gf-ico { width: 16px; height: 16px; }
.gf-sub-mask-t { flex: 1 1 140px; min-width: 0; }
.gf-sub-mask.has { border-style: solid; border-color: color-mix(in srgb, var(--acc, #e0518f) 45%, var(--line, #e4e4ec)); color: var(--ink, #1d1d28); }
.gf-sub-mask.has > .gf-ico { color: var(--acc, #e0518f); }
.gf.xs .gf-subtab { padding: 4px 9px; font-size: .78rem; }

/* Img2Img の元の絵 */
.gf-src { display: grid; gap: 8px; }
.gf-src-h { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: .95rem; }
.gf-src-drop { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 22px 12px; border: 1.5px dashed var(--line, #e4e4ec); border-radius: 12px;
  background: var(--soft, #f6f6f9); color: var(--dim, #6b6b7c); font-size: .84rem; line-height: 1.4; }
.gf-src-drop:hover, .gf-src.over .gf-src-drop { border-color: var(--acc, #e0518f); color: var(--acc, #e0518f); }
.gf-src-drop .gf-ico { width: 26px; height: 26px; }
.gf-src-view { display: none; gap: 8px; }
.gf-src.has .gf-src-drop { display: none; }
.gf-src.has .gf-src-view { display: grid; }
.gf-src.over .gf-src-view img { outline: 2px dashed var(--acc, #e0518f); outline-offset: 2px; }
.gf-src-view img { display: block; width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; background: var(--soft, #f6f6f9); }
.gf-src-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: .8rem; color: var(--dim, #6b6b7c); }
.gf-src-name { flex: 1 1 90px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-src-size { color: var(--ink, #1d1d28); font-weight: 600; }
.gf-src-acts { display: flex; gap: 6px; }
.gf-sb { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--line, #e4e4ec); border-radius: 999px;
  background: var(--bg, #fff); color: var(--ink, #1d1d28); font-size: .82rem; white-space: nowrap; }
.gf-sb:hover { background: var(--soft, #f6f6f9); }
.gf-sb .gf-ico { width: 16px; height: 16px; }

/* ⓘ と説明の吹き出し */
.gf-i { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dim, #6b6b7c); flex: none; }
.gf-i .gf-ico { width: 16px; height: 16px; }
.gf-i:hover, .gf-i[aria-describedby] { color: var(--acc, #e0518f); background: var(--soft, #f6f6f9); }
.gf [data-tip], .gf-veil [data-tip], .gf-dock { -webkit-touch-callout: none; }
.gf-tip { position: fixed; left: 0; top: 0; z-index: 40; max-width: 320px; padding: 8px 11px; border-radius: 8px; background: #1d1d28; color: #fff;
  font-family: var(--font, system-ui, sans-serif); font-size: .8rem; line-height: 1.55; white-space: pre-line; box-shadow: 0 6px 20px rgba(20, 20, 40, .25);
  pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.gf-tip.on { visibility: visible; opacity: 1; transform: none; }

/* 切り替えの箱（部品が ctx.fold で作る。スイッチを入れると中が開く） */
.gf-fold { border: 1px solid var(--line, #e4e4ec); border-radius: 12px; background: var(--bg, #fff); }
.gf-fold-h { display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 12px; }
.gf-fold-t { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 6px; background: transparent; padding: 2px 0; text-align: left; font-weight: 600; font-size: .92rem; color: var(--ink, #1d1d28); }
.gf-switch { position: relative; flex: none; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: #c9c9d6; transition: background .15s; }
.gf-switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.gf-fold.on .gf-switch { background: var(--acc, #e0518f); }
.gf-fold.on .gf-switch i { transform: translateX(16px); }
.gf-fold-b { display: none; gap: 10px; padding: 0 12px 12px; }
.gf-fold.on .gf-fold-b { display: grid; }

/* 知らせの行 */
/* 29: left: 50% のままだと箱が窓の半分の幅までしか取れず、375 で短い知らせも 2 行に折れた。中身の幅を取り、窓の幅 − 24px を超える時だけ折る */
.gf-msg { position: absolute; left: 50%; bottom: 14px; z-index: 3; width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px; background: #1d1d28; color: #fff; font-size: .86rem; box-shadow: 0 8px 24px rgba(20, 20, 40, .25);
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .15s, transform .15s; }
.gf-msg.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.gf-msg.ng { background: var(--ng, #d43d51); }
.gf-msg-act { flex: none; border: 0; border-radius: 6px; background: transparent; color: #ffd3e6; padding: 2px 4px; font-weight: 700; text-decoration: underline; }
.gf[data-w=narrow] .gf-msg { bottom: 74px; }

/* 窓 */
.gf-veil { position: fixed; inset: 0; z-index: 30; display: grid; justify-items: center; align-items: start; padding: 16px; overflow: auto; background: rgba(25, 25, 40, .45); }
.gf-win { width: min(440px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg, #fff); color: var(--ink, #1d1d28); border-radius: 18px; box-shadow: 0 20px 60px rgba(20, 20, 40, .25); font-family: var(--font, system-ui, sans-serif); line-height: 1.6; }
.gf-win.wide { width: min(640px, 100%); }
.gf-win-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 6px 22px; }
.gf-win-h h3 { margin: 0; font-size: 1.05rem; }
.gf-win-x { margin: 0; padding: 7px; border: 0; }
.gf-win-b { display: grid; gap: 12px; align-content: start; padding: 4px 22px 14px; overflow: auto; }
.gf-win-f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid var(--line, #e4e4ec); }
.gf-win input[type=text], .gf-win textarea { width: 100%; font: inherit; color: var(--ink, #1d1d28); padding: 9px 12px; border: 1px solid var(--line, #e4e4ec); border-radius: 10px; background: var(--bg, #fff); }
.gf-dim { margin: 0; color: var(--dim, #6b6b7c); font-size: .86rem; }
.gf-paste-ta { min-height: 150px; resize: vertical; font-family: ui-monospace, Consolas, monospace !important; font-size: .82rem !important; line-height: 1.5; }
.gf-paste-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-paste-list { display: grid; gap: 0; }
.gf-paste-h { font-size: .8rem; font-weight: 600; color: var(--dim, #6b6b7c); margin-bottom: 4px; }
.gf-kv { display: grid; grid-template-columns: minmax(84px, 32%) minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 4px 0; border-bottom: 1px dashed var(--line, #e4e4ec); font-size: .82rem; }
.gf-kv span { color: var(--dim, #6b6b7c); }
.gf-kv b { font-weight: 500; overflow-wrap: anywhere; }
.gf-kv.raw b { color: var(--dim, #6b6b7c); }
.gf-kv em { font-style: normal; font-size: .7rem; color: var(--dim, #6b6b7c); border: 1px solid var(--line, #e4e4ec); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.gf-pre-add { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-pre-add input { flex: 1 1 180px; }
.gf-pre-add .solid { display: inline-flex; align-items: center; gap: 6px; }
.gf-pre-list { display: grid; }
.gf-pre-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line, #e4e4ec); }
.gf-pre-name { flex: 1 1 140px; min-width: 0; }
.gf-pre-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-pre-name small { display: block; color: var(--dim, #6b6b7c); font-size: .74rem; }
.gf-sb.danger { color: var(--ng, #d43d51); }
.gf-sb.danger.sure { background: var(--ng, #d43d51); border-color: var(--ng, #d43d51); color: #fff; }
.gf-win .solid .gf-ico, .gf-win .ghost .gf-ico { width: 16px; height: 16px; }
.gf-win-f .solid, .gf-win-f .ghost { display: inline-flex; align-items: center; gap: 6px; }   /* 18: リセットの確かめの窓の［⟲ リセット］の絵と字の間 */

/* 生成中の札（他の道具を見ている間だけ、右下に残る） */
.gf-dock { position: fixed; right: 16px; bottom: 16px; z-index: 9; display: none; align-items: center; gap: 10px; padding: 6px 16px 6px 6px;
  border: 1px solid var(--line, #e4e4ec); border-radius: 999px; background: var(--bg, #fff); color: var(--ink, #1d1d28);
  box-shadow: 0 10px 30px rgba(20, 20, 40, .18); font-family: var(--font, system-ui, sans-serif); font-size: .88rem; font-weight: 600; }
.gf-dock.on { display: inline-flex; }
.gf-dock:hover { border-color: var(--acc, #e0518f); }
.gf-dock-pic { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--acc, #e0518f) 12%, var(--bg, #fff)); color: var(--acc, #e0518f); }
.gf-dock-pic img { width: 100%; height: 100%; object-fit: cover; }
.gf-dock.run .gf-dock-pic .gf-ico { animation: gf-spin 2.4s linear infinite; }
@keyframes gf-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .gf-dock { right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .gf-dock.run .gf-dock-pic .gf-ico { animation: none; } .gf-tip, .gf-msg, .gf-switch, .gf-switch i { transition: none; } }

/* ---- 11 組み立て: 本物の部品をはめて合わせた所 ---- */
.gf-top > .gf-slot[data-slot=prompt] { min-height: 96px; }            /* 08 の段が伸びても、言葉の欄は 3 行は見える（18: 欄 2 行＋道具の行より低くはしない。中身はそれより高いので、空きは出ない） */
.gf-res > .gf-slot[data-slot=results] { height: 100%; }                /* 09 は --gr-h（骨組みが右下の箱の高さを入れる）で中だけ巻く */
.gf-res .gr { min-height: 0; }
.gf-res { flex: 1 1 0; }                                               /* 09 の高さは右下の箱から決まる（--gr-h）ので、右下の箱は中身の高さで伸ばさない（輪にならない様に） */