/* ============================================================
   WD-D1: デザインレイヤー
   ============ 2026-07-08 Yuki承認により正式デザインに昇格 ============
   ------------------------------------------------------------
   style.css (base) の後に読み込む「デザインレイヤー」。
   意図的に2ファイル構成を維持している:
   ・base に混ぜないことで、デザインの差し替え・調整・切り戻しが安全にできる
   ・旧デザインに戻す場合: index.html からこのファイルの <link> を外すだけ
   ------------------------------------------------------------
   設計要点:
   - アクセントは Action Blue #0066cc のみ (ダーク面では #2997ff)
   - 面: 白/パーチメント#f5f5f7 ↔ ニアブラック#272729系。境界は色の変化かヘアライン
   - ボタン=ピル型、押下時 scale(0.95)。カード/ボタンに影は使わない
   - 見出しはわずかにマイナス字間 ("Apple tight")
   - バー類はすりガラス (backdrop-filter: saturate(180%) blur(20px))
   対象テーマ: ダーク/ライトのみ再定義。ネイビー/セピアは従来のまま。
   ============================================================ */

/* ───── サーフェス (テーマ変数の差し替え) ───── */
body, body.theme-dark {
  --bg:      #1d1d1f;   /* ink をそのまま面に */
  --bg-elev: #272729;   /* surface-tile-1 */
  --border:  #3a3a3c;
  --text:    #f5f5f7;
  --muted:   #a1a1a6;
  --accent:  #2997ff;   /* Sky Link Blue (ダーク面用) */
}
html, html.theme-dark { background: #161617; }

body.theme-light {
  --bg:      #ffffff;   /* canvas */
  --bg-elev: #f5f5f7;   /* parchment */
  --border:  #e0e0e0;   /* hairline */
  --text:    #1d1d1f;   /* ink */
  --muted:   #7a7a7a;   /* ink-muted-48 */
  --accent:  #0066cc;   /* Action Blue */
}
html.theme-light { background: #f5f5f7; }

/* ───── タイポグラフィ ("Apple tight") ───── */
body { letter-spacing: -0.15px; }
h2, h3, .brand-title { font-weight: 600; letter-spacing: -0.37px; }
.msg .sender { font-weight: 600; }

/* ───── バー類: すりガラス化 ─────
   テーマの --bg-elev から自動算出する (セピア・ネイビー等どのテーマでも破綻しない)。 */
#titlebar, #topbar, #tabs, #filterBar {
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
/* WD-UI11: 内側 (WebView領域) の角も丸める。最上段=タイトルバーの上角、
   最下段=絞り込みバーの下角。外枠色はページ地色と完全一致するため角の外は見えない */
#titlebar { border-radius: 10px 10px 0 0; }
#filterBar { border-radius: 0 0 10px 10px; border-bottom: none; }
body.overlay #tabs { border-radius: 10px 10px 0 0; }
/* オーバーレイ時のタブバーは従来の透過を優先 (style.css の指定が後勝ちしないためここで再指定) */
body.overlay #tabs { background: rgba(28, 32, 48, 0.55); backdrop-filter: blur(4px); }

/* ───── ボタン: ピル + scale(0.95) ───── */
.btn {
  border-radius: 9999px;
  border: 1px solid var(--border);
  letter-spacing: -0.22px;
  transition: transform .12s ease, background .12s, color .12s, border-color .12s;
}
.btn:active { transform: scale(0.95); }
.btn.primary, .btn.primary:hover {
  background: #0066cc; border-color: #0066cc; color: #fff;
}
.btn.primary:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
/* タイトルバーのウィンドウ操作ボタンはピル化しない (OS的な操作なので従来形状) */
#titlebar .win-btn, #overlayHandle .win-btn { border-radius: 4px; }
#titlebar .win-btn:active, #overlayHandle .win-btn:active { transform: none; }

/* ───── タブ: Apple ピル ───── */
.tab, .tab-add {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  letter-spacing: -0.22px;
  transition: transform .12s ease, background .12s, color .12s, border-color .12s;
}
.tab:hover { color: var(--text); border-color: var(--muted); }
.tab:active { transform: scale(0.95); }
.tab.active {
  background: #0066cc; border-color: #0066cc; color: #fff;
}
/* オーバーレイ時の視認性チップ (WD-UI2) は維持しつつ配色だけ馴染ませる */
body.overlay .tab, body.overlay .tab-add {
  background: rgba(29, 29, 31, .78);
  border-color: rgba(255, 255, 255, .30);
}
body.overlay .tab.active { background: #0066cc; border-color: #0066cc; color: #fff; }
/* オーバーレイのバーはすりガラス化の対象外 (従来の半透明を維持) */
body.overlay #titlebar, body.overlay #topbar, body.overlay #filterBar { background: transparent; border-bottom: none; }

/* ───── メッセージまわり ───── */
.msg { border-radius: 8px; }
.msg:hover { background: rgba(125, 125, 130, .08); }
.msg.self { background: rgba(41, 151, 255, .10); border-left: 3px solid var(--accent); }
body.theme-light .msg.self { background: rgba(0, 102, 204, .08); }

/* 吹き出し: 角丸18px + ヘアライン、影なし */
body.display-bubble .msg-body {
  border-radius: 18px;
  border-color: var(--border);
  box-shadow: none;
}
/* WD-D2: 自分の吹き出しの iMessage 風単色 (#0066cc+白文字) は廃止 (Yuki指示: 濃すぎる)。
   base (style.css) の薄青 (通常ハイライト相当の color-mix) をそのまま使う。 */
body.display-bubble .msg.self:not(.pinned-row) { background: transparent; border-left: none; }

/* ───── モーダル / カード: 角丸18px + ヘアライン、影なし ───── */
.modal-inner {
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--bg);
}
.modal { background: rgba(0, 0, 0, .4); backdrop-filter: blur(6px); }

/* ───── 入力類 ───── */
input[type="text"], input[type="number"], select, textarea {
  border-radius: 8px;
  border-color: var(--border);
}
#filterInput, #searchQ, input[type="search"] { border-radius: 9999px; padding-left: 14px; }  /* 検索系はピル */

/* ───── バッジ / ピン等の小物 ───── */
.msg .badge { font-weight: 600; letter-spacing: 0; }
.dot.ok { background: #30d158; }   /* Apple system green */

/* ───── スクロールバー: さらに控えめに ───── */
::-webkit-scrollbar-thumb { background: rgba(125, 125, 130, .4) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(125, 125, 130, .6) !important; }
