/* 歴シール - シール帳画面
   main は使わない。#rkl-app が body 直下の全面パネルで、重ねたバー分の
   余白を自前で padding-top: var(--navbar-h) で確保する（CLAUDE.md参照）。 */

.rkl-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: var(--navbar-h, 72px);
  background: var(--bg);
}

.rkl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.rkl-icon-btn:hover { background: var(--bg); }
.rkl-icon-btn:active { background: var(--border-light); }
.rkl-icon-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* 貼るもの（シール・吹き出し）を出す2つだけ、ゆらゆら揺らして目を引く。
   ページ追加・削除・共有は揺らさない——全部が動くと落ち着かないし、
   「これを押すと何か貼れる」という区別も消える。

   揺らすのはボタンそのもの。中の絵に掛けると、シールの傾き（JSが1枚ごとに
   入れるinline transform）や吹き出しの位置合わせ（translateY）を上書きして
   しまう。軸は下寄りにして、立ったまま体を揺らすように見せる。

   周期をずらしてあるので、2つが同時に同じ向きへ倒れない。負の遅延で
   最初から途中の姿勢にしておくと、開いた瞬間から揃って見えない */
@keyframes rkl-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
#rkl-dock-open-picker,
#rkl-btn-add-text {
  transform-origin: 50% 85%;
  animation-name: rkl-sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
#rkl-dock-open-picker { animation-duration: 3.1s; animation-delay: -0.4s; }
#rkl-btn-add-text     { animation-duration: 2.3s; animation-delay: -1.5s; }

/* 揺れを好まない設定の人には出さない */
@media (prefers-reduced-motion: reduce) {
  #rkl-dock-open-picker,
  #rkl-btn-add-text { animation: none; }
}

/* 文字を足すボタンの顔。マテリアルアイコン(text_fields)の代わりに、
   台帳に貼る吹き出しとまったく同じ見た目(.rkl-bubble)の「あ」を出す。
   尻尾(::before/::after)の基準になるので position: relative が要る。
   尻尾が下にはみ出すぶん重心が下がって見えるので、少し上へ寄せる */
.rkl-btn-face {
  position: relative;
  font-size: 14px;
  line-height: 1.15;
  transform: translateY(-2px);
}

/* シールを選ぶボタン。マテリアルアイコンの代わりに、無作為に選んだシールを
   顔にする（picker-dialog.jsのpaintButton）。台帳に貼ったシールと同じく、
   傾き（JS側で1枚ごとに決める）と落影で「貼ってあるもの」らしく見せる。
   絵は1024pxの正方形で、中身は縦8割・横6割ほど。40pxの枠にcontainで
   収めると、他のボタンのアイコン（24px）とだいたい同じ大きさに見える */
.rkl-icon-btn.has-seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

.rkl-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* 上下は既に0。左右も台帳を画面幅いっぱいまで使うため0にする
     （スマホでの左右の余白をなくしたいという要望） */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rkl-canvas-frame {
  /* 以前はaspect-ratio:3/4 + max-height:640pxで縦横比を固定していたが、
     縦に余裕がある画面ではmax-heightに先に張り付き、そこから幅を逆算する
     ため実際の画面幅を超えてしまい、左右がはみ出す（クリップされる）
     事故になっていた。シール/テキストの座標・サイズは cqw（幅基準の単位、
     render.jsのapplyTransform参照）で統一されており、縦横比が画面ごとに
     違っても表示は崩れないため、比率は固定せずwidth 100%・高さは
     flex:1で使える分だけ使う形にした（幅が余白なく画面いっぱいに、
     高さもドックの上端まで隙間なく届く） */
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border: 1px solid var(--border-light);
  overflow: hidden;
  touch-action: none;
}

/* スワイプ中はこの層をtranslateXで動かす。ページ本体はそのまま、
   前後のプレビューパネルを差し込んで横に並べる */
