/* ============================================================
   Image Square & BG Remover — Plugin Styles
   ============================================================ */

/* ── CSS カスタムプロパティ（デザイントークン） ──
   プラグイン全体で使う色・サイズ・フォントをここに集約する。
   接頭辞 --isbr- を付けることでテーマの CSS との衝突を防ぐ。
   --isbr-bg       : ツール全体の背景色（ダークベース）
   --isbr-surface  : カード・オプション欄などの一段明るい背景色
   --isbr-border   : ボーダー・区切り線の色
   --isbr-accent   : メインアクセント（紫系）。ボタン・フォーカスに使用
   --isbr-accent2  : サブアクセント（ピンク系）。グラデーションの終端色
   --isbr-text     : 本文テキスト色
   --isbr-muted    : サブテキスト・ラベルなどの薄いテキスト色
   --isbr-radius   : カード等の角丸サイズ
   --isbr-font     : フォントスタック（英字: Syne / 日本語: Noto Sans JP）
*/
:root {
  --isbr-bg:        #0f0f11;
  --isbr-surface:   #1a1a1f;
  --isbr-border:    #2e2e38;
  --isbr-accent:    #7c6bff;
  --isbr-accent2:   #ff6b9d;
  --isbr-text:      #e8e8f0;
  --isbr-muted:     #888899;
  --isbr-radius:    16px;
  --isbr-font:      'Syne', 'Noto Sans JP', sans-serif;
}

/* Google Fonts: Syne（英字ディスプレイ）と Noto Sans JP（日本語）を CDN から読み込む */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ── Wrapper ──
   ショートコードが出力する最外殻コンテナ。
   max-width で幅を制限し margin: 0 auto で中央揃えにする。
   box-shadow の1層目（0 0 0 1px）は細いアウトラインボーダーの代替。
*/
.isbr-wrap {
  font-family: var(--isbr-font);
  background: var(--isbr-bg);
  color: var(--isbr-text);
  border-radius: var(--isbr-radius);
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 0 0 1px var(--isbr-border), 0 32px 64px rgba(0,0,0,.6);
}

/* ── Upload Zone ──
   ファイルのドロップ受付エリア。
   dashed ボーダーでドロップ可能な領域であることを示す。
   ホバー時と drag-over（JavaScript が付与するクラス）時に
   ボーダー色と背景をアクセント色に切り替えてフィードバックを与える。
*/
.isbr-upload-zone {
  border: 2px dashed var(--isbr-border);
  border-radius: var(--isbr-radius);
  padding: 64px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  background: linear-gradient(135deg, rgba(124,107,255,.04), rgba(255,107,157,.04));
}
.isbr-upload-zone:hover,
.isbr-upload-zone.drag-over {
  border-color: var(--isbr-accent);
  background: rgba(124,107,255,.08);
}
.isbr-upload-inner svg {
  color: var(--isbr-accent);
  margin-bottom: 16px;
}
.isbr-upload-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--isbr-text);
}
.isbr-upload-sub {
  font-size: .85rem;
  color: var(--isbr-muted);
  margin: 0;
}

