/* =====================================================
   LinkUp - スタイルシート
   ===================================================== */

/* ロゴマーク。ダウンロード版（HTML1枚）でも表示できるよう、外部ファイル参照ではなく
   データURLとしてここに埋め込んでいる。表示は最大60px、DPR3を想定して264px幅で収録。 */
.logo-mark,
.auth-logo-mark {
    display: block;
    background-image: url("data:image/png;base64,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");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* ベース変数 */
:root {
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #eff6ff;
    --danger-color: #dc2626;
    --danger-dark: #b91c1c;
    --success-color: #16a34a;
    --warning-color: #ca8a04;
    --background-color: #f8fafc;
    --surface-color: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --hover-color: rgba(0, 0, 0, 0.04);
    --bg-color: #ffffff;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --animation-duration: 0.2s;
    --border-radius-sm: 0.5rem;
    --border-radius-lg: 1rem;
}

/* リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* この画面は明るい配色で作ってある。
   これを書いておかないと、端末の設定が「ダークモード」のときに
   ブラウザがスクロールバーや入力欄を黒く描いてしまう。 */
:root {
    color-scheme: light;
}

/* スクロールバーは細く、控えめな色にする。
   端末まかせだと、画面の右端に濃い帯が入ったように見えることがある。 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 8px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.5);
    }

::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100svh;
    /* キーボードが出て画面が縮んだときに、横へはみ出さないようにする */
    overflow-x: hidden;
}

/* アプリの画面を出している間は、ページそのものを動かさない。
   中身（一覧・チャット・モーダル）はそれぞれの枠の中でスクロールするので、
   外側までスクロールできる必要はない。
   外側がわずかにはみ出していると、文字を打とうとした瞬間に
   スクロールバーが現れて、画面の右端に帯が出たように見えてしまう。 */
body.app-open {
    overflow: hidden;
    /* 高さもいまの見えている分に合わせる（キーボードで縮んでも余らない） */
    min-height: 100svh;
    min-height: 100dvh;
    height: 100svh;
    height: 100dvh;
}

    body.app-open > .screen {
        min-height: 0;
        height: 100%;
    }

button {
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

input {
    font-family: inherit;
    border: none;
    outline: none;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* =====================================================
   認証画面
   ===================================================== */
.screen {
    min-height: 100vh;
    min-height: 100svh;
}

.auth-container {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%);
}

.auth-card {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    animation: modalAppear 0.3s ease;
}

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

    .auth-logo i {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        display: block;
    }

    .auth-logo-mark {
        height: 60px;
        width: 80px;
        margin: 0 auto 0.75rem;
    }

    .auth-logo h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .auth-logo p {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

/* タブ */
.auth-tabs {
    display: flex;
    border-radius: var(--border-radius-sm);
    background: var(--background-color);
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    gap: 0.25rem;
}

.auth-tab {
    flex: 1;
    padding: 0.6rem;
    border-radius: calc(var(--border-radius-sm) - 2px);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    transition: all var(--animation-duration) ease;
}

    .auth-tab.active {
        background: var(--surface-color);
        color: var(--primary-color);
        box-shadow: var(--shadow-sm);
    }

    .auth-tab:hover:not(.active) {
        color: var(--text-primary);
    }

/* フォーム */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

    .form-group label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .form-group input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1.5px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        font-size: 0.95rem;
        background: var(--background-color);
        color: var(--text-primary);
        transition: border-color var(--animation-duration) ease;
    }

        .form-group input:focus {
            border-color: var(--primary-color);
        }

.form-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-wrap input {
        padding-right: 3rem;
    }

.pw-toggle-btn {
    position: absolute;
    right: 0.75rem;
    background: transparent;
    color: var(--text-secondary);
    padding: 0.25rem;
    font-size: 0.875rem;
}

    .pw-toggle-btn:hover {
        color: var(--primary-color);
    }

.auth-error {
    font-size: 0.85rem;
    color: var(--danger-color);
    min-height: 1.2em;
}

.auth-submit-btn {
    padding: 0.85rem;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

    .auth-submit-btn:hover:not(:disabled) {
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

.auth-footer-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

    .auth-footer-note i {
        color: var(--success-color);
    }

/* =====================================================
   アプリレイアウト
   ===================================================== */
.app-container {
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ヘッダー */
.app-header {
    background-color: var(--surface-color);
    padding: 0.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

    .logo i {
        font-size: 1.5rem;
    }

    .logo-mark {
        height: 26px;
        width: 35px;
        transform: translateY(-3.5px);
        transition: transform var(--animation-duration, 0.2s) ease;
    }

    .logo:hover .logo-mark {
        transform: translateY(-3.5px) scale(1.06);
    }

    .logo h1 {
        font-size: 1.25rem;
        font-weight: 700;
        background: linear-gradient(135deg, #2563eb, #a855f7 55%, #ec4899);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

/* 接続状態はロゴのすぐ隣に置く。
   以前は「ロゴとナビの残り幅の中央」に寄せていたため、
   ページの中央でもロゴの隣でもない中途半端な位置に浮いて見えていた。
   ナビの数が変わるたびに位置がずれるのも落ち着かない原因だった。 */
.header-center {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--warning-color);
    transition: background-color var(--animation-duration) ease;
}

    .status-indicator.connected {
        background-color: var(--success-color);
    }

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ナビボタン群のコンテナ。PCでは横並び（旧来 header-right 直下と同じ見た目） */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-username {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.icon-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--animation-duration) ease;
    flex-shrink: 0;
}

    .icon-button:hover {
        background-color: var(--background-color);
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .icon-button.active {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }

/* セキュリティパネル */
.security-panel {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    max-height: 200px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

    .security-panel.collapsed {
        max-height: 0;
    }

.security-panel-inner {
    padding: 1rem 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.info-item label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.copy-field {
    display: flex;
    gap: 0.5rem;
}

    .copy-field input {
        flex: 1;
        padding: 0.65rem 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        font-family: monospace;
        font-size: 0.85rem;
        background-color: var(--background-color);
        color: var(--text-primary);
    }

.copy-btn, .toggle-visibility-btn {
    padding: 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--surface-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
}

    .copy-btn:hover, .toggle-visibility-btn:hover {
        background-color: var(--background-color);
        color: var(--primary-color);
    }

/* =====================================================
   メインコンテンツ
   ===================================================== */
.main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.main-layout {
    display: grid;
    /* 幅はユーザーがドラッグで変えられる（JSが --users-panel-width を書き換える） */
    grid-template-columns: var(--users-panel-width, 280px) 1fr;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

    /* 通話中：サイドバー非表示時はビデオエリアが全幅を占有 */
    .main-layout:has(.users-panel[style*="display: none"]),
    .main-layout:has(.user-list-section[style*="display: none"]),
    .main-layout.in-call {
        grid-template-columns: 1fr;
    }

/* =====================================================
   ユーザーリストパネル
   ===================================================== */
.users-panel {
    position: relative;
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

    .panel-header h2 {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .panel-header h2 i {
            color: var(--primary-color);
            font-size: 0.9rem;
        }

.user-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.user-list-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

    .user-list-empty i {
        font-size: 2rem;
        margin-bottom: 0.75rem;
        display: block;
        opacity: 0.4;
    }

.user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    border-radius: var(--border-radius-sm);
    gap: 0.5rem;
    transition: background var(--animation-duration) ease;
}

    .user-item:hover {
        background: var(--background-color);
    }

.user-item-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.user-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    flex-shrink: 0;
}

/* 別タブを表示中（離席中）の在席状態 */
.user-online-dot.away {
    background: #f59e0b; /* オレンジ */
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

.user-away-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    line-height: 1;
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 2px 6px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 別タブ表示中のユーザーはアバター・名前を少しだけ控えめに */
.user-item.is-away .user-avatar,
.user-item.is-away .user-item-name {
    opacity: 0.72;
}

.call-user-btn {
    padding: 0.35rem 0.55rem;
    background: var(--primary-light);
    color: var(--primary-color);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-shrink: 0;
    border: 1px solid transparent;
    cursor: pointer;
    width: 30px;
    height: 30px;
    transition: all var(--animation-duration) ease;
}

    .call-user-btn:hover {
        background: var(--primary-color);
        color: white;
        transform: scale(1.08);
    }

/* フレンドマーク（小さなチェック付きユーザー） */
.user-friend-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #34d399);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 0.1rem;
}

/* フレンドの user-item は左側にうっすらアクセントを付けて視認性UP */
.user-item.is-friend {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.06), transparent 60%);
}

    .user-item.is-friend:hover {
        background: linear-gradient(to right, rgba(16, 185, 129, 0.12), var(--background-color));
    }

/* =====================================================
   ビデオエリア
   ===================================================== */
.video-area {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 0.75rem;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

.waiting-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    min-height: 300px;
}

.waiting-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

.waiting-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.waiting-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 300px;
}

/* ビデオグリッド
   PC: 横並び2カラム、エリアの高さを最大限使う
   -------------------------------------------- */
.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr; /* 親の高さを均等に分割 */
    gap: 0.75rem;
    flex: 1; /* video-area内の余白をすべて使う */
    min-height: 0; /* flexアイテムの縮小を許可 */
}

.video-container {
    position: relative;
    background-color: #1a1a1a;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-height: 0;
    /* aspect-ratioではなく親グリッドの高さに従う */
}

    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.participant-name {
    font-size: 0.875rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.video-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.control-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .control-button:hover {
        background-color: rgba(255,255,255,0.35);
        transform: scale(1.05);
    }

    .control-button.active {
        background-color: var(--danger-color);
    }

.connection-quality {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 通話中コントロールバー（メッシュ通話含む） */
.call-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.85rem 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

/* .call-controls 内の .control-button は通話バー仕様（白基調） */
.call-controls .control-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--background-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.call-controls .control-button:hover {
    background-color: #e2e8f0;
    transform: translateY(-1px);
}

.call-controls .control-button.active {
    background-color: var(--danger-color);
    color: #fff;
    border-color: var(--danger-color);
}

.call-controls .control-button.sharing {
    background-color: var(--success-color);
    color: #fff;
    border-color: var(--success-color);
}

.end-call-btn {
    padding: 0.75rem 2rem;
    background: var(--danger-color);
    color: white;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .end-call-btn:hover {
        background: var(--danger-dark);
        transform: translateY(-1px);
    }

/* 音量スライダー */
.volume-slider-container {
    position: absolute;
    bottom: 80px;
    right: 20px;
    width: 160px;
    background-color: rgba(0,0,0,0.85);
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    display: none;
    backdrop-filter: blur(4px);
}

    .volume-slider-container.visible {
        display: block;
    }

.volume-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

.boost-badge {
    background: #f59e0b;
    color: #1e293b;
    font-weight: 700;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 999px;
    display: none;
}

    .boost-badge.visible {
        display: inline-block;
    }

.volume-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    background: linear-gradient(to right, rgba(255,255,255,0.8) 33.3%, rgba(255,255,255,0.2) 33.3%);
    border-radius: 2px;
    outline: none;
}

    .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 50%;
        cursor: pointer;
    }

    .volume-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }

    .volume-slider.boosted::-webkit-slider-thumb {
        background: #f59e0b;
    }

    .volume-slider.boosted::-moz-range-thumb {
        background: #f59e0b;
    }

/* =====================================================
   モーダル共通
   ===================================================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

    .modal.visible {
        display: flex;
    }

/* 通知・エラー系モーダルは常に最前面 */
#notificationModal,
#notificationModal.modal {
    z-index: 9999;
}

/* 着信系・切断系も他のモーダルより前に */
#incomingCallModal,
#incomingFriendRequestModal,
#incomingGroupInviteModal {
    z-index: 5000;
}

#callingModal {
    z-index: 4000;
}

/* ファイル転送はトーク画面（DM/グループ）から開くため、それらより前面に出す。
   （DOM上ではチャットモーダルより手前にあり、同じz-indexだと背面に隠れてしまう） */
#fileTransferModal,
#incomingFileTransferModal {
    z-index: 2000;
}

.modal-content {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    max-height: 90vh; /* 画面からはみ出さないように */
    max-height: 90svh;
    overflow-y: auto; /* はみ出す場合は内部スクロール */
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: modalAppear var(--animation-duration) ease;
}

.modal-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.modal-message {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.modal-close {
    padding: 0.75rem 2rem;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
}

    .modal-close:hover {
        background: var(--primary-dark);
    }

/* =====================================================
   アップデート案内モーダル
   ===================================================== */
.update-modal-content {
    text-align: center;
    max-width: 420px;
}

.update-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}

.update-modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    word-break: break-word;
}

.update-modal-version {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(14, 165, 233, 0.12);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.8rem;
}

/* アップデートモーダル（通話申請の通知風） */
#updateModal {
    z-index: 4500; /* 通常モーダルより前面に出して目立たせる（着信5000の手前） */
}
.update-call-icon {
    background: #dbeafe; /* 青系（着信の緑に対して更新は青） */
    color: #2563eb;
}
/* 着信の「応答/拒否」と同じ横並びにする */
#updateModal .update-modal-actions {
    flex-direction: row;
    gap: 0.75rem;
}

/* 更新モーダルの「×」閉じるボタン（右上に常時表示）
   セレクタを #updateModal から始めているのは、あとに出てくる
   「ヘッダーバッジ」用の .icon-button { position: relative } に
   同じ強さで上書きされ、右上ではなく左上に出てしまうため。 */
.update-modal-content {
    position: relative;
}
#updateModal .update-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-secondary);
    background: transparent;
    font-size: 1rem;
    z-index: 2;
}
#updateModal .update-modal-close:hover {
    background: var(--hover-color, rgba(0, 0, 0, 0.06));
    color: var(--text-primary);
}

/* =====================================================
   アイコン画像トリミング（切り取り）モーダル
   ===================================================== */
#cropModal {
    z-index: 12000; /* 設定モーダル等より前面に出す */
}
.crop-modal-content {
    max-width: 360px;
    text-align: center;
    padding: 1.5rem;
}
.crop-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.crop-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.crop-modal-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
    text-align: left;
}
.crop-stage-wrap {
    position: relative;
    width: 280px;
    height: 280px;
    max-width: 100%;
    margin: 0 auto 1rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: #1f2937;
    touch-action: none; /* ドラッグ／ピンチ操作のため */
    user-select: none;
}
.crop-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}
.crop-canvas:active {
    cursor: grabbing;
}
.crop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.crop-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.85);
}
.crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 auto 1.2rem;
    color: var(--text-secondary);
}
.crop-zoom-slider {
    flex: 1;
    accent-color: var(--primary-color);
    cursor: pointer;
}
.crop-modal-actions {
    display: flex;
    gap: 0.75rem;
}
.crop-modal-actions .settings-action-btn {
    flex: 1;
    justify-content: center;
}
.crop-reset-btn {
    background: var(--text-secondary);
}
.crop-apply-btn {
    background: var(--primary-color);
}
.crop-apply-btn:hover {
    background: var(--primary-dark);
}

/* バージョン比較（現在 → 最新） */
.update-ver-compare {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    margin: 0.25rem 0 1.1rem;
}

.update-ver-box {
    flex: 1;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.55rem 0.5rem;
    border-radius: 10px;
    background: var(--bg-color, #f1f5f9);
    border: 1px solid var(--border-color);
}

.update-ver-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.update-ver-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-all;
}

.update-ver-box-new {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.35);
}

    .update-ver-box-new .update-ver-value {
        color: #2563eb;
    }

.update-ver-arrow {
    align-self: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* 最新版を利用中のときは「最新」を緑で強調 */
.update-ver-compare.is-uptodate .update-ver-box-new {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.4);
}
    .update-ver-compare.is-uptodate .update-ver-box-new .update-ver-value {
        color: #16a34a;
    }

.update-modal-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 40vh;
    max-height: 40svh;
    overflow-y: auto;
}

.update-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.update-open-btn {
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
    color: #fff;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: filter var(--animation-duration) ease, transform var(--animation-duration) ease;
}

    .update-open-btn:hover {
        filter: brightness(1.07);
        transform: translateY(-1px);
    }

.update-later-btn {
    padding: 0.6rem 1rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    cursor: pointer;
}

    .update-later-btn:hover {
        background: var(--bg-color);
    }

.update-modal-empty {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

/* =====================================================
   アップデート「最新です／完了」状態の見た目
   配信が無いときも、完了したときと同じ落ち着いた印象にそろえる
   ===================================================== */
#updateModal.is-uptodate .update-call-icon {
    background: #dcfce7;              /* 青雲アイコン → 緑チェックの地色 */
    color: #16a34a;
}
.update-modal-empty.is-uptodate {
    color: #15803d;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 0.7rem 1rem;
    margin-top: 0.4rem;
}
.update-modal-empty.is-uptodate i {
    color: #16a34a;
    font-size: 1.05rem;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #updateModal.is-uptodate .update-call-icon {
        background: rgba(22, 163, 74, 0.2);
        color: #4ade80;
    }
    :root:not([data-theme="light"]) .update-modal-empty.is-uptodate {
        color: #86efac;
        background: rgba(22, 163, 74, 0.1);
        border-color: rgba(34, 197, 94, 0.35);
    }
}
:root[data-theme="dark"] #updateModal.is-uptodate .update-call-icon {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
}
:root[data-theme="dark"] .update-modal-empty.is-uptodate {
    color: #86efac;
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
}


/* 右上アップデートボタン: 新着があるとき淡く強調 */
#updateBtn.has-update {
    color: var(--primary-color);
}
    #updateBtn.has-update i {
        animation: updatePulse 1.8s ease-in-out infinite;
    }

@keyframes updatePulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

/* =====================================================
   トースト通知（ブロッキングな通知モーダルの置き換え）
   ===================================================== */
