/*
 * Tootween PWA 版の見た目（#57 の案 B「すりガラス」。docs/design/mockups/57-design-directions.html）。
 * - すりガラス（backdrop-filter）は枠（ヘッダー・タブ・ツールバー）にだけ使う。一覧と詳細ペインは読みやすさのため不透明（2026-10-24 決定）
 * - 動きは入れない（トランジション・アニメーションを使わない。prefers-reduced-motion に関わらず）
 * - 名前の色・行の背景・未読の太字など、意味のある色分けは Windows 版（src/Tootween.Wpf/Views/Colors.xaml）と同じ
 * - 字は端末のもの（外部のフォントを読まない）
 */

/* ---------- トークン（明るい） ---------- */
:root {
    color-scheme: light;
    --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --radius-panel: 12px; --radius-ctl: 10px; --radius-pill: 999px; --radius-media: 12px;
    --shadow-panel: 0 8px 28px rgba(30, 40, 90, .12);

    /* 後ろの色（静的なグラデーション。動かさない） */
    --backdrop: radial-gradient(1200px 500px at 0% 0%, #b9d7ff 0%, transparent 60%), radial-gradient(900px 500px at 100% 10%, #f6c7e8 0%, transparent 55%), radial-gradient(900px 600px at 50% 120%, #c6f1e4 0%, transparent 60%), #eef1f8;

    /* 枠（すりガラス） */
    --frame-bg: rgba(255, 255, 255, .45);
    --frame-blur: blur(24px) saturate(1.4);

    /* 文字・線・不透明のパネル */
    --fg: #14161c; --sub: #5a6070; --body-fg: #2a2f3a;
    --line: #dfe3ec; --row-line: #eef0f5;
    --panel-bg: #ffffff; --head-bg: #f6f7fb; --field: #ffffff; --btn-bg: #ffffff; --rx-bg: #eef0f4;

    --accent: #0a7c86; --accent-fg: #ffffff; --accent2: #7b4bd6; --live: #10a37f;
    --tab-on-bg: rgba(255, 255, 255, .9); --tab-on-line: rgba(20, 30, 60, .08); --tab-on-shadow: 0 2px 8px rgba(30, 40, 90, .12);
    --badge-bg: #0a7c86; --badge-fg: #ffffff;

    /* 意味のある色（Windows 版の Colors.xaml と同じ値） */
    --row-bg: #ffffff;
    --boost-bg: #f1ecfa;      /* ブーストの行（薄紫） */
    --same-bg: #fbf3c4;       /* 選んだ人のほかの投稿（薄い黄） */
    --reply-bg: #ffe9d6;      /* 自分宛ての返信（薄いオレンジ） */
    --home-bg: #dff3e0;       /* 名前の欄: 取得したアカウントのサーバーの人（薄い緑） */
    --unread-mark: #0a3f9e;   /* 未読の印 */
    --own: #1e6b3a;           /* 自分の投稿（緑） */
    --grey: #707070;          /* 削除・ブーストの取り消し */
    --n-boostroute: #006d77;  /* 青緑: ブーストで流れてきた、フォローしていない元の投稿者 */
    --n-listroute: #8b4513;   /* 茶: リストのタブの、フォローしていない投稿者 */
    --n-oneway: #0a3f9e;      /* 青: 片思い */
    --n-notback: #a8007a;     /* 赤紫: フォローを返していない */
    /* 選択行（案 B の色を不透明にしたもの） */
    --sel-bg: #c4e8ec; --sel-fg: #0b1b1d;
}

/* ---------- トークン（暗い）。端末が暗い設定で、明るいに固定していないとき ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --shadow-panel: 0 8px 28px rgba(0, 0, 0, .45);
        --backdrop: radial-gradient(1200px 500px at 0% 0%, #1d3a6b 0%, transparent 60%), radial-gradient(900px 500px at 100% 10%, #4d1f48 0%, transparent 55%), radial-gradient(900px 600px at 50% 120%, #0f3f37 0%, transparent 60%), #0d1018;
        --frame-bg: rgba(18, 22, 34, .45);
        --fg: #eef1f7; --sub: #a3aabb; --body-fg: #d3d8e3;
        --line: #262c3a; --row-line: #1c2130;
        --panel-bg: #121622; --head-bg: #181d2b; --field: #1a1f2c; --btn-bg: #1e2332; --rx-bg: #1f2533;
        --accent: #4fd1c5; --accent-fg: #06201e; --accent2: #c4a1ff;
        --tab-on-bg: rgba(255, 255, 255, .12); --tab-on-line: rgba(255, 255, 255, .12); --tab-on-shadow: none;
        --badge-bg: #4fd1c5; --badge-fg: #06201e;
        --row-bg: #121622; --boost-bg: #251e3c; --same-bg: #2f2b1a; --reply-bg: #34231a; --home-bg: #183f2a;
        --unread-mark: #86a8ff; --own: #6ee7a0; --grey: #687083;
        --n-boostroute: #5fe0d3; --n-listroute: #eaa868; --n-oneway: #86a8ff; --n-notback: #f39ad9;
        --sel-bg: #1b4951; --sel-fg: #ffffff;
    }
}

/* ---------- トークン（暗い）。アプリの設定で暗いに固定したとき（上と同じ値） ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --shadow-panel: 0 8px 28px rgba(0, 0, 0, .45);
    --backdrop: radial-gradient(1200px 500px at 0% 0%, #1d3a6b 0%, transparent 60%), radial-gradient(900px 500px at 100% 10%, #4d1f48 0%, transparent 55%), radial-gradient(900px 600px at 50% 120%, #0f3f37 0%, transparent 60%), #0d1018;
    --frame-bg: rgba(18, 22, 34, .45);
    --fg: #eef1f7; --sub: #a3aabb; --body-fg: #d3d8e3;
    --line: #262c3a; --row-line: #1c2130;
    --panel-bg: #121622; --head-bg: #181d2b; --field: #1a1f2c; --btn-bg: #1e2332; --rx-bg: #1f2533;
    --accent: #4fd1c5; --accent-fg: #06201e; --accent2: #c4a1ff;
    --tab-on-bg: rgba(255, 255, 255, .12); --tab-on-line: rgba(255, 255, 255, .12); --tab-on-shadow: none;
    --badge-bg: #4fd1c5; --badge-fg: #06201e;
    --row-bg: #121622; --boost-bg: #251e3c; --same-bg: #2f2b1a; --reply-bg: #34231a; --home-bg: #183f2a;
    --unread-mark: #86a8ff; --own: #6ee7a0; --grey: #687083;
    --n-boostroute: #5fe0d3; --n-listroute: #eaa868; --n-oneway: #86a8ff; --n-notback: #f39ad9;
    --sel-bg: #1b4951; --sel-fg: #ffffff;
}

/* アカウントの色（Application の AccountPalette.Colors と同じ順・同じ値）。色帯・アイコンの代わりの丸に使う */
.pal-0 { --c: #8ec5f2; } .pal-1 { --c: #f6b26b; } .pal-2 { --c: #8fd694; } .pal-3 { --c: #c6a6e8; }
.pal-4 { --c: #f0dc6a; } .pal-5 { --c: #f4a6c0; } .pal-6 { --c: #7fd6cf; } .pal-7 { --c: #d2b48c; }
.pal-8 { --c: #f28b82; } .pal-9 { --c: #8fe0f0; } .pal-10 { --c: #c3e57c; } .pal-11 { --c: #a4a9f2; }
.pal-12 { --c: #f7a58b; } .pal-13 { --c: #b5e8c9; } .pal-14 { --c: #e59bdd; } .pal-15 { --c: #c8c8c8; }
.pal-16 { --c: #bfc98a; } .pal-17 { --c: #b9d7f2; } .pal-18 { --c: #f8d5a3; } .pal-19 { --c: #dcc3f0; }
.pal-20 { --c: #f5c242; } .pal-21 { --c: #f9c0c8; } .pal-22 { --c: #9adf7f; } .pal-23 { --c: #b4c3d6; }

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; transition: none !important; animation: none !important; }
html { scroll-behavior: auto; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--backdrop);
    background-color: #eef1f8;
    color: var(--fg);
    font-family: var(--font);
    font-size: 13px;
    -webkit-text-size-adjust: 100%;
}
:root[data-theme="dark"] body { background-color: #0d1018; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-color: #0d1018; } }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.loading { margin: 30vh 0 0; text-align: center; color: var(--sub); }
.not-found { padding: 24px; }

/* ---------- 画面の骨組み ---------- */
.app {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 枠: すりガラスはここだけ */
.frame {
    background: var(--frame-bg);
    -webkit-backdrop-filter: var(--frame-blur);
    backdrop-filter: var(--frame-blur);
}

.titlebar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; }
.brand { font-weight: 700; font-size: 14px; }
.acct { display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent); }

.theme-switch { margin-left: auto; display: inline-flex; flex: none; padding: 2px; border-radius: var(--radius-pill); border: 1px solid var(--tab-on-line); }
.theme-switch button { border: 0; background: transparent; color: var(--sub); padding: 3px 10px; border-radius: var(--radius-pill); cursor: pointer; font-size: 12px; }
.theme-switch button[aria-pressed="true"] { background: var(--tab-on-bg); color: var(--fg); box-shadow: var(--tab-on-shadow); font-weight: 600; }

.tabs { display: flex; gap: 6px; padding: 6px 10px 8px; overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 14px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--sub); white-space: nowrap; cursor: pointer; }
.tab .tab-title { min-width: 0; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.tab.on { color: var(--fg); background: var(--tab-on-bg); border-color: var(--tab-on-line); box-shadow: var(--tab-on-shadow); font-weight: 600; }
.tab .n { font-size: 11px; font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: var(--radius-pill); background: var(--badge-bg); color: var(--badge-fg); line-height: 17px; font-weight: 600; }

.toolbar { display: flex; align-items: center; gap: 12px; padding: 2px 14px 8px; color: var(--sub); font-size: 12px; }
.toolbar-title { color: var(--fg); font-weight: 600; }
.toolbar-note { margin-left: auto; }
.toolbar .refresh { margin-left: auto; padding: 3px 12px; }
.notice { padding: 4px 14px 8px; font-size: 12px; color: var(--sub); }
.notice[role="alert"] { color: var(--n-notback); }
.notice a { color: var(--accent); }

.panes { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 0 10px 10px; }

/* 一覧と詳細ペイン: 不透明のパネル */
.list, .detail {
    background: var(--panel-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
}
.list { flex: 1 1 60%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rows { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rows:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.detail { flex: 0 0 38%; min-height: 0; overflow-y: auto; padding: 16px 20px; }

/* ---------- 一覧の行（PC・iPad: 1 行 1 投稿） ---------- */
.row {
    display: grid;
    grid-template-columns: 4px 18px 58px 28px 140px 140px 110px minmax(0, 1fr) 34px 72px;
    grid-template-areas: "band mark fav av name acct boost body att time";
    align-items: center;
    min-height: 28px;
    background: var(--row-bg);
    border-bottom: 1px solid var(--row-line);
    cursor: default;
}
.row > span { padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.row.head { min-height: 24px; background: var(--head-bg); border-bottom: 1px solid var(--line); color: var(--sub); font-size: 11px; }
.row.head .c-band { background: transparent; }

.c-band { grid-area: band; align-self: stretch; padding: 0 !important; background: var(--c); }
.c-mark { grid-area: mark; padding: 0 !important; text-align: center; color: var(--unread-mark); font-size: 10px; }
.c-fav { grid-area: fav; text-align: right; color: var(--sub); font-variant-numeric: tabular-nums; }
.c-av { grid-area: av; display: flex; align-items: center; }
.c-av i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.c-name { grid-area: name; }
.c-acct { grid-area: acct; color: var(--sub); font-size: 12px; }
.c-boost { grid-area: boost; color: var(--sub); font-size: 12px; }
.c-body { grid-area: body; color: var(--body-fg); }
.c-att { grid-area: att; text-align: center; padding: 0 !important; }
.c-time { grid-area: time; text-align: right; color: var(--sub); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rt { color: var(--accent2); }

/* 画像（アバター・カスタム絵文字・添付のプレビュー）。URL は ImageUrlPolicy を通ったものだけ。大きさは CSS で決める（style 属性は使わない） */
.c-av i, .d-av { overflow: hidden; }
.av-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.emoji { height: 1.3em; width: auto; vertical-align: -0.3em; margin: 0 1px; }
.list-note { margin: 0; padding: 16px 20px; color: var(--sub); }
.list-foot { flex: none; padding: 8px 12px; text-align: center; border-top: 1px solid var(--line); background: var(--head-bg); }

/* 行の背景（優先順位は Application の RowBackgroundPolicy が決める） */
.row.bg-boost { background: var(--boost-bg); }
.row.bg-same { background: var(--same-bg); }
.row.bg-reply { background: var(--reply-bg); }
.row.sel { background: var(--sel-bg); outline: 1px solid var(--accent); outline-offset: -1px; }
.row.sel > span:not(.c-name):not(.c-mark) { color: var(--sel-fg); }

/* 未読は太字 */
.row.unread { font-weight: 700; }
.row.unread .c-body { color: var(--fg); }
.row.sel.unread .c-body { color: var(--sel-fg); }

/* 名前の色（Application の NameColorPolicy が決める） */
.name.home { background: var(--home-bg); border-radius: 4px; padding: 1px 4px; margin-left: -4px; }
.name.n-boostroute { color: var(--n-boostroute); }
.name.n-listroute { color: var(--n-listroute); }
.name.n-oneway { color: var(--n-oneway); }
.name.n-notback { color: var(--n-notback); }
.row.own .name { color: var(--own); }
.row.grey > span, .row.grey .name { color: var(--grey); }

/* ---------- 詳細ペイン ---------- */
.btn.back { display: none; }
.d-empty { margin: 0; color: var(--sub); }
.d-boost { font-size: 12px; color: var(--sub); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.d-head { display: flex; align-items: center; gap: 12px; }
.d-av { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--c); }
.d-who { min-width: 0; }
.d-who b { display: block; font-size: 16px; line-height: 1.2; }
.d-who span { color: var(--sub); font-size: 12px; overflow-wrap: anywhere; }
.d-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; color: var(--sub); font-size: 11.5px; font-family: var(--mono); line-height: 1.6; white-space: nowrap; }
.d-text { font-size: 14.5px; line-height: 1.8; max-width: 72ch; margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-para { margin: 0 0 .6em; }
.d-para:last-child { margin-bottom: 0; }
.d-para a { color: var(--accent); overflow-wrap: anywhere; }
.d-para code { font-family: var(--mono); font-size: .92em; background: var(--rx-bg); border-radius: 4px; padding: 0 4px; }
.d-gate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--head-bg); }
.d-gate-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.d-link { margin: 0 0 12px; font-size: 12.5px; }
.d-link a { color: var(--accent); }
.d-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.media-ph { width: 168px; height: 104px; border-radius: var(--radius-media); background: var(--c); display: flex; align-items: flex-end; padding: 6px 10px; color: #1d1d1f; font-size: 11px; }
.media-img { display: block; width: 168px; height: 104px; object-fit: cover; border-radius: var(--radius-media); background: var(--rx-bg); }
.media-link { display: block; }
a.media-ph { text-decoration: none; }
.d-react { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--field); }
.chip.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--field)); }
.chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sub); }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-ctl); border: 1px solid var(--line); background: var(--btn-bg); color: var(--fg); font-size: 12.5px; cursor: pointer; }
.btn:disabled { color: var(--sub); cursor: not-allowed; }

/* ---------- iPad の縦・狭い PC ---------- */
@media (max-width: 900px) {
    .row {
        grid-template-columns: 4px 16px 56px 28px 120px minmax(0, 1fr) 36px 66px;
        grid-template-areas: "band mark fav av name body att time";
    }
    .c-acct, .c-boost { display: none; }
}

/* ---------- iPhone の縦: 本文 2 行まで、+N は行の左端。詳細は一覧の代わりに出す ---------- */
@media (max-width: 600px) {
    .titlebar { padding: 0 10px; gap: 8px; }
    .toolbar-note { display: none; }
    .panes { padding: 0 6px 6px; }
    .row.head { display: none; }
    .row {
        grid-template-columns: 4px 56px 30px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "band fav  av name att  time"
            "band mark av body body body";
        align-items: start;
        row-gap: 2px;
        padding: 6px 0;
    }
    .row > span { line-height: 1.45; }
    .c-band { grid-row: 1 / span 2; }
    .c-av { grid-row: 1 / span 2; padding-top: 2px !important; }
    .c-av i { width: 22px; height: 22px; }
    .c-fav { text-align: left; }
    .c-mark { text-align: left; padding-left: 6px !important; }
    .c-time { font-size: 11px; }
    .c-body {
        white-space: normal !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow-wrap: anywhere;
    }

    .detail { display: none; }
    .app.detail-open .list { display: none; }
    .app.detail-open .detail { display: block; flex: 1 1 auto; }
    .btn.back { display: inline-flex; margin: 0 0 12px; }
    .d-meta { display: none; }
    .media-ph { width: 120px; height: 80px; }
    .media-img { width: 120px; height: 80px; }
}

/* ---------- Blazor のエラー表示 ---------- */
#blazor-error-ui {
    background: #fff4cc; color: #1d1d1f;
    bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: #ffffff; }
.blazor-error-boundary::after { content: "エラーが起きました。"; }

/* ---------- ログイン画面（Pages/Login.razor・AuthCallback.razor） ---------- */
.login-link { color: var(--fg); font-size: 12.5px; text-decoration: none; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-ctl); background: var(--btn-bg); }
.auth { max-width: 460px; margin: 48px auto; padding: 0 16px; color: var(--fg); }
.auth h1 { font-size: 20px; margin: 0 0 16px; }
.auth label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.auth-input { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius-ctl); border: 1px solid var(--line); background: var(--field); color: var(--fg); font: inherit; }
.auth-account { font-family: var(--mono); }
.auth-error { color: #b32121; }
.auth-warning { color: #b32121; }
.auth a { color: var(--accent); }