/* ── Preview Area ──
   画像選択後に表示される領域全体のレイアウトコンテナ。
   flex + column 方向で各セクション（キャンバス行・オプション・ボタン）を縦積みにする。
*/
.isbr-preview-area {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Canvas Row ──
   「変換前」→「矢印」→「変換後」の3要素を横並びにする行。
   flex-wrap: wrap により、幅が足りない場合は縦積みになる（モバイル対応）。
*/
.isbr-canvas-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.isbr-canvas-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.isbr-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--isbr-muted);
  margin: 0;
}
.isbr-canvas-wrap canvas {
  max-width: 280px;
  max-height: 280px;
  border-radius: 12px;
  border: 1px solid var(--isbr-border);
  /* checkerboard for transparency:
     4方向の linear-gradient を重ねてチェッカーボード柄を作成する。
     透明（アルファ0）ピクセルの背景として、画像の透過部分を視覚的に示す。
  */
  background-image:
    linear-gradient(45deg, #2a2a35 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a35 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a35 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a35 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.isbr-arrow {
  color: var(--isbr-muted);
  flex-shrink: 0;
}

/* ── Options ──
   背景色ピッカーとAI除去トグルを横並びに配置するオプションバー。
   背景に --isbr-surface を使い、Wrapper より一段明るくして視覚的に区別する。
*/
.isbr-options {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--isbr-surface);
  border: 1px solid var(--isbr-border);
  border-radius: 12px;
  padding: 16px 20px;
}
.isbr-option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--isbr-muted);
  cursor: pointer;
}
.isbr-option-label input[type="color"] {
  width: 36px;
  height: 28px;
  border: 1px solid var(--isbr-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  padding: 2px;
}

/* Toggle Switch ──
   ネイティブの <input type="checkbox"> を非表示にし、
   CSS だけで ON/OFF トグルスイッチを実装する。
   ::after 擬似要素が丸いノブを表し、チェック状態で translateX(20px) して右端に移動する。
   ~ セレクタで input の兄弟要素 .isbr-toggle-slider のスタイルを切り替える。
*/
.isbr-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--isbr-muted);
  cursor: pointer;
  user-select: none;
}
.isbr-toggle input { display: none; }
.isbr-toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--isbr-border);
  border-radius: 99px;
  flex-shrink: 0;
  transition: background .2s;
}
.isbr-toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.isbr-toggle input:checked ~ .isbr-toggle-slider {
  background: var(--isbr-accent);
}
.isbr-toggle input:checked ~ .isbr-toggle-slider::after {
  transform: translateX(20px);
}

/* ── Status ──
   AI処理中に表示される進捗バナー。
   アクセント色の薄い背景とボーダーで情報的な雰囲気を出す。
   .isbr-spinner は CSS アニメーションで回転するローディングリング。
*/
.isbr-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(124,107,255,.1);
  border: 1px solid rgba(124,107,255,.3);
  border-radius: 10px;
  font-size: .88rem;
  color: #b0a8ff;
}
.isbr-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(124,107,255,.3);
  border-top-color: var(--isbr-accent);
  border-radius: 50%;
  animation: isbr-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes isbr-spin { to { transform: rotate(360deg); } }

/* ── Buttons ──
   3種のボタンバリアントを定義する。
   .isbr-btn-primary  : グラデーション背景の主要アクション（変換する）
   .isbr-btn-secondary: サーフェス背景のセカンダリアクション（ダウンロード）
   .isbr-btn-ghost    : 背景なし・控えめなアクション（やり直す）
   :disabled 時はすべてのホバー効果を無効化して操作不可を明示する。
*/
.isbr-btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.isbr-btn {
  font-family: var(--isbr-font);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 13px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.isbr-btn:active { transform: scale(.97); }

.isbr-btn-primary {
  background: linear-gradient(135deg, var(--isbr-accent), var(--isbr-accent2));
  color: #fff;
  box-shadow: 0 4px 20px rgba(124,107,255,.4);
}
.isbr-btn-primary:hover {
  box-shadow: 0 6px 28px rgba(124,107,255,.6);
  transform: translateY(-1px);
}
.isbr-btn-secondary {
  background: var(--isbr-surface);
  color: var(--isbr-text);
  border: 1px solid var(--isbr-border);
}
.isbr-btn-secondary:hover {
  border-color: var(--isbr-accent);
  color: var(--isbr-accent);
}
.isbr-btn-ghost {
  background: transparent;
  color: var(--isbr-muted);
  border: 1px solid transparent;
}
.isbr-btn-ghost:hover {
  color: var(--isbr-text);
  border-color: var(--isbr-border);
}
.isbr-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Responsive ──
   600px 以下（スマートフォン縦向き想定）の調整。
   ・ Wrapper のパディングを縮小してコンテンツ幅を確保する。
   ・ 矢印アイコンを 90度回転させ、横向き矢印を縦向き（↓）に変える。
     Canvas Row が縦積みになったとき自然な「上から下」の流れを示すため。
*/
@media (max-width: 600px) {
  .isbr-wrap { padding: 24px 16px; }
  .isbr-arrow svg { transform: rotate(90deg); }
}