#toastContainer {
    position: fixed;
    /* 端末の切り欠き（ノッチ）の下に出す。上に隠れて読めないのを防ぐ。 */
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: auto;
    max-width: min(92vw, 420px);
    pointer-events: none; /* コンテナ自体は透過、個々のトーストだけ操作可能 */
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: var(--surface-color, #fff);
    color: var(--text-primary, #111);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    border-left: 4px solid var(--primary-color);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    .toast.hide {
        opacity: 0;
        transform: translateY(-8px);
    }

    .toast.type-success { border-left-color: var(--success-color); }
    .toast.type-error   { border-left-color: var(--danger-color); }
    .toast.type-warning { border-left-color: var(--warning-color); }
    .toast.type-info    { border-left-color: var(--primary-color); }

.toast-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.45;
    margin-top: 0.05rem;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.1rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.toast-message {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary, #555);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* =====================================================
   着信モーダル
   ===================================================== */
.incoming-call-content {
    max-width: 360px;
}

.incoming-call-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #dcfce7;
    color: var(--success-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
    animation: phonePulse 1s ease infinite;
}

@keyframes phonePulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.incoming-call-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.incoming-call-from {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
}

    .incoming-call-from span {
        font-weight: 700;
        color: var(--text-primary);
    }

.incoming-call-actions {
    display: flex;
    gap: 0.75rem;
}

.accept-btn {
    flex: 1;
    padding: 0.85rem;
    background: var(--success-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

    .accept-btn:hover {
        background: #15803d;
        transform: translateY(-1px);
    }

.reject-btn {
    flex: 1;
    padding: 0.85rem;
    background: var(--danger-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

    .reject-btn:hover {
        background: var(--danger-dark);
        transform: translateY(-1px);
    }

/* =====================================================
   発信中モーダル
   ===================================================== */
.calling-content {
    max-width: 320px;
    padding: 2.5rem 2rem;
}

.calling-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
}

.calling-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: callRing 1.5s ease-out infinite;
    opacity: 0;
}

    .calling-ring:nth-child(2) {
        animation-delay: 0.5s;
    }

@keyframes callRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.calling-icon-wrap {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.calling-to {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.calling-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.75rem;
}

.cancel-call-btn {
    padding: 0.75rem 1.5rem;
    background: var(--danger-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

    .cancel-call-btn:hover {
        background: var(--danger-dark);
    }

/* =====================================================
   切断オーバーレイ
   ===================================================== */
.disconnect-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.75);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlayAppear 0.3s ease;
    backdrop-filter: blur(4px);
}

    .disconnect-overlay.fade-out {
        animation: overlayDisappear 0.4s ease forwards;
    }

.disconnect-overlay-content {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    padding: 3rem 2.5rem;
    text-align: center;
    max-width: 360px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    animation: contentPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.disconnect-icon {
    width: 80px;
    height: 80px;
    background: #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

    .disconnect-icon i {
        font-size: 2rem;
        color: var(--danger-color);
    }

.disconnect-reason {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.disconnect-sub {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
}

.disconnect-close-btn {
    padding: 0.75rem 2rem;
    background: var(--danger-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

    .disconnect-close-btn:hover {
        background: var(--danger-dark);
    }

/* =====================================================
   フッター
   ===================================================== */
.app-footer {
    background: var(--surface-color);
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 -1px 0 var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.encryption-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--success-color);
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
}

.separator {
    color: var(--border-color);
}

.shortcut-setting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 480px;
    min-width: 0;
}

.shortcut-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

    .shortcut-label i {
        color: var(--warning-color);
    }

.shortcut-input-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--background-color);
    transition: border-color var(--animation-duration) ease;
    min-width: 0;
}

    .shortcut-input-wrap:focus-within {
        border-color: var(--primary-color);
    }

    .shortcut-input-wrap input {
        flex: 1;
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        background: transparent;
        color: var(--text-primary);
        font-family: monospace;
        min-width: 0;
    }

.shortcut-save-btn {
    padding: 0.4rem 0.6rem;
    background: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .shortcut-save-btn:hover {
        background: var(--primary-dark);
    }

.shortcut-saved-msg {
    font-size: 0.75rem;
    color: var(--success-color);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

    .shortcut-saved-msg.visible {
        opacity: 1;
    }

/* =====================================================
   アニメーション
   ===================================================== */
@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================
   機能を閉じるときの動き
   -----------------------------------------------------
   開くときだけ動いて、閉じるときはパッと消えていたので、
   開いた動きをそのまま巻き戻す形にする。
   .is-closing が付いている間だけ表示を残して動かし、
   終わったら本当に消す（JS側が付け外しする）。
   ===================================================== */
.modal.is-closing {
    display: flex;
    animation: modalOverlayOut 0.2s ease forwards;
    pointer-events: none;   /* 消えかけを押せてしまわないように */
}

@keyframes modalOverlayOut {
    from { background-color: rgba(0, 0, 0, 0.5); }
    to { background-color: rgba(0, 0, 0, 0); }
}

.modal.is-closing .modal-content {
    animation: modalDisappear 0.2s ease forwards;
}

@keyframes modalDisappear {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.9);
    }
}


@keyframes overlayAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes overlayDisappear {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes contentPop {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================
   レスポンシブ
   ===================================================== */
@media (max-width: 768px) {
    .main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .users-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        /* スマホでは高さをドラッグで変える */
        height: var(--users-panel-height, 200px);
        max-height: none;
    }

    .video-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; /* モバイルはauto: aspect-ratioで高さ決定 */
        gap: 0.75rem;
        flex: none; /* モバイルではflexを解除してスクロール可能に */
    }

    .video-container {
        aspect-ratio: 16 / 9; /* モバイルは幅基準でaspectratio */
        min-height: 0;
    }

    .video-area {
        padding: 0.75rem;
        overflow: auto; /* モバイルはスクロール許可 */
    }

    .app-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
    }

    .shortcut-setting {
        max-width: none;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .security-panel-inner {
        padding: 0.75rem 1rem;
    }

    .incoming-call-actions {
        flex-direction: column;
    }

    .encryption-status {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .auth-card {
        padding: 2rem 1.25rem;
    }

    .calling-content {
        padding: 2rem 1.25rem;
    }

    /* 権限モーダル：狭い画面でも上下の余白は残す（OKボタンは画面内に収める） */
    .permission-modal-content {
        padding: 1.85rem 1.15rem;
        max-height: 85vh;
        max-height: 85svh;
    }

    .permission-icon-wrap {
        margin-bottom: 0.75rem;
    }

    .permission-icon {
        font-size: 2rem;
    }

    .permission-title {
        font-size: 1.05rem;
        margin-bottom: 0.4rem;
    }

    .permission-desc {
        font-size: 0.82rem;
        margin-bottom: 0.85rem;
        line-height: 1.55;
    }

    .permission-list {
        padding: 0.75rem;
        gap: 0.55rem;
        margin-bottom: 0.85rem;
    }

        .permission-list li {
            gap: 0.65rem;
        }

            .permission-list li > i {
                width: 30px;
                height: 30px;
                font-size: 0.8rem;
            }

            .permission-list li strong {
                font-size: 0.85rem;
            }

            .permission-list li span {
                font-size: 0.72rem;
            }

    .permission-note-box {
        padding: 0.65rem 0.75rem;
        margin-bottom: 0.85rem;
        gap: 0.55rem;
    }

    .permission-note-text {
        font-size: 0.78rem;
        line-height: 1.55;
    }

    .permission-popup-guide {
        padding: 0.65rem 0.75rem;
        margin-bottom: 0.85rem;
        font-size: 0.78rem;
    }

    .popup-guide-title {
        margin-bottom: 0.4rem;
        font-size: 0.82rem;
    }

    .popup-guide-steps {
        line-height: 1.6;
        margin-bottom: 0.35rem;
        padding-left: 1.1rem;
    }

    .popup-guide-note {
        font-size: 0.72rem;
        line-height: 1.45;
        padding-top: 0.4rem;
        margin-top: 0.3rem;
    }

    .permission-start-btn {
        padding: 0.7rem;
        font-size: 0.95rem;
    }

    .permission-close-btn {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }
}

/* =====================================================
   画面の高さが足りないときのログイン画面
   -----------------------------------------------------
   小さい携帯や横向きだと、ログインボタンが画面の下に隠れて
   「切れている」ように見えていた。余白と文字を詰めて、
   スクロールしなくてもボタンまで届くようにする。
   ===================================================== */
@media (max-height: 760px) {
    .auth-container { padding: 1rem; }

    .auth-card { padding: 1.5rem 1.25rem; }

    .auth-logo { margin-bottom: 1rem; }

        .auth-logo-mark {
            height: 40px;
            width: 54px;
            margin-bottom: 0.4rem;
        }

        .auth-logo h1 { font-size: 1.2rem; }

        .auth-logo p { font-size: 0.76rem; }

    .auth-tabs { margin-bottom: 1rem; }

    .form-group { margin-bottom: 0.85rem; }

    .auth-footer-note { margin-top: 0.9rem; font-size: 0.68rem; }
}

/* 空のエラー欄が場所を取らないように（低い画面ではこの1行が効く） */
.auth-error:empty {
    display: none;
    margin: 0;
}

/* 横向きなど、さらに低いときはロゴを横並びにして詰める */
@media (max-height: 560px) {
    .auth-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 0.7rem;
    }

        .auth-logo-mark { height: 30px; width: 40px; margin: 0; }

        .auth-logo h1 { margin: 0; }

        .auth-logo p { display: none; }

    .auth-card { padding: 1.1rem 1.25rem; }

    .auth-tabs { margin-bottom: 0.7rem; }

    .form-group { margin-bottom: 0.6rem; }

        .form-group input,
        .form-group .password-wrap input { padding: 0.5rem 0.85rem; }

        .form-group > label { margin-bottom: 0.25rem; }

    .auth-submit-btn { padding: 0.65rem; }

    .auth-footer-note { display: none; }
}

/* 横向きは幅に余裕があるので、ユーザー名とパスワードを左右に並べる。
   縦に積むとボタンが画面の外へ出てしまうため。 */
@media (max-height: 560px) and (min-width: 560px) {
    .auth-card { max-width: 640px; }

    .auth-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.25rem;
        align-items: start;
    }

        .auth-form > .autologin-row,
        .auth-form > .auth-error,
        .auth-form > .auth-submit-btn { grid-column: 1 / -1; }
}

/* =====================================================
   権限説明モーダル
   ===================================================== */
/* 最初に出る許可の説明。
   以前は説明・注意書き・ポップアップ解除の手順まで全部並べていたため、
   スマホでは必ずスクロールしないとボタンに届かなかった。
   本当に読んでほしい3点だけを残し、長い手順は畳んでおく。 */
.permission-modal-content {
    max-width: 420px;
    text-align: left;
    /* 上下はゆったりめに。最初に出る画面なので、詰まって見えると窮屈になる。 */
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* 見出しはアイコンと横並びにして、縦の場所を節約する */
.permission-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.permission-icon-wrap {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.permission-icon {
    font-size: 1.35rem;
    color: var(--primary-color);
}

.permission-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.15rem;
    text-align: left;
}

.permission-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    text-align: left;
}

/* カメラとマイクは横に2つ並べる */
.permission-uses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.permission-use {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.8rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-color);
    text-align: center;
}

    .permission-use i {
        font-size: 1.05rem;
        color: var(--primary-color);
        margin-bottom: 0.15rem;
    }

    .permission-use strong {
        font-size: 0.85rem;
        color: var(--text-primary);
    }

    .permission-use span {
        font-size: 0.74rem;
        color: var(--text-secondary);
    }

.permission-note-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    padding: 0.7rem 0.85rem;
    background: var(--primary-light);
    border-radius: 10px;
}

    .permission-note-text strong {
        color: var(--text-primary);
    }

/* 困ったときだけ開く手順 */
.permission-help {
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 0.85rem;
}

    .permission-help > summary {
        cursor: pointer;
        padding: 0.6rem 0;
        font-weight: 600;
        color: var(--text-secondary);
        list-style: none;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .permission-help > summary::-webkit-details-marker { display: none; }

    .permission-help > summary::before {
        content: '';
        width: 0;
        height: 0;
        border-left: 5px solid currentColor;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        transition: transform var(--animation-duration, 0.2s) ease;
    }

    .permission-help[open] > summary::before { transform: rotate(90deg); }

    .permission-help[open] > summary { color: var(--text-primary); }

.popup-guide-steps {
    padding-left: 1.2rem;
    color: var(--text-primary);
    line-height: 1.8;
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
}

.popup-guide-note {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.permission-btn-row {
    display: flex;
    gap: 0.75rem;
}

.permission-start-btn {
    flex: 1;
    padding: 0.85rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color var(--animation-duration) ease, transform var(--animation-duration) ease;
}

    .permission-start-btn:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

.permission-close-btn {
    flex: 0 0 auto;
    padding: 0.85rem 1.25rem;
    background: var(--background-color);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--animation-duration) ease;
}

    .permission-close-btn:hover {
        background: var(--border-color);
    }

/* =====================================================
   自動ログインチェックボックス
   ===================================================== */
.autologin-row {
    margin-bottom: 0.25rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    user-select: none;
}

    .checkbox-label input[type="checkbox"] {
        display: none;
    }

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    background: white;
    transition: all var(--animation-duration) ease;
}

.checkbox-label input:checked + .checkbox-custom {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

    .checkbox-label input:checked + .checkbox-custom::after {
        content: '';
        position: absolute;
        left: 3px;
        top: 0px;
        width: 6px;
        height: 10px;
        border: 2px solid white;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
    }

/* =====================================================
   ヘッダーバッジ
   ===================================================== */
.icon-button {
    position: relative;
}

.badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* 通話進行中などの「数字なしドット表示」 */
.badge.badge-dot {
    min-width: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    padding: 0;
    background: var(--success-color);
    box-shadow: 0 0 0 2px var(--surface-color), 0 0 8px rgba(22, 163, 74, 0.5);
    animation: badgeDotPulse 1.6s ease-in-out infinite;
}

@keyframes badgeDotPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--surface-color), 0 0 8px rgba(22, 163, 74, 0.5); }
    50% { box-shadow: 0 0 0 2px var(--surface-color), 0 0 12px rgba(22, 163, 74, 0.8); }
}

/* アップデート通知バッジ: グループ通話と同じ「パルスする点」だが、
   オンライン表示(緑)と紛らわしくないようアップデート用のテーマ色にする */
#updateBadge.badge.badge-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 2px var(--surface-color), 0 0 8px rgba(14, 165, 233, 0.55);
    animation: updateBadgeDotPulse 1.6s ease-in-out infinite;
}

@keyframes updateBadgeDotPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--surface-color), 0 0 8px rgba(14, 165, 233, 0.55); }
    50% { box-shadow: 0 0 0 2px var(--surface-color), 0 0 13px rgba(14, 165, 233, 0.9); }
}

/* =====================================================
   フレンドモーダル
   ===================================================== */
.friend-modal-content {
    width: 100%;
    max-width: 480px;
    padding: 0;
    overflow: hidden;
}

.friend-modal-header,
.settings-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

    .friend-modal-header h2,
    .settings-modal-header h2 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.1rem;
        color: var(--text-primary);
    }

.friend-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
}

.friend-tab {
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    position: relative;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

    .friend-tab.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        background: white;
    }

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 3px;
    margin-left: 4px;
    vertical-align: middle;
}

.friend-panel {
    padding: 1rem 1.5rem 1.5rem;
}

.friend-section-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.friend-list-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
}

.friend-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

    .friend-empty i {
        font-size: 1.5rem;
        opacity: 0.4;
    }