.rkl-canvas-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* JS(render.canvas())が初めて動く前でも崩れないよう基本値を持たせる */
  height: 100%;
  display: flex;
}

.rkl-canvas-page {
  position: relative;
  container-type: inline-size;
  flex: 0 0 100%;
  height: 100%;
  background-color: var(--white);
  /* 横幅いっぱいに拡大し、縦は足りない分だけ繰り返す */
  background-repeat: repeat-y;
  background-size: 100% auto;
}

/* 読み込み中・通信エラー時の案内（回線が悪いときに画面が
   何も起きていないように見えるのを防ぐ） */
.rkl-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.rkl-status p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.9rem;
}

.rkl-item {
  position: absolute;
  touch-action: none;
  user-select: none;
  cursor: grab;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}
.rkl-item img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  opacity: 0.85; /* 固定。トグルは無し */
}
.rkl-item.is-active {
  outline: 2px dashed var(--secondary);
  outline-offset: 4px;
  border-radius: 8px;
}

/* 編集モード中にシールの四隅に出す手掛かり。
   左上=削除、右上=名言、左下=回す、右下=大きさ。
   出し入れは .is-active だけで決める（JS側でstyle.displayを書かないこと。
   インラインの値がここに勝って、出るはずの隅が出なくなる）。
   シールと一緒に回るので、「左下」は回った後のシールから見た左下になる。 */
.rkl-item-delete,
.rkl-item-quote,
.rkl-item-rotate,
.rkl-item-resize {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  padding: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  /* 隅をつまんで動かすので、ブラウザ既定のスクロール・ズームに取られない */
  touch-action: none;
}
.rkl-item.is-active .rkl-item-delete,
.rkl-item.is-active .rkl-item-quote,
.rkl-item.is-active .rkl-item-rotate,
.rkl-item.is-active .rkl-item-resize { display: flex; }

.rkl-item-delete .material-symbols-outlined,
.rkl-item-quote .material-symbols-outlined,
.rkl-item-rotate .material-symbols-outlined,
.rkl-item-resize .material-symbols-outlined { font-size: 15px; }