.friend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: var(--background-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.friend-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.friend-item-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.friend-item-actions {
    display: flex;
    gap: 0.4rem;
}

.friend-accept-btn, .friend-reject-btn, .friend-remove-btn {
    padding: 0.35rem 0.7rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.friend-accept-btn {
    background: var(--success-color);
    color: white;
}

    .friend-accept-btn:hover {
        background: #15803d;
    }

.friend-reject-btn, .friend-remove-btn {
    background: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

    .friend-reject-btn:hover, .friend-remove-btn:hover {
        background: var(--danger-color);
        color: white;
    }

.friend-add-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.friend-add-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .friend-add-row input {
        flex: 1;
        padding: 0.6rem 0.9rem;
        border: 1.5px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        font-size: 0.9rem;
        color: var(--text-primary);
        background: white;
        transition: border-color var(--animation-duration) ease;
    }

        .friend-add-row input:focus {
            border-color: var(--primary-color);
            outline: none;
        }

.friend-add-btn {
    padding: 0.6rem 1rem;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .friend-add-btn:hover {
        background: var(--primary-dark);
    }

/* =====================================================
   設定モーダル
   ===================================================== */
.settings-modal-content {
    width: 100%;
    max-width: 420px;
    padding: 0;
}

.settings-body {
    padding: 0.5rem 0;
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.settings-item-info {
    flex: 1;
}

.settings-item-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.settings-item-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.settings-footer {
    padding: 1rem 1.5rem;
}

/* トグルスイッチ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

    .toggle-switch input {
        display: none;
    }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 13px;
    transition: background var(--animation-duration) ease;
}

    .toggle-slider::before {
        content: '';
        position: absolute;
        left: 3px;
        top: 3px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform var(--animation-duration) ease;
        box-shadow: var(--shadow-sm);
    }

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary-color);
}

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(20px);
    }

/* フレンド申請通知バナー */
.friend-request-banner {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    border: 1px solid #86efac;
    border-radius: var(--border-radius-sm);
    padding: 0.65rem 1rem;
    margin: 0 1rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: #166534;
    animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =====================================================
   自動ログインオーバーレイ
   ===================================================== */
.autologin-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.autologin-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.autologin-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.autologin-logo-icon {
    font-size: 2rem;
    color: var(--primary-color);
    z-index: 1;
}

.autologin-ring {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(37, 99, 235, 0.15);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.autologin-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    min-height: 1.5em;
}

.autologin-status {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-height: 1.5em;
}

.autologin-cancel-btn {
    margin-top: 1rem;
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.18));
    border-radius: 0.6rem;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.autologin-cancel-btn:hover {
    background: rgba(127, 127, 127, 0.12);
    color: var(--text-primary);
}

/* =====================================================
   ログインロック（パスワード連続ミス）オーバーレイ
   ===================================================== */
.login-lock-overlay {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 50%, #f8fafc 100%);
    z-index: 101;
}

.login-lock-icon-wrap {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-lock-icon {
    font-size: 2.25rem;
    color: var(--danger-color, #ef4444);
}

.login-lock-message {
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.5;
}

.login-lock-timer {
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: var(--danger-color, #ef4444);
    min-height: 1.2em;
}

/* =====================================================
   セッション切れ 専用ログインフォーム オーバーレイ
   ===================================================== */
/* セッション切れの再ログインは「エラー画面」ではなく、
   いつものログイン画面に戻ってきただけに見えるようにする。 */
.session-expired-overlay {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 50%, #f8fafc 100%);
    z-index: 101;
}

.session-expired-card {
    width: 320px;
    max-width: 100%;
    gap: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.75rem;
}

.session-expired-logo h1 {
    font-size: 1.6rem;
    color: var(--primary-color);
    letter-spacing: 0.01em;
}

.session-expired-mark {
    height: 46px;
    width: 62px;
    margin: 0 auto 0.5rem;
}

.session-expired-logo p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* 誰としてログインし直すのかを、アイコン付きで穏やかに示す */
.session-expired-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem 0.5rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--background-color);
}

.session-expired-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.session-expired-card .autologin-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.session-expired-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: center;
}

.session-expired-card .form-group {
    width: 100%;
    text-align: left;
    margin-top: 0.1rem;
}

.session-expired-card .auth-submit-btn {
    width: 100%;
}

.session-expired-card .autologin-cancel-btn {
    font-size: 0.8rem;
}

/* =====================================================
   設定モーダル追加スタイル
   ===================================================== */
.settings-section-label {
    padding: 0.55rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    background: var(--background-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.settings-item-col {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding-bottom: 1rem !important;
}

/* ノイズキャンセリング 3段階セグメントボタン */
.noise-level-group {
    display: flex;
    width: 100%;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-color, #f8fafc);
}

    .noise-level-btn {
        flex: 1;
        padding: 0.5rem 0.4rem;
        border: none;
        background: transparent;
        color: var(--text-primary);
        font-size: 0.85rem;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        border-right: 1px solid var(--border-color);
    }

        .noise-level-btn:last-child {
            border-right: none;
        }

        .noise-level-btn:hover {
            background: rgba(0, 0, 0, 0.04);
        }

        .noise-level-btn.active {
            background: var(--primary-color);
            color: #fff;
            font-weight: 600;
        }

.settings-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

    .settings-input-group input {
        width: 100%;
        padding: 0.55rem 0.85rem;
        border: 1.5px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        font-size: 0.875rem;
        color: var(--text-primary);
        background: white;
        transition: border-color var(--animation-duration) ease;
    }

        .settings-input-group input:focus {
            border-color: var(--primary-color);
            outline: none;
        }

.settings-action-btn {
    align-self: flex-end;
    padding: 0.5rem 1.1rem;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background var(--animation-duration) ease;
}

    .settings-action-btn:hover {
        background: var(--primary-dark);
    }

    .settings-action-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.settings-error {
    font-size: 0.8rem;
    color: var(--danger-color);
    min-height: 1em;
    margin: 0;
}

.settings-modal-content {
    max-height: 90vh;
    max-height: 90svh;
    overflow-y: auto;
}

/* =====================================================
   DM・グループチャット・ブロック 追加CSS
   ===================================================== */

/* チャットモーダル */
.chat-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    height: 80vh;
    height: 80svh;
    max-height: 700px;
    padding: 0;
    overflow: hidden;
}

.chat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
    flex-shrink: 0;
}

.chat-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.chat-modal-header-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* DM会話リスト */
.dm-conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* 新規DM FABボタン */
.new-dm-fab {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    z-index: 10;
}

    .new-dm-fab:hover {
        transform: scale(1.06);
        box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    }

    .new-dm-fab:active {
        transform: scale(0.96);
    }
/* DMチャット表示中はFAB非表示にするため親をrelativeに */
.chat-modal-content {
    position: relative;
}

.dm-conv-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

    .dm-conv-item:hover {
        background: var(--hover-color, rgba(0,0,0,0.04));
    }

/* 一覧の行は左そろえにする。
   モーダル側の中央そろえ（.modal-content）を受け継ぐと、
   行ごとに右側のボタンの数が違うぶんだけ文字の位置がずれ、
   「普通のチャットとKeepメモの位置が違う」ように見えていた。 */
.dm-conv-item,
.friend-item {
    text-align: left;
}

.dm-conv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
}

.dm-conv-name,
.dm-conv-preview {
    text-align: left;
    max-width: 100%;
}

.dm-conv-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.dm-conv-preview {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 会話・グループのピン留め ---- */
.conv-pin-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    opacity: 0.45;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: rotate(30deg);
    transition: all var(--animation-duration, 0.2s) ease;
}

    .conv-pin-btn:hover {
        opacity: 1;
        background: var(--background-color);
        color: var(--primary-color);
    }

    .conv-pin-btn.is-pinned {
        opacity: 1;
        color: var(--primary-color);
        transform: none;
    }

/* 指で操作する端末はホバーが無いので、少しはっきり出す */
@media (pointer: coarse) {
    .conv-pin-btn { opacity: 0.6; }
}

/* 留めてあることは「行の色」と「右のピンの色」で分かるようにする。
   名前の前に印を足すと、その幅のぶん名前の位置がずれてしまうため置かない。 */
.dm-conv-item.is-pinned {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), transparent 60%);
}

    .dm-conv-item.is-pinned .conv-pin-btn {
        opacity: 1;
        color: var(--primary-color);
        transform: none;
    }

.dm-unread-badge {
    background: var(--danger-color, #ef4444);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 4px;
}

/* チャットエリア */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dm-back-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

    .dm-back-btn:hover {
        background: var(--hover-color, rgba(0,0,0,0.04));
    }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 過去メッセージの追加読み込みボタン（窓表示） */
.chat-load-older {
    align-self: center;
    margin-bottom: 0.25rem;
}

.chat-load-older-btn {
    background: var(--surface-color);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--animation-duration), color var(--animation-duration);
}

    .chat-load-older-btn:hover {
        background: var(--primary-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 80%;
}

    .chat-msg.mine {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

    .chat-msg.theirs {
        align-self: flex-start;
    }

.chat-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.chat-msg-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chat-msg.mine .chat-msg-body {
    align-items: flex-end;
}

.chat-msg.theirs .chat-msg-body {
    align-items: flex-start;
}

.chat-msg-name {
    font-size: 0.72rem;
    color: var(--text-secondary);
    padding: 0 0.25rem;
    font-weight: 600;
}

.chat-msg-bubble {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.5rem 0.8rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary);
    /* 本文は必ず左揃え。
       モーダル側の text-align:center を継承していたため、
       複数行になると行がばらけて中央に寄り、LINEと違う見え方になっていた。 */
    text-align: left;
    /* 改行（Shift+Enter等で入力された \n）をそのまま表示する */
    white-space: pre-wrap;
    /* 単語の途中では折らず、URLのように途中で折るしかないものだけ折る。
       word-break:break-word だと英単語が不必要に分断されてしまう。 */
    word-break: normal;
    overflow-wrap: anywhere;
    /* 句読点や閉じ括弧が行頭に来ないようにする（日本語の禁則処理） */
    line-break: strict;
    max-width: 100%;
}

.chat-msg.mine .chat-msg-bubble {
    background: var(--primary-color);
    color: white;
    border-color: transparent;
    border-bottom-right-radius: 4px;
}

.chat-msg.theirs .chat-msg-bubble {
    border-bottom-left-radius: 4px;
}

.chat-msg-time {
    font-size: 0.68rem;
    color: var(--text-secondary);
    padding: 0 0.25rem;
}

/* 既読インジケーター（自分が送ったメッセージの右下に表示） */
.chat-msg-readreceipt {
    font-size: 0.65rem;
    color: var(--primary-color);
    padding: 0.05rem 0.3rem;
    margin-top: 0.1rem;
    font-weight: 600;
    align-self: flex-end;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.chat-msg.theirs .chat-msg-readreceipt {
    /* 念のため：相手側メッセージには出さない（rendererで弾いているが保険） */
    display: none;
}

.chat-msg-system {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--hover-color, rgba(0,0,0,0.04));
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    align-self: center;
    margin: 0.5rem 0;
}

/* 管理者からのお知らせ（一斉DM） */
.chat-msg-admin {
    align-self: stretch;
    /* flexカラムの子として縦に潰れる(内容がclipされる)のを防ぐ */
    flex-shrink: 0;
    min-height: auto;
    margin: 0.75rem 0;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(220,38,38,0.08), rgba(249,115,22,0.08));
    border: 1px solid rgba(220,38,38,0.25);
    box-shadow: 0 2px 8px rgba(220,38,38,0.08);
    position: relative;
    overflow: hidden;
}

    .chat-msg-admin::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #dc2626, #f97316);
    }

.chat-msg-admin-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #dc2626;
    letter-spacing: 0.02em;
}

    .chat-msg-admin-header i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: linear-gradient(135deg, #dc2626, #f97316);
        color: #fff;
        font-size: 0.7rem;
    }

.chat-msg-admin-body {
    color: var(--text-color);
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-msg-admin-time {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: right;
}

.chat-img-preview {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    cursor: pointer;
    display: block;
}

.chat-file-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.85rem;
}

    .chat-file-link:hover {
        text-decoration: underline;
    }

/* チャット入力エリア */
.chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
    flex-shrink: 0;
}

    .chat-input-area input[type="text"],
    .chat-input-area textarea.chat-text-input {
        flex: 1;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border-color);
        border-radius: 20px;
        font-size: 0.88rem;
        outline: none;
        background: var(--bg-color, #f8fafc);
        color: var(--text-primary);
        transition: border-color 0.2s;
    }

    /* 改行入力できるテキストエリア（自動で高さが伸びる／手動リサイズは無効） */
    .chat-input-area textarea.chat-text-input {
        resize: none;
        overflow-y: auto;
        max-height: 140px;
        line-height: 1.4;
        font-family: inherit;
        white-space: pre-wrap;
        word-break: break-word;
    }

        .chat-input-area input[type="text"]:focus,
        .chat-input-area textarea.chat-text-input:focus {
            border-color: var(--primary-color);
        }

/* 端末にデータが無い添付（タップで再取得）／有効期限切れの表示 */
.chat-file-load {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: inherit;
    background: transparent;
    border: 1px dashed currentColor;
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-family: inherit;
}

    .chat-file-load:hover { opacity: 0.85; }
    .chat-file-load small { opacity: 0.75; }
    .chat-file-load[disabled] { cursor: default; opacity: 0.7; }

.chat-file-expired {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    opacity: 0.7;
    font-style: italic;
}

.send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
}

    .send-btn:hover {
        transform: scale(1.1);
    }

.file-attach-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

    .file-attach-btn:hover {
        color: var(--primary-color);
        background: rgba(79,70,229,0.08);
    }

/* グループチャットトップバー */
.group-chat-topbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
    flex-shrink: 0;
}

.group-chat-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.group-chat-actions {
    display: flex;
    gap: 0.25rem;
}

.leave-btn {
    color: var(--danger-color) !important;
}

    .leave-btn:hover {
        background: rgba(239,68,68,0.1) !important;
    }

/* フレンドモーダルのDMボタン拡張 */
.friend-dm-btn {
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

    .friend-dm-btn:hover {
        background: var(--primary-color);
        color: white;
    }

/* ブロック */
.unblock-btn {
    background: none !important;
    border: 1px solid var(--success-color, #22c55e) !important;
    color: var(--success-color, #22c55e) !important;
}

    .unblock-btn:hover {
        background: var(--success-color, #22c55e) !important;
        color: white !important;
    }

/* =====================================================
   プロフィール画像 / グループ画像
   ===================================================== */

/* 画像が設定されている時に上書きされる共通クラス */
.user-avatar.has-image,
.friend-item-avatar.has-image,
.chat-msg-avatar.has-image,
.dm-conv-item .friend-item-avatar.has-image {
    background-color: var(--bg-color, #fff) !important;
    color: transparent !important;
    text-indent: -9999px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}

    .user-avatar.has-image > i,
    .friend-item-avatar.has-image > i,
    .chat-msg-avatar.has-image > i {
        display: none !important;
    }

/* 自分のプロフィール画像プレビュー（設定モーダル内） */
.avatar-edit-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--border-color, #e5e7eb);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

    .avatar-preview.has-image {
        background-color: transparent;
        color: transparent;
    }

        .avatar-preview.has-image #avatarPreviewInitial {
            display: none;
        }

.avatar-edit-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 140px;
}

.avatar-upload-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* グループ画像プレビュー（グループ作成 / 設定モーダル） */
.group-avatar-edit-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
    flex-wrap: wrap;
}

.group-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--border-color, #e5e7eb);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}

    .group-avatar-preview.has-image i {
        display: none;
    }

    .group-avatar-preview.has-image {
        background-color: transparent;
    }

/* グループ一覧/チャット用の四角アバター */
/* グループの丸（角丸四角）アイコン。
   画像を指定していないときの見た目は、必ずここ（CSS）で決める。
   HTML側に style="background:..." と直接書くと、
   アバターを貼り直すときの el.style.backgroundImage = '' で
   その指定ごと消えてしまい、色が抜けて不安定に見えていた。 */
.group-square-avatar {
    border-radius: 12px !important;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

    /* 画像があるときは、透過画像の下から紫がのぞかないように下地を敷く */
    .group-square-avatar.has-image {
        background-color: var(--surface-color, #fff);
    }

/* 「公式」バッジ。
   以前はインラインstyleで組んでいて、アイコンと文字の間を gap で空けていた。
   アイコンが読み込まれないと、その gap だけが謎の隙間として残る。
   ここでは隙間をアイコン側の margin で持たせ、行の高さも 1 に固定して、
   名前の行が公式バッジのぶんだけ広がらないようにする。 */
.official-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #f97316);
    padding: 0.2em 0.45em;
    border-radius: 4px;
    margin-left: 0.4rem;
    vertical-align: middle;
    white-space: nowrap;
}

    .official-badge > i {
        font-size: 0.9em;
        margin-right: 0.28em;
    }

    /* アイコンが出せなかったときは、隙間ごと消す */
    .official-badge > i:empty::before {
        margin: 0;
    }

/* 「公式」（管理者）のアイコンも、色を CSS 側で持たせる */
.friend-item-avatar.is-official,
.chat-msg-avatar.is-official {
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: #fff;
}

    .friend-item-avatar.is-official.has-image,
    .chat-msg-avatar.is-official.has-image {
        background-color: var(--surface-color, #fff);
    }

/* =====================================================
   ビデオ通話: カメラOFF時のアバター表示
   ===================================================== */
.video-avatar-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* z-indexは指定しない: .video-overlayより背面に置く（ボタン類を隠さない） */
    pointer-events: none;
}

/* .video-overlay（操作ボタン群）を確実に最前面に */
.video-overlay {
    z-index: 2;
}

.video-avatar-circle {
    width: 30%;
    aspect-ratio: 1 / 1;
    max-width: 180px;
    max-height: 180px;
    min-width: 80px;
    min-height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    font-weight: 700;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 3px solid rgba(255,255,255,0.1);
}

    .video-avatar-circle.has-image {
        background-color: transparent;
        color: transparent;
    }

/* 画面共有中の自分ボタンを強調 */
.control-button.sharing {
    background-color: #16a34a !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.3);
}

    .control-button.sharing:hover {
        background-color: #15803d !important;
    }

/* =====================================================
   メッセージ操作メニュー（取り消し用）
   ===================================================== */
.msg-action-menu {
    position: fixed;
    z-index: 10000;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 0.35rem;
    min-width: 180px;
    animation: msgMenuFade 0.12s ease-out;
}

@keyframes msgMenuFade {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.msg-action-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--danger-color);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.12s ease;
}

    .msg-action-item:hover {
        background: rgba(220,38,38,0.08);
    }

    .msg-action-item i {
        font-size: 0.95rem;
        width: 16px;
        text-align: center;
    }

/* 取り消し済みメッセージのバブル */
.chat-msg-bubble.recalled {
    font-style: italic;
    opacity: 0.7;
    background: transparent !important;
    border: 1px dashed var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.chat-msg.mine .chat-msg-bubble.recalled {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
    background: transparent !important;
}

.chat-msg-bubble.recalled .recalled-icon {
    margin-right: 0.35rem;
    font-size: 0.8rem;
}

/* 自分のメッセージにホバーで取り消しヒントカーソル */
.chat-msg.mine .chat-msg-bubble:not(.recalled) {
    cursor: context-menu;
}

/* ============================================================
   ============================================================
                  メッシュ通話関連スタイル
   ============================================================
   ============================================================ */

/* ==== メッシュビデオグリッド ==== */
.video-mesh-grid {
    flex: 1;
    width: 100%;
    height: 100%;
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--background-color);
    overflow: hidden;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
}

/* 人数別レイアウト */
.video-mesh-grid[data-count="0"] { display: none; }
.video-mesh-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    justify-content: center;
}
.video-mesh-grid[data-count="1"] .mesh-tile {
    width: min(100%, 900px);
    max-height: 100%;
    aspect-ratio: 16 / 9;
}
.video-mesh-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}
.video-mesh-grid[data-count="3"],
.video-mesh-grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.video-mesh-grid[data-count="5"],
.video-mesh-grid[data-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.video-mesh-grid[data-count="7"],
.video-mesh-grid[data-count="8"],
.video-mesh-grid[data-count="9"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
/* 10人以上は4列 */
.video-mesh-grid:not([data-count="0"]):not([data-count="1"]):not([data-count="2"]):not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]):not([data-count="7"]):not([data-count="8"]):not([data-count="9"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}

/* ===== ピン留めモード（Zoom風レイアウト）===== */
.video-mesh-grid[data-pinned="true"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 200px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
}

/* ピン留めされたタイル: 左側の大きい領域に */
.video-mesh-grid[data-pinned="true"] .mesh-tile.pinned {
    grid-row: 1 / -1;
    grid-column: 1;
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: auto;
}

/* ピン留め時、ピン留め以外のタイルは右側の縦並びサイドバーへ */
.video-mesh-grid[data-pinned="true"] .mesh-tile:not(.pinned) {
    grid-column: 2;
    width: 200px;
    height: auto;
    aspect-ratio: 16 / 9;
    align-self: start;
}

.video-mesh-grid[data-pinned="true"] {
    grid-template-rows: none !important;
    grid-template-columns: minmax(0, 1fr) 210px !important;
}

/* ピン留めサブタイルが画面に収まるように、右カラムを縦スクロール可能に */
.video-mesh-grid[data-pinned="true"] .mesh-tile:not(.pinned) {
    grid-column: 2;
}

/* タイル */
.mesh-tile {
    position: relative;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.mesh-tile.self {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.mesh-tile.pinned {
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

.mesh-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0f172a;
    display: block;
    transition: opacity 0.2s ease;
}

/* タイル左上の「…」。いつでも押せるように常に出しておく。
   ここからピン留めと、その人の音量を開く。 */
.mesh-tile-menu-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--animation-duration, 0.2s) ease, transform var(--animation-duration, 0.2s) ease;
    -webkit-tap-highlight-color: transparent;
}

    .mesh-tile-menu-btn:hover { background: rgba(0, 0, 0, 0.78); }

    .mesh-tile-menu-btn:active { transform: scale(0.92); }

/* ピン留め中のタイルは「…」も色を変えて、状態が分かるようにする */
.mesh-tile.pinned .mesh-tile-menu-btn {
    background: #f59e0b;
    color: #fff;
}

.mesh-pin-menu {
    position: fixed;
    z-index: 10000;
    display: none;
    min-width: 232px;
    max-width: min(280px, calc(100vw - 16px));
    padding: 0.4rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.mesh-menu-head {
    padding: 0.4rem 0.6rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.62);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mesh-pin-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.6rem;
    border: none;
    border-radius: 10px;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .mesh-pin-menu-item:hover { background: rgba(255, 255, 255, 0.12); }

    .mesh-pin-menu-item i { width: 1em; text-align: center; opacity: 0.85; }

.mesh-menu-sep {
    height: 1px;
    margin: 0.35rem 0.4rem;
    background: rgba(255, 255, 255, 0.12);
}

/* ---- 音量。つまみだけだと今どれくらいか分からないので、
        数字・増減ボタン・目安の3つを添えている ---- */
.mesh-menu-vol {
    padding: 0.15rem 0.6rem 0.5rem;
}

.mesh-menu-vol-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.mesh-menu-vol-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mesh-menu-vol-value {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.mesh-menu-vol.is-boost .mesh-menu-vol-value { color: #fbbf24; }

.mesh-menu-vol-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.mesh-vol-step {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .mesh-vol-step:hover { background: rgba(255, 255, 255, 0.2); }

    .mesh-vol-step:active { transform: scale(0.92); }

.mesh-vol-range {
    flex: 1;
    min-width: 0;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    outline: none;
    cursor: pointer;
}

    .mesh-vol-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--primary-color);
        cursor: pointer;
    }

    .mesh-vol-range::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--primary-color);
        cursor: pointer;
    }

.mesh-menu-vol-marks {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.mesh-vol-preset {
    flex: 1;
    padding: 0.32rem 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: none;
    color: rgba(255, 255, 255, 0.82);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

    .mesh-vol-preset:hover { background: rgba(255, 255, 255, 0.14); }

    .mesh-vol-preset.is-current {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }

.mesh-menu-vol-note {
    margin: 0.5rem 0 0;
    font-size: 0.66rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.mesh-tile.self video {
    transform: scaleX(-1);
}

/* タイル下部のネームラベル */
.mesh-tile-label {
    position: absolute;
    /* カメラOFFのときに出す暗幕（.mesh-no-video）が z-index:1 なので、
       名前とミュートの札はその上に置く。
       ここが抜けていたため、カメラを切っている相手のミュート表示が
       暗幕の裏に隠れて、まったく見えなくなっていた。 */
    z-index: 2;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 12px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-tile-name {
    font-weight: 600;
}

.mesh-tile-you {
    font-size: 0.75rem;
    opacity: 0.85;
    font-weight: 400;
}

/* ミュートなどの印はタイルの右下に出す。
   左下の名前と左上の「…」とぶつからない場所。 */
.mesh-tile-status {
    position: absolute;
    /* カメラOFFの暗幕より前に出す */
    z-index: 2;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}

/* ホストの札。ホストが抜けると通話が終わるので、
   誰がホストかがすぐ分かるようにしておく。 */
.mesh-host-chip {
    display: none;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 1px 8px 1px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.7;
    white-space: nowrap;
}

    .mesh-host-chip i { font-size: 0.62rem; }

.mesh-tile.is-host .mesh-host-chip { display: inline-flex; }

/* ホストのタイルは縁も金色にする（ピン留めと重なった場合はピンを優先） */
.mesh-tile.is-host:not(.pinned) {
    border-color: rgba(245, 158, 11, 0.75);
}

.mesh-status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* オンライン一覧の更新ボタン。
   押したことが分かるよう、自前のアニメーションで回す
   （Font Awesome が読めない環境でも動くように）。 */
@keyframes refreshSpin {
    to { transform: rotate(360deg); }
}

#refreshListBtn i {
    display: inline-block;
    transition: transform var(--animation-duration, 0.2s) ease;
}

#refreshListBtn:hover:not(.is-refreshing) i {
    transform: rotate(-30deg);
}

#refreshListBtn.is-refreshing {
    pointer-events: none;
    color: var(--primary-color);
}

    /* 実際の回転は JavaScript 側で作る（環境によって速さが変わらないように）。
       ここは、それが使えない古い環境のための控え。 */
    #refreshListBtn.is-refreshing:not(.js-spin) i {
        animation: refreshSpin 0.9s linear infinite;
        transition: none;
    }

    #refreshListBtn.is-refreshing.js-spin i {
        animation: none;
        transition: none;
    }

@media (prefers-reduced-motion: reduce) {
    #refreshListBtn:hover i { transform: none; }
}

/* ミュートの印。
   文字は出さず、マイクに斜線のマークだけで伝える。
   タイルの右上に、赤い丸で出す。 */
.mesh-status-icon.muted {
    background: var(--danger-color);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* 人数が少なくタイルが大きいときは、マークもひとまわり大きくする */
.video-mesh-grid[data-count="1"] .mesh-status-icon,
.video-mesh-grid[data-count="2"] .mesh-status-icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}

/* ミュート中のタイルは縁でも分かるようにする */
.mesh-tile.is-muted {
    border-color: rgba(220, 38, 38, 0.85);
}

/* カメラOFFのときに見せるオーバーレイ */
.mesh-no-video {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.mesh-no-video-circle {
    width: clamp(60px, 30%, 130px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.6rem, 6vw, 3rem);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    text-transform: uppercase;
}

.mesh-no-video-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ==== 通話画面の招待ボタン ==== */
.invite-mesh-btn {
    background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
    color: #fff;
    border: none;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    margin-right: 0.5rem;
}

.invite-mesh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    filter: brightness(1.05);
}

.invite-mesh-btn:active {
    transform: translateY(0);
}

/* ==== グループチャットの通話開始ボタン ==== */
.group-call-btn {
    background: linear-gradient(135deg, var(--success-color), #15803d);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.group-call-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
    filter: brightness(1.08);
}

.group-call-btn i {
    color: #fff !important;
}

/* 進行中通話への「参加」モード（青系） */
.group-call-btn.joining {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    animation: groupCallBtnJoinPulse 1.8s ease-in-out infinite;
}

.group-call-btn.joining:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}

@keyframes groupCallBtnJoinPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 2px 14px rgba(37, 99, 235, 0.55); }
}

/* 通話中（参加済み）→ 無効化 */
.group-call-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    animation: none;
}

/* ==== 招待モーダル ==== */
.mesh-invite-modal-content {
    max-width: 440px;
    width: 90%;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    max-height: 80svh;
}

.mesh-invite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
}

.mesh-invite-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mesh-invite-header h2 i {
    color: var(--primary-color);
}

.mesh-invite-desc {
    padding: 0.75rem 1.25rem 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
    background: var(--surface-color);
}

.mesh-invite-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem;
    min-height: 200px;
    max-height: calc(80vh - 140px);
    max-height: calc(80svh - 140px);
    background: var(--surface-color);
}

.mesh-invite-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.mesh-invite-row:last-child {
    border-bottom: none;
}

.mesh-invite-row:hover {
    background: var(--background-color);
}

.mesh-invite-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--border-color);
}

.mesh-invite-avatar-letter {
    background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}

.mesh-invite-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mesh-invite-btn {
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: transform 0.15s ease, filter 0.15s ease;
    flex-shrink: 0;
    min-width: 90px;
    justify-content: center;
}

.mesh-invite-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.mesh-invite-btn:disabled {
    background: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

.mesh-invite-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.mesh-invite-empty i {
    font-size: 2.5rem;
    opacity: 0.4;
    margin-bottom: 0.5rem;
    display: block;
}

.mesh-invite-empty p {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

/* ==== モバイル対応 ==== */
@media (max-width: 640px) {
    .video-mesh-grid {
        padding: 6px;
        gap: 4px;
    }
    .video-mesh-grid[data-count="1"] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }
    /* 2人以上は1列で縦並びにする */
    .video-mesh-grid[data-count="2"],
    .video-mesh-grid[data-count="3"],
    .video-mesh-grid[data-count="4"],
    .video-mesh-grid[data-count="5"],
    .video-mesh-grid[data-count="6"],
    .video-mesh-grid[data-count="7"],
    .video-mesh-grid[data-count="8"],
    .video-mesh-grid[data-count="9"] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(120px, 1fr);
        overflow-y: auto;
    }
    /* ピン留め時のモバイル: メイン上 + サブ下に横スクロール */
    .video-mesh-grid[data-pinned="true"] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) 90px !important;
        grid-auto-rows: auto !important;
    }
    .video-mesh-grid[data-pinned="true"] .mesh-tile.pinned {
        grid-row: 1;
        grid-column: 1;
        width: 100%;
        height: 100%;
    }
    .video-mesh-grid[data-pinned="true"] .mesh-tile:not(.pinned) {
        grid-row: 2;
        grid-column: 1;
        width: 140px;
        height: 90px;
        aspect-ratio: auto;
        display: inline-block;
    }
    .video-mesh-grid[data-pinned="true"] {
        /* サブ行は横スクロール */
        overflow-x: auto;
    }
    .mesh-tile {
        min-height: 100px;
        border-radius: 8px;
    }
    .mesh-tile-label {
        font-size: 0.75rem;
        padding: 4px 8px;
        bottom: 6px;
        left: 6px;
    }
    .mesh-status-icon {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .mesh-tile-status {
        /* 印は右下。top を残すと上下に引き伸ばされてしまうので明示的に外す。 */
        top: auto;
        bottom: 6px;
        right: 6px;
        gap: 4px;
    }
    .invite-mesh-btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.8rem;
    }
    .mesh-invite-modal-content {
        width: 95%;
        max-height: 85vh;
        max-height: 85svh;
    }
    .mesh-tile-menu-btn {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   進行中グループ通話バナー
   ============================================================ */
#groupCallBanner {
    padding: 8px 16px;
    background: transparent;
    flex-shrink: 0;
}

.group-call-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--success-color), #15803d);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
    font-size: 0.9rem;
    animation: groupCallBannerPulse 2s ease-in-out infinite;
}

.group-call-banner-inner.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    animation: none;
}

@keyframes groupCallBannerPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25); }
    50% { box-shadow: 0 4px 18px rgba(22, 163, 74, 0.45); }
}

.group-call-banner-inner i {
    font-size: 1.1rem;
}

.group-call-banner-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-call-join-btn {
    background: #fff;
    color: var(--success-color);
    border: none;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.group-call-join-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* グループ一覧の「通話中」インジケータ */
.group-call-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: var(--success-color);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.4rem;
    flex-shrink: 0;
    animation: groupCallIndicatorBlink 1.6s ease-in-out infinite;
}

.group-call-indicator i {
    font-size: 0.65rem;
}

@keyframes groupCallIndicatorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =====================================================
   アップデート通知バナー（青／グループ通話バナーと同系統）
   ===================================================== */
#updateBanner {
    padding: 8px 16px 0;
    background: transparent;
    flex-shrink: 0;
}

.update-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    font-size: 0.9rem;
    animation: updateBannerPulse 2s ease-in-out infinite;
}

@keyframes updateBannerPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
    50% { box-shadow: 0 4px 18px rgba(37, 99, 235, 0.5); }
}

.update-banner-inner > i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.update-banner-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.update-banner-ver {
    opacity: 0.85;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.update-banner-open-btn {
    background: #fff;
    color: #1d4ed8;
    border: none;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

    .update-banner-open-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

.update-banner-close-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

    .update-banner-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

@media (max-width: 640px) {
    .update-banner-inner {
        padding: 10px 12px;
        font-size: 0.82rem;
        gap: 8px;
    }
    .update-banner-open-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 640px) {
    .group-call-banner-inner {
        padding: 10px 12px;
        font-size: 0.82rem;
        gap: 8px;
    }
    .group-call-join-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }
}

/* 通話バナーのリセットボタン（ゾンビ通話復旧用） */
.group-call-reset-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.group-call-reset-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.group-call-reset-btn:active {
    transform: translateY(0);
}

/* ============================================================
   添付ファイル（画像・動画）専用ビューア
   ============================================================ */
.file-viewer-modal {
    z-index: 6000; /* 通常のチャットモーダルより前面に */
    background-color: rgba(8, 12, 20, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.file-viewer-modal .file-viewer-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    animation: none;
}

.file-viewer-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1rem 0.85rem;
    color: #fff;
}

.file-viewer-name {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.file-viewer-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* 丸ボタン。
   共通の .icon-button は明るい色の細い枠（1px）を持っている。
   その枠を暗い背景の上で円にすると、線がドットの階段のように見えて
   「ギザギザ」に感じられていた。ここでは枠をやめて、
   塗りだけで形を作る（塗りの縁は滑らかに描かれる）。 */
.file-viewer-modal .icon-button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* 縁を別の層として合成させる。半透明の背景ぼかしの上でも縁が崩れにくい */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: background-color var(--animation-duration, 0.2s) ease, transform var(--animation-duration, 0.2s) ease;
}

.file-viewer-modal .icon-button:hover {
    background: rgba(255, 255, 255, 0.28);
    border: 0;
}

/* 枠が戻ってこないようにしておく */
.file-viewer-modal .icon-button:focus,
.file-viewer-modal .icon-button:focus-visible,
.file-viewer-modal .icon-button.active {
    border: 0;
    outline: none;
}

.file-viewer-modal .icon-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.file-viewer-modal .icon-button:active {
    transform: translateZ(0) scale(0.92);
}

/* 拡大の操作は画像のときだけ出す
   （.file-viewer-modal .icon-button より強く指定しないと打ち消せない） */
.file-viewer-modal .file-viewer-zoom-btn,
.file-viewer-modal .file-viewer-zoom-label { display: none; }

.file-viewer-modal.is-image .file-viewer-zoom-btn { display: flex; }

.file-viewer-modal.is-image .file-viewer-zoom-label {
    display: inline-block;
    min-width: 3.4em;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.85);
}

.file-viewer-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 1rem;
    min-height: 0;
    position: relative;
    touch-action: none;
}

.file-viewer-media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    transform-origin: center center;
    transition: transform 0.18s ease;
}

/* 読み込みが終わってから出す（途中の欠けた絵を見せない） */
img.file-viewer-media {
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.18s ease;
}

    img.file-viewer-media.is-ready { opacity: 1; }

    img.file-viewer-media.is-zoomed {
        cursor: grab;
        transition: none;   /* 指で動かしている間は遅れないように */
    }

    img.file-viewer-media.is-zoomed:active { cursor: grabbing; }

.file-viewer-spinner {
    position: absolute;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.6rem;
}

    .file-viewer-spinner[hidden] { display: none; }

/* 画像を開いている間は、画面いっぱいに見せる（下タブも隠す） */
body.viewer-open .mobile-tabbar { display: none !important; }

.file-viewer-hint {
    flex-shrink: 0;
    margin: 0;
    padding: 0.75rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

/* チャット内の動画プレビューに重ねる「専用画面で開く」ボタン */
.chat-video-wrap {
    position: relative;
    display: inline-block;
}

.chat-video-expand-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
}

.chat-video-expand-btn:hover {
    background: rgba(0, 0, 0, 0.75);
}

/* ============================================================
   ユーザー名予測候補ポップアップ
   ============================================================ */
.user-suggest-popup {
    position: absolute;
    z-index: 20000;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    max-height: 320px; /* JS側で実際に表示できる高さに応じて上書きされる */
    overflow-y: auto;
    overscroll-behavior: contain; /* スクロールが背面のページに伝播しないように */
    -webkit-overflow-scrolling: touch;
    min-width: 240px;
    animation: userSuggestFadeIn 0.12s ease;
}

@keyframes userSuggestFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    transition: background 0.12s ease;
    border-bottom: 1px solid var(--border-color);
}

.user-suggest-item:last-child {
    border-bottom: none;
}

.user-suggest-item:hover {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0.02));
}

.user-suggest-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--border-color);
    background: var(--background-color);
}

.user-suggest-avatar-letter {
    background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-color: transparent;
}

.user-suggest-name {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-suggest-name mark {
    background: rgba(245, 158, 11, 0.28);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}

.user-suggest-tag {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1.4;
}

.user-suggest-tag.friend {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.user-suggest-tag.known {
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-secondary);
}

.user-suggest-empty {
    padding: 1rem 0.85rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
}

@media (max-width: 640px) {
    .user-suggest-popup {
        max-height: 50vh;
        max-height: 50svh;
        min-width: 180px;
    }
    .user-suggest-item {
        padding: 0.65rem 0.8rem;
    }
    .user-suggest-avatar {
        width: 32px;
        height: 32px;
    }
    .user-suggest-name {
        font-size: 0.95rem;
    }
}


/* =====================================================
   追加: コピー用メニュー項目（取り消しと違い破壊的でないので通常色）
   ===================================================== */
.msg-action-item.msg-action-item-neutral {
    color: var(--text-color, #0f172a);
}
.msg-action-item.msg-action-item-neutral:hover {
    background: rgba(37, 99, 235, 0.08);
}

/* =====================================================
   追加: 表示名変更ボタン（フレンド一覧 / DM一覧）
   ===================================================== */
.friend-rename-btn,
.dm-conv-rename-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.friend-rename-btn:hover,
.dm-conv-rename-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
}
.dm-conv-rename-btn {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 0.25rem;
}

/* 表示名を上書きしている時に出す本来のユーザー名（小さく表示） */
.friend-item-realname {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 0.05rem;
}

/* =====================================================
   追加: ニックネーム編集モーダル内の入力欄フォーカス
   ===================================================== */
#nicknameInput:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* =====================================================
   追加: グループメンバー一覧モーダル
   ===================================================== */
.group-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 60vh;
    max-height: 60svh;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.group-member-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    transition: background-color 0.12s ease;
}
.group-member-item:hover {
    background: rgba(100, 116, 139, 0.06);
}
.group-member-item.is-pending {
    opacity: 0.7;
}
.group-member-name {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-color, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-tag {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.member-tag-owner {
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.12);
}
.member-tag-pending {
    color: #b45309;
    background: rgba(245, 158, 11, 0.16);
}

/* オーナーがメンバーを退出させるボタン */
.group-member-kick {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--danger-color, #ef4444);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease;
}

    .group-member-kick:hover {
        background: rgba(239, 68, 68, 0.12);
    }


/* =====================================================
   ヘッダーのナビゲーションボタン（アイコン＋文字ラベル）
   アイコンだけでは意味が分かりにくいため、各ボタンに短いラベルを併記する
   ===================================================== */
.header-right .nav-btn {
    width: auto;
    height: auto;
    min-width: 56px;
    border-radius: 12px;
    flex-direction: column;
    gap: 3px;
    padding: 5px 8px;
    border-color: transparent;
}

    .header-right .nav-btn i {
        font-size: 1.05rem;
    }

.nav-btn-label {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.header-right .nav-btn:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.header-right .nav-btn.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* =====================================================
   要望箱
   ===================================================== */
.request-box-intro {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    line-height: 1.55;
}

.request-category-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.request-cat-btn {
    flex: 1 1 auto;
    min-width: 110px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-color);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

    .request-cat-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .request-cat-btn.active {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }

.request-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-color);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.request-submit-btn {
    width: 100%;
}

.request-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.request-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    background: var(--surface-color);
    /* モーダル側の中央そろえを引き継がないようにする。
       文章が真ん中に寄って読みにくくなっていた。 */
    text-align: left;
}

.request-item-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.request-cat-tag {
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    color: #fff;
}

    .request-cat-tag.cat-bug { background: #dc2626; }
    .request-cat-tag.cat-feature { background: #7c3aed; }
    .request-cat-tag.cat-other { background: #0ea5e9; }

.request-status-tag {
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

    .request-status-tag.st-open { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
    .request-status-tag.st-in_progress { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
    .request-status-tag.st-done { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
    .request-status-tag.st-rejected { color: #6b7280; border-color: #e5e7eb; background: #f9fafb; }

.request-item-from {
    font-weight: 700;
    color: var(--text-primary);
}

.request-item-text {
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.request-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

    .request-item-actions select,
    .request-item-actions button {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background: var(--background-color);
        color: var(--text-primary);
        cursor: pointer;
        font-family: inherit;
    }

    .request-item-actions .request-del-btn {
        color: var(--danger-color);
        border-color: var(--danger-color);
        background: #fff;
    }

.request-empty {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

/* =====================================================
   リアクション / リプライ / メッセージメニュー拡張
   ===================================================== */
/* メニュー上部の絵文字リアクション行 */
.msg-reaction-row {
    display: flex;
    gap: 0.15rem;
    padding: 0.15rem 0.2rem 0.4rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
}

.msg-reaction-emoji {
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.12s ease;
}

    .msg-reaction-emoji:hover {
        background: var(--background-color);
        transform: scale(1.2);
    }

/* バブル下のリアクションチップ */
.chat-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.chat-msg.mine .chat-reactions {
    justify-content: flex-end;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    font-size: 0.82rem;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.12s ease;
}

    .reaction-chip:hover {
        border-color: var(--primary-color);
    }

    .reaction-chip.mine {
        background: rgba(37, 99, 235, 0.12);
        border-color: var(--primary-color);
    }

.reaction-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.reaction-chip.mine .reaction-count {
    color: var(--primary-color);
}

/* バブル内の返信引用 */
.chat-reply-quote {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    max-width: 100%;
    margin-bottom: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-left: 3px solid var(--primary-color);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    cursor: pointer;
    overflow: hidden;
}

.chat-msg.mine .chat-reply-quote {
    background: rgba(255, 255, 255, 0.22);
    border-left-color: rgba(255, 255, 255, 0.85);
}

.chat-reply-from {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-msg.mine .chat-reply-from {
    color: #fff;
}

.chat-reply-text {
    font-size: 0.78rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.chat-msg.mine .chat-reply-text {
    color: rgba(255, 255, 255, 0.92);
}

/* 返信元へジャンプしたときの一時ハイライト */
.chat-msg.msg-highlight .chat-msg-bubble {
    animation: msgHighlight 1.6s ease;
}

@keyframes msgHighlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    25% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45); }
}

/* 自分のメッセージは吹き出しが青、背景は白。
   青い光だと吹き出しに埋もれ、白い光だと背景に溶けてどちらも見えない。
   白背景でも青い吹き出しでも目立つ橙色を使い、内側に白の細枠を入れて
   吹き出しの縁との境目をはっきりさせる。 */
.chat-msg.mine.msg-highlight .chat-msg-bubble {
    animation: msgHighlightMine 1.6s ease;
}

@keyframes msgHighlightMine {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
    25% {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.9),
            0 0 0 5px rgba(245, 158, 11, 0.95),
            0 0 14px 4px rgba(245, 158, 11, 0.45);
    }
}

/* 入力欄上の返信バー */
.reply-bar {
    padding: 0 0.5rem;
}

.reply-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    margin: 0.2rem 0;
    border-radius: 10px;
    background: var(--background-color);
    border-left: 3px solid var(--primary-color);
}

.reply-bar-icon {
    color: var(--primary-color);
}

.reply-bar-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
}

.reply-bar-from {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-color);
}

.reply-bar-preview {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-bar-cancel {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    border-radius: 6px;
}

    .reply-bar-cancel:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--text-primary);
    }

/* Keepメモのテキストは改行を保持 */
.keep-text {
    white-space: pre-wrap;
}

/* Keepメモ: 入力欄下の添付ボタン・保存ボタンの並び */
.keep-input-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .keep-input-actions .request-submit-btn {
        flex: 1;
    }

/* Keepメモ: 添付予定ファイルのプレビュー（保存前） */
.keep-file-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .keep-file-preview img {
        max-width: 48px;
        max-height: 48px;
        border-radius: 6px;
        object-fit: cover;
    }

    .keep-file-preview .keep-file-preview-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .keep-file-preview .keep-file-preview-remove {
        cursor: pointer;
        color: var(--text-secondary);
        background: none;
        border: none;
        font-size: 0.95rem;
    }

        .keep-file-preview .keep-file-preview-remove:hover {
            color: #dc2626;
        }

/* ===== ファイル転送（P2P直接送信）===== */
/* 受信通知アイコン：他の通知（着信=緑パステル、更新=青パステル）と揃えた
   落ち着いた配色にする（派手なグラデーションではなく淡い背景色＋差し色） */
.ft-incoming-icon {
    background: #e0e7ff;
    color: #4f46e5;
}

.ft-target-input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-color);
    color: var(--text-primary);
}

.ft-file-list, .ft-progress-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 260px;
    overflow-y: auto;
}

/* 中身が無いときは高さを持たせない（空の余白が出るのを防ぐ） */
    .ft-file-list:empty, .ft-progress-list:empty {
        display: none;
    }

.ft-file-item, .ft-progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

    .ft-file-item .ft-file-item-name, .ft-progress-item .ft-progress-item-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ft-file-item .ft-file-item-size {
        flex-shrink: 0;
        font-size: 0.78rem;
    }

    .ft-file-item .ft-file-item-remove {
        cursor: pointer;
        color: var(--text-secondary);
        background: none;
        border: none;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

        .ft-file-item .ft-file-item-remove:hover {
            color: var(--danger-color);
        }

.ft-progress-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}

    .ft-progress-item .ft-progress-item-head {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* 状態と数字は、名前の下に1行で置く（名前が長くても押し出されない） */
    .ft-progress-item .ft-progress-item-status {
        font-size: 0.74rem;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

/* 進捗の1行。状態が見て分かるように、アイコンと％も出す */
.ft-progress-item-icon {
    flex-shrink: 0;
    width: 1em;
    text-align: center;
    color: var(--text-secondary);
}

.ft-progress-item-pct {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-secondary);
}

.ft-progress-item.is-done .ft-progress-item-icon,
.ft-progress-item.is-done .ft-progress-item-pct { color: var(--success-color, #16a34a); }

.ft-progress-item.is-done .ft-mini-bar-fill { background: var(--success-color, #16a34a); }

.ft-progress-item.is-error .ft-progress-item-icon,
.ft-progress-item.is-error .ft-progress-item-pct { color: var(--danger-color); }

.ft-progress-item.is-error .ft-mini-bar-fill { background: var(--danger-color); }

/* 終わったあとに「何件・何MB やり取りしたか」を1行で出す */
.ft-summary {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
}

    .ft-summary.is-ok { color: var(--success-color, #16a34a); }

.ft-mini-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
}

    .ft-mini-bar-fill {
        height: 100%;
        background: var(--primary-color);
        width: 0%;
        transition: width 0.15s ease;
    }

.ft-overall-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ft-overall-progress-bar {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--border-color);
    overflow: hidden;
}

.ft-overall-progress-fill {
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    transition: width 0.15s ease;
}

.ft-overall-progress-label {
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    min-width: 3em;
    text-align: right;
}

.ft-cancel-btn {
    background: var(--text-secondary);
}

    .ft-cancel-btn:hover {
        background: #475569;
    }

.ft-incoming-file-list {
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    /* 受信確認モーダルではボタンとの間に余白が要る
       （共通の .ft-file-list からは余白を外したため、ここで足す） */
    margin: 0.75rem 0 1.1rem;
}

/* Keepメモ: 保存済みメモに添付されたファイルの表示 */
.keep-item-file {
    margin: 0.4rem 0;
}

    .keep-item-file .chat-img-preview {
        max-width: 220px;
        max-height: 220px;
    }

/* AIノイズ抑制の状態表示 */
.noise-ai-status {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

    .noise-ai-status.loading { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
    .noise-ai-status.ok { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
    .noise-ai-status.warn { color: #b45309; background: #fffbeb; border-color: #fcd34d; }

/* AIボタンの4分割でも収まるように */
.noise-level-group {
    flex-wrap: wrap;
}

/* ファイル転送モーダルの余白は .ft-body / .ft-view 側でまとめて管理する
   （旧実装は要素ごとに margin-left/right を当てていたため左端が揃わなかった） */

/* =====================================================
   要望箱モーダルの左右余白の調整
   （説明文やリストが枠に詰まりすぎないようにする）
   ===================================================== */
#requestBoxModal .settings-modal-content {
    max-width: 460px;
}

#requestBoxModal .request-box-intro {
    padding: 0.25rem 1.5rem 0;
    margin: 0 0 0.75rem;
}

#requestBoxModal #requestMyList,
#requestBoxModal #requestAdminList {
    padding-left: 0;
    padding-right: 0;
}

/* モーダル内のテキストエリア等が枠いっぱいに広がりすぎないよう微調整 */
#requestBoxModal .settings-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* =====================================================
   絵文字ピッカー（その他のリアクション）
   ===================================================== */
.msg-reaction-more {
    border: none;
    background: var(--background-color);
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .msg-reaction-more:hover {
        background: var(--primary-color);
        color: #fff;
    }

.emoji-picker-content {
    width: 100%;
    max-width: 380px;
    padding: 0;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.15rem;
    padding: 0.75rem 1rem 1rem;
    max-height: 52vh;
    max-height: 52svh;
    overflow-y: auto;
}

    .emoji-picker-grid button {
        font-size: 1.4rem;
        line-height: 1;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.35rem 0;
        border-radius: 8px;
        transition: transform 0.1s ease, background-color 0.12s ease;
    }

        .emoji-picker-grid button:hover {
            background: var(--background-color);
            transform: scale(1.25);
        }

@media (max-width: 480px) {
    .emoji-picker-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* =====================================================
   メッセージ本文のテキスト選択を許可（部分コピー用）
   選択状態にすると、ブラウザ標準のコピーメニューが使える
   ===================================================== */
.chat-msg-bubble,
.chat-msg-text {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
}

/* 絵文字ピッカーはチャット画面(.modal: z-index 1000)より前面に出す
   （DOM順では dmModal の方が後ろにあり、同じz-indexだと背面に隠れてしまうため） */
#emojiPickerModal {
    z-index: 13000;
}

/* リアクションメニューで「今自分がしているリアクション」を強調表示 */
.msg-reaction-emoji.selected {
    background: rgba(37, 99, 235, 0.16);
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.msg-reaction-more.selected {
    background: var(--primary-color);
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

/* 固有ユーザーID（設定画面） */
.uid-display-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.uid-display-value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    word-break: break-all;
    user-select: all;
}
.uid-copy-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 管理者: ユーザー管理リスト */
.admin-user-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    margin-bottom: 0.45rem;
}
.admin-user-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 160px;
    min-width: 0;
}
.admin-user-name {
    font-weight: 700;
    /* 長い名前でも入るようにしつつ、短い名前が1文字ずつ折れないようにする */
    overflow-wrap: anywhere;
    word-break: normal;
}
.admin-user-uid {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.admin-user-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.admin-user-badge.online { background: #dcfce7; color: #166534; }
.admin-user-badge.frozen { background: #fee2e2; color: #b91c1c; }
.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.admin-mini-btn {
    font-size: 0.74rem;
    padding: 0.32rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--card-bg, #fff);
    color: var(--text-color);
    cursor: pointer;
    white-space: nowrap;
}
.admin-mini-btn:hover { filter: brightness(0.96); }
.admin-mini-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.admin-mini-btn.warn { background: #b45309; color: #fff; border-color: #b45309; }
.admin-mini-btn.ok { background: #0f766e; color: #fff; border-color: #0f766e; }

/* =====================================================
   他アプリ / アカウント切替（追加機能）
   ===================================================== */

/* --- アカウント切替トリガー（ヘッダーのユーザー名） --- */
.account-switch-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--animation-duration) ease;
}
.account-switch-btn:hover {
    background-color: var(--background-color);
    border-color: var(--primary-color);
}
.account-switch-caret {
    font-size: 0.6rem;
    color: var(--text-secondary);
}

/* --- 他アプリ一覧 --- */
.apps-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.4rem 0 0.8rem;
    padding: 0 1.5rem;
}
.apps-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 1rem 0;
}
.app-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    transition: all var(--animation-duration) ease;
}
.app-item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}
.app-item-link:hover {
    color: var(--primary-color);
}
.app-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
    font-size: 1.1rem;
}
.app-item-body {
    min-width: 0;
    flex: 1;
}
.app-item-name {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-item-url {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-item-go {
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
}
/* 管理者操作ボタン群 */
.app-item-admin {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.app-admin-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all var(--animation-duration) ease;
}
.app-admin-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.app-admin-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.app-admin-btn.danger:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
}
.apps-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-color);
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.apps-input:focus {
    outline: none;
    border-color: var(--primary-color);
}
/* 編集インライン入力欄 */
.app-edit-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

/* --- アカウント切替一覧 --- */
.account-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.4rem 0 0.8rem;
    padding: 0 1.5rem;
}
.account-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}
.account-item:hover {
    border-color: var(--primary-color);
    background: var(--background-color);
}
.account-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}
.account-item-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #0ea5e9);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}
.account-item-body {
    flex: 1;
    min-width: 0;
    /* モーダル全体が中央そろえなので、ここで左そろえに戻す。
       中央のままだと、名前の長さによって行ごとに開始位置がずれて見える。 */
    text-align: left;
}
.account-item-name {
    display: block;
    text-align: left;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 切り替えられる側に出す案内。名前の隣に文章を足すより、
   「押せばこうなる」が一目で分かる形にしている。 */
.account-item-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
    /* 「ログイン中」と同じ幅にして、名前の欄の広さを行ごとに変えない */
    min-width: 6.5em;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    line-height: 1;
}

.account-item:hover .account-item-go {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
/* 1つしか無いときの案内 */
.account-list-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.2rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: var(--background-color);
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.65;
    text-align: left;
}

    .account-list-hint i {
        margin-top: 0.2rem;
        flex-shrink: 0;
        color: var(--primary-color);
    }

.account-item-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex-shrink: 0;
    min-width: 6.5em;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.35);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    line-height: 1;
}
.account-item-current i {
    font-size: 0.95rem;
}
/* 「ログイン中」の行には削除ボタンが無いので、その幅ぶんを空けて
   右端の位置を他の行とそろえる */
.account-item.active .account-item-current {
    margin-right: 36px;
}

.account-item-remove {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: all var(--animation-duration) ease;
}
.account-item-remove:hover {
    color: var(--danger-color);
    border-color: var(--danger-color);
}
.account-item-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    color: var(--text-secondary);
    cursor: grab;
    touch-action: none; /* ハンドルでのドラッグ操作をブラウザの標準スクロールより優先させる */
}
.account-item-handle:active {
    cursor: grabbing;
}
.account-item.dragging {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
    cursor: grabbing;
}
.account-item-placeholder {
    border: 2px dashed var(--primary-color);
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.06);
    margin: 0; /* .account-list の gap がそのまま効くように */
}
.account-add-btn {
    width: auto;
    align-self: stretch;
    justify-content: center;
    margin: 0.2rem 1.5rem 0.4rem;
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--primary-color);
    border: 1.5px dashed var(--primary-color);
    border-radius: 12px;
    font-weight: 700;
}
.account-add-btn:hover {
    background: var(--background-color);
    color: var(--primary-color);
}

/* 他アプリ・アカウント切替モーダル: 説明文を一覧と同じ左右余白に揃える
   （これらの要素は settings-item の外＝body直下にあるため個別に余白を付与） */
#appsModal .request-box-intro,
#accountSwitchModal .request-box-intro {
    padding: 0.25rem 1.5rem 0;
    margin: 0 0 0.75rem;
}

/* セクションラベル下の説明用の余白調整 */
#appsModal .settings-modal-content,
#accountSwitchModal .settings-modal-content {
    max-width: 460px;
}

/* 他アプリの「追加する」ボタンは要望箱の送信ボタンと同じく全幅に */
#appsModal #appAddBtn {
    width: 100%;
    align-self: stretch;
    justify-content: center;
}

/* 要望箱バッジ: 管理者の未対応件数を赤バッジで（ドット表示を上書き） */
#requestBoxBadge.count-badge {
    min-width: 16px;
    width: auto;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    background: var(--danger-color);
    box-shadow: none;
    animation: none;
}

/* =====================================================
   アカウント追加 専用画面
   ===================================================== */
.add-acct-card {
    position: relative;
}

.add-acct-back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}
.add-acct-back:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.add-acct-logo {
    margin-top: 0.75rem;
}
.add-acct-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    color: #fff;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
}
.add-acct-logo .add-acct-badge i {
    font-size: 1.7rem;
    margin-bottom: 0;
    display: inline-block;
}
.add-acct-logo p {
    line-height: 1.6;
}

/* 現在ログイン中のアカウント表示 */
.add-acct-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.add-acct-current i {
    font-size: 1.2rem;
    color: var(--primary-color);
}
.add-acct-current strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* 専用タブ（通常の auth-tab とは別ハンドラなので別クラスで同じ見た目に） */
.add-acct-tabs {
    margin-bottom: 1.5rem;
}
.add-acct-tab {
    flex: 1;
    padding: 0.6rem 0.4rem;
    border-radius: calc(var(--border-radius-sm) - 2px);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}
.add-acct-tab.active {
    background: var(--surface-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}
.add-acct-tab:hover:not(.active) {
    color: var(--text-primary);
}

/* =====================================================
   スマホ向けヘッダー（横向きスマホも崩れないよう 900px で切替）
   1段目: ロゴ / 接続状態 / アカウント切替・ログアウト
   2段目: ナビボタンを均等グリッドで全て表示（折り返しても整列する）
   ===================================================== */
/* 旧・スマホ用のヘッダー折り返しは、下タブ方式の作り直しに伴って廃止した。
   （このファイル末尾の「スマホ版のレイアウト」に集約している） */


/* =====================================================
   オンライン一覧のファイル転送ボタン
   （ヘッダーの「転送」ボタンを廃止し、通話ボタンの隣に移動）
   ===================================================== */
.user-item-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.send-file-user-btn {
    padding: 0.35rem 0.55rem;
    background: #ecfdf5;
    color: #059669;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
    cursor: pointer;
    width: 30px;
    height: 30px;
    transition: all var(--animation-duration) ease;
}

    .send-file-user-btn:hover {
        background: #059669;
        color: #fff;
        transform: scale(1.08);
    }

/* =====================================================
   Keepメモ（LINE風の1トーク化）
   ===================================================== */
/* 会話一覧の先頭に固定表示されるKeepメモ行 */
/* Keepメモは固定表示をやめ、他の会話と同じ見た目・同じ並びに揃える
   （見分けはアイコンの色と「自分のみ」タグで付ける） */
.dm-conv-item.keep-conv-item {
    background: transparent;
    border: none;
    margin-bottom: 0;
}

    .dm-conv-item.keep-conv-item:hover {
        background: var(--hover-color, rgba(0,0,0,0.04));
    }

.keep-conv-avatar {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.keep-conv-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Keepチャットの本文エリア */
.keep-chat-messages {
    background: #f1f5f9;
}

.keep-chat-intro {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    margin: 0.5rem auto 0.9rem;
    max-width: 90%;
    width: fit-content;
    line-height: 1.5;
}

/* 添付のプレビュー帯（入力欄の上） */
.keep-file-preview-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-color);
    max-height: 120px;
    overflow-y: auto;
}

.keep-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--primary-light);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 999px;
    padding: 0.2rem 0.5rem 0.2rem 0.35rem;
    font-size: 0.72rem;
    max-width: 200px;
}

    .keep-file-chip img {
        width: 22px;
        height: 22px;
        object-fit: cover;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .keep-file-chip i.fas {
        color: var(--primary-color);
        flex-shrink: 0;
    }

.keep-file-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keep-file-chip-remove {
    background: none;
    color: var(--text-secondary);
    padding: 0 0.1rem;
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
}

    .keep-file-chip-remove:hover {
        color: var(--danger-color);
    }

/* =====================================================
   動画共有
   ===================================================== */
.video-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680px;
    height: 86vh;
    height: 86svh;
    max-height: 820px;
    padding: 0;
    overflow: hidden;
}

.video-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
    flex-shrink: 0;
}

.video-tab {
    flex: 1;
    padding: 0.75rem 0.5rem;
    background: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

    .video-tab:hover {
        color: var(--primary-color);
        background: rgba(37, 99, 235, 0.04);
    }

    .video-tab.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
        background: rgba(37, 99, 235, 0.06);
    }

.video-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.5rem;
    background: var(--background-color);
    /* .modal-content が text-align:center を指定しているため、ここで戻す */
    text-align: left;
}

.video-pane-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.video-search-input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--surface-color);
    font-size: 0.85rem;
    color: var(--text-primary);
}

    .video-search-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.video-icon-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--border-radius-sm);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

    .video-icon-btn:hover {
        color: var(--primary-color);
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

.video-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* 動画カード */
.video-card {
    display: flex;
    align-items: flex-start;
    /* カード全体がクリック対象 */
    cursor: pointer;
    gap: 0.8rem;
    padding: 0.7rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--animation-duration) ease, transform var(--animation-duration) ease;
}

    .video-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

.video-card-thumb {
    position: relative;
    width: 128px;
    aspect-ratio: 16 / 9;
    /* 親のstretchで縦に伸びて16:9が崩れるのを防ぐ */
    align-self: flex-start;
    height: auto;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #0f172a;
    display: block;
}

    .video-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.video-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity var(--animation-duration) ease;
}

.video-card:hover .video-card-play,
.video-card:focus-visible .video-card-play {
    opacity: 1;
}

/* キーボード操作時の選択位置を分かりやすくする */
.video-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.video-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.video-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

    .video-card:hover .video-card-title {
        color: var(--primary-color);
    }

.video-card-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: pre-wrap;
}

.video-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: auto;
    padding-top: 0.25rem;
}

.video-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.63rem;
    font-weight: 700;
    padding: 0.12rem 0.42rem;
    border-radius: 4px;
    white-space: nowrap;
}

.video-badge-public {
    background: #ecfdf5;
    color: #059669;
}

.video-badge-limited {
    background: #fef3c7;
    color: #b45309;
}

.video-badge-private {
    background: #f1f5f9;
    color: #475569;
}

.video-badge-code {
    background: #ede9fe;
    color: #6d28d9;
    font-family: 'SFMono-Regular', Consolas, monospace;
    letter-spacing: 0.06em;
}

.video-badge-shared {
    background: var(--primary-light);
    color: var(--primary-color);
}

.video-card-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
    align-items: flex-start;
}

.video-card-action {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

    .video-card-action:hover {
        color: var(--primary-color);
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

    .video-card-action.danger:hover {
        color: var(--danger-color);
        border-color: var(--danger-color);
        background: #fef2f2;
    }

.video-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

    .video-empty i {
        font-size: 1.8rem;
        opacity: 0.4;
        margin-bottom: 0.6rem;
        display: block;
    }

    .video-empty p {
        font-size: 0.85rem;
    }

/* コード入力 */
.video-code-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--surface-color);
    font-size: 1.6rem;
    font-weight: 700;
    /* 文字間を空けると最後の1文字の後ろにも余白が付き中央がずれるため、
       同じ幅だけ左に寄せて見た目の中央を合わせる */
    letter-spacing: 0.45em;
    text-indent: 0.45em;
    text-align: center;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--text-primary);
}

    .video-code-input::placeholder {
        color: var(--text-secondary);
        opacity: 0.45;
        font-weight: 600;
    }

    .video-code-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

/* 投稿・編集フォーム */
.video-required {
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
    background: var(--danger-color);
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.video-optional {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--border-color);
    padding: 0.08rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.video-form-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 0.2rem;
}

.video-vis-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.video-vis-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--surface-color);
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

    .video-vis-choice:hover {
        border-color: var(--primary-color);
    }

    .video-vis-choice input[type="radio"] {
        margin-top: 0.22rem;
        flex-shrink: 0;
        accent-color: var(--primary-color);
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .video-vis-choice:has(input:checked) {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

.video-vis-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.video-vis-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.video-vis-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.video-limited-box {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.25rem;
}

.video-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

    .video-check-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--primary-color);
        cursor: pointer;
        flex-shrink: 0;
    }

.video-current-code {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 0.55rem 0.75rem;
}

.video-current-code-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.video-current-code-value {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--primary-color);
    flex: 1;
    min-width: 0;
}

.video-allow-add {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

    .video-allow-add .video-input {
        flex: 1;
        min-width: 0;
    }

.video-allow-add-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.video-allow-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 0;
}

.video-allow-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem 0.5rem 0.25rem 0.7rem;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.video-allow-chip-remove {
    background: none;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.1rem;
}

    .video-allow-chip-remove:hover {
        color: var(--danger-color);
    }

.video-allow-empty {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: normal;
    opacity: 0.8;
}

/* 再生モーダル */
.video-detail-content {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    max-height: 92svh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.video-player-title {
    text-align: left;
    font-size: 0.95rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-player-body {
    overflow-y: auto;
    flex: 1;
}

/* 詳細モーダルの表紙。動画は埋め込まず、画像（または汎用表示）を出すだけ */
.video-detail-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f172a;
    overflow: hidden;
}

    .video-detail-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.video-player-meta {
    padding: 1rem 1.25rem 1.25rem;
    text-align: left;
}

.video-player-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.video-player-desc {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

    .video-player-desc:empty {
        display: none;
    }

/* スマホ最適化 */
@media (max-width: 640px) {
    .video-modal-content {
        height: 92vh;
        height: 92svh;
        max-height: none;
    }

    .video-body {
        padding: 0.85rem 0.75rem 1.5rem;
    }

    .video-tab {
        font-size: 0.75rem;
        padding: 0.65rem 0.2rem;
        gap: 0.25rem;
    }

    /* タブが4つあるため、狭い画面ではアイコンを省いて文字を優先する */
    .video-tab i {
        display: none;
    }

    .video-card {
        flex-wrap: wrap;
    }

    .video-card-thumb {
        width: 104px;
    }

    .video-card-title {
        font-size: 0.85rem;
    }

    .video-code-input {
        font-size: 1.2rem;
        letter-spacing: 0.35em;
    }

    .video-code-entry {
        flex-direction: column;
    }

    .video-detail-content {
        max-height: 96vh;
        max-height: 96svh;
    }
}

/* =====================================================
   ファイル転送モーダル（レイアウト整理）
   ===================================================== */
/* 以前は設定画面用の .settings-item を流用していたため、区切り線・二重の余白・
   中央寄せが混ざって間延びして見えていた。転送モーダル専用の縦リズムに置き換える。 */
.ft-modal-content {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    max-height: 90svh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* .modal-content の text-align:center を打ち消す */
    text-align: left;
}

.ft-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
}

.ft-view {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.ft-intro {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

    /* 進捗画面では見出し相当なので少し強く見せる */
    #ftProgressTitle.ft-intro {
        font-size: 0.88rem;
        color: var(--text-primary);
        font-weight: 600;
    }

    #ftProgressTitle.ft-intro:empty {
        display: none;
    }

.ft-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ft-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ファイル選択ボタン（点線の枠で「置き場」だと分かるようにする） */
.ft-file-select-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: var(--background-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

    .ft-file-select-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
        background: var(--primary-light);
    }

    .ft-file-select-btn i {
        font-size: 0.9rem;
    }

/* エラーは文字があるときだけ場所を取る（常時1行分の空白を空けない） */
.ft-error {
    font-size: 0.8rem;
    color: var(--danger-color);
    line-height: 1.5;
    margin: 0;
}

    .ft-error:empty {
        display: none;
    }

.ft-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

    .ft-primary-btn:hover:not(:disabled) {
        background: var(--primary-dark);
    }

    .ft-primary-btn:active:not(:disabled) {
        transform: scale(0.99);
    }

/* キャンセルは主要動作ではないのでグレーにする
   （.ft-primary-btn より後に定義して確実に上書きする） */
.ft-primary-btn.ft-cancel-btn {
    background: var(--text-secondary);
}

    .ft-primary-btn.ft-cancel-btn:hover:not(:disabled) {
        background: #475569;
    }

@media (max-width: 640px) {
    .ft-body {
        padding: 1rem 1.1rem 1.25rem;
    }

    .ft-view {
        gap: 1rem;
    }
}

/* =====================================================
   動画共有：フォーム（アップロード／コード入力）の共通レイアウト
   ===================================================== */
/* 以前は設定画面用のクラス（.settings-action-btn / .request-submit-btn）を
   流用していたため、ボタンが枠いっぱいに広がったり、横並びの中で
   width:100% が効いて入力欄が潰れたりしていた。専用クラスに統一する。 */
.video-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    text-align: left;
}

.video-intro {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.video-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.video-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.video-input,
.video-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-color);
    color: var(--text-primary);
    outline: none;
}

.video-textarea {
    resize: vertical;
    min-height: 4.5rem;
    line-height: 1.6;
}

    .video-input:focus,
    .video-textarea:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

/* エラーは文字があるときだけ場所を取る */
.video-error {
    font-size: 0.8rem;
    color: var(--danger-color);
    line-height: 1.5;
    margin: 0;
}

    .video-error:empty {
        display: none;
    }

/* 通知サーバーの診断は複数行で出す。鍵の値をそのまま並べるので、
   改行を保ったまま、長い鍵は途中で折り返す。 */
#adminPushError {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--mono-font, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 0.74rem;
}

/* 主要ボタン（共有する／保存する／解錠する）
   左右の余白は .video-body 側で確保されるので、ここは幅いっぱいでよい */
.video-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

    .video-primary-btn:hover:not(:disabled) {
        background: var(--primary-dark);
    }

    .video-primary-btn:active:not(:disabled) {
        transform: scale(0.99);
    }

/* 行内に置く小さめのボタン（指名の追加・編集をやめる） */
.video-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--animation-duration) ease;
}

    .video-inline-btn:hover:not(:disabled) {
        border-color: var(--primary-color);
        color: var(--primary-color);
        background: var(--primary-light);
    }

.video-allow-add-btn {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

    .video-allow-add-btn:hover:not(:disabled) {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
    }

/* 編集中の案内バー */
.video-edit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 10px;
    background: var(--primary-light);
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.5;
}

    .video-edit-banner strong {
        font-weight: 700;
        word-break: break-word;
    }

@media (max-width: 640px) {
    .video-form {
        gap: 1rem;
    }

    .video-code-input {
        font-size: 1.3rem;
        letter-spacing: 0.35em;
        text-indent: 0.35em;
    }

    /* 320px級の端末でも4タブが折り返さずに収まるようにする */
    .video-tab {
        font-size: 0.72rem;
    }

    .video-allow-add {
        flex-direction: column;
        align-items: stretch;
    }

    .video-allow-add-btn {
        width: 100%;
    }
}

/* =====================================================
   動画共有：表紙画像（任意アップロード）
   ===================================================== */
/* このアプリはYouTubeからサムネイルを取得しない。
   ユーザーが画像を上げていない場合は、汎用のフィルム表示を出す。 */
.video-thumb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 12px, transparent 12px 24px),
        linear-gradient(135deg, #334155, #1e293b 55%, #0f172a);
    color: rgba(255, 255, 255, 0.62);
    font-size: 1.6rem;
}

/* カード内の表紙 */
.video-card-thumb.is-fallback {
    background: #1e293b;
}

/* 詳細モーダルの表紙（大きいのでアイコンも大きく） */
.video-detail-cover .video-thumb-fallback {
    font-size: 3rem;
}

/* 入力フォームの画像プレビュー */
.video-thumb-picker {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.video-thumb-preview {
    position: relative;
    width: 176px;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid var(--border-color);
}

    .video-thumb-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .video-thumb-preview .video-thumb-fallback {
        font-size: 1.5rem;
    }

.video-thumb-actions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

    /* label を button と同じ見た目・当たり判定にする */
    .video-thumb-actions .video-inline-btn {
        cursor: pointer;
    }

/* 共有されたリンクの表示 */
.video-detail-link-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
}

.video-detail-url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-color);
}

.video-detail-url-text {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--primary-color);
    word-break: break-all;
    line-height: 1.5;
    text-decoration: none;
}

    .video-detail-url-text:hover {
        text-decoration: underline;
    }

@media (max-width: 640px) {
    .video-thumb-picker {
        flex-direction: column;
    }

    .video-thumb-preview {
        width: 100%;
    }

    .video-thumb-actions {
        flex-direction: row;
        width: 100%;
    }

        .video-thumb-actions .video-inline-btn {
            flex: 1;
        }
}

/* =====================================================
   限定公開：2つの共有方法をそれぞれ別のカードとして見せる
   ===================================================== */
/* 「コードで配る」と「アカウントを指名する」は性質の違う手段なので、
   同じ枠にまとめず、色・アイコン・囲みを変えて別物だと分かるようにする。 */
.video-limited-lead {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.15rem;
}

    .video-limited-lead i {
        margin-top: 0.2rem;
        flex-shrink: 0;
        opacity: 0.7;
    }

.video-method {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    overflow: hidden;
}

.video-method-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.video-method-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.video-method-titles {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.video-method-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.video-method-sub {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.video-method-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
}

/* 方法1：コードで配る（紫系） */
.video-method-code {
    border-color: rgba(124, 58, 237, 0.28);
}

    .video-method-code .video-method-head {
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(124, 58, 237, 0.03));
        border-bottom-color: rgba(124, 58, 237, 0.18);
    }

    .video-method-code .video-method-icon {
        background: #ede9fe;
        color: #6d28d9;
    }

    .video-method-code .video-check-row input[type="checkbox"] {
        accent-color: #7c3aed;
    }

/* 方法2：アカウントを指名する（青系＝アプリの基調色） */
.video-method-allow {
    border-color: rgba(37, 99, 235, 0.28);
}

    .video-method-allow .video-method-head {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.09), rgba(37, 99, 235, 0.03));
        border-bottom-color: rgba(37, 99, 235, 0.18);
    }

    .video-method-allow .video-method-icon {
        background: var(--primary-light);
        color: var(--primary-color);
    }

/* 2枚のカードのあいだの区切り */
.video-method-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

    .video-method-divider::before,
    .video-method-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border-color);
    }

/* =====================================================
   オンライン一覧のリサイズつまみ
   ===================================================== */
/* PCではパネルの右端を左右にドラッグして幅を、
   スマホでは下端を上下にドラッグして高さを変える。 */
.users-panel-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background var(--animation-duration) ease;
    touch-action: none; /* ドラッグ中に画面がスクロールしないように */
}

    .users-panel-resizer:hover,
    .users-panel-resizer:focus-visible,
    .users-panel-resizer.is-dragging {
        background: rgba(37, 99, 235, 0.1);
        outline: none;
    }

/* つまみの目印（細い縦棒） */
.users-panel-resizer-grip {
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: var(--border-color);
    transition: background var(--animation-duration) ease, height var(--animation-duration) ease;
}

    .users-panel-resizer:hover .users-panel-resizer-grip,
    .users-panel-resizer:focus-visible .users-panel-resizer-grip,
    .users-panel-resizer.is-dragging .users-panel-resizer-grip {
        background: var(--primary-color);
        height: 48px;
    }

/* ドラッグ中はページ全体で文字選択を止める（選択されると操作しづらいため） */
body.is-resizing-panel {
    user-select: none;
    cursor: col-resize;
}

    body.is-resizing-panel.is-resizing-vertical {
        cursor: row-resize;
    }

@media (max-width: 768px) {
    /* スマホではパネル下端の横棒になる */
    .users-panel-resizer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 12px;
        cursor: row-resize;
        background: var(--background-color);
        border-top: 1px solid var(--border-color);
    }

    .users-panel-resizer-grip {
        width: 40px;
        height: 3px;
    }

        .users-panel-resizer:hover .users-panel-resizer-grip,
        .users-panel-resizer:focus-visible .users-panel-resizer-grip,
        .users-panel-resizer.is-dragging .users-panel-resizer-grip {
            width: 56px;
            height: 3px;
        }

    /* つまみのぶん、一覧の下に余白を確保する */
    .users-panel .user-list {
        padding-bottom: 1rem;
    }
}

/* =====================================================
   管理パネル
   ===================================================== */
.admin-panel-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    height: 88vh;
    height: 88svh;
    max-height: 860px;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.admin-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
    flex-shrink: 0;
}

/* タブは同じ幅でそろえる。
   中身なりの幅（flex: 1 0 auto）にしていたので、
   「機能の権限」と「容量」のようにボタンの大きさがばらついていた。 */
.admin-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    background: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

    .admin-tab:hover {
        color: #dc2626;
        background: rgba(220, 38, 38, 0.04);
    }

    .admin-tab.active {
        color: #dc2626;
        border-bottom-color: #dc2626;
        background: rgba(220, 38, 38, 0.06);
    }

/* タブに付ける未対応件数。管理パネルを開いたあとも
   「要望箱にまだ手つかずのものがある」と分かるようにする。 */
.admin-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    margin-left: 0.1rem;
    border-radius: 999px;
    background: var(--danger-color);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

/* 開いていないタブでは、より目に留まるよう軽く脈打たせる */
.admin-tab:not(.active) .admin-tab-badge {
    animation: adminTabBadgePulse 2s ease-in-out infinite;
}

@keyframes adminTabBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.admin-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.1rem 1.35rem 1.6rem;
    background: var(--background-color);
}

.admin-intro {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 1rem;
}

.admin-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

.admin-search-input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--surface-color);
    font-size: 0.85rem;
    color: var(--text-primary);
}

    .admin-search-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.admin-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

    .admin-summary strong {
        color: var(--text-primary);
        font-weight: 700;
    }

.admin-user-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ユーザー行に載せる利用バージョン（旧「利用バージョン」機能の統合分） */
.admin-user-ver {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.42rem;
    border-radius: 4px;
    white-space: nowrap;
}

    .admin-user-ver.current { background: #ecfdf5; color: #059669; }
    .admin-user-ver.old { background: #fef3c7; color: #b45309; }
    .admin-user-ver.unknown { background: #f1f5f9; color: #64748b; }

.admin-user-seen {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ユーザー行の2段目（最終ログイン・最終利用）。
   親は flex-wrap なので、幅いっぱいを指定して必ず改行させる。 */
.admin-user-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    flex: 1 0 100%;
    order: 10;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.admin-user-login {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    white-space: nowrap;
}

    .admin-user-login.online {
        color: var(--success-color);
    }

    .admin-user-login.unknown {
        opacity: 0.75;
        font-weight: 500;
    }

.admin-status-line {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
}

/* ----- 通知（送信サーバーの設定）----- */
/* 入力欄の下に添える短い補足。エラー(.video-error)より弱く、説明文より近い位置に置く */
.video-hint {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0.35rem 0 0;
}

    .video-hint code {
        background: var(--primary-light);
        color: var(--primary-dark);
        border-radius: 4px;
        padding: 0.05rem 0.3rem;
        font-size: 0.95em;
    }

/* ひとつのタブの中で話題が変わるところに、細い区切りを入れる */
.admin-subsection {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-color);
}

/* 説明文のすぐ下に入力欄が来ると窮屈なので、少し離す */
.admin-subsection .video-hint + .video-field {
    margin-top: 0.9rem;
}

.admin-subtitle {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

    .admin-subtitle i {
        color: var(--primary-color);
        font-size: 0.85rem;
    }

/* テスト送信の結果に添える、相手側の登録状況 */
.push-inspect {
    margin-top: 0.6rem;
    font-size: 0.76rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

    .push-inspect:empty {
        display: none;
    }

    .push-inspect .pi-row {
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
        padding: 0.2rem 0;
    }

    .push-inspect .pi-label {
        flex-shrink: 0;
        min-width: 6.2em;
        color: var(--text-primary);
        font-weight: 600;
    }

    .push-inspect .pi-ok { color: var(--success-color); font-weight: 600; }
    .push-inspect .pi-ng { color: var(--danger-color); font-weight: 600; }

    .push-inspect .pi-devices {
        margin: 0.15rem 0 0;
        padding-left: 1.1rem;
    }

.admin-danger-btn {
    background: linear-gradient(135deg, #dc2626, #f97316);
}

    .admin-danger-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #b91c1c, #ea580c);
    }

.admin-secondary-btn {
    background: var(--text-secondary);
}

    .admin-secondary-btn:hover:not(:disabled) {
        background: #475569;
    }

/* ----- 機能の権限 ----- */
.admin-feature {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
    overflow: hidden;
    margin-bottom: 1rem;
}

.admin-feature-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
}

.admin-feature-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: var(--primary-light);
    color: var(--primary-color);
}

.admin-feature-icon-cloud {
    background: #ecfeff;
    color: #0891b2;
}

.admin-feature-titles {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.admin-feature-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.admin-feature-sub {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.admin-feature-body {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.admin-mode-choices {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.admin-mode-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

    .admin-mode-choice:hover { border-color: var(--primary-color); }

    .admin-mode-choice input[type="radio"] {
        margin-top: 0.15rem;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

    .admin-mode-choice:has(input:checked) {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

    .admin-mode-choice span {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }

    .admin-mode-choice strong {
        font-size: 0.83rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .admin-mode-choice small {
        font-size: 0.72rem;
        color: var(--text-secondary);
        line-height: 1.5;
    }

.admin-allow-box {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-color);
}

.admin-cloud-usage {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
}

    .admin-cloud-usage strong { color: var(--text-primary); }

/* =====================================================
   クラウド
   ===================================================== */
.cloud-usage-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.cloud-usage-track {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--border-color);
    overflow: hidden;
}

.cloud-usage-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0891b2, #0ea5e9);
    transition: width 0.2s ease;
}

    .cloud-usage-fill.is-full {
        background: linear-gradient(90deg, #dc2626, #f97316);
    }

.cloud-usage-label {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.cloud-upload-btn {
    margin-bottom: 0.9rem;
}

.cloud-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}

.cloud-item-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfeff;
    color: #0891b2;
    font-size: 1rem;
}

.cloud-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cloud-item-name {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.4;
}

.cloud-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .admin-panel-content {
        height: 94vh;
        height: 94svh;
        max-height: none;
    }

    .admin-body {
        padding: 0.9rem 0.8rem 1.4rem;
    }

    .admin-tab {
        font-size: 0.72rem;
        padding: 0.65rem 0.55rem;
    }

    .cloud-item {
        align-items: flex-start;
    }
}

/* =====================================================
   メッセージの日付区切りと、連続メッセージのまとまり（LINE式）
   ===================================================== */
.chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.9rem 0 0.7rem;
}

    .chat-date-divider span {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        padding: 0.2rem 0.8rem;
    }

/* 同じ送信者・同じ時刻で続くメッセージは間隔を詰めて1つの塊に見せる。
   一覧の既定の間隔（gap 0.5rem）から少し差し引いて、塊の中だけ狭くする。 */
.chat-msg.is-continued {
    margin-top: -0.2rem;
}

/* 塊の途中はアバターの場所だけ空ける */
.chat-msg-avatar.is-spacer {
    background: none !important;
    border: none;
    visibility: hidden;
}

/* 時刻が無いときに空の枠が場所を取らないように */
.chat-msg.is-grouped .chat-msg-time:empty {
    display: none;
}

/* 最新版のときに出す「ダウンロード版リンク」 */
.update-dl-box {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
    text-align: left;
}

/* =====================================================
   視聴を許可したアカウントの一覧（軽く見えないようにする）
   ===================================================== */
.allow-list-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary-color);
    padding: 0.35rem 0.1rem 0.5rem;
    width: 100%;
}

.allow-list-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.allow-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 10px;
    background: var(--surface-color);
    box-shadow: var(--shadow-sm);
}

.allow-row-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    background-size: cover;
    background-position: center;
}

    .allow-row-avatar.has-image { color: transparent; }

.allow-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.allow-row-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.allow-row-state {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #059669;
}

.allow-row-remove {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

    .allow-row-remove:hover {
        color: var(--danger-color);
        border-color: var(--danger-color);
        background: #fef2f2;
    }

/* 空のときも「入れる場所」だと分かるようにする */
.allow-empty-state {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
}

    .allow-empty-state i {
        color: var(--text-secondary);
        opacity: 0.6;
        margin-top: 0.15rem;
    }

    .allow-empty-state div {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

    .allow-empty-state strong {
        font-size: 0.8rem;
        color: var(--text-primary);
    }

    .allow-empty-state span {
        font-size: 0.72rem;
        color: var(--text-secondary);
        line-height: 1.55;
    }

/* =====================================================
   クラウド：アップロード中の表示と容量の内訳
   ===================================================== */
.cloud-usage-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: -0.4rem 0 0.9rem;
}

    .cloud-usage-note i {
        margin-top: 0.15rem;
        opacity: 0.7;
        flex-shrink: 0;
    }

/* ファイル1件ごとの実消費量 */
.cloud-item-stored {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    opacity: 0.85;
}

/* アップロード中はファイル選択を押せなくする */
.ft-file-select-btn.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

/* 保存が終わって一覧に出るまでの進捗表示 */
.cloud-progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: var(--border-radius-sm);
    background: var(--primary-light);
}

.cloud-progress-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.cloud-progress-name {
    font-size: 0.8rem;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.5;
}

.cloud-progress-done {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #059669;
}

    .cloud-progress-done.is-error {
        color: var(--danger-color);
    }

    .cloud-progress-done span {
        word-break: break-all;
    }

    .cloud-progress-done small {
        opacity: 0.85;
    }

/* =====================================================
   スクロール時の描画くずれ（ゴースト／残像）対策
   ===================================================== */
/* .chat-modal-content は「角丸＋overflow:hidden」でクリップされ、開くときの
   アニメーションで合成レイヤーになっている。この組み合わせは Chromium で、
   内部をスクロールした際に前のフレームが消えずに残る（重なって見える）描画バグを
   引き起こすことがある。スクロールする領域そのものを独立した描画レイヤーに載せ、
   スクロールのたびにきれいに再描画させることで防ぐ。 */
.dm-conversation-list,
.chat-messages,
.user-list,
.video-body,
.admin-body,
.cloud-modal-content .video-body {
    transform: translateZ(0);      /* 独立した合成レイヤーにする */
    -webkit-overflow-scrolling: touch;
    contain: paint;                /* 領域外へ描画がはみ出さないよう閉じ込める */
}

/* 会話一覧の各行は、はみ出し描画を行内に閉じ込めて残像を防ぐ。
   メッセージの吹き出しは返信ジャンプ時に外側へ光る枠を出すため、
   paint で閉じ込めると枠が切り取られてしまう。位置の封じ込めだけに留める。 */
.dm-conv-item {
    contain: layout paint;
}

.chat-msg {
    contain: layout;
}


/* =====================================================
   容量表示（設定・管理パネル）
   ===================================================== */
/* 設定：自分の使用量メーター */
.storage-meter {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
}

.storage-meter-track {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--border-color);
    overflow: hidden;
    min-width: 0;
}

.storage-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), #0ea5e9);
    transition: width 0.25s ease;
}

    .storage-meter-fill.is-full {
        background: linear-gradient(90deg, #dc2626, #f97316);
    }

.storage-meter-label {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* 管理パネル：アカウントごとの内訳 */
.admin-storage-row {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-storage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.admin-storage-total {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.admin-storage-lines {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.76rem;
    color: var(--text-secondary);
}

    .admin-storage-lines small {
        opacity: 0.85;
    }

/* クラウド：全体の使用量であることを見出しで示す */
.cloud-usage-title {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.cloud-usage-note strong {
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .cloud-usage-bar {
        flex-wrap: wrap;
    }

    .cloud-usage-title {
        width: 100%;
    }
}

/* =====================================================
   オンライン見出しの整え
   ===================================================== */
/* 見出しと更新ボタンが space-between で両端に離れ、
   パネル幅を変えるほど中央の空白が広がって見出しが宙に浮いて見えていた。
   人数バッジを見出しの直後に添えてひとまとまりにし、高さも少し詰める。 */
.panel-header {
    padding: 0.75rem 1rem;
}

    .panel-header h2 {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
    }

.online-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* =====================================================
   通知の設定
   ===================================================== */
/* 利用できない環境（ダウンロード版・非対応ブラウザ・ブロック中）の案内 */
.notify-blocked,
.notify-ios {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.65;
    text-align: left;
}

.notify-blocked {
    border: 1px solid rgba(202, 138, 4, 0.3);
    background: #fffbeb;
    color: #854d0e;
}

.notify-ios {
    border: 1px solid rgba(37, 99, 235, 0.28);
    background: var(--primary-light);
    color: var(--text-primary);
}

    .notify-blocked > i,
    .notify-ios > i {
        margin-top: 0.15rem;
        flex-shrink: 0;
        font-size: 0.95rem;
    }

.notify-blocked-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

    .notify-blocked-body strong {
        font-weight: 700;
    }

/* --- ONにできない理由であることを、見た目でも結びつける --- */

/* トグルの下に出す小さな札。押すと理由の案内が光る。 */
.notify-locked-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 0.45rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(202, 138, 4, 0.4);
    background: #fffbeb;
    color: #854d0e;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--animation-duration) ease;
}

    .notify-locked-chip:hover { background: #fef3c7; }

    .notify-locked-chip .notify-locked-arrow {
        font-size: 0.68rem;
        opacity: 0.75;
    }

/* 理由の案内は、上のトグルから続いているように見せる */
.notify-blocked-item {
    margin-top: -0.35rem;
    border-top: 0;
    padding-top: 0;
}

.notify-blocked-label {
    display: inline-block;
    align-self: flex-start;
    padding: 0.1rem 0.5rem;
    margin-bottom: 0.15rem;
    border-radius: 999px;
    background: rgba(202, 138, 4, 0.18);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* 札を押したときに、理由の場所を一瞬光らせる */
.notify-blocked.is-flash {
    animation: notifyBlockedFlash 1.1s ease;
}

@keyframes notifyBlockedFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(202, 138, 4, 0); }
    25% { box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.35); }
    60% { box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.35); }
}

.notify-blocked-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

    .notify-blocked-link:hover {
        text-decoration: underline;
    }

/* 「アプリとして追加」の案内 */
/* iOSの共有ボタンのアイコン。文中に、前後の文字と同じ大きさ・同じ色でなじませる */
.ios-share-icon {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.25em;
    margin: 0 0.15em;
}

.install-action-btn {
    margin-top: 0.6rem;
    padding: 0.45rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary-color);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
}

    .install-action-btn:hover:not(:disabled) {
        background: var(--primary-dark);
    }

.install-browsers {
    margin: 0.55rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.74rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* 操作できないときは、触れないことが見て分かるようにする。
   薄くするだけだと「OFFなだけ」に見えるので、つまみに鍵を出して
   「そもそも切り替えられない」ことが一目で伝わるようにする。 */
.toggle-switch.is-disabled {
    cursor: not-allowed;
    opacity: 1;                 /* 全体を薄くするのではなく、各部で作り分ける */
}

    .toggle-switch.is-disabled .toggle-slider {
        background: #e2e8f0;
        border: 1px dashed #94a3b8;
    }

    /* つまみ。中央に鍵を描く */
    .toggle-switch.is-disabled .toggle-slider::before {
        left: 2px;
        top: 2px;
        background-color: #f1f5f9;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 11px 11px;
        box-shadow: none;
        transform: none;         /* checked が残っていても動かさない */
    }

    /* 押しても反応しないので、クリック自体を受け付けない */
    .toggle-switch.is-disabled input {
        pointer-events: none;
    }

.settings-item-col.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 通知する種類 */
.notify-kinds {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.notify-kind {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--surface-color);
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text-primary);
    transition: all var(--animation-duration) ease;
}

    .notify-kind:hover {
        border-color: var(--primary-color);
    }

    .notify-kind input[type="checkbox"] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

    .notify-kind span {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
    }

    .notify-kind:has(input:checked) {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

.notify-sub-title {
    margin-top: 0.9rem;
}

/* 通知に表示する情報 */
.notify-detail-choices {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.notify-detail-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--surface-color);
    cursor: pointer;
    transition: all var(--animation-duration) ease;
}

    .notify-detail-choice:hover {
        border-color: var(--primary-color);
    }

    .notify-detail-choice input[type="radio"] {
        margin-top: 0.15rem;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

    .notify-detail-choice:has(input:checked) {
        border-color: var(--primary-color);
        background: var(--primary-light);
    }

.notify-detail-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    text-align: left;
}

.notify-detail-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* ロック画面での見え方の例。実際の通知らしく見せる。 */
.notify-detail-sample {
    font-size: 0.74rem;
    color: var(--text-secondary);
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    width: fit-content;
    max-width: 100%;
    word-break: break-word;
}

/* =====================================================
   スマホ版のレイアウト
   -----------------------------------------------------
   これまでは、PC版の横並びレイアウトを折り返して使い回していた。
   そのため、
     ・機能ボタンが枠付きのピルで2〜3段に折り返す
     ・端末の向きを変えると段数が変わり、ボタンの位置が動く
     ・ヘッダーが画面の2割を占める
     ・「オンライン」の表示が固定幅で、狭いとロゴを押しつぶす
   といった問題が出ていた。

   ここではスマホを前提に作り直す。
     ・ヘッダーは1段の細い帯（ロゴ＋状態のみ）。高さは常に一定。
     ・機能は画面下のタブに集約し、親指の届く位置に固定する。
     ・使用頻度の低い機能は「その他」のシートにまとめる。
     ・モーダルは全画面のシートにして、小さい画面でも読みやすくする。
   ===================================================== */

/* 下タブとシートは、スマホ幅のときだけ現れる */
.mobile-tabbar,
.mobile-sheet,
.mobile-sheet-backdrop { display: none; }

/* =====================================================
   幅に余裕が無いパソコン表示（タブレットの横向きなど）
   -----------------------------------------------------
   機能ボタンが10個ほど並ぶので、1200px を切るあたりから
   ロゴの隣の「オンライン」表示が押しつぶされていた。
   ボタン側を先に詰めて、状態表示の場所を確保する。
   ===================================================== */
/* ボタンが10個そろって並ぶ幅（1151〜1280px）だけ、少しだけ詰める。
   これより狭いときは下の「その他」にまとめるので、詰める必要はない。 */
@media (min-width: 1151px) and (max-width: 1280px) {
    .app-header { gap: 0.6rem; }

    .header-right { gap: 0.5rem; }

    .header-nav { gap: 0.4rem; }

    .header-right .nav-btn {
        min-width: 48px;
        padding: 5px 5px;
    }

    .nav-btn-label { font-size: 0.6rem; }

    .header-username { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 状態表示がつぶれないようにする（幅に余裕が無いとき共通） */
@media (min-width: 901px) and (max-width: 1280px) {
    .connection-status { flex-shrink: 0; }

    /* 機能ボタンは右端にそろえる。
       左に寄せたままだと、右側が大きく空いているのに
       ヘッダーだけ密集して見えてしまう。 */
    .header-right { margin-left: auto; }
}

/* ---- ヘッダーの「その他」 ---- */
/* ふだん（画面が広いとき）は出さない */
.nav-more-wrap {
    display: none;
    position: relative;
}

.nav-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    min-width: 200px;
    padding: 0.35rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}

    .nav-more-menu[hidden] { display: none; }

.nav-more-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

    .nav-more-item:hover {
        background: var(--background-color);
        color: var(--primary-color);
    }

    .nav-more-item > i {
        width: 1.15em;
        text-align: center;
        color: var(--text-secondary);
    }

    .nav-more-item:hover > i { color: var(--primary-color); }

.nav-more-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger-color);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* スマホでは下タブがあるので、ヘッダーの「その他」は使わない */
@media (max-width: 900px),
       (max-width: 1024px) and (pointer: coarse) and (orientation: portrait) {
    .nav-more-wrap { display: none !important; }
}

/* さらに狭いとき（タブレットの横向きなど）は、
   使う頻度の低い機能を「その他」にまとめる。
   アイコンだけにすると何の機能か分からないので、文字は残す。 */
@media (min-width: 901px) and (max-width: 1150px) {
    .header-nav > #updateBtn,
    .header-nav > #adminPanelBtn,
    .header-nav > #requestBoxBtn,
    .header-nav > #cloudBtn,
    .header-nav > #videoBtn,
    .header-nav > #appsBtn { display: none !important; }

    .nav-more-wrap { display: block; }

    .header-username { max-width: 6em; }
}

/* 指で操作する端末（タブレットなど）は、縦向きなら幅が広めでも
   下タブのある形にする。iPadを縦で使うと、幅が900pxを超えるせいで
   下タブが出ず、パソコン向けの並びのまま窮屈になっていた。
   「PC用サイトを表示」を使うと縦でも1024px扱いになるため、そこまで含める。 */
@media (max-width: 900px),
       (max-width: 1024px) and (pointer: coarse) and (orientation: portrait) {

    /* ---------- 画面全体 ---------- */
    :root {
        --mtabbar-h: 58px;
        --mheader-h: 52px;
    }

    body { font-size: 15px; }

    /* スマホでは画面ごと動かさない。
       ヘッダー・一覧・下タブはそれぞれの場所に固定し、
       スクロールするのは中身（一覧やチャット）だけにする。
       ページ全体が動くと、指を滑らせたときにロゴまでずれてしまう。 */
    .app-container {
        height: 100svh;
        /* アドレスバーが隠れたときに下へ余白が空かないよう、
           実際に見えている高さに合わせる（対応していない端末は上の svh） */
        height: 100dvh;
        min-height: 0;
        /* ヘッダーは画面に固定して流れから外したので、その高さぶんを空けておく */
        padding-top: calc(var(--mheader-h) + env(safe-area-inset-top, 0px));
        padding-bottom: 0;
        overflow: hidden;
    }

    /* ---------- ヘッダー ---------- */
    /* 1段のまま画面上部に固定。折り返さないので、向きを変えても高さが変わらない。 */
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        height: var(--mheader-h);
        min-height: var(--mheader-h);
        padding: 0 0.75rem;
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: content-box;
    }

    /* ロゴの大きさと位置はパソコンと同じにする（並びが揃って見えるように） */
    .logo { order: 0; gap: 0.4rem; flex-shrink: 0; }
    .logo h1 { font-size: 1.25rem; }
    .logo-mark { height: 26px; width: 35px; transform: translateY(-3.5px); }

    .header-center {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
    }

    /* 狭いときでもロゴや名前を押しつぶさないよう、縮めて省略する */
    .connection-status {
        min-width: 0;
        max-width: 100%;
        padding: 0.2rem 0.5rem;
        font-size: 0.72rem;
        gap: 0.3rem;
        overflow: hidden;
    }

        .connection-status > span:last-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }

    /* ヘッダーからは機能ボタンを全部おろす（下タブに移した） */
    .header-right { display: contents; }
    .header-nav { display: none !important; }
    .user-menu .nav-btn { display: none !important; }

    .user-menu {
        order: 2;
        flex-shrink: 0;
        gap: 0;
    }

    /* アカウント切替。ヘッダーが細いぶん、押せる場所だと分かる形にする。
       （同じ機能は下タブの「その他」→「アカウント」からも開ける） */
    .account-switch-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.28rem 0.55rem 0.28rem 0.32rem;
        border: 1px solid var(--primary-color);
        background: var(--primary-light);
        color: var(--primary-color);
        border-radius: 999px;
        max-width: 9em;
    }

        .account-switch-btn::before {
            content: '\f007';   /* fa-user */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 0.7rem;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            border-radius: 50%;
            background: var(--primary-color);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .account-switch-btn .header-username { color: var(--primary-color); font-weight: 700; }

        .account-switch-caret { color: var(--primary-color); }

    .header-username {
        display: inline-block;
        max-width: 5.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
    }

    /* ---------- 本体 ---------- */
    .main-layout {
        display: block;
        height: auto;
    }

    /* スマホではオンライン一覧そのものが本体。
       「LinkUpへようこそ」の待機画面は、通話中でなければ何も情報が無いので出さない。 */
    .users-panel {
        position: fixed;
        left: 0;
        right: 0;
        top: calc(var(--mheader-h) + env(safe-area-inset-top, 0px));
        bottom: calc(var(--mtabbar-h) + env(safe-area-inset-bottom, 0px));
        width: auto !important;
        height: auto !important;
        max-height: none;
        z-index: 1;
        border-right: 0;
        background: var(--surface-color);
        display: flex;
        flex-direction: column;
    }

    /* 通話が始まったら、映像に場所を譲る */
    body.in-call .users-panel { display: none; }

    .video-area { display: none; }
    body.in-call .video-area { display: block; }

    /* パネルのつまみ（リサイズ）はスマホでは不要 */
    .users-panel-resizer { display: none !important; }

    .panel-header {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .main-content { padding: 0; }

    /* フッター（暗号化の表示と Shift×3 の設定）はスマホでは出さない。
       Shift×3 はキーボードのある端末の機能で、置き場所も一覧の裏になってしまう。 */
    .app-footer { display: none; }

    /* ---------- 下タブ ---------- */
    .mobile-tabbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        height: calc(var(--mtabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface-color);
        border-top: 1px solid var(--border-color);
    }

    .mtab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: none;
        font-family: inherit;
        color: var(--text-secondary);
        font-size: 0.62rem;
        font-weight: 600;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease;
    }

        .mtab i { font-size: 1.15rem; }

        .mtab:active { transform: scale(0.94); }

        .mtab.is-active { color: var(--primary-color); }

    .mtab-badge {
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--danger-color);
        color: #fff;
        font-size: 0.6rem;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    .mtab-badge-dot {
        min-width: 11px;
        width: 11px;
        height: 11px;
        padding: 0;
        top: 6px;
        border: 2px solid var(--surface-color);
        box-sizing: content-box;
    }

    /* ---------- 「その他」シート ---------- */
    .mobile-sheet-backdrop {
        display: block;
        position: fixed;
        /* hidden 属性が付いている間は必ず消す。
           ここで display を指定するとブラウザ既定の [hidden] より強くなり、
           見えない膜が画面全体を覆ってタップを全部飲み込んでしまう。 */
        inset: 0;
        z-index: 95;
        background: rgba(15, 23, 42, 0.35);
    }

    .mobile-sheet[hidden],
    .mobile-sheet-backdrop[hidden] { display: none !important; }

    .mobile-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 96;
        background: var(--surface-color);
        border-radius: 18px 18px 0 0;
        padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.18);
        transform: translateY(100%);
        transition: transform 0.2s ease;
    }

    .mobile-sheet.is-open { transform: none; }

    .mobile-sheet-grip {
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: var(--border-color);
        margin: 0.35rem auto 0.9rem;
    }

    .mobile-sheet-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem 0.25rem;
    }

    .msheet-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 0.7rem 0.2rem;
        border: 0;
        background: none;
        border-radius: 12px;
        font-family: inherit;
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

        .msheet-item i {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: var(--background-color);
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
        }

        .msheet-item:active { background: var(--background-color); }

    .msheet-dot {
        position: absolute;
        top: 6px;
        right: calc(50% - 28px);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--danger-color);
        border: 2px solid var(--surface-color);
    }

    .mobile-sheet-close {
        width: 100%;
        margin-top: 0.9rem;
        padding: 0.75rem;
        border: 0;
        border-radius: 12px;
        background: var(--background-color);
        color: var(--text-secondary);
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
    }

    /* ---------- モーダルを全画面のシートに ---------- */
    /* ただし画面下のタブは隠さない。
       機能を開いたまま、別の機能へそのまま移れるようにするため。 */
    .modal {
        padding: 0;
        align-items: center;
        bottom: calc(var(--mtabbar-h) + env(safe-area-inset-bottom, 0px));
    }

    .modal .modal-content {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        /* 下からせり上がって開く。スマホの「シート」らしい動きに揃える。 */
        animation: mobileSheetUp 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* 見出しは上に残し、中身だけを動かす。
       カード全体をスクロールさせていると、下のボタンまで届く前に
       どこを見ているのか分からなくなり、切れているように感じる。 */
    .modal .settings-modal-content > .settings-body,
    .modal .admin-panel-content > .admin-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* いちばん下のボタンが画面の縁に貼りつかないよう、少し空ける */
    .modal .settings-modal-content > .settings-body,
    .modal .admin-panel-content > .admin-body {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    /* 管理パネルの一覧は、狭い画面では名前を1行分まるごと使う */
    .admin-user-main { flex: 1 1 100%; }

    @keyframes mobileSheetUp {
        from { transform: translateY(100%); }
        to { transform: none; }
    }

    /* 閉じるときは、開いた動きの逆で下へ引っ込む */
    .modal.is-closing .modal-content {
        animation: mobileSheetDown 0.24s cubic-bezier(0.32, 0.72, 0, 1) forwards;
    }

    @keyframes mobileSheetDown {
        from { transform: none; }
        to { transform: translateY(100%); }
    }

    /* 背景の暗幕も一緒にふわっと出す */
    .modal.visible { animation: mobileSheetFade 0.2s ease; }

    @keyframes mobileSheetFade {
        from { background-color: rgba(0, 0, 0, 0); }
        to { background-color: rgba(0, 0, 0, 0.5); }
    }

    /* 画像・動画のビューアだけは画面いっぱいに使う */
    .file-viewer-modal { bottom: 0; }

    .file-viewer-modal .file-viewer-content {
        padding-top: 0;
        animation: none;
    }

    /* 下タブは常にいちばん手前。モーダル（1000〜）より上に置く。 */
    .mobile-tabbar { z-index: 12500; }
    .mobile-sheet-backdrop { z-index: 12400; }
    .mobile-sheet { z-index: 12600; }

    /* 着信や通話中は、タブを触らせない（誤操作を防ぐ） */
    body.in-call .mobile-tabbar { display: none; }

    /* 短いお知らせ系は、全画面にせず中央のカードのままにする（動きも今まで通り） */
    .modal .permission-modal-content,
    .modal .incoming-call-content,
    .modal .confirm-modal-content {
        height: auto;
        max-height: calc(100svh - 5rem);
        border-radius: 16px;
        /* 画面の端に貼りつかないよう、上下にも余白を取る */
        margin: 1.5rem 1rem;
        width: auto;
        /* 全画面シート用の「上下の余白を消す」指定は、
           中央のカードには当てはまらないので戻す。 */
        padding: 1.75rem 1.25rem;
        animation: modalAppear var(--animation-duration) ease;
    }

    .modal .permission-modal-content {
        padding: 1.85rem 1.15rem;
    }

    /* 中央のカードは下から出ないので、閉じるときも縮んで消える */
    .modal.is-closing .permission-modal-content,
    .modal.is-closing .incoming-call-content,
    .modal.is-closing .confirm-modal-content {
        animation: modalDisappear 0.2s ease forwards;
    }

    /* カードは中央に置いたまま、上下の余白を確保する */
    #permissionModal.modal,
    #incomingCallModal.modal,
    #incomingFriendRequestModal.modal,
    #incomingGroupInviteModal.modal {
        overflow-y: auto;
    }

    /* ---------- 文字入力中（ソフトキーボードが出ている間） ----------
       キーボードの分だけ画面の下が隠れる。何もしないと、
       下タブや入力欄がキーボードの裏に回ったり、閉じたあとに
       画面がずれたまま戻らなかったりする。
       隠れた高さを --kb-inset として受け取り、その分だけ底を上げる。 */
    /* 画面が上下に泳がないよう、見えている範囲（visualViewport）に
       ヘッダー・一覧・モーダルをそのまま合わせる。
       --vv-top は見えている範囲がどれだけ下にずれているか。 */
    body.kb-open .modal {
        top: var(--vv-top, 0px);
        bottom: var(--kb-inset, 0px);
    }

    /* キーボードが出ている間は下タブを隠す。
       キーボードの上に浮いて出て、押し間違いのもとになるため。 */
    body.kb-open .mobile-tabbar { display: none; }

    /* 保険。文字を打つ場所に入っている間は、判定に頼らず下タブを消す。
       （キーボードの出方はブラウザによって違い、寸法だけでは
         気づけないことがあるため） */
    body:has(textarea:focus) .mobile-tabbar,
    body:has(input[type="text"]:focus) .mobile-tabbar,
    body:has(input[type="password"]:focus) .mobile-tabbar,
    body:has(input[type="search"]:focus) .mobile-tabbar,
    body:has(input[type="url"]:focus) .mobile-tabbar,
    body:has(input[type="email"]:focus) .mobile-tabbar,
    body:has(input[type="number"]:focus) .mobile-tabbar,
    body:has(input[type="tel"]:focus) .mobile-tabbar,
    body:has([contenteditable="true"]:focus) .mobile-tabbar { display: none; }

    /* 下タブを消したぶん、モーダルは画面の下まで使う */
    body:has(textarea:focus) .modal,
    body:has(input[type="text"]:focus) .modal,
    body:has(input[type="password"]:focus) .modal,
    body:has(input[type="search"]:focus) .modal,
    body:has(input[type="url"]:focus) .modal,
    body:has(input[type="email"]:focus) .modal,
    body:has(input[type="number"]:focus) .modal,
    body:has(input[type="tel"]:focus) .modal,
    body:has([contenteditable="true"]:focus) .modal { bottom: var(--kb-inset, 0px); }

    body.kb-open .app-header {
        top: var(--vv-top, 0px);
    }

    body.kb-open .users-panel {
        top: calc(var(--vv-top, 0px) + var(--mheader-h) + env(safe-area-inset-top, 0px));
        bottom: var(--kb-inset, 0px);
    }

    /* ---------- 管理パネルのタブ ---------- */
    /* 8つを1行に並べると、狭い画面では右側（容量・要望箱・リンク）が
       画面の外へ出てしまい、横に流せることにも気づけなかった。
       スマホでは折り返して、全部を一度に見えるようにする。 */
    /* 6つを3列×2行で、きれいに割り切れるように並べる */
    .admin-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow-x: visible;
    }

    .admin-tab {
        flex: none;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.5rem 0.2rem;
        font-size: 0.66rem;
        line-height: 1.25;
        min-width: 0;
        white-space: normal;
        word-break: keep-all;
    }

        .admin-tab i { font-size: 0.95rem; }

    /* 折り返した2段目にも下線が入るよう、枠は行ごとに引く */
    .admin-tab { border-bottom-width: 2px; }

    /* 文字は小さくしすぎない。指で押す場所は高さを確保する。 */
    .chat-msg-content { font-size: 0.95rem; }

    .dm-conv-item,
    .user-item,
    .friend-item { min-height: 56px; }

    /* アカウント切替は指で押す場所なので、1件を大きめに取る */
    .account-item { min-height: 64px; padding: 0.8rem 0.9rem; }
    .account-list { padding: 0 1rem; gap: 0.6rem; }

    /* iOSは16px未満の入力欄に触れると画面を勝手に拡大する。
       しかも自分では元に戻せないため「謎に少しズームした」状態が残る。
       画面上のすべての入力欄を16px以上にそろえて、拡大自体を起こさせない。 */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select,
    .chat-input-area input[type="text"],
    .chat-input-area textarea.chat-text-input,
    .request-textarea,
    .video-input,
    .video-textarea,
    .admin-search-input {
        font-size: 16px;
    }
}

/* 横向きで画面が低いときは、下タブを薄くして本文の高さを稼ぐ */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 480px) {
    :root { --mtabbar-h: 48px; }
    .mtab span { display: none; }
    .mtab i { font-size: 1.2rem; }
    .app-footer { display: none; }
}

/* ---- 管理パネル：ある機能の中の、さらに細かい設定 ---- */
/* 「クラウドを使える人」の中から「置ける人」を絞るような設定を、
   親の設定にぶら下がって見えるように少し内側へ寄せる。 */
.admin-subfeature {
    margin-top: 0.9rem;
    padding: 0.75rem 0 0 0.75rem;
    border-top: 1px dashed var(--border-color);
    border-left: 2px solid var(--border-color);
    text-align: left;
}

.admin-subfeature-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.admin-subfeature-note {
    margin: 0.25rem 0 0.6rem;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* アップロードできない人に出す案内 */
.cloud-readonly-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: var(--background-color);
    border: 1px dashed var(--border-color);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: left;
}

/* ---- ダウンロード版リンクのQRコード ---- */
.update-qr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.55rem 0.9rem;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--animation-duration, 0.2s) ease;
}

    .update-qr-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
        background: var(--background-color);
    }

    .update-qr-btn:active { transform: scale(0.98); }

/* アップデート画面の上に重ねて出す */
#qrModal { z-index: 6100; }

.qr-modal-content {
    max-width: 380px;
    padding: 0;
    overflow: hidden;
}

.qr-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* QRは必ず白地に黒。画面の色設定に左右されると読み取れなくなる。 */
.qr-canvas-wrap {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    line-height: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    max-width: 100%;
    overflow: hidden;
}

    .qr-canvas-wrap canvas {
        display: block;
        max-width: 100%;
        height: auto;
        /* 拡大縮小されても、マスの境目がぼやけないようにする */
        image-rendering: pixelated;
    }

.qr-url {
    margin: 0;
    width: 100%;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
    word-break: break-all;
}

.qr-hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-align: center;
}

/* =====================================================
   確認の画面（取り消し・ブロックなど）
   -----------------------------------------------------
   「やめる」と「実行する」が同じ色だと、どちらが取り返しの
   つかない操作なのか分からない。役割ごとに色を分ける。
   ===================================================== */
.confirm-title {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    text-align: left;
}

.confirm-note {
    margin: 0.5rem 0 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: left;
}

.confirm-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

    .confirm-actions button {
        flex: 1;
        padding: 0.85rem;
        border-radius: var(--border-radius-sm);
        font-size: 0.95rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        cursor: pointer;
        transition: all var(--animation-duration, 0.2s) ease;
    }

/* やめる側は、目立たない色にする */
.confirm-cancel-btn {
    background: var(--background-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .confirm-cancel-btn:hover {
        background: var(--surface-color);
        border-color: var(--text-secondary);
    }

/* 取り返しのつかない側だけを赤にする */
.confirm-danger-btn {
    background: var(--danger-color);
    color: #fff;
    border: 1px solid transparent;
}

    .confirm-danger-btn:hover { filter: brightness(0.92); }

/* 元に戻す方向の操作（ブロック解除など） */
.confirm-primary-btn {
    background: var(--primary-color);
    color: #fff;
    border: 1px solid transparent;
}

    .confirm-primary-btn:hover { filter: brightness(0.92); }

    .confirm-actions button:active { transform: scale(0.98); }

/* ブロック中の行は、ひと目で分かるようにしておく */
.dm-conv-item.is-blocked-conv .friend-item-avatar,
.dm-conv-item.is-blocked-conv .dm-conv-preview {
    opacity: 0.55;
}

.conv-blocked-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.12);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--danger-color);
    vertical-align: middle;
}

    .conv-blocked-tag i { font-size: 0.55rem; }

/* =====================================================
   スタイル（配色）
   -----------------------------------------------------
   色は :root の変数だけで決まるようにしてあるので、
   テーマごとにその変数を差し替えるだけで画面全体が変わる。
   ===================================================== */

/* --- 明るい配色 --- */
:root[data-style="ocean"] {
    --primary-color: #0891b2;
    --primary-dark: #0e7490;
    --primary-light: #ecfeff;
    --background-color: #f2fbfd;
    --border-color: #cfe9ef;
}

:root[data-style="forest"] {
    --primary-color: #15803d;
    --primary-dark: #166534;
    --primary-light: #f0fdf4;
    --background-color: #f5fbf6;
    --border-color: #d5e9d9;
}

:root[data-style="sakura"] {
    --primary-color: #db2777;
    --primary-dark: #be185d;
    --primary-light: #fdf2f8;
    --background-color: #fdf6f9;
    --border-color: #f3d9e5;
}

:root[data-style="sunset"] {
    --primary-color: #ea580c;
    --primary-dark: #c2410c;
    --primary-light: #fff7ed;
    --background-color: #fffaf5;
    --border-color: #f5ddc8;
}

:root[data-style="grape"] {
    --primary-color: #7c3aed;
    --primary-dark: #6d28d9;
    --primary-light: #f5f3ff;
    --background-color: #faf8ff;
    --border-color: #e2dcf5;
}

:root[data-style="mono"] {
    --primary-color: #475569;
    --primary-dark: #334155;
    --primary-light: #f1f5f9;
    --background-color: #f7f8fa;
    --border-color: #dfe3e8;
}

/* --- 暗い配色 --- */
/* 暗いときは、白を前提にしている場所も一緒に置き換える。 */
:root[data-style="night"],
:root[data-style="charcoal"],
:root[data-style="plum"] {
    color-scheme: dark;
    --text-primary: #e8edf5;
    --text-secondary: #9aa7bd;
    --hover-color: rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6);
}

:root[data-style="night"] {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #16243d;
    --background-color: #0f172a;
    --surface-color: #1a2436;
    --bg-color: #1a2436;
    --border-color: #2b3a52;
}

:root[data-style="charcoal"] {
    --primary-color: #64748b;
    --primary-dark: #475569;
    --primary-light: #23262b;
    --background-color: #16181c;
    --surface-color: #202329;
    --bg-color: #202329;
    --border-color: #33373f;
}

:root[data-style="plum"] {
    --primary-color: #a855f7;
    --primary-dark: #9333ea;
    --primary-light: #241a35;
    --background-color: #150f1f;
    --surface-color: #211830;
    --bg-color: #211830;
    --border-color: #3a2b50;
}

/* 暗い配色のときに、明るい前提で書かれている場所を合わせる */
:root[data-style="night"] .auth-container,
:root[data-style="charcoal"] .auth-container,
:root[data-style="plum"] .auth-container {
    background: linear-gradient(135deg, var(--background-color) 0%, var(--surface-color) 100%);
}

:root[data-style="night"] .modal,
:root[data-style="charcoal"] .modal,
:root[data-style="plum"] .modal {
    background-color: rgba(0, 0, 0, 0.65);
}

/* 相手からのメッセージの吹き出しは白地なので、暗いときは面の色に合わせる */
:root[data-style="night"] .chat-msg.received .chat-msg-bubble,
:root[data-style="charcoal"] .chat-msg.received .chat-msg-bubble,
:root[data-style="plum"] .chat-msg.received .chat-msg-bubble {
    background: var(--surface-color);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* =====================================================
   スタイルの設定画面
   ===================================================== */
.style-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.6rem;
    margin: 0.5rem 0 0.25rem;
    /* 設定の中は縦並び（align-items:flex-start）なので、
       指定しないと中身の幅だけに縮んで1列になってしまう */
    width: 100%;
}

.style-theme-btn {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.55rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    cursor: pointer;
    text-align: left;
    transition: all var(--animation-duration, 0.2s) ease;
}

    .style-theme-btn:hover {
        border-color: var(--primary-color);
        transform: translateY(-1px);
    }

    .style-theme-btn.is-active {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
    }

/* 実際の色を、そのまま小さく見せる */
.style-theme-swatch {
    display: flex;
    height: 34px;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

    .style-theme-swatch span { flex: 1; }
    .style-theme-swatch span:first-child { flex: 1.4; }

.style-theme-name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-primary);
}

    .style-theme-btn.is-active .style-theme-name { color: var(--primary-color); }
    .style-theme-name i { font-size: 0.65rem; }

/* 管理パネル：タブの中でさらに分かれているところ */
.admin-subtabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem 1rem 0;
    flex-wrap: wrap;
}

.admin-subtab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--animation-duration, 0.2s) ease;
}

    .admin-subtab:hover {
        color: #dc2626;
        border-color: rgba(220, 38, 38, 0.5);
    }

    .admin-subtab.active {
        color: #fff;
        background: #dc2626;
        border-color: #dc2626;
    }

    .admin-subtab > i { font-size: 0.72rem; }

@media (max-width: 560px) {
    .admin-subtab { font-size: 0.7rem; padding: 0.45rem 0.4rem; }
    .admin-subtab > i { display: none; }
}