.rkl-item-delete { top: -10px; left: -10px; background: #E07A5F; }
.rkl-item-quote  { top: -10px; right: -10px; background: var(--secondary); }
/* 動かす手掛かりの2つは、押すと何かが起きるボタン（削除・名言）と
   区別したいので、同じ色（--primary）でそろえる */
.rkl-item-rotate { bottom: -10px; left: -10px; background: var(--primary); cursor: grab; }
.rkl-item-resize { bottom: -10px; right: -10px; background: var(--primary); cursor: nwse-resize; }
/* open_in_full の矢印は右上⇔左下を向いている。90度回して右下⇔左上にすると、
   この手掛かりが付いている隅と、引っぱる向きが揃う */
.rkl-item-resize .material-symbols-outlined { transform: rotate(90deg); }

/* ぷっくりシール風の吹き出し。
   padding/border-radius/尻尾をすべてem（=そのときのfont-size基準）にして
   あるので、文字が大きくなっても小さくなっても比率が崩れず、はみ出さない。
   立体感はThree.js等を使わず、グラデーション+影の重ねだけで表現する:
   ・小さく強いハイライト＋広く柔らかいハイライトの2枚重ねで「艶」を強調
   ・内側上下のinset shadowで丸みの陰影を強める
   ・外側の落影で「台座から浮いた」厚みを出す

   見た目だけをこの .rkl-bubble に持たせ、台帳に貼る吹き出し
   (.rkl-item.stamp) と、文字を足すボタンの顔 (.rkl-btn-face) の両方で使う。
   置き方（position）はここに書かないこと——使う側で事情が違う。
   share.js の drawStampBubble は、この見た目を<canvas>で写している。
   ここの数値を変えたら、あちらの比率も一緒に直すこと */
.rkl-bubble {
  /* 背景は半透明に（文字はcolor:#2b2b2bで別指定なので不透明のまま保たれる。
     ここでelementにopacityを掛けると文字まで一緒に薄くなってしまうため、
     色そのものをrgba()にして背景側だけ透過させている） */
  background:
    radial-gradient(ellipse 26% 16% at 26% 16%, rgba(255,255,255,0.85), rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 62% 42% at 32% 20%, rgba(255,255,255,0.7), rgba(255,255,255,0) 72%),
    linear-gradient(to bottom, rgba(255,255,255,0.55) 0%, rgba(243,236,226,0.55) 100%);
  border: 0.09em solid rgba(120, 108, 92, 0.4); /* 縁線を薄い色に */
  border-radius: 1.1em;
  padding: 0.32em 0.75em;
  font-family: 'Yusei Magic', 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  color: #2b2b2b;
  /* 改行は反映するが自動折り返しはしない。改行は編集画面で入れた通りにだけ入る */
  white-space: pre;
  /* position:absoluteでwidth未指定だと、置いた位置(left)から右端までの
     余白ぶんに箱の幅が制限され、それより長い文字が箱からはみ出して見えなく
     なる（overflow:hiddenのキャンバスで切れる）。文字の実際の幅で箱を作る */
  width: max-content;
  text-align: center;
  box-shadow:
    inset 0 -0.2em 0.24em rgba(0,0,0,0.16),
    inset 0 0.12em 0.14em rgba(255,255,255,0.9),
    0 0.16em 0.04em rgba(0,0,0,0.18);
}

/* 台帳に貼った吹き出し。見た目は .rkl-bubble、ここは置き方だけ */
.rkl-item.stamp {
  /* .rkl-item base のposition:absoluteを、うっかりrelativeで上書きしないこと。
     relativeだと通常のドキュメントフローに乗ったままになり、他の吹き出しが
     増えるたびに自分の高さぶん後続の吹き出しを押し下げてしまう
     （シールは影響なし、テキストラベルだけ徐々にずれる不具合だった）。
     absoluteでも::before/::afterの尻尾の基準にはなるので問題ない */
  position: absolute;
}
.rkl-bubble::before,
.rkl-bubble::after {
  content: '';
  position: absolute;
}
/* 尻尾: 既定は下向き */
.rkl-bubble[data-tail="bottom"]::after,
.rkl-bubble:not([data-tail])::after {
  left: 50%;
  bottom: -0.46em;
  transform: translateX(-50%);
  border-left: 0.32em solid transparent;
  border-right: 0.32em solid transparent;
  border-top: 0.46em solid rgba(120, 108, 92, 0.4);
}
.rkl-bubble[data-tail="bottom"]::before,
.rkl-bubble:not([data-tail])::before {
  left: 50%;
  bottom: -0.32em;
  transform: translateX(-50%);
  border-left: 0.32em solid transparent;
  border-right: 0.32em solid transparent;
  border-top: 0.36em solid rgba(249, 244, 236, 0.55);
  z-index: 1;
}
/* 尻尾: 左向き（吹き出しの左から、左にいる相手へ） */
.rkl-bubble[data-tail="left"]::after {
  top: 50%;
  left: -0.46em;
  transform: translateY(-50%);
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
  border-right: 0.46em solid rgba(120, 108, 92, 0.4);
}
.rkl-bubble[data-tail="left"]::before {
  top: 50%;
  left: -0.32em;
  transform: translateY(-50%);
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
  border-right: 0.36em solid rgba(249, 244, 236, 0.55);
  z-index: 1;
}
/* 尻尾: 右向き */
.rkl-bubble[data-tail="right"]::after {
  top: 50%;
  right: -0.46em;
  transform: translateY(-50%);
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
  border-left: 0.46em solid rgba(120, 108, 92, 0.4);
}
.rkl-bubble[data-tail="right"]::before {
  top: 50%;
  right: -0.32em;
  transform: translateY(-50%);
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
  border-left: 0.36em solid rgba(249, 244, 236, 0.55);
  z-index: 1;
}

.rkl-import-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #FFF4E5;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  max-width: 480px;
  /* .rkl-bodyの左右paddingを無くしたので、このバーだけ自前で左右の
     余白を持つ（角丸のカードが画面端に張り付かないように） */
  margin: 12px 16px 0;
  width: calc(100% - 32px);
}
.rkl-import-bar p { margin: 0; font-size: 0.9rem; color: var(--text); }

/* ページドック（画面下部）。タブをタップでページ切替、シールをドラッグして
   タブに重ねるとそのページへ移動できる */
.rkl-dock {
  display: flex;
  /* 上下の余白そのものは切り詰め、その分の高さは.rkl-dock-tabs自身に
     持たせる（丸/角のすぐ下にスクロールバーが出ても窮屈に見えないように）。
     下だけiOSのホームインジケータ操作エリアのぶんを別途確保する */
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  border-top: 1px solid var(--border-light);
  background: var(--white);
  padding: 4px 8px calc(10px + env(safe-area-inset-bottom, 0px));
}
.rkl-dock-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  height: 66px;
  /* タブ本体とスクロールバーの間に隙間を持たせる */
  padding-bottom: 10px;
}
.rkl-dock-tab {
  flex: 0 0 auto;
  /* ページ1枚を表す縦長の2:3の札。丸だと数字だけの単なるボタンに
     見えて分かりにくかったので、ページらしい形にした */
  width: 32px;
  height: 48px;
  border-radius: 6px;
  border: 2px solid var(--border-light);
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.rkl-dock-tab.is-current {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
}
.rkl-dock-tab.is-drop-target {
  border-color: var(--secondary);
  border-style: dashed;
  transform: scale(1.15);
}
/* シール選択ダイアログ */
.rkl-picker-box {
  width: min(420px, 92vw);
  max-height: 80vh;
}
.rkl-picker-title {
  margin: 0;
  font-size: 1rem;
  color: var(--heading);
}
.rkl-picker-filter-row {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.rkl-picker-chip {
  flex: 0 0 auto;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.rkl-picker-chip.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.rkl-picker-grid {
  display: grid;
  /* 1frだけだと既定の最小幅がautoになり、名前が長い人物(世界の偉人)で
     折り返さないテキストの幅がそのまま列幅を押し広げてしまい、列数が
     崩れる（4列のはずが2列になる）原因になっていた。minmax(0, 1fr)で
     最小幅を0にし、はみ出た分は名前側のellipsisで省略させる */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  /* グリッドだけが伸び縮みしてスクロールする領域になるようにする。
     これが無いと、内容が多いときにタイトルやフィルター行まで
     潰れて縮んでしまうことがある */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px;
}
.rkl-picker-item {
  min-width: 0;
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 4px;
}
.rkl-picker-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}
.rkl-picker-item span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rkl-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
  padding: 20px 0;
}

/* 名言プリセット選択ダイアログ */
.rkl-quote-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.rkl-quote-item {
  text-align: left;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  white-space: pre-wrap;
  cursor: pointer;
}
.rkl-quote-item:active { background: var(--border-light); }

.rkl-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
}
.rkl-dialog[hidden] { display: none; }
.rkl-dialog-box {
  background: var(--white);
  border-radius: 12px;
  padding: 16px;
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rkl-dialog-box textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
  resize: none;
}
.rkl-dialog-box input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
}
.rkl-dialog-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rkl-btn-primary, .rkl-btn-danger, .rkl-btn-plain {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  cursor: pointer;
}
.rkl-btn-primary { background: var(--primary); color: var(--white); }
.rkl-btn-danger { background: #E07A5F; color: var(--white); }
.rkl-btn-plain { background: var(--bg); color: var(--text); }