/* ==========================================================================
   Repoton v2 - Premium Glassmorphism & High-End UX Stylesheet
   Design Philosophy: Sleek, Immersive, Dynamic (Dark-First Premium Look)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザインシステム & 変数定義
   -------------------------------------------------------------------------- */
:root {
    /* デザイントークン（唯一の定義元。以前は下部の2つ目の :root で全上書きしていたのを統合） */
    --bg-base: #FCFCFB;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F2F1EF;
    --bg-header: #FFFFFF;
    --bg-sidebar: #FAFAF9;
    --border-color: rgba(0, 0, 0, 0.07);
    --border-color-active: rgba(0, 0, 0, 0.14);

    --text-primary: #2E2E2C;
    --text-secondary: #6E6E6A;
    --text-muted: #83837E;

    --primary: #37352F;
    --primary-light: #5A5A57;
    --primary-glow: rgba(55, 53, 47, 0.06);

    /* 危険操作の文字色（塗り#E0574Cとは別。白背景で読みやすい濃さ） */
    --danger-text: #CF4436;

    --accent-reflection: #D97757;
    --accent-summary: #7BA7C4;
    --accent-assignment: #7FB894;
    --accent-explanation: #E8B455;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.10);

    --radius-lg: 10px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition: all 0.15s ease;
    --blur: blur(10px);

    /* 旧名エイリアス（コード中に残る未定義変数を正規トークンへ解決。透明化バグ防止） */
    --bg-card: var(--bg-surface);
    --bg: var(--bg-base);
    --border: var(--border-color);
    --radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   2. ベーススタイル & 装飾
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.repoton-app {
    font-family: var(--font-sans);
    background-color: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    transition: background-color 0.4s ease, color 0.4s ease;
}

body.repoton-app::before, body.repoton-app::after {
    display: none;
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--primary);
}

/* マウス／タッチ操作時のフォーカスの青い枠は出さない。
   キーボード操作（Tab）時のみ枠を出してアクセシビリティは維持する。 */
.repoton-app :focus:not(:focus-visible) {
    outline: none;
}
.repoton-app :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. アプリケーションレイアウト (SPA)
   -------------------------------------------------------------------------- */
.app-wrapper {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* WP管理バー(上部32px/モバイル46px)ぶんアプリ高さを詰め、ページ全体のスクロールを防ぐ */
body.admin-bar.repoton-app { min-height: calc(100vh - 32px); }
body.admin-bar .app-wrapper { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
    body.admin-bar.repoton-app { min-height: calc(100vh - 46px); }
    body.admin-bar .app-wrapper { height: calc(100vh - 46px); }
}

/* macOSの弾性オーバースクロール(ゴムバンド)を無効化し、そもそも引っ張れなくする
   （実スクロールは上の管理バー高さ補正で解消済み。body overflow:hidden はドロップダウンを切る恐れがあり冗長なので付けない） */
html { overscroll-behavior: none; }
body.repoton-app { overscroll-behavior: none; }

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sidebar-toggle, #btn-toggle-artifacts-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    width: 32px;
    height: 32px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    z-index: 100;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    color: var(--text-secondary);
    padding: 0;
}
.sidebar-toggle {
    left: 16px;
}
#btn-toggle-artifacts-sidebar {
    right: 16px;
}
.sidebar-toggle:hover, #btn-toggle-artifacts-sidebar:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
    transform: scale(1.05);
}
.sidebar-toggle i, #btn-toggle-artifacts-sidebar i {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-emoji {
    font-size: 1.4rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   5. 常時展開サイドバー & Notion風ツリー (NO BLINK, SMOOTH)
   -------------------------------------------------------------------------- */
.app-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background-color: var(--bg-sidebar);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-right: 1px solid var(--border-color);
    padding: 20px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 90;
    transition: left 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.app-wrapper.sidebar-collapsed .app-sidebar {
    left: -240px;
    pointer-events: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px; /* padding を既存の講義(7px 10px)に完全統一 */
    border-radius: var(--radius-sm); /* border-radius を var(--radius-sm) に完全統一 */
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem; /* font-size を 0.78rem に完全統一 */
    transition: var(--transition);
}
/* 背景は2段階のみ：ホバー=淡い / 選択中=濃い（選択＋ホバーでも同じ濃さ・加算しない） */
.sidebar-link:hover {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.04);
}
.sidebar-link.active,
.sidebar-link.active:hover {
    color: var(--text-primary);
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.09);
}
body.dark-mode .sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
body.dark-mode .sidebar-link.active,
body.dark-mode .sidebar-link.active:hover {
    background-color: rgba(255, 255, 255, 0.11);
}
.sidebar-icon {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.sidebar-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 12px 4px;
}

.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    margin-top: 6px;
}
.sidebar-section-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

/* ツリーディレクトリ */
.sidebar-tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 4px;
}
.tree-session-node.active {
    color: var(--text-primary);
    font-weight: 700;
    background-color: var(--primary-glow);
}

/* --------------------------------------------------------------------------
   6. メインコンテンツ領域 & ビューモードセレクター
   -------------------------------------------------------------------------- */
.app-main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 236px; /* .app-sidebar の実効幅(236px)に一致させる（旧220pxとのズレを解消） */
    overflow-y: auto;
    padding: 30px 40px;
    transition: left 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), padding-left 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.app-container-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.view-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.btn-view-mode.active {
    background-color: var(--primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

/* プレミアムGlassmorphismカード/行 */
.card {
    background-color: var(--bg-surface);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

/* 講義カード(グリッド時) */
.grid-view .course-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
}

/* 講義リスト(リスト時 - Notion風行レイアウト) */
.list-view .course-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    height: auto;
    border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   9. ドラッグ＆ドロップ & ファイルリスト
   -------------------------------------------------------------------------- */
.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.01);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--primary);
    background-color: rgba(217, 119, 87, 0.03);
}

/* --------------------------------------------------------------------------
   13. 共通・UIコンポーネント (ボタン, フォーム, トグル)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
    gap: 6px;
}
.btn-sm {
    padding: 5px 10px;
    font-size: 0.72rem;
}
.btn-primary {
    background-color: #37352F;
    color: #FFFFFF;
    font-weight: 600;
    border: none;
}
.btn-primary:hover {
    background-color: #4A4A46;
    transform: translateY(-1px);
}
.btn-secondary {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--text-muted);
}
/* 破壊的操作（削除の確認モーダル）用ボタン */
.rep-confirm-danger {
    background-color: #E5484D;
    color: #FFFFFF;
    font-weight: 600;
    border: none;
}
.rep-confirm-danger:hover {
    background-color: #D13438;
    transform: translateY(-1px);
}

/* 枠やボックスのない、ただ文字だけのテキストボタンデザイン */
.btn-text-only {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.88rem;
    gap: 6px;
    transform: none; /* ホバーで浮かさない */
}

/* 保存・確認用のボタン（両モードで確実に見える塗りボタン。以前は #37352F 固定で
   ダーク背景に同化し「保存が見えない＝フッターが空に見える」原因になっていた） */
.btn-text-primary {
    background: var(--primary);
    color: #FFFCF8;
}
.btn-text-primary:hover {
    background: var(--primary-light);
    color: #FFFCF8;
}

.btn-glow {
    position: relative;
    overflow: hidden;
}
.btn-glow::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 100%);
    transform: skewX(-25deg);
    transition: 0.75s ease;
}
.btn-glow:hover::after {
    left: 120%;
}

/* フォーム */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.form-group label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.required {
    color: #FF7675;
    margin-left: 2px;
}
.form-row {
    display: flex;
    gap: 12px;
}
.form-group-sm {
    flex: 0 0 80px;
}
.form-group-lg {
    flex: 1;
}

input[type="text"], input[type="number"], input[type="date"], textarea {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 8px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1.5px solid var(--border-color);
    border-radius: 0px;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
}

input:focus, textarea:focus {
    border-bottom: 1.5px solid #37352F;
    box-shadow: none;
}
textarea {
    resize: vertical;
}
.emoji-option.selected {
    border-color: var(--primary);
    background-color: var(--primary-glow);
    color: var(--primary-light);
}
.color-option.selected {
    border-color: white;
    box-shadow: 0 0 10px var(--primary-glow);
}
body.repoton-app:not(.dark-mode) .toggle-slider {
    background-color: rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   14. モーダル (Modal Glassmorphism Overlay)
   -------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* 背景（暗幕＋ぼかし）は瞬時に表示する。以前は fadeIn で不透明度を上げていたため、
       開いた瞬間に元画面が一瞬くっきり透けて見える（チラつき）原因になっていた。
       演出はカードの slideUp だけに任せる。 */
}

.modal-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 480px;
    overflow: hidden;
    animation: slideUp 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h2 {
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition);
}
.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
}
body.repoton-app:not(.dark-mode) .modal-loading .loading-card {
    background-color: rgba(255, 255, 255, 0.95);
}

/* トースト通知 */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    animation: slideInRight 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.toast-content {
    background-color: rgba(16, 20, 28, 0.9);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.repoton-app:not(.dark-mode) .toast-content {
    background-color: rgba(255, 255, 255, 0.95);
}
.toast-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary);
}
.toast-success .toast-indicator { background-color: var(--accent-assignment); }
.toast-error .toast-indicator { background-color: #FF7675; }
.toast-info .toast-indicator { background-color: var(--accent-summary); }

#toast-message {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   16. アニメーション定義 (Keyframes)
   -------------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 20px;
    background-color: var(--bg-surface);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    gap: 12px;
    max-width: 540px;
    margin: 30px auto;
}
.empty-emoji {
    font-size: 2.5rem;
    animation: bounce 4s infinite;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}
.empty-state h3 {
    font-size: 1.05rem;
    font-weight: 800;
}
.empty-state p {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   17. レスポンシブ設計 (Responsive Queries)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .workspace-split-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    .workspace-panel {
        height: auto;
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .app-wrapper {
        /* grid resets not needed */
    }
    
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 16px;
        left: 16px;
        width: 40px;
        height: 40px;
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 50%;
        box-shadow: var(--shadow-md);
        z-index: 120;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .sidebar-toggle:hover {
        background-color: var(--bg-surface-hover);
        transform: scale(1.05);
    }
    
    .app-sidebar {
        position: fixed;
        top: 0;
        left: -220px;
        bottom: 0;
        width: 220px;
        transform: none;
        transition: left 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: var(--shadow-lg);
        z-index: 150;
    }
    .app-sidebar.active {
        left: 0;
    }
    
    .app-main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 72px 20px 20px 20px;
    }
    
    .card-grid.grid-view {
        grid-template-columns: 1fr;
    }
    
    .view-header {
        flex-direction: column;
        align-items: stretch;
    }
    .view-header .btn {
        width: 100%;
    }
    .view-header-right-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ai-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* 講義ツリー項目（サイドバーのNotion風階層表示） */
.tree-sessions-list {
    transition: none;
}
.tree-session-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 2px 0 2px 8px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    background-color: transparent;
}
/* 背景は2段階のみ：ホバー=淡い / 選択中=濃い（選択＋ホバーでも濃いまま・加算しない） */
.tree-session-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}
.tree-session-item.active,
.tree-session-item.active:hover {
    color: var(--text-primary);
    font-weight: 700;
    background-color: rgba(0, 0, 0, 0.09);
}
body.dark-mode .tree-session-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}
body.dark-mode .tree-session-item.active,
body.dark-mode .tree-session-item.active:hover {
    background-color: rgba(255, 255, 255, 0.11);
    color: #ffffff;
}
.tree-session-item.active .tree-session-icon {
    color: var(--text-primary);
}
.tree-session-empty {
    padding: 6px 12px;
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}
.tree-course-header:hover .tree-chevron {
    color: var(--text-primary);
}

/* ==========================================================================
   サイドバー項目のドラッグ＆ドロップ並べ替え用スッキリスタイル (SortableJS 用)
   ========================================================================== */
.tree-course-node, .tree-session-item {
    cursor: grab;
}

.tree-course-node:active, .tree-session-item:active {
    cursor: grabbing;
}

/* ドラッグ元のゴースト要素はシンプルに不透明度を下げるだけ（流動的な Notion スタイル） */
.sortable-ghost {
    opacity: 0;
    visibility: hidden;
    background-color: transparent;
    border: none;
}

/* インテリジェント・サイドバートグルスライド配置 */
.app-wrapper.sidebar-collapsed .app-main {
    left: 0;
    padding-left: 72px;
}

/* ==========================================================================
   時間割ビュー用プレミアムスタイル
   ========================================================================== */
.timetable-container {
    background-color: var(--bg-surface);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.timetable-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.timetable-table th {
    text-align: center;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    background-color: rgba(128, 128, 128, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.timetable-period-label {
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background-color: rgba(128, 128, 128, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 0;
    width: 80px;
    padding: 6px 4px;
}

.timetable-period-label .period-num {
    font-size: 0.82rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.timetable-period-label .period-time {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sortable-ghost * {
    opacity: 0;
    visibility: hidden;
}

.timetable-cell {
    height: 64px;
    vertical-align: middle;
    border-radius: 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    padding: 0;
}

.timetable-cell.empty {
    cursor: default;
}

.timetable-course-card {
    padding: 7px 9px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--bg-surface);
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: var(--transition);
    box-sizing: border-box;
}

.timetable-course-card:hover {
    background-color: var(--bg-surface-hover);
    transform: none;
    box-shadow: none;
}

.timetable-course-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timetable-course-room {
    font-size: 0.64rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: auto;
}

/* 時間割表自体のホバー時「浮き」エフェクトの廃止 */
.timetable-container.card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
}

/* 空セルのクリック誘導ホバーデザイン */
.timetable-cell.empty {
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.timetable-cell.empty:hover {
    background-color: var(--bg-surface-hover);
    border-color: rgba(55, 53, 47, 0.25);
}

/* ホバー時のみ中央にうっすらとプラスアイコンを表示 */
.timetable-cell.empty::after {
    content: '\F4FE'; /* bi-plus-lg */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.timetable-cell.empty:hover::after {
    opacity: 0.45;
}

/* 講義カード内の教室表示 */
.timetable-course-room {
    font-size: 0.64rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 1px;
}

/* 50色カラーパレットグリッド */
.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.color-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
    display: inline-block;
}

.color-chip:hover {
    transform: scale(1.22);
}

.color-chip.active {
    border: 2px solid var(--text-primary);
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--bg-card);
}

/* サイドバー「講義」ヘッダーの矢印回転 */
#courses-header-chevron {
    transition: transform 0.2s ease;
}

#courses-header-chevron.collapsed {
    transform: rotate(-90deg);
}

/* 時間割直接編集の極上プレミアムスタイル */
.delete-day-btn, .delete-period-btn {
    opacity: 0.3;
    transition: var(--transition);
}
.delete-day-btn:hover, .delete-period-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

.add-period-row .td-add-period {
    border: 1px dashed var(--border-color);
    background-color: transparent;
    color: var(--text-muted);
    text-align: center; cursor: pointer; padding: 10px;
    font-size: 0.78rem; font-weight: 600;
    transition: var(--transition);
}
.add-period-row .td-add-period:hover {
    border-color: var(--border-color-active);
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}
.add-day-blank { border: none; background: transparent; }

.period-time-display {
    transition: var(--transition);
    border-radius: 4px;
    padding: 2px 4px;
}
.period-time-display:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.period-time-editor input {
    width: 65px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.65rem;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
}
.period-time-editor input:focus {
    border-color: var(--primary);
}

/* 曜日追加列：時限追加行と同じく、縦列全体を破線枠のクリック領域にする */
.add-day-head { border: none; background: transparent; width: 46px; }
.add-day-column {
    width: 46px; cursor: pointer; text-align: center; vertical-align: middle;
    border: 1px dashed var(--border-color);
    background-color: transparent;
    color: var(--text-muted);
    transition: var(--transition);
}
.add-day-column:hover {
    border-color: var(--border-color-active);
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}
.add-day-label {
    display: inline-flex; align-items: center; gap: 4px;
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.add-day-label i { writing-mode: horizontal-tb; }

/* 登録用カラーパレット (モーダル内配置) */
.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.color-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease;
    box-sizing: border-box;
    display: inline-block;
}

.color-chip:hover {
    transform: scale(1.15);
}

.color-chip.active {
    border: 2px solid #37352F;
    transform: scale(1.1);
}

@keyframes popoverFadeIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   15. ドキュメント駆動ノートブック (3ペイン構成) & 時間割ハイライト
   ========================================================================== */

/* 現在の時限ハイライト (● NOW) */
.timetable-cell.live-class-active {
    border: 2px solid #37352F;
    background-color: rgba(55, 53, 47, 0.02);
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
@keyframes badgePulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.tree-item-node.active {
    background-color: rgba(55, 53, 47, 0.05);
    color: var(--text-primary);
    font-weight: 700;
}
.editor-drop-zone:hover, .editor-drop-zone.dragover {
    background-color: rgba(217, 119, 87, 0.03);
    border-color: var(--primary);
}

/* ==========================================================================
   対話式AIチャット ＆ Googleドライブ風エクスプローラー スタイル
   ========================================================================== */

/* 1. YouTube風トッププログレスバー */
.top-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    z-index: 99999;
    box-shadow: 0 0 8px rgba(217, 119, 87, 0.4);
    transition: width 0.3s ease;
}

/* 2. 対話式チャットハブ */
.workspace-chat-section {
    transition: all 0.25s ease;
}

.workspace-chat-thread::-webkit-scrollbar {
    width: 6px;
}
.workspace-chat-thread::-webkit-scrollbar-track {
    background: transparent;
}
.workspace-chat-thread::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
}
.workspace-chat-thread::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.12);
}

/* チャットを開いたときは全メッセージを普通に即表示する（下から浮き上がる演出はしない） */

.chat-bubble code {
    background: rgba(0,0,0,0.04);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.72rem;
}

.chat-bubble pre {
    background: #F8F9FA;
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.7rem;
    line-height: 1.4;
}

.drive-folder-card {
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.drive-folder-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transform: translateY(-2px);
}
.drive-preview-drawer.open {
    transform: translateX(0);
}
.tree-chevron.collapsed {
    transform: rotate(-90deg);
}

.tree-course-node {
    margin-bottom: 4px;
}

/* サイドバー・親フォルダアクションボタンのホバースタイル */
.tree-action-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, color 0.2s ease;
    color: var(--text-secondary);
}
.tree-course-node:hover .tree-action-btn {
    opacity: 0.5;
    pointer-events: auto;
}
.tree-action-btn:hover {
    opacity: 1;
    color: var(--primary);
}

.tree-sessions-list {
    transition: none;
}

/* --------------------------------------------------------------------------
   サイドバイサイド (Side-by-Side) プレミアム分割スタイル
   -------------------------------------------------------------------------- */
.workspace-body-container {
    animation: fadeIn 0.3s ease;
}

/* タイピングアニメーションのパルス */
@keyframes pulse {
    0% { opacity: 0.4; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

.workspace-drive-section.collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

/* 2. チャットバブルの境界線なし・透過・上品なソフトスレート色デザイン */
.chat-message-ai {
    justify-content: flex-start;
}
/* 吹き出しの唯一の定義（ はWPテーマの汎用スタイルを打ち消すため。以前あった重複ブロックは削除） */
.chat-message-ai .chat-bubble {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 10px;
    max-width: 88%;
    width: max-content;
    color: var(--text-primary);
}

.chat-message-student {
    justify-content: flex-end;
}
.chat-message-student .chat-bubble {
    background: #F4F5F7; /* 上品なソフトスレート色 */
    color: var(--text-primary);
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.02);
    padding: 10px 16px;
    border-radius: 18px 18px 2px 18px;
    max-width: 78%;
    width: max-content;
}

/* ダークモード時のユーザーメッセージ調整 */
.dark-mode .chat-message-student .chat-bubble {
    background: #2D3436;
    color: #FFFFFF;
}

/* 長い送信メッセージの折りたたみ（Claude風）。閉じているときは高さを抑え、下端をフェードさせる */
.chat-user-bubble.collapsible.collapsed {
    max-height: 200px;
    overflow: hidden;
    cursor: pointer;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.msg-expand-toggle {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}
.msg-expand-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
    border-color: var(--text-muted);
}
.dark-mode .msg-expand-toggle { background: rgba(255,255,255,0.06); }

/* 3. フローティング角丸カプセル型入力ボックス & クイックタグ */
.chat-input-capsule {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chat-input-capsule:focus-within {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}
.chat-send-btn-round {
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.15s;
}
.chat-send-btn-round:hover {
    background-color: var(--primary-light);
    transform: scale(1.05);
}
.chat-send-btn-round:active {
    transform: scale(0.95);
}

/* チャット入力フィールドの下線排除 */
.chat-input-field,
.chat-input-field:focus,
.chat-input-field::placeholder {
    border: none;
    outline: none;
    text-decoration: none;
    box-shadow: none;
    background: transparent;
}

/* フォルダモーダル用のスタイル微調整 */
/* チャット入力欄の下線を完全抹消する超強力リセット */
#workspace-chat-input,
#workspace-chat-input:focus,
.chat-input-field,
.chat-input-field:focus {
    border: none;
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
}

/* ==========================================================================
   フォルダ管理モーダル & ドラッグ＆ドロップエクスプローラーの極上スタイル
   ========================================================================== */

#modal-folder-explorer .modal-card {
    max-width: 600px;
    width: 92%;
    border-radius: var(--radius);
    overflow: hidden;
}

#modal-folder-explorer .drive-content-area {
    margin-top: 10px;
}

/* ドラッグ＆ドロップアップロードゾーン */
.drive-drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 24px 20px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: #FAFBFD;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.drive-drop-zone.dragover {
    border-color: var(--primary);
    background-color: rgba(217, 119, 87, 0.05);
    color: var(--primary);
}

/* アップロード済みファイル一覧テーブル */
.drive-files-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    max-height: 220px;
    padding-right: 4px;
}

/* モーダル内ファイル直接削除ゴミ箱ボタン */
.drive-file-delete-btn-direct {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.drive-file-delete-btn-direct:hover {
    background-color: rgba(255, 118, 117, 0.1);
    color: #ff7675;
}

/* ==========================================================================
   5. 講義情報ポータルモーダル ＆ コラップス式アーティファクト右サイドバー (アンチグラビティ完全統合仕様)
   ========================================================================== */

/* 左サイドバー折りたたみボタンのアイコン調整 */
.sidebar-toggle i {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

/* 右右上隅に固定配置される右サイドバー開閉ボタン */
.workspace-layout {
    position: relative;
}

/* 右サイドバー内の成果物カード（アーティファクト） */
/* 右サイドバー内の成果物カード（アーティファクト） - アンチグラビティ風フラットアコーディオン */
.artifact-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 8px 4px;
    box-shadow: none;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    cursor: pointer;
}

.artifact-card:hover {
    transform: none;
    box-shadow: none;
    background-color: var(--bg-surface-hover);
}

body.dark-mode .artifact-card {
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.08);
}

body.dark-mode .artifact-card:hover {
    background-color: rgba(255,255,255,0.04);
}

.artifact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding-bottom: 0;
    cursor: pointer;
}

body.dark-mode .artifact-card-header {
    border-bottom: none;
}

.artifact-card-title {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.artifact-card-title i {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.artifact-card-date {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.artifact-card-content-wrapper {
    padding-top: 8px;
}

.artifact-card-body {
    font-size: 0.72rem;
    color: var(--text-primary);
    line-height: 1.5;
    max-height: none;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 8px;
}

body.dark-mode .artifact-card-body {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.artifact-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
    padding-bottom: 4px;
}

.btn-artifact-action {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.btn-artifact-action:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.btn-artifact-action.btn-artifact-copy:hover {
    color: var(--primary);
    border-color: var(--primary-light);
}

.btn-artifact-action.btn-artifact-delete:hover {
    color: #FF7675;
    border-color: rgba(255, 118, 117, 0.3);
    background-color: rgba(255, 118, 117, 0.05);
}

.portal-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.attendance-course-item.active {
    background: rgba(217, 119, 87, 0.06);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}
body.dark-mode .attendance-course-item.active {
    background: rgba(217, 119, 87, 0.15);
    border-color: var(--primary-light);
}

#attendance-rate-text {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* 講義タブバー (横スクロール) */
.attendance-course-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 16px 0;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: center;
    flex-wrap: wrap;
}
.attendance-course-tabs::-webkit-scrollbar {
    display: none;
}

.attendance-course-tab {
    padding: 8px 18px;
    border-radius: 100px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.attendance-course-tab:hover {
    border-color: var(--primary-light);
    color: var(--text-primary);
}
.attendance-course-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
    box-shadow: 0 2px 12px rgba(217, 119, 87, 0.25);
}
.attendance-course-tab .tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.attendance-course-tab.active .tab-dot {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

.attendance-big-btn {
    flex: 1;
    max-width: 200px;
    aspect-ratio: 1;
    border-radius: 24px;
    border: 2.5px solid var(--border-color);
    background: var(--bg-card);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    position: relative;
    overflow: hidden;
}
.attendance-big-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.attendance-big-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.attendance-big-btn:active {
    transform: translateY(-1px) scale(0.97);
}

.attendance-big-btn .btn-icon {
    font-size: 2.8rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
.attendance-big-btn:hover .btn-icon {
    transform: scale(1.1);
}
.attendance-big-btn .btn-label {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 出席ボタン */
.attendance-big-btn.btn-attend {
    border-color: rgba(0, 184, 148, 0.25);
}
.attendance-big-btn.btn-attend::before {
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.04), rgba(0, 184, 148, 0.01));
}
.attendance-big-btn.btn-attend:hover {
    border-color: var(--accent-mint);
}
.attendance-big-btn.btn-attend:hover::before {
    opacity: 1;
}
.attendance-big-btn.btn-attend .btn-icon {
    color: var(--accent-mint);
}
.attendance-big-btn.btn-attend .btn-label {
    color: var(--accent-mint);
}
.attendance-big-btn.btn-attend.selected {
    border-color: var(--accent-mint);
    background: var(--accent-mint);
    box-shadow: 0 8px 24px rgba(0, 184, 148, 0.35);
}
.attendance-big-btn.btn-attend.selected .btn-icon,
.attendance-big-btn.btn-attend.selected .btn-label {
    color: #FFFFFF;
}

/* 欠席ボタン */
.attendance-big-btn.btn-absent {
    border-color: rgba(255, 118, 117, 0.25);
}
.attendance-big-btn.btn-absent::before {
    background: linear-gradient(135deg, rgba(255, 118, 117, 0.04), rgba(255, 118, 117, 0.01));
}
.attendance-big-btn.btn-absent:hover {
    border-color: #FF7675;
}
.attendance-big-btn.btn-absent:hover::before {
    opacity: 1;
}
.attendance-big-btn.btn-absent .btn-icon {
    color: #FF7675;
}
.attendance-big-btn.btn-absent .btn-label {
    color: #FF7675;
}
.attendance-big-btn.btn-absent.selected {
    border-color: #FF7675;
    background: #FF7675;
    box-shadow: 0 8px 24px rgba(255, 118, 117, 0.35);
}
.attendance-big-btn.btn-absent.selected .btn-icon,
.attendance-big-btn.btn-absent.selected .btn-label {
    color: #FFFFFF;
}

/* 遅刻ボタン */
.attendance-big-btn.btn-late {
    border-color: rgba(253, 203, 110, 0.25);
}
.attendance-big-btn.btn-late::before {
    background: linear-gradient(135deg, rgba(253, 203, 110, 0.04), rgba(253, 203, 110, 0.01));
}
.attendance-big-btn.btn-late:hover {
    border-color: var(--accent-yellow);
}
.attendance-big-btn.btn-late:hover::before {
    opacity: 1;
}
.attendance-big-btn.btn-late .btn-icon {
    color: var(--accent-yellow);
}
.attendance-big-btn.btn-late .btn-label {
    color: var(--accent-yellow);
}
.attendance-big-btn.btn-late.selected {
    border-color: var(--accent-yellow);
    background: var(--accent-yellow);
    box-shadow: 0 8px 24px rgba(253, 203, 110, 0.35);
}
.attendance-big-btn.btn-late.selected .btn-icon,
.attendance-big-btn.btn-late.selected .btn-label {
    color: #FFFFFF;
}
.attendance-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    transition: all 0.2s ease;
    cursor: pointer;
}
.attendance-dot:hover {
    transform: scale(1.3);
}
.attendance-dot.current {
    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px rgba(217, 119, 87, 0.15);
}
.attendance-dot.status-attend {
    background: var(--accent-mint);
}
.attendance-dot.status-absent {
    background: #FF7675;
}
.attendance-dot.status-late {
    background: var(--accent-yellow);
}

/* ========================================================================
   全画面ドラッグ＆ドロップオーバーレイ
   ======================================================================== */

.global-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dropOverlayFadeIn 0.15s ease;
}

@keyframes dropOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 56px;
    border-radius: 16px;
    border: 2px dashed var(--border-color-active);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
}

@keyframes dropContentPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.drop-overlay-content i {
    font-size: 2.4rem;
    color: var(--text-secondary);
}

@keyframes dropIconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.drop-overlay-content span {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.5px;
}

body.dark-mode .drop-overlay-content {
    background: rgba(30, 30, 40, 0.95);
    border-color: var(--primary-light);
}

/* Antigravityブレッドクラム */
.chat-header-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.breadcrumb-session {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* マスコットアバター */
/* AIアイコンは非表示（Claude等と同様、AI応答にはアイコンを付けない）。
   AIメッセージの本文は左端に揃う。 */
.chat-avatar-mascot {
    display: none;
}

/* ==========================================================================
   温かみのあるモダンテーマ（クリーム × テラコッタ）
   ※既存 :root を後勝ちで上書き。トークン変更だけで全体の配色/角丸/影が切り替わる。
   ========================================================================== */
/* --- コンポーネント微調整（クラス指定なので既存インラインとは競合しにくい） --- */

/* ボタン：ホバーでふわっと持ち上がる */
.btn,
.btn-primary,
.btn-secondary {
    border-radius: var(--radius-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-primary {
    background: var(--primary);
    color: #FFFCF8;
}
.btn-primary:hover {
    background: var(--primary-light);
}

/* 空状態のCTA（講義を追加）は、黒ベタではなく柔らかいグレー地＋濃い文字にする。
   送信・保存などの主ボタンには影響させないよう、ID指定で限定する。 */
#btn-add-course-attendance,
#btn-add-course-empty {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 600;
}
#btn-add-course-attendance:hover,
#btn-add-course-empty:hover {
    background: rgba(0, 0, 0, 0.09);
    border-color: var(--text-muted);
}
body.dark-mode #btn-add-course-attendance,
body.dark-mode #btn-add-course-empty {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-color);
    color: var(--text-primary);
}
body.dark-mode #btn-add-course-attendance:hover,
body.dark-mode #btn-add-course-empty:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* カード：柔らかい枠と影 */
.card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    background: var(--bg-surface);
}

/* サイドバー：クリームの陰影 */
.app-sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
}
/* チャット吹き出し：ユーザーは温かいテラコッタ、AIは白カード */

/* --- チャット入力カプセル（新規/ポータル共通・インライン撤去版） --- */
.chat-input-capsule,
.chat-input-capsule-portal {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-input-capsule { flex-grow: 1; }
.chat-input-capsule:focus-within,
.chat-input-capsule-portal:focus-within {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}
.chat-input-capsule-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.chat-attached-files {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1.5px dashed var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 4px;
    width: 100%;
}
.chat-attach-btn {
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: background 0.15s ease;
}
.chat-attach-btn:hover { background: var(--bg-surface-hover); }
.chat-attach-btn i { font-size: 1.1rem; }
.chat-input-field {
    flex-grow: 1;
    width: 100%;
    border: none;   /* WordPressテーマのinput枠を打ち消す（外部CSS対策のため） */
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
    padding: 2px 0;
}
.chat-input-capsule .chat-input-field { min-height: 24px; max-height: 120px; height: 24px; }
.chat-input-capsule-portal .chat-input-field { min-height: 80px; }
.chat-send-btn-round {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: none;   /* 入力があるとき（.has-text）だけ表示する */
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    background: var(--primary);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s ease, transform 0.12s ease;
}
.chat-input-capsule.has-text .chat-send-btn-round,
.chat-input-capsule-portal.has-text .chat-send-btn-round { display: flex; }
/* 生成中は入力が空でも「停止」ボタンを表示する */
.chat-input-capsule.is-generating .chat-send-btn-round,
.chat-input-capsule-portal.is-generating .chat-send-btn-round { display: flex; }
.chat-send-btn-round:hover { background: var(--primary-light); }
.chat-send-btn-round:active { transform: scale(0.94); }
.chat-send-btn-round i { font-size: 1.05rem; -webkit-text-stroke: 0.4px; }
.chat-input-capsule-footer { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.chat-input-footer-right { display: flex; align-items: center; gap: 12px; }
.chat-input-hint { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }

/* ==========================================================================
   モーダル内フォーム（インライン撤去版）
   ========================================================================== */
.modal-body .form-group,
.modal-body .form-row { margin-top: 14px; }
.modal-body > input[type="hidden"] + .form-group { margin-top: 0; }
.modal-body .form-row { display: flex; gap: 12px; }
.modal-body .form-row .form-group { flex: 1; margin-top: 0; }
.form-group-sm { position: relative; }

.modal-body select,
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="date"] {
    width: 100%;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 0.8rem;
    outline: none;
    box-sizing: border-box;
    background-color: var(--bg-base);
    color: var(--text-primary);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.modal-body select:hover,
.modal-body input[type="text"]:hover,
.modal-body input[type="number"]:hover,
.modal-body input[type="date"]:hover {
    border-color: var(--text-muted);
}
.modal-body select:focus,
.modal-body input[type="text"]:focus,
.modal-body input[type="number"]:focus,
.modal-body input[type="date"]:focus {
    border-color: var(--primary);
}

.btn-color-picker {
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: transform 0.15s ease;
    outline: none;
    padding: 0;
}
.btn-color-picker:hover { transform: scale(1.05); }

.color-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 12px;
    width: 220px;
    margin-top: 6px;
    box-sizing: border-box;
}
.color-palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }

.modal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 15px;
}
.modal-footer-danger {
    margin-right: auto;
    color: #FF7675;
    border-color: rgba(255, 118, 117, 0.2);
    background: none;
    font-weight: 700;
    cursor: pointer;
}
.btn-text-primary { font-weight: 800; cursor: pointer; }

/* ==========================================================================
   講義ポータル（view-course-portal・インライン撤去版）
   ========================================================================== */
.portal-header-simple {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0 16px;
    margin-bottom: 24px;
    border-bottom: 1.5px solid var(--border-color);
}
.portal-header-left { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; flex: 1; }
#course-portal-color-badge { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
#course-portal-display-title { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--text-primary); }
.course-portal-meta-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 16px;
    align-items: center;
    font-weight: 500;
}
.course-portal-meta-text i { margin-right: 4px; }
#portal-meta-attendance {
    display: flex;
    gap: 8px;
    align-items: center;
    border-left: 1px solid var(--border-color);
    padding-left: 12px;
    margin-left: 4px;
}
#portal-meta-attendance b { font-weight: 800; }
#counter-attend { color: var(--accent-assignment); }
#counter-absent { color: #FF7675; }
#counter-late { color: var(--accent-explanation); }
#btn-edit-course-portal-settings {
    font-size: 0.72rem;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
}

.course-portal-layout { display: flex; gap: 32px; width: 100%; align-items: flex-start; }
.course-portal-left { flex: 1.5; display: flex; flex-direction: column; gap: 24px; }
.course-portal-right { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.portal-history-section { display: flex; flex-direction: column; gap: 12px; }
#portal-sessions-list { display: flex; flex-direction: column; gap: 8px; }

.portal-shared-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.portal-section-header {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
    border-bottom: 1.5px solid var(--border-color);
    padding-bottom: 6px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.portal-section-header > span { display: flex; align-items: center; gap: 6px; }
.portal-section-header > span i { color: var(--primary); }
.portal-add-file-btn {
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transition: background 0.15s ease;
    color: var(--text-secondary);
}
.portal-add-file-btn:hover { background: var(--bg-surface-hover); }
.portal-add-file-btn i { font-size: 0.85rem; }
.capacity-container { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; box-sizing: border-box; }
.capacity-track { position: relative; width: 100%; height: 6px; background: rgba(0, 0, 0, 0.06); border-radius: 3px; overflow: hidden; }
#capacity-progress-bar { width: 0; height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s ease; }
.capacity-caption { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; color: var(--text-secondary); font-weight: 600; }
.capacity-caption i { cursor: pointer; color: var(--text-muted); }
#workspace-upload-zone {
    border: 2px dashed transparent;
    border-radius: var(--radius-sm);
    min-height: 240px;
    max-height: 450px;
    overflow-y: auto;
    padding: 4px;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
    position: relative;
}
#drive-files-table { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; box-sizing: border-box; }
/* ファイルカード下のファイル名（常時表示・幅内で省略。全名はホバーのツールチップ） */
.drive-file-card .drive-meta-ext {
    display: block;
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.66rem;
    color: var(--text-secondary);
    text-align: center;
}
/* 講義ページのドロップターゲット・ハイライト（どこに落ちるか一目でわかるように） */
#workspace-upload-zone.dragover { border-color: var(--primary); background: var(--bg-surface-hover); }
.chat-input-capsule-portal.drop-target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }

/* ==========================================================================
   app.js が動的生成する要素（インライン撤去版）
   ========================================================================== */
/* チャットスレッドのメッセージ行 */
.chat-message { margin-bottom: 4px; width: 100%; }
.chat-message-student { display: flex; justify-content: flex-end; }
.chat-message-ai { display: flex; gap: 10px; align-items: flex-start; }
.chat-message-ai .chat-avatar-mascot { flex-shrink: 0; }
.typing-placeholder { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 4px; }
/* Gemini風：3つのドットが順に波打つ思考中インジケータ */
.typing-wave { display: inline-flex; align-items: center; gap: 5px; height: 18px; }
.typing-wave span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted);
    animation: typing-wave 1.3s ease-in-out infinite;
}
.typing-wave span:nth-child(2) { animation-delay: 0.18s; }
.typing-wave span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-wave {
    0%, 70%, 100% { transform: translateY(0); opacity: 0.35; }
    35%           { transform: translateY(-5px); opacity: 1; }
}

/* セッション失効の案内バー（画面上部・一度だけ表示） */
.session-expired-bar {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.session-expired-bar button {
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: #FFFFFF;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.session-expired-bar button:hover { background: var(--primary-light); }

/* インライン編集ボックス（過去プロンプトをその場で編集・本家Claude風） */
.inline-edit-box {
    width: 100%;
    min-width: 320px;
    background: var(--bg-surface);
    border: 1.5px solid var(--primary);
    border-radius: 12px;
    padding: 10px 12px;
    box-sizing: border-box;
}
.inline-edit-textarea {
    width: 100%;
    min-height: 48px;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}
.inline-edit-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.inline-edit-note {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inline-edit-actions { display: inline-flex; gap: 8px; flex-shrink: 0; }
.inline-edit-cancel, .inline-edit-save {
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.inline-edit-cancel { background: var(--bg-surface-hover); color: var(--text-secondary); }
.inline-edit-cancel:hover { background: var(--border-color); }
.inline-edit-save { background: var(--primary); color: #FFFFFF; }
.inline-edit-save:hover { background: var(--primary-light); }

/* チャット内分岐の切替ナビ（◀ k/n ▶・分岐点のユーザー発言に付く） */
.msg-branch-nav { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; }
.msg-branch-nav button {
    background: none; border: none; padding: 2px; cursor: pointer;
    color: var(--text-muted); display: inline-flex; align-items: center; border-radius: 4px;
}
.msg-branch-nav button:hover:not(:disabled) { background: var(--bg-surface-hover); color: var(--text-primary); }
.msg-branch-nav button:disabled { opacity: 0.3; cursor: default; }
.branch-pos { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; min-width: 26px; text-align: center; }
.branch-pending-row { display: flex; justify-content: flex-end; padding: 2px 0 8px; }

/* ストリーミング中、新しく現れたチャンクがふわっと浮かび上がる（Claude風）。
   注意: inline-block にすると行の折り返しが崩れてカクつくため、素のinline＋opacityのみで表現する */
.stream-fade {
    animation: stream-fade-in 0.4s ease-out both;
}
@keyframes stream-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ポータルのチャット履歴カード */
.portal-session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.portal-session-item:hover { border-color: var(--border-color-active); background: var(--bg-surface-hover); }
.portal-session-item-main { display: flex; align-items: center; gap: 10px; overflow: hidden; flex: 1; }
.portal-session-item-main > i { color: var(--primary); font-size: 0.95rem; flex-shrink: 0; }
.portal-session-item-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.portal-session-item-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.portal-session-elapsed { font-size: 0.68rem; color: var(--text-secondary); }
.portal-session-delete-btn { cursor: pointer; color: var(--text-muted); transition: color 0.15s ease; }
.portal-session-delete-btn:hover { color: #FF7675; }
.portal-session-empty { text-align: center; padding: 20px; color: var(--text-muted); font-size: 0.76rem; }

/* モーダル：角丸を大きく */
.modal-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* 入力欄・セレクト：角丸統一 */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Claude / Antigravity 風：チャット画面をシンプルに（入力欄中心）
   ========================================================================== */
/* 成果物(Artifacts)パネルと開閉ボタンは撤去し、対話中心の構成に */
#btn-toggle-artifacts-sidebar,
#workspace-artifacts-sidebar { display: none; }

/* チャット列：中央寄せ・読みやすい幅 */
.workspace-chat-section {
    max-width: none;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 70vh;
    box-sizing: border-box;
    position: relative;
}
/* スクロール領域は全幅。中身は左右パディングで中央寄せ（余白ごとスクロールできる） */
.workspace-chat-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    width: 100%;
    padding: 20px max(12px, calc((100% - 900px) / 2));
    box-sizing: border-box;
}
.workspace-chat-input-area {
    width: 100%;
    max-width: 820px;
    margin: 0 auto 20px auto;
    padding: 0 12px;
    box-sizing: border-box;
}

/* 空（新規）チャット：入力欄だけの中央レイアウト */
.workspace-chat-section.chat-empty { justify-content: center; position: relative; }
.workspace-chat-section.chat-empty .workspace-chat-header { display: none; }
/* 新規チャットの「講義を割り当て」ピル：挨拶文・入力欄と同じく中央に。控えめに。 */
.chat-empty-assign {
    align-self: center; margin: 0 auto 16px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--bg-surface); color: var(--text-muted); font-size: 0.76rem; font-weight: 600;
    cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.chat-empty-assign:hover { border-color: var(--text-muted); color: var(--text-primary); }
.chat-empty-assign > i:first-child { color: var(--primary); }
.chat-empty-assign .bi-chevron-down { font-size: 0.7rem; color: var(--text-muted); }
.workspace-chat-section.chat-empty .workspace-chat-thread {
    flex: 0 0 auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
    margin-bottom: 52px; /* 挨拶を入力欄から離し、全体を少し上へ寄せる */
}
.chat-empty-greeting {
    text-align: center;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    padding: 0 16px;
    letter-spacing: -0.01em;
}
.chat-empty-greeting small {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 16px;
    line-height: 1.7;
}
/* 既存チャットの履歴ロード中：新規チャット画面を出さず控えめなスピナーを表示 */
.chat-thread-loading {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}
.chat-thread-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--border-color);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: repoton-spin 0.7s linear infinite;
}
@keyframes repoton-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Claude Code準拠：白ベース・コンパクトなタイポグラフィ／サイドバー
   ※インライン直書きに依存せず、クラスで統一（不使用）。
   ========================================================================== */
html { font-size: 14px; }
body.repoton-app { color: var(--text-primary); background: var(--bg-base); }

/* --- サイドバー（Claude Code風：詰まった配置） --- */
.app-sidebar {
    width: 236px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    height: 100%;
    padding: 52px 8px 10px;
    box-sizing: border-box;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-link .sidebar-icon {
    display: flex;
    width: 18px;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--text-muted);
}
/* 背景は上部のcanonical定義（ホバー=淡い / 選択=濃い・加算なし）に一本化。ここでは文字色だけ補強。 */
.sidebar-link:hover,
.sidebar-link.active { color: var(--text-primary); }
.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon { color: var(--text-primary); }

/* セクション（講義 / 最近の項目） */
.sidebar-section { margin-top: 14px; }
.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    margin-bottom: 2px;
    cursor: pointer;
}
.sidebar-section-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.sidebar-section-chevron { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s ease; }
.sidebar-section-chevron.collapsed { transform: rotate(-90deg); }
.sidebar-recent, .sidebar-tree { display: flex; flex-direction: column; gap: 1px; }
.sidebar-recent-item {
    display: block;
    padding: 5px 8px 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-recent-item:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-primary); }
.sidebar-recent-item.active,
.sidebar-recent-item.active:hover { background: rgba(0, 0, 0, 0.09); color: var(--text-primary); font-weight: 600; }
body.dark-mode .sidebar-recent-item:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
body.dark-mode .sidebar-recent-item.active,
body.dark-mode .sidebar-recent-item.active:hover { background: rgba(255, 255, 255, 0.11); color: #ffffff; }
.sidebar-recent-empty { padding: 5px 10px; font-size: 0.74rem; color: var(--text-muted); }
.sidebar-spacer { flex: 1 1 auto; }

/* --- 見出し・チャットヘッダー --- */
#workspace-course-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 空（新規）チャットではヘッダー（パンくず/バッジ）を出さない。
   マークアップの構造差異に影響されないよう、ラッパー・IDの双方を対象にする。 */
.workspace-chat-section.chat-empty .workspace-chat-header,
.workspace-chat-section.chat-empty #workspace-course-title,
.workspace-chat-section.chat-empty #current-course-badge { display: none; }

/* 講義カラーの小バッジ（色はJSで background-color を付与） */
#current-course-badge {
    display: inline-block;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ==========================================================================
   モデルセレクタ（プラン別・モノトーン）
   ========================================================================== */
.model-selector { position: relative; margin: 0; }
.model-selector-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 0.72rem; font-weight: 500;
    padding: 3px 6px; border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.model-selector-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.model-selector-btn i { font-size: 0.68rem; }
.model-selector-menu {
    position: absolute; bottom: calc(100% + 6px); right: 0; left: auto;
    min-width: 240px; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: var(--shadow-md); padding: 4px; z-index: 200;
}
.model-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 10px; border-radius: 6px; font-size: 0.78rem;
    color: var(--text-primary); cursor: pointer; transition: background 0.12s ease;
}
.model-option:hover { background: var(--bg-surface-hover); }
.model-option.selected { font-weight: 600; }
.model-option-check { font-size: 0.85rem; color: var(--text-primary); }
.model-option.locked { color: var(--text-muted); cursor: not-allowed; opacity: 0.55; }
.model-option.locked:hover { background: transparent; }
.model-option-note {
    font-size: 0.64rem; color: var(--text-muted);
    background: var(--bg-surface-hover); padding: 1px 6px; border-radius: 10px; white-space: nowrap;
}
.model-option-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.model-option-desc { font-size: 0.66rem; font-weight: 400; color: var(--text-muted); }

/* --- プラン選択：独立ページ（サイドバーなしのぺらいち） --- */
body.repoton-plans { margin: 0; min-height: 100vh; background-color: var(--bg-base); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.6; }
.plans-standalone { min-height: 100vh; display: flex; flex-direction: column; padding: 0 20px 48px; }
.plans-topbar { max-width: 1040px; width: 100%; margin: 0 auto; padding: 20px 0 4px; }
.plans-back { display: inline-flex; align-items: center; gap: 2px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.plans-back:hover { color: var(--text-primary); }
.plans-back i { font-size: 1.2rem; }

/* --- プラン選択ページ（Google風・青＆グラデーションで華やかに） --- */
.plans-page { max-width: 1040px; margin: 0 auto; padding: 24px 0 70px; }
.plans-page-head { text-align: center; margin-bottom: 40px; }
.plans-page-title { font-size: 1.8rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; color: #3b82f6;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.plans-page-sub { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.plans-grid { display: flex; justify-content: center; align-items: stretch; gap: 18px; flex-wrap: wrap; }
.plan-col { position: relative; flex: 1 1 240px; min-width: 240px; max-width: 320px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 18px; padding: 30px 24px; display: flex; flex-direction: column; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.plan-col:hover { transform: translateY(-5px); box-shadow: 0 16px 34px -14px rgba(59,130,246,0.35); }
.plan-col.recommended { border: 2px solid transparent;
    background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box, linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) border-box;
    box-shadow: 0 20px 44px -14px rgba(99,102,241,0.45); transform: scale(1.035); z-index: 2; }
.plan-col.recommended:hover { transform: scale(1.035) translateY(-5px); }
.plan-col-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: #fff; font-size: 0.68rem; font-weight: 700;
    padding: 4px 14px; border-radius: 20px; letter-spacing: 0.04em; box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
.plan-col-name { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); }
.plan-col-tagline { font-size: 0.75rem; color: var(--text-secondary); margin-top: 5px; min-height: 2.2em; }
.plan-col-price { font-size: 2.1rem; font-weight: 800; color: var(--text-primary); margin: 16px 0 20px; line-height: 1; }
.plan-col-price span { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.plan-col-cta { width: 100%; padding: 12px; border-radius: 10px; border: 1.5px solid #3b82f6; background: transparent; color: #3b82f6; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: background 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease; }
.plan-col-cta:hover:not(:disabled) { background: rgba(59,130,246,0.10); }
.plan-col-cta.primary { border: none; color: #fff; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); box-shadow: 0 6px 16px rgba(59,130,246,0.4); }
.plan-col-cta.primary:hover:not(:disabled) { opacity: 0.92; box-shadow: 0 8px 20px rgba(59,130,246,0.5); }
.plan-col-cta:disabled { border: 1.5px solid var(--border-color); color: var(--text-muted); background: var(--bg-surface-hover); cursor: default; }
.plan-col-features { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 13px; }
.plan-col-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.79rem; color: var(--text-secondary); line-height: 1.5; }
.plan-col-features li i { color: #3b82f6; font-size: 0.9rem; margin-top: 1px; flex-shrink: 0; }
.plans-page-foot { text-align: center; margin-top: 36px; font-size: 0.78rem; color: var(--text-muted); }
.plans-cancel-link { color: var(--text-secondary); text-decoration: underline; }
.plans-cancel-link:hover { color: #3b82f6; }
@media (max-width: 720px) {
    .plan-col, .plan-col.recommended { flex-basis: 100%; min-width: 0; max-width: 360px; transform: none; }
    .plan-col:hover, .plan-col.recommended:hover { transform: translateY(-4px); }
}

/* --- パンくずの「講義を割り当て」サブメニューの選択肢 --- */
.breadcrumb-move-option {
    padding: 6px 10px; border-radius: 6px; font-size: 0.8rem;
    color: var(--text-primary); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 0.12s ease;
}
.breadcrumb-move-option:hover { background: var(--bg-surface-hover); }
.breadcrumb-move-option.current {
    color: var(--text-muted); font-weight: 600; cursor: default;
    background: var(--bg-surface-hover);
}
.breadcrumb-move-option.current::after { content: ' ✓'; }

/* ==========================================================================
   出欠管理（刷新版：統計カード＋各回グリッド）
   ========================================================================== */
.attendance-wrapper { max-width: 720px; margin: 0 auto; padding: 8px 4px 40px; width: 100%; }
.attendance-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.attendance-empty i { font-size: 2.6rem; display: block; margin-bottom: 10px; color: var(--border-color-active); }

.attendance-course-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 12px; }
.attendance-course-tab {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 500;
    color: var(--text-secondary); background: var(--bg-surface); cursor: pointer;
    border: 1px solid var(--border-color); transition: all 0.12s ease;
}
.attendance-course-tab:hover { background: var(--bg-surface-hover); }
.attendance-course-tab.active { color: var(--text-primary); font-weight: 600; border-color: var(--border-color-active); background: var(--bg-surface-hover); }
.attendance-course-tab .tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.attendance-stats-card {
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.attendance-stats-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.attendance-course-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.attendance-course-meta { font-size: 0.72rem; color: var(--text-muted); }
.attendance-stats-row { display: flex; gap: 12px; margin-bottom: 14px; }
.attendance-stat-block {
    flex: 1; text-align: center; padding: 12px 8px; border-radius: 10px;
    background: var(--bg-surface-hover);
}
.attendance-stat-block.warning { background: rgba(224, 84, 84, 0.10); }
.attendance-stat-block.warning .attendance-stat-value { color: #D9534F; }
.attendance-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.attendance-stat-label { font-size: 0.66rem; color: var(--text-muted); margin-top: 4px; }
.attendance-counts { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.76rem; color: var(--text-secondary); }
.attendance-counts b { color: var(--text-primary); font-weight: 700; }
.attendance-count-total { margin-left: auto; color: var(--text-muted); }

.attendance-week-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px;
}
.attendance-week-cell {
    position: relative; padding: 10px 8px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border-color); background: var(--bg-surface);
    display: flex; flex-direction: column; gap: 4px; align-items: center;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.attendance-week-cell:hover { border-color: var(--border-color-active); }
.week-cell-num { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
.week-cell-status { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.attendance-week-cell.st-attend { background: rgba(93, 202, 165, 0.12); border-color: rgba(93, 202, 165, 0.35); }
.attendance-week-cell.st-attend .week-cell-status { color: #0F6E56; }
.attendance-week-cell.st-absent { background: rgba(224, 84, 84, 0.10); border-color: rgba(224, 84, 84, 0.30); }
.attendance-week-cell.st-absent .week-cell-status { color: #C0392B; }
.attendance-week-cell.st-late { background: rgba(232, 180, 85, 0.14); border-color: rgba(232, 180, 85, 0.38); }
.attendance-week-cell.st-late .week-cell-status { color: #B8860B; }
.attendance-week-cell.st-excused { background: rgba(123, 167, 196, 0.14); border-color: rgba(123, 167, 196, 0.38); }
.attendance-week-cell.st-excused .week-cell-status { color: #3E6E8E; }

.attendance-week-picker {
    position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    z-index: 250; background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: var(--shadow-md); padding: 4px; min-width: 96px;
}
.awp-opt {
    padding: 7px 12px; border-radius: 6px; font-size: 0.8rem; color: var(--text-primary);
    cursor: pointer; text-align: center; white-space: nowrap; transition: background 0.12s ease;
}
.awp-opt:hover { background: var(--bg-surface-hover); }
.awp-clear { color: var(--text-muted); border-top: 1px solid var(--border-color); margin-top: 2px; }

/* --- 講義ページ：出欠セクション --- */
.portal-attendance-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.portal-attend-meta { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.portal-attend-stats { display: flex; gap: 12px; }
.portal-attend-stat {
    flex: 1; text-align: center; padding: 12px 8px; border-radius: 12px;
    background: var(--bg-surface-hover); border: 1px solid var(--border-color);
}
.portal-attend-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.portal-attend-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; margin-top: 3px; }
#portal-attend-remain-block.warning { background: rgba(224, 84, 84, 0.10); border-color: rgba(224, 84, 84, 0.35); }
#portal-attend-remain-block.warning .portal-attend-value { color: #C0392B; }
.portal-attend-counts {
    display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.74rem; color: var(--text-secondary);
}
.portal-attend-counts b { color: var(--text-primary); font-weight: 700; }
.portal-attend-total { margin-left: auto; color: var(--text-muted); }

/* --- 時間割ページ：今日の授業帯 --- */
.today-strip { margin-bottom: 14px; }
.today-strip-title {
    font-size: 0.82rem; font-weight: 700; color: var(--text-secondary);
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.today-strip-title i { color: var(--primary); }
.today-strip-empty {
    font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px;
    padding: 12px 14px; background: var(--bg-surface-hover); border-radius: 12px;
}
.today-strip-list { display: flex; gap: 10px; flex-wrap: wrap; }
.today-card {
    flex: 1 1 220px; min-width: 200px; max-width: 320px;
    background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px;
    padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.today-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.today-card-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-card-room { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; }
.today-card-btns { display: flex; gap: 6px; }
.today-att-btn {
    flex: 1; padding: 8px 0; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface);
    color: var(--text-secondary); transition: all 0.12s ease;
}
.today-att-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.today-att-btn.active.st-attend  { background: #5DCAA5; border-color: #5DCAA5; color: #fff; }
.today-att-btn.active.st-absent  { background: #E05454; border-color: #E05454; color: #fff; }
.today-att-btn.active.st-late    { background: #E8B455; border-color: #E8B455; color: #fff; }
.today-att-btn.active.st-excused { background: #7BA7C4; border-color: #7BA7C4; color: #fff; }
.today-card-done {
    margin-top: 8px; font-size: 0.7rem; color: #0F6E56; display: flex; align-items: center; gap: 4px; font-weight: 600;
}

/* --- 出欠モーダル --- */
#modal-attendance .modal-card { max-width: 520px; }
/* 時限を講義名の横にコンパクト表示 */
.att-modal-period {
    font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
    background: var(--bg-surface-hover); border: 1px solid var(--border-color);
    border-radius: 999px; padding: 2px 10px; margin-left: 8px; white-space: nowrap;
}
.att-modal-period:empty { display: none; }
/* あと休める* の注意書き */
.att-note-mark { color: #C0392B; font-weight: 800; }
.att-modal-note { font-size: 0.68rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.att-modal-note b { color: var(--text-secondary); font-weight: 700; }
.att-quick-label i { color: var(--primary); }
#att-quick-date { font-weight: 700; color: var(--text-primary); }
.att-quick {
    background: var(--bg-surface-hover); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.att-quick-label { font-size: 0.76rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.att-quick-btns { display: flex; gap: 8px; }
.att-quick-btn {
    flex: 1; padding: 11px 0; border-radius: 10px; font-size: 0.88rem; font-weight: 700;
    cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface);
    color: var(--text-secondary); transition: all 0.12s ease;
}
.att-quick-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.att-quick-btn.st-attend.active  { background: #5DCAA5; border-color: #5DCAA5; color: #fff; }
.att-quick-btn.st-absent.active  { background: #E05454; border-color: #E05454; color: #fff; }
.att-quick-btn.st-late.active    { background: #E8B455; border-color: #E8B455; color: #fff; }
.att-quick-btn.st-excused.active { background: #7BA7C4; border-color: #7BA7C4; color: #fff; }

.att-modal-stats { display: flex; gap: 12px; margin-bottom: 12px; }
.att-modal-stat {
    flex: 1; text-align: center; padding: 12px 8px; border-radius: 12px;
    background: var(--bg-surface-hover); border: 1px solid var(--border-color);
}
.att-modal-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.att-modal-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; margin-top: 3px; }
#att-modal-remain-block.warning { background: rgba(224, 84, 84, 0.10); border-color: rgba(224, 84, 84, 0.35); }
#att-modal-remain-block.warning .att-modal-value { color: #C0392B; }
.att-modal-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.74rem; color: var(--text-secondary); margin-bottom: 16px; }
.att-modal-counts b { color: var(--text-primary); font-weight: 700; }
.att-modal-total { margin-left: auto; color: var(--text-muted); }
.att-modal-grid-label { font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }

/* --- サイドバー利用量メーター --- */

/* --- 履歴上限の通知 --- */
.chat-history-cap-notice {
    text-align: center; font-size: 0.7rem; color: var(--text-muted);
    padding: 8px 12px; margin: 4px auto 12px; max-width: 640px;
    background: var(--bg-surface-hover); border-radius: 8px;
}

/* --- 成果物：バージョンバッジ & 履歴 --- */
.artifact-version-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    font-size: 0.62rem; font-weight: 600; line-height: 1.4;
    color: var(--text-secondary); background: var(--bg-surface-hover);
    border: 1px solid var(--border-color); border-radius: 999px;
}
.artifact-versions-wrap {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}
.artifact-versions-title {
    font-size: 0.66rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
}
.artifact-version-row {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0; font-size: 0.68rem; color: var(--text-secondary);
}
.artifact-version-label { min-width: 46px; font-weight: 600; }
.artifact-version-current {
    font-weight: 500; font-size: 0.6rem; color: var(--accent-assignment);
    margin-left: 2px;
}
.artifact-version-date { color: var(--text-muted); flex: 1; }
.btn-artifact-revert {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; font-size: 0.64rem; cursor: pointer;
    color: var(--text-secondary); background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    transition: var(--transition);
}
.btn-artifact-revert:hover {
    color: var(--text-primary); background: var(--bg-surface-hover);
    border-color: var(--border-color-active);
}
.btn-artifact-revert:disabled { opacity: 0.5; cursor: default; }

/* --- チャット吹き出し内の添付ファイルチップ --- */
.chat-msg-files {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px;
}
.chat-msg-file-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; font-size: 0.7rem; font-weight: 500;
    color: var(--text-secondary); background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.chat-msg-file-chip .bi { font-size: 0.72rem; color: var(--text-muted); }

/* --- チャット吹き出しの文字を詰める（WPテーマの拡大を打ち消すため） --- */
.workspace-chat-thread .chat-bubble {
    font-size: 14px;
    line-height: 1.65;
}
.workspace-chat-thread .chat-bubble strong { font-weight: 700; }
.workspace-chat-thread .chat-bubble p { margin: 0 0 8px; }
.workspace-chat-thread .chat-bubble p:last-child { margin-bottom: 0; }

/* --- チャットビューを画面高いっぱいにして入力欄を最下部固定・ページスクロール抑制 --- */
.app-main.app-main--chat { overflow: hidden; padding-bottom: 14px; }
.app-main.app-main--chat .app-container-inner,
.app-main.app-main--chat #view-course,
.app-main.app-main--chat .workspace-layout,
.app-main.app-main--chat .workspace-body-container { height: 100%; min-height: 0; }
.app-main.app-main--chat .workspace-chat-section { height: 100%; min-height: 0; }

/* 会話ありのとき：スレッドが伸縮スクロール、入力欄は最下部に居座る */
.workspace-chat-section:not(.chat-empty) .workspace-chat-input-area {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-top: 10px;
    /* 入力欄は下部のflexアイテムでスレッドと重ならないため背景は不要。
       以前ここに bg-base を敷いていたが、周囲と色が違い「囲む四角」に見えていた。 */
    background: transparent;
}

/* ==========================================================================
   ダークモード（CSS変数の一括上書きで全体をダーク化・Claude風の暖色ダーク）
   ========================================================================== */
html.dark-mode, body.dark-mode {
    --bg-base: #262624;
    --bg-surface: #30302E;
    --bg-surface-hover: #3A3A37;
    --bg-header: #262624;
    --bg-sidebar: #1E1D1B;
    --border-color: rgba(255, 255, 255, 0.10);
    --border-color-active: rgba(255, 255, 255, 0.20);
    --text-primary: #ECEBE7;
    --text-secondary: #A6A49E;
    --text-muted: #8A867F;
    --danger-text: #EE6F63;
    --primary: #55534E;
    --primary-light: #6A6862;
    --primary-glow: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}
body.dark-mode .chat-bubble pre { background: rgba(255,255,255,0.05); border-color: var(--border-color); }
body.dark-mode .chat-bubble code { background: rgba(255,255,255,0.08); }
/* body自身の背景は var 解決が不安定なため直値で確実にダーク化（.app-main が透明でbody色が全面に出るため） */
html.dark-mode body.repoton-app, body.dark-mode.repoton-app { background-color: #262624; }

/* パンくずの講義カラーアイコンは非表示に */
#current-course-badge { display: none; }

/* ==========================================================================
   パンくず（チャット名＋操作メニュー）
   ========================================================================== */
.chat-header-breadcrumbs { position: relative; display: flex; align-items: center; gap: 2px; }
.breadcrumb-session { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.breadcrumb-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: none; background: transparent;
    color: var(--text-secondary); border-radius: 6px; cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.breadcrumb-menu-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.breadcrumb-menu-btn i { font-size: 0.78rem; }

.chat-action-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    min-width: 210px; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 6px;
}
.chat-action-item {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 10px; border-radius: 6px; font-size: 0.82rem;
    color: var(--text-primary); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.chat-action-item > span { flex: 1; }
.chat-action-item:hover { background: var(--bg-surface-hover); }
.chat-action-item i { font-size: 0.9rem; color: var(--text-secondary); }
.chat-action-menu { padding: 4px; }
.chat-action-caret { flex: none; font-size: 0.7rem; transition: transform 0.15s ease; }
.chat-action-caret.open { transform: rotate(90deg); }
.chat-action-sep { height: 1px; background: var(--border-color); margin: 6px 4px; }

/* ==========================================================================
   アカウントボタン & メニュー（設定＝ダークモード切替／ログアウト）
   ========================================================================== */
.sidebar-account { position: relative; padding: 0 8px 4px; }
.sidebar-account-btn {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: none; background: transparent; cursor: pointer;
    border-radius: 8px; color: var(--text-primary); font-size: 0.82rem; font-weight: 500;
    transition: background 0.12s ease;
}
.sidebar-account-btn:hover { background: var(--bg-surface-hover); }
.sidebar-account-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 0.76rem; font-weight: 700;
}
.sidebar-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-account-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-caret { font-size: 0.85rem; color: var(--text-muted); }

.account-menu {
    /* body直下にfixedで描画（サイドバーの overflow-x:hidden にサブメニューがクリップされないように）。
       left / bottom / width は JS がアカウントボタンの位置から設定する。 */
    position: fixed; z-index: 1200;
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px;
}
.account-menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 10px; border-radius: 6px; font-size: 0.8rem; line-height: 1.3;
    color: var(--text-primary); cursor: pointer; text-decoration: none;
    box-sizing: border-box; font-weight: 500; white-space: nowrap;
}
.account-menu-item:hover { background: var(--bg-surface-hover); }
.account-menu-item i { font-size: 0.85rem; color: var(--text-secondary); }
.account-menu-item > span { flex: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.account-menu-sep { height: 1px; background: var(--border-color); margin: 6px 4px; }
/* 「詳細を見る」ホバーで横に出るサブメニュー */
.account-has-submenu { position: relative; }
.account-menu-caret { flex: none; font-size: 0.7rem; color: var(--text-muted); }
/* 詳細サブメニューの各リンク：左アイコンなし・右端に新規タブアイコン */
.account-info-ext { flex: none; font-size: 0.78rem; color: var(--text-muted); }
.account-submenu-side {
    position: absolute; left: 100%; bottom: -6px; margin-left: 6px;
    min-width: 210px; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 61;
}
/* トグルスイッチ（利用クレジットのON/OFF等） */
.account-switch {
    width: 34px; height: 18px; border-radius: 999px; background: var(--border-color-active);
    position: relative; flex-shrink: 0; cursor: pointer; transition: background 0.15s ease;
}
.account-switch-knob {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; transition: left 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.account-switch.on { background: #59BD95; }
.account-switch.on .account-switch-knob { left: 18px; }
/* 利用クレジットのブロック */
.settings-credit-head { border-top: 1px solid var(--border-color); margin-top: 8px; }
.settings-credit-note { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-muted); padding: 0 0 12px; }
.settings-credit-note i { font-size: 0.85rem; }
/* 請求セクション */
.settings-billing-plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.settings-billing-label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); margin: 18px 0 8px; }
.settings-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; }
.settings-pay-card { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-primary); font-weight: 600; }
.settings-pay-card i { font-size: 1rem; color: var(--text-secondary); }
.settings-pay-none { font-size: 0.82rem; color: var(--text-secondary); }
.settings-pay-btn { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background 0.12s ease; }
.settings-pay-btn:hover { background: var(--bg-surface-hover); }
.settings-invoice-empty { font-size: 0.82rem; color: var(--text-muted); padding: 12px; border: 1px dashed var(--border-color); border-radius: 8px; text-align: center; }
.settings-cancel-plan-btn { padding: 6px 14px; border-radius: 8px; border: none; background: #E0574C; color: #fff; font-size: 0.8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background 0.12s ease; }
.settings-cancel-plan-btn:hover { background: #C7483E; }
.settings-billing-label.danger { color: var(--danger-text); }
/* アカウントセクション */
.settings-avatar-row { display: flex; align-items: center; gap: 16px; padding: 6px 0 4px; }
.settings-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 1.6rem; font-weight: 700; position: relative; }
.settings-avatar-img { width: 100%; height: 100%; object-fit: cover; }
/* クリックで変更：ホバーで画像を薄暗くして＋アイコンを表示 */
.settings-avatar-edit { cursor: pointer; }
.settings-avatar-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.45); color: #fff; font-size: 1.5rem; opacity: 0; transition: opacity 0.15s ease; }
.settings-avatar-edit:hover .settings-avatar-overlay { opacity: 1; }
.settings-name-row { display: flex; gap: 10px; align-items: center; }
.settings-account-input { flex: 1; padding: 8px 10px; border: 1.5px solid var(--border-color); border-radius: 8px; font-size: 0.85rem; background: var(--bg-base); color: var(--text-primary); outline: none; box-sizing: border-box; transition: border-color 0.12s ease; }
.settings-account-input:hover { border-color: var(--text-muted); }
.settings-account-input:focus { border-color: var(--primary); }

/* ==========================================================================
   パンくずを左上の隅へ / チャット幅を拡大（入力欄と同幅） / 最近の項目ホバー削除
   ========================================================================== */
.app-main.app-main--chat .workspace-layout { position: relative; }
/* チャット名は「チャット画面」の左上隅に固定（中央列ではなく画面基準） */
.app-main.app-main--chat #workspace-course-title {
    position: absolute; top: 0; left: 2px; z-index: 25;
}
.app-main.app-main--chat .workspace-chat-header {
    display: block; position: static; margin: 0; padding: 0; min-height: 0;
}
.app-main.app-main--chat .workspace-chat-thread { padding-top: 46px; }
/* Claude風：上部フェード。チャット名は前面に残り、スクロールした本文はこの下に霞んで消える */
.app-main.app-main--chat .workspace-chat-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 54px;
    background: linear-gradient(to bottom, var(--bg-base) 40%, transparent);
    z-index: 20;
    pointer-events: none;
}
body.dark-mode .app-main.app-main--chat .workspace-chat-section::before {
    background: linear-gradient(to bottom, #1C1B19 40%, transparent);
}

/* ダークモード：チャット領域の背景を本体より一段暗くして、入力欄・送信済み吹き出し
   （やや明るいサーフェス色）とのコントラストを上げて見やすくする */
body.dark-mode .app-main.app-main--chat { background: #1C1B19; }

/* 入力欄は900pxで中央寄せ（チャット列はスクロール領域側のパディングで中央寄せ） */
.workspace-chat-section { max-width: none; }
.workspace-chat-input-area { max-width: 900px; }
.app-main.app-main--chat { padding-left: 24px; padding-right: 24px; padding-top: 10px; }
/* 時間割ビュー：パンくずをチャットと全く同じ左上隅・同サイズに揃える */
.app-main.app-main--schedule { padding-left: 24px; padding-right: 24px; padding-top: 26px; }
.app-main.app-main--schedule #timetable-tabs { padding-left: 2px; margin-bottom: 0; }

/* 最近の項目：ホバーでゴミ箱表示 */
.sidebar-recent-item { display: flex; align-items: center; gap: 6px; }
.sidebar-recent-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-recent-delete {
    display: inline-flex; flex-shrink: 0; cursor: pointer; color: var(--text-muted);
    font-size: 0.78rem; padding: 2px 4px; border-radius: 4px;
    visibility: hidden; opacity: 0; transition: opacity 0.12s ease;
}
.sidebar-recent-item:hover .sidebar-recent-delete { visibility: visible; opacity: 1; }
.sidebar-recent-delete:hover { color: #E06A5F; background: var(--bg-surface-hover); }
/* ホバー時のアクション（ピン留め／解除＋ゴミ箱） */
.sidebar-recent-actions { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; visibility: hidden; opacity: 0; transition: opacity 0.12s ease; }
.sidebar-recent-item:hover .sidebar-recent-actions { visibility: visible; opacity: 1; }
.sidebar-recent-act { display: inline-flex; cursor: pointer; color: var(--text-muted); font-size: 0.78rem; padding: 2px 4px; border-radius: 4px; transition: color 0.12s ease, background 0.12s ease; }
.sidebar-recent-act:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.sidebar-recent-act.btn-delete-recent:hover { color: #E06A5F; }
.sidebar-recent-act.btn-unpin-chat { color: var(--primary); }
body.dark-mode .sidebar-recent-act.btn-unpin-chat { color: var(--text-secondary); }
/* 講義ツリーのチャットもホバーでゴミ箱表示 */
.tree-session-item:hover .btn-delete-chat-sidebar { display: inline-flex; }

/* ==========================================================================
   設定モーダル（Claude風：左ナビ＋右コンテンツ）
   ========================================================================== */
.settings-modal-overlay {
    position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.settings-modal {
    position: relative; display: flex; width: 100%; max-width: 880px;
    height: 80vh; max-height: 640px; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.settings-close {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.settings-close:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.settings-nav {
    width: 210px; flex-shrink: 0; background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color); padding: 18px 10px; overflow-y: auto;
}
.settings-nav-title { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); padding: 0 10px 10px; }
.settings-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin-bottom: 2px;
    border-radius: 6px; font-size: 0.84rem; color: var(--text-secondary); cursor: pointer;
}
/* ホバー=淡い / 選択=濃い（2段階・加算なし）。項目間に余白を入れて背景が繋がって見えないように */
.settings-nav-item:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-primary); }
.settings-nav-item.active,
.settings-nav-item.active:hover { background: rgba(0, 0, 0, 0.09); color: var(--text-primary); font-weight: 600; }
body.dark-mode .settings-nav-item:hover { background: rgba(255, 255, 255, 0.05); }
body.dark-mode .settings-nav-item.active,
body.dark-mode .settings-nav-item.active:hover { background: rgba(255, 255, 255, 0.10); }
.settings-nav-item i { font-size: 0.95rem; }
.settings-content { flex: 1; padding: 28px 32px; overflow-y: auto; }
.settings-h2 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.settings-desc { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }
.settings-note-muted { font-size: 0.75rem; color: var(--text-muted); margin-top: 16px; }
.settings-field {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0; border-top: 1px solid var(--border-color);
}
.settings-field-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.settings-field-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
/* 外観（システム／ライト／ダーク）セレクタ */
.settings-field-block { flex-direction: column; align-items: stretch; }
.appearance-options { display: flex; gap: 10px; margin-top: 14px; }
.appearance-option {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 16px 10px; border: 1.5px solid var(--border-color); border-radius: 10px;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.appearance-option i { font-size: 1.35rem; }
.appearance-option span { font-size: 0.8rem; font-weight: 600; }
.appearance-option:hover { border-color: var(--text-muted); color: var(--text-primary); }
.appearance-option.active {
    border-color: var(--text-primary); color: var(--text-primary);
    background: var(--bg-surface-hover);
}
.settings-usage-row { margin-bottom: 20px; }
.settings-usage-head { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-primary); font-weight: 600; margin-bottom: 6px; }
.settings-usage-track { height: 8px; border-radius: 999px; background: var(--bg-surface-hover); overflow: hidden; }
.settings-usage-bar { height: 100%; background: var(--primary); border-radius: 999px; }
.settings-usage-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; }
.settings-plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.settings-plan-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; }
.settings-plan-card.current { border-color: var(--primary); background: var(--bg-surface-hover); }
.settings-plan-top { display: flex; align-items: center; justify-content: space-between; }
.settings-plan-name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.settings-plan-badge { font-size: 0.66rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-base); border: 1px solid var(--border-color); border-radius: 999px; padding: 2px 8px; }
.settings-plan-price { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 8px 0 4px; }
.settings-plan-price span { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.settings-plan-note { font-size: 0.76rem; color: var(--text-secondary); margin-bottom: 12px; min-height: 32px; }
.settings-plan-btn { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.8rem; cursor: pointer; transition: background 0.12s ease; }
.settings-plan-btn:hover { background: var(--bg-surface-hover); }
@media (max-width: 640px) { .settings-plan-grid { grid-template-columns: 1fr; } .settings-nav { width: 150px; } }

/* --- 設定：カード化（reportholder参考・見やすさ改善） --- */
.settings-modal { max-width: 900px; }
.settings-content { padding: 30px 34px; }
.settings-h2 { font-size: 1.15rem; margin-bottom: 18px; }
.set-card { border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; background: var(--bg-surface); }
.set-card:last-child { margin-bottom: 0; }
.set-card.danger { border-color: rgba(217, 83, 79, 0.35); }
.set-card-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; }
.set-card-title.danger { color: var(--danger-text); }
.set-card-desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; }
.set-card-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-mini-label { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); margin: 18px 0 8px; }

/* ==========================================================================
   講義追加（サイドバー＋・詳細トグル）／ 時間割の未配置ブロック＋ドラッグ配置
   ========================================================================== */
.sidebar-section-actions { display: flex; align-items: center; gap: 6px; }
.sidebar-add-course { cursor: pointer; color: var(--text-secondary); font-size: 0.8rem; padding: 2px 5px; border-radius: 5px; display: inline-flex; }
.sidebar-add-course:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

.course-details-toggle {
    background: transparent; border: none; cursor: pointer; color: var(--text-secondary);
    font-size: 0.8rem; padding: 6px 0 2px; display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.12s ease;
}
.course-details-toggle:hover { color: var(--text-primary); }
.course-details-toggle i { font-size: 0.72rem; }

#timetable-unscheduled-area { margin-top: 16px; }
.unscheduled-title { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
/* 時間割スイッチャー（サイドバー見出し） */
.sidebar-tt-switch { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 2px 6px; border-radius: 6px; color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; transition: background 0.12s ease, color 0.12s ease; max-width: 150px; }
.sidebar-tt-switch:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
body.dark-mode .sidebar-tt-switch:hover { background: rgba(255,255,255,0.06); }
.sidebar-tt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-tt-caret { font-size: 0.6rem; flex: none; }
/* 時間割が1つだけ：切替先が無いので、ただのラベル（キャレット無し・ホバー無し） */
.sidebar-tt-switch.is-single { cursor: default; }
.sidebar-tt-switch.is-single:hover { background: transparent; color: var(--text-muted); }
.sidebar-tt-switch.is-single .sidebar-tt-caret { display: none; }
/* 時間割の切替ポップアップ（body直下 fixed） */
.tt-menu { position: fixed; z-index: 1200; min-width: 200px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
.tt-menu-label { font-size: 0.62rem; color: var(--text-muted); padding: 4px 8px 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.tt-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 0.82rem; color: var(--text-primary); cursor: pointer; }
.tt-menu-item:hover { background: var(--bg-surface-hover); }
.tt-menu-item i { font-size: 0.85rem; color: var(--text-secondary); flex: none; }
.tt-menu-item.current { font-weight: 700; }
.tt-menu-item.danger { color: var(--danger-text); }
.tt-menu-item.danger:hover { background: #E0574C; color: #fff; }
.tt-menu-item.danger:hover i { color: #fff; }
/* マス配置メニューの講義色ドット */
.cell-course-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.tt-menu-sep { height: 1px; background: var(--border-color); margin: 6px 4px; }
/* 時間割ページ上部：パンくず（時間割名＝最上位フォルダ） */
.timetable-tabs { margin-bottom: 14px; }

/* =========================================================================
   時間割：Chrome忠実タブ
   ─ 上角は丸く、アクティブタブは本体色で塗り、下部の左右に「羽（凹カーブ）」を
     出してコンテンツと一体化する（Chrome特有の形）。
   ========================================================================= */
.tt-tabs {
    display: flex; align-items: flex-end; width: 100%; box-sizing: border-box;
    padding: 0 8px 0 0; margin: 0; position: relative; z-index: 2;
}
/* タブは等幅で並び、数が増えると縮む（Chromeと同じ最適化）。基準240px・上限240px・下限は狭くてもOK */
.tt-tab {
    position: relative; display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box;
    flex: 1 1 0; min-width: 0; max-width: 240px;
    height: 34px; padding: 0 6px 0 14px; margin: 0;
    border-radius: 10px 10px 0 0; cursor: pointer;
    font-size: 0.82rem; color: var(--text-secondary); background: transparent;
    transition: background 0.12s ease, color 0.12s ease;
}
/* 非アクティブ同士の区切り線（Chrome風の縦罫）。先頭・ホバー隣接・アクティブ隣接では隠す */
.tt-tab:not(.active):not(:first-child)::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px;
    background: var(--border-color);
}
.tt-tab:hover::before, .tt-tab:hover + .tt-tab::before, .tt-tab.active + .tt-tab::before { background: transparent; }
/* 非アクティブのホバー：浮いた角丸ハイライト（羽は出さない） */
.tt-tab:not(.active):hover { background: var(--bg-surface-hover); color: var(--text-primary); }
/* アクティブ：本体色で塗り、下部の左右に「羽（凹カーブ）」を出して時間割パネルと一体化。
   ::before＝左の羽 / ::after＝右の羽。8x8 の角丸に box-shadow を回り込ませて凹みを本体色で塗る。 */
.tt-tab.active {
    background: var(--bg-surface); color: var(--text-primary); font-weight: 700; z-index: 3;
}
.tt-tab.active::before,
.tt-tab.active::after {
    content: ""; position: absolute; bottom: 0; width: 8px; height: 8px; pointer-events: none;
}
.tt-tab.active::before { left: -8px;  background: radial-gradient(circle at top left,  transparent 8px, var(--bg-surface) 8px); }
.tt-tab.active::after  { right: -8px; background: radial-gradient(circle at top right, transparent 8px, var(--bg-surface) 8px); }
/* 左端タブは左辺をパネル左辺とピッタリ揃える（左の羽は出さず段差を作らない） */
.tt-tab:first-child.active::before { display: none; }
.tt-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; position: relative; z-index: 1; }
/* ピン・×：常時表示、色はタブ名と同じ濃度（color: inherit）。ホバーで丸い背景 */
.tt-tab-pin {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 50%; flex: none; font-size: 0.72rem; color: inherit; opacity: 1;
    transition: color 0.12s ease, background 0.12s ease;
}
.tt-tab-pin:hover { background: rgba(0,0,0,0.06); color: var(--primary); }
.tt-tab.pinned .tt-tab-pin { color: var(--primary); }
/* ダークモードでピン留め中は白で塗りつぶして目立たせる */
body.dark-mode .tt-tab.pinned .tt-tab-pin,
body.dark-mode .tt-tab.pinned .tt-tab-pin:hover { color: #ffffff; }
/* 閉じる×：Chromeと同じく丸いホバー背景。色はタブ名と同じ濃度 */
.tt-tab-close {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 50%; flex: none; font-size: 0.62rem; color: inherit; opacity: 1;
    transition: background 0.12s ease, color 0.12s ease;
}
.tt-tab-close:hover { background: rgba(0,0,0,0.10); color: var(--text-primary); }
.tt-tab-close.is-reset:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
body.dark-mode .tt-tab-close:hover, body.dark-mode .tt-tab-pin:hover { background: rgba(255,255,255,0.12); }
/* ＋（新規タブ）：Chromeと同じ丸ボタン */
.tt-tab-add {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    margin-left: 6px; margin-bottom: 3px; border: none; background: transparent; border-radius: 50%;
    color: var(--text-muted); cursor: pointer; font-size: 0.8rem; flex: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.tt-tab-add:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
/* 時間割パネル：上角を四角く・上に影を出さず、タブと地続きに。
   1px 上へ重ねて、上辺の枠線をアクティブタブの下に潜り込ませる（継ぎ目の線を消す）。 */
.app-main.app-main--schedule .timetable-container {
    border-top-left-radius: 0; border-top-right-radius: 0;
    position: relative; z-index: 1; box-shadow: none; margin-top: -1px;
}
/* タブ列とパネルの継ぎ目をなくす（#view-schedule の flex gap を 0 に） */
.app-main.app-main--schedule #timetable-tabs { margin-bottom: 0; padding-left: 0; }
#view-schedule { gap: 0; }
/* 旧・切替ドット（縦棒）は廃止 */
.timetable-dots { display: none; }

/* パンくず共通（チャット・時間割で同一の見た目） */
.breadcrumb-crumb { font-size: 13px; color: var(--text-primary); }
.breadcrumb-muted { color: var(--text-muted); font-weight: 400; }
.breadcrumb-sep { color: var(--text-muted); font-size: 12px; margin: 0 1px; opacity: 0.6; }
.breadcrumb-editable { cursor: text; padding: 2px 6px; border-radius: 6px; outline: none; }
.breadcrumb-editable:hover { background: var(--bg-surface-hover); }
.breadcrumb-editable.editing { background: var(--bg-surface-hover); }
/* 時間割の切替バー（縦長の｜。ホバーはサイズ不変・色だけハッキリ＝レイアウトが動かない） */
.timetable-dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 0 10px; min-height: 30px; }
.tt-dot {
    /* 当たり判定を広く取るための透明な箱。見た目の棒は ::before で描く（サイズは常に固定） */
    position: relative; width: 18px; height: 26px; padding: 0; border: none; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tt-dot::before {
    content: ''; width: 3px; height: 16px; border-radius: 2px;
    background: var(--border-color-active); transition: background 0.15s ease;
}
.tt-dot:hover::before { background: var(--text-secondary); }
.tt-dot.active::before { background: var(--text-primary); }
.tt-dot::after {
    content: attr(data-name); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 0.72rem; font-weight: 600; color: var(--text-primary);
    background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 6px;
    padding: 3px 8px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
    transition: opacity 0.12s ease;
}
.tt-dot:hover::after { opacity: 1; }

/* ==========================================================================
   「講義」インデックスページ（時間割ごとにグループ化＋カード）
   ========================================================================== */
/* Claude風に中央寄せ＋左右余白（横幅を絞る） */
#view-courses, #view-chats { max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; }
/* チャット一覧（行リスト） */
.chats-list { display: flex; flex-direction: column; }
.chat-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 6px; border-bottom: 1px solid var(--border-color);
    text-decoration: none; cursor: pointer; transition: background 0.12s ease;
}
.chat-row:first-child { border-top: 1px solid var(--border-color); }
.chat-row:hover { background: var(--bg-surface-hover); }
.chat-row-title {
    flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-row-meta { flex: none; display: inline-flex; align-items: center; gap: 14px; font-size: 0.78rem; color: var(--text-muted); }
.chat-row-course { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.chat-row-time { flex: none; }
/* チャット行のピン留めトグル（ホバーで出現／固定済みは常時表示） */
.chat-row-pin {
    flex: none; margin-left: 10px; width: 26px; height: 26px; border: none; background: transparent;
    border-radius: 6px; color: var(--text-muted); cursor: pointer; visibility: hidden;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.chat-row:hover .chat-row-pin { visibility: visible; }
.chat-row-pin:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.chat-row-pin.pinned { visibility: visible; color: var(--primary); }
body.dark-mode .chat-row-pin.pinned { color: var(--text-primary); }

/* サイドバーの「ピン留め済み」セクション */
.sidebar-pin-ic { font-size: 0.66rem; margin-right: 2px; }
/* ドラッグ中に出現するドロップ枠（「ここにドロップ」→ホバーで「離す」） */
.sidebar-pin-dropzone {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    margin: 2px 6px; padding: 12px 8px; font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
    border: 1.5px dashed var(--border-color); border-radius: 8px; text-align: center;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.sidebar-pinned-section.drag-over .sidebar-pin-dropzone {
    border-color: transparent; color: #FFFFFF; background: rgba(0, 0, 0, 0.55);
}
.sidebar-pinned-section.drag-over .sidebar-pin-dropzone i { color: #FFFFFF; }
/* ドラッグ元のチャット項目：テキスト選択を無効化（掴んで運ぶ操作を邪魔しない） */
.pin-draggable { -webkit-user-select: none; user-select: none; }
/* ドラッグ中に浮かせて運ぶチャットの実体（幽体離脱させず、そのものを不透明に運ぶ） */
.pin-carrying {
    position: fixed; z-index: 4000; pointer-events: none; margin: 0; box-sizing: border-box;
    background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: var(--shadow-lg); opacity: 1; padding: 6px 10px; cursor: grabbing;
}
/* ピン留め済みチャットを「最近の項目」へ運んだ時：実体を赤く（テキストはJSで「離して解除」に） */
.sidebar-recent-item.unpin-hot,
.sidebar-recent-item.unpin-hot .sidebar-recent-title { color: #E0574C; }
.sidebar-recent-item.unpin-hot .btn-unpin-chat { color: #E0574C; }
.courses-index-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.courses-index-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.courses-index-actions { display: flex; align-items: center; gap: 10px; }
.courses-sort-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
    border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface);
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.courses-sort-btn:hover { border-color: var(--border-color-active); color: var(--text-primary); }
.courses-sort-btn .courses-sort-current { color: var(--text-primary); font-weight: 700; }
.courses-sort-btn .bi-chevron-down { font-size: 0.6rem; }
/* 検索ボックス（Claudeのプロジェクト検索に倣った全幅・角丸） */
.courses-search-wrap {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    padding: 11px 16px; margin-bottom: 22px; border: 1px solid var(--border-color);
    border-radius: 12px; background: var(--bg-surface); transition: border-color 0.12s ease;
}
.courses-search-wrap:focus-within { border-color: var(--primary); }
.courses-search-wrap > i { color: var(--text-muted); font-size: 0.95rem; }
#courses-search, #chats-search { flex: 1; min-width: 0; border: none; background: transparent; outline: none; color: var(--text-primary); font-size: 0.9rem; }
#courses-search::placeholder, #chats-search::placeholder { color: var(--text-muted); }
.courses-group { margin-bottom: 26px; }
.courses-group-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
    letter-spacing: 0.03em; margin-bottom: 12px;
}
.courses-group-count {
    font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
    background: var(--bg-surface-hover); border-radius: 10px; padding: 1px 8px;
}
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
/* Claude風カード：枠線つき角丸ボックス・余白広め・テキスト主役（色は小さなドット） */
.course-card {
    display: flex; flex-direction: column; gap: 11px; padding: 18px 20px;
    background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px;
    cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.course-card:hover { border-color: var(--border-color-active); box-shadow: var(--shadow-md); }
.course-card:active { transform: translateY(1px); }
.course-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.course-card-titlerow { display: flex; align-items: center; gap: 8px; }
.course-card-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.course-card-title {
    flex: 0 1 auto; min-width: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.course-card-badge {
    flex: none; font-size: 0.68rem; font-weight: 700; color: var(--text-secondary);
    background: var(--bg-surface-hover); border-radius: 999px; padding: 2px 9px;
}
/* ホバーで出る「⋮」メニューボタン（右上）。非ホバー時も場所は確保してガタつかせない */
.course-card-menu-btn {
    flex: none; margin-left: auto; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: 6px; cursor: pointer;
    color: var(--text-muted); font-size: 0.95rem; visibility: hidden;
    transition: background 0.12s ease, color 0.12s ease;
}
.course-card:hover .course-card-menu-btn,
.course-card:focus-within .course-card-menu-btn { visibility: visible; }
.course-card-menu-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.course-card-desc { font-size: 0.8rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-card-foot { font-size: 0.74rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.course-card-foot i { font-size: 0.78rem; opacity: 0.85; }
.courses-index-nomatch { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 0.85rem; }
/* 講義ポータルの「← すべての講義」戻るリンク（Claude風） */
.portal-back-link {
    display: inline-flex; align-items: center; gap: 2px; align-self: flex-start;
    font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
    text-decoration: none; margin-bottom: 14px; transition: color 0.12s ease;
}
.portal-back-link:hover { color: var(--text-primary); }
.portal-back-link i { font-size: 1.15rem; }
.courses-index-empty { text-align: center; padding: 60px 20px; }
.courses-index-empty-icon { font-size: 2.4rem; color: var(--text-muted); margin-bottom: 10px; }
.courses-index-empty-title { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; }
.courses-index-empty-desc { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 18px; line-height: 1.6; }

/* 未配置一覧の検索 */
.unscheduled-search-wrap { display: flex; align-items: center; gap: 8px; max-width: 320px; margin-bottom: 10px; padding: 7px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-surface); transition: border-color 0.12s ease; }
.unscheduled-search-wrap:focus-within { border-color: var(--primary); }
.unscheduled-search-wrap i { color: var(--text-muted); font-size: 0.85rem; }
.unscheduled-search { flex: 1; border: none; outline: none; background: transparent; color: var(--text-primary); font-size: 0.82rem; }
.unscheduled-empty-search { font-size: 0.78rem; color: var(--text-muted); padding: 8px 2px; }
.unscheduled-hint { font-size: 0.74rem; color: var(--text-muted); padding: 12px; border: 1px dashed var(--border-color); border-radius: 8px; display: flex; align-items: center; gap: 6px; }
.unscheduled-list { display: flex; flex-wrap: wrap; gap: 8px; }
.unscheduled-card {
    background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px;
    padding: 8px 12px; font-size: 0.8rem; font-weight: 600; color: var(--text-primary);
    cursor: grab; box-shadow: var(--shadow-sm); user-select: none;
}
.unscheduled-card:hover { border-color: var(--border-color-active); }
.unscheduled-card:active { cursor: grabbing; }
.unscheduled-card.dragging, .timetable-course-card.dragging { opacity: 0.45; }
.timetable-course-card { cursor: grab; }
.timetable-cell.drag-over { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--bg-surface-hover); }

/* ==========================================================================
   パンくずのインライン編集 / 操作メニュー横サブメニュー・削除の赤 / 講義モーダルの滑らか化
   ========================================================================== */
/* パンくずのチャット名：チャット本文より少し小さく・細く。編集時も枠は付けない */
.breadcrumb-session { cursor: text; padding: 2px 6px; border-radius: 6px; outline: none; font-size: 13px; font-weight: 400; }
.breadcrumb-session:hover { background: var(--bg-surface-hover); }
.breadcrumb-session.editing { background: var(--bg-surface-hover); box-shadow: none; cursor: text; }

/* 「講義を割り当て」ホバーで横にサブメニュー（表示制御はJS。すき間なしで判定を緩く） */
.chat-action-item.has-submenu { position: relative; }
.chat-action-submenu-side {
    position: absolute; top: -5px; left: 100%;
    min-width: 200px; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 4px; display: none;
    max-height: 300px; overflow-y: auto; z-index: 60;
}
.chat-action-item.has-submenu .chat-action-caret { transform: none; }

/* 削除：非ホバーは赤文字・背景なし。ホバー時のみ白字＋赤背景 */
.chat-action-item.danger { color: var(--danger-text); background: transparent; }
.chat-action-item.danger i { color: var(--danger-text); }
.chat-action-menu .chat-action-item.danger:not(:hover) { background: transparent; }
.chat-action-item.danger:hover { background: #E0574C; color: #fff; }
.chat-action-item.danger:hover i { color: #fff; }
/* メニュー項目・区切りを詰めて削除だけ大きく見えないように */
.chat-action-menu .chat-action-item { padding: 6px 10px; min-height: 0; line-height: 1.3; }
.chat-action-menu .chat-action-sep { margin: 4px 6px; }

/* 講義モーダルは中央表示（詳細の開閉は slideDown で滑らかに） */

/* ==========================================================================
   メッセージのコピー / 新規チャットのテンプレプロンプト / 出欠の空状態の刷新
   ========================================================================== */
/* メッセージ列：幅いっぱいに広げ、吹き出し幅は上の唯一定義（max-width＋width:max-content）に任せる */
.chat-msg-col { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.chat-message-student .chat-msg-col { align-items: flex-end; }
.chat-message-ai .chat-msg-col { align-items: flex-start; }
/* アイコンの段：列いっぱいの当たり判定にして、テキストだけでなく段全体でホバー維持 */
.chat-msg-actions { display: flex; width: 100%; margin-top: 2px; min-height: 24px; opacity: 0; transition: opacity 0.12s ease; }
.chat-message-student .chat-msg-actions { justify-content: flex-end; }
.chat-message:hover .chat-msg-actions,
.chat-msg-actions:hover { opacity: 1; }
.msg-copy-btn, .msg-edit-btn, .msg-regen-btn {
    border: none; background: transparent; cursor: pointer; color: var(--text-muted);
    font-size: 0.8rem; padding: 2px 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 3px;
}
.msg-copy-btn:hover, .msg-edit-btn:hover, .msg-regen-btn:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

/* テンプレプロンプト（新規チャットの入力欄下・中央） */
.chat-template-prompts {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    width: 100%; max-width: 900px; margin: 16px auto 0; padding: 0 12px; box-sizing: border-box;
}
.chat-template-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    background: var(--bg-surface); border: 1px solid var(--border-color);
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
    transition: all 0.12s ease;
}
.chat-template-btn:hover { border-color: var(--border-color-active); color: var(--text-primary); background: var(--bg-surface-hover); }
.chat-template-btn i { font-size: 0.82rem; color: var(--text-muted); }

/* 出欠管理の空状態（洗練版・中央カード風） */
.attendance-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 56px 24px; gap: 4px; min-height: 55vh;
}
.attendance-empty-icon {
    width: 64px; height: 64px; border-radius: 16px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface-hover); color: var(--text-secondary); font-size: 1.7rem;
}
.attendance-empty-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.attendance-empty-desc { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 20px; max-width: 420px; }

/* --------------------------------------------------------------------------
   ログインページ（templates/login.php 専用。body.repoton-login-page 配下に限定。
   旧SaaSプラグインのログイン画面を踏襲したシンプル構成）
   -------------------------------------------------------------------------- */
body.repoton-login-page {
    font-family: var(--font-sans);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}
.login-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: auto;
    padding-top: 100px;
}
.login-logo-link { display: block; transition: opacity 0.2s; }
.login-logo-link:hover { opacity: 0.8; }
.login-logo-img { height: 72px; width: auto; margin-bottom: 32px; }
.login-welcome {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}
.login-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 44px;
}
.login-auth-area { width: 100%; max-width: 400px; margin: 0 auto; }
.login-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color-active);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.login-google-btn:hover {
    background-color: var(--bg-surface-hover);
    box-shadow: var(--shadow-md);
}
.login-google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.login-footer {
    margin-top: auto;
    padding: 20px 0;
    text-align: center;
    width: 100%;
}
.login-terms {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
}
.login-terms a { color: var(--text-secondary); text-decoration: none; margin: 0 2px; }
.login-terms a:hover { text-decoration: underline; color: var(--text-primary); }
@media (max-width: 480px) {
    .login-main { padding-top: 40px; }
    .login-logo-img { height: 56px; margin-bottom: 24px; }
    .login-welcome { font-size: 22px; }
}
/* ==========================================================================
   モバイル全面対応（≤768px・スマホ版Claude/Gemini準拠）
   構成：固定トップバー（☰・タイトル・＋）／ドロワー式サイドバー＋背景タップで閉じる／
         各ビューは縦積み・横スクロール封じ。ホバー前提UIはタッチでは常時表示。
   ========================================================================== */
/* モバイル専用UIの基底状態：デスクトップでは描画しない（下のメディア内で表示に切替） */
.mobile-topbar { display: none; }
.drawer-backdrop { display: none; }

@media (max-width: 768px) {
    html, body { overflow-x: hidden; }

    /* 旧・丸形フローティングトグルはトップバーに置き換え */
    .sidebar-toggle { display: none; }

    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        padding-left: calc(6px + env(safe-area-inset-left));
        padding-right: calc(6px + env(safe-area-inset-right));
        background: var(--bg-header);
        border-bottom: 1px solid var(--border-color);
        z-index: 300;
    }
    body.admin-bar .mobile-topbar { top: 46px; }
    .mtb-btn {
        width: 42px;
        height: 42px;
        border: none;
        background: transparent;
        border-radius: 50%;
        color: var(--text-primary);
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }
    .mtb-btn:active { background: var(--bg-surface-hover); }
    .mtb-title {
        flex: 1;
        text-align: center;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .drawer-backdrop { display: none; }
    .drawer-backdrop.visible {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
        z-index: 340;
    }

    /* ドロワー：Claudeアプリ相当の広さ・最前面 */
    .app-sidebar {
        width: 280px;
        left: -292px;
        top: 0;
        bottom: 0;
        height: 100dvh;
        z-index: 350;
    }
    body.admin-bar .app-sidebar { top: 46px; height: calc(100dvh - 46px); }
    .app-sidebar.active { left: 0; }

    /* メイン領域：トップバー分を確保し、余白はスマホ向けに詰める
       （ビュー別の .app-main--xxx 規則より後勝ちさせるため2クラスでも指定） */
    .app-main,
    .app-main.app-main--schedule { padding: 64px 12px 16px; }

    /* チャット画面：スレッドがスクロール・入力欄は最下部（セーフエリア考慮） */
    .app-main.app-main--chat { padding: 58px 6px 0; }
    .workspace-chat-input-area { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }

    /* 講義ポータル：2カラム→縦積み（資料はチャットの下に全幅） */
    .course-portal-layout { flex-direction: column; gap: 18px; }
    .course-portal-left, .course-portal-right { flex: none; width: 100%; }
    .portal-header-simple { flex-wrap: wrap; gap: 10px; }

    /* 時間割：タブはラベルを保ったまま横スクロール、グリッドも横スクロール */
    .timetable-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tt-tab { flex: 0 0 auto; min-width: 118px; max-width: 160px; }
    .timetable-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .timetable-table { min-width: 620px; }

    /* モーダル：ほぼ全幅・縦は画面内に収めてスクロール */
    .modal-card {
        width: min(calc(100vw - 20px), 480px);
        max-height: 92dvh;
        overflow-y: auto;
    }
}

/* タッチ端末：ホバーで出す系のメッセージ操作（編集・再生成・コピー・◀▶）を常時表示 */
@media (hover: none) and (pointer: coarse) {
    .chat-msg-actions { opacity: 0.8; }
}
/* --------------------------------------------------------------------------
   モバイル可読性強化（Gemini/Claudeスマホ版の文字サイズ・余白基準）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* チャット本文：14px→16px・行間ゆったり（スマホ標準の読みやすさ） */
    .workspace-chat-thread .chat-bubble {
        font-size: 16px;
        line-height: 1.75;
    }
    /* 入力欄は16px（読みやすさ＋iOSのフォーカス時自動ズーム防止） */
    .chat-input-field { font-size: 16px; }
    .chat-input-capsule-portal .chat-input-field { min-height: 56px; }

    /* 新規チャット：挨拶のみ（テンプレはJS側でモバイル非表示）。サイズはスマホ向けに調整 */
    .chat-empty-greeting { font-size: 1.55rem; line-height: 1.5; padding: 0 12px; }
    #chat-template-prompts { display: none; }

    /* ドロワー：ほぼ全画面（Gemini式）＋大きめの項目 */
    .app-sidebar {
        width: min(88vw, 360px);
        left: calc(-1 * min(88vw, 360px) - 12px);
        padding-left: calc(env(safe-area-inset-left));
    }
    .app-sidebar.active { left: 0; }
    .sidebar-link {
        font-size: 1rem;
        padding: 12px 12px;
        border-radius: 10px;
    }
    .sidebar-recent-item {
        font-size: 0.95rem;
        padding: 11px 10px 11px 12px;
        border-radius: 8px;
    }

    /* チャット一覧・ポータルの行も指で押しやすく */
    .portal-session-item { font-size: 0.95rem; }
    .chat-row-title { font-size: 0.95rem; }

    /* チャット画面のパンくず（チャット名）も一回り大きく */
    .app-main.app-main--chat #workspace-course-title { font-size: 1rem; }
}
/* --------------------------------------------------------------------------
   モバイル：アプリ的固定レイアウト＋下部固定入力欄（キーボード追従はJS）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* ページ自体は固定。スクロールは各ビューの内側だけ（アプリ挙動） */
    html, body.repoton-app {
        height: 100dvh;
        overflow: hidden;
    }
    /* iOSの100vhは「URLバー収納時の大きい高さ」で可視領域より大きい。
       外枠は可視領域に追随する100dvhにして、下端が隠れないようにする */
    .app-wrapper { height: 100dvh; }
    .app-main {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .app-main.app-main--chat { overflow: hidden; }

    /* ズーム抑止：iOSは16px未満の入力にフォーカスすると自動ズームするため全入力を16pxに */
    input[type="text"], input[type="search"], input[type="number"], textarea, select {
        font-size: 16px;
    }

    /* チャット入力欄：画面最下部に固定し、キーボード追従はJSがtransformで持ち上げる。
       （横線・背景は後段の「モバイル全面リデザインv2」で無効化している） */
    .app-main.app-main--chat .workspace-chat-input-area {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        margin: 0;
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
        z-index: 250;
    }
    .app-main.app-main--chat .chat-input-capsule { border-radius: 24px; }
    .app-main.app-main--chat .chat-input-capsule .chat-input-field { min-height: 30px; }
    /* 固定入力欄ぶんの逃げ（スレッド最下部が隠れないように） */
    .app-main.app-main--chat .workspace-chat-thread { padding-bottom: 128px; }
}
/* --------------------------------------------------------------------------
   モバイル全面リデザイン v2（スマホ操作最優先・Gemini基準）
   ①浮きアイコンヘッダー＋モデルチップ ②入力欄1行化 ③設定モーダル1カラム
   ④時間割は画面幅フィット（横スクロール廃止） ⑤サイドバー文字拡大
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* ── ①ヘッダー：ゾーニングをやめて浮きアイコンに。アイコンは大きめ ── */
    .mobile-topbar {
        background: transparent;
        border-bottom: none;
        height: 56px;
        gap: 8px;
    }
    .mtb-btn {
        width: 46px;
        height: 46px;
        font-size: 1.55rem;
        background: transparent;
    }
    .mtb-spacer { flex: 1; }

    /* モデルチップ（現在のAIモデル名。タップで切替メニュー） */
    #mtb-model-slot .model-selector { position: relative; }
    #mtb-model-slot .model-selector-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: 1.05rem;
        font-weight: 600;
        padding: 8px 6px;
        cursor: pointer;
    }
    #mtb-model-slot .model-selector-menu {
        bottom: auto;
        top: calc(100% + 4px);
        left: 0;
        right: auto;
        min-width: 260px;
    }
    /* 入力カプセル側のモデルセレクタはヘッダーへ移設したため非表示 */
    .chat-input-capsule .model-selector,
    .chat-input-capsule-portal .model-selector { display: none; }

    /* ── ②チャット入力欄：横線なし・[＋][入力][送信] の1行構成 ── */
    .app-main.app-main--chat .workspace-chat-input-area {
        border-top: none;
        background: transparent;
        padding-top: 4px;
    }
    .app-main.app-main--chat .chat-input-capsule {
        display: grid;
        grid-template-columns: 44px 1fr 46px;
        align-items: end;
        column-gap: 2px;
        padding: 6px 8px;
        border-radius: 26px;
        background: var(--bg-surface);
        box-shadow: var(--shadow-md);
    }
    .app-main.app-main--chat .chat-attached-files { grid-row: 1; grid-column: 1 / -1; }
    .app-main.app-main--chat .chat-input-capsule-row { grid-row: 2; grid-column: 2; }
    .app-main.app-main--chat .chat-input-capsule-footer { display: contents; }
    .app-main.app-main--chat .chat-attach-btn {
        grid-row: 2;
        grid-column: 1;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--text-secondary);
        cursor: pointer;
    }
    .app-main.app-main--chat .chat-input-footer-right {
        grid-row: 2;
        grid-column: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .app-main.app-main--chat .chat-input-capsule .chat-input-field {
        min-height: 28px;
        padding: 10px 4px;
    }
    .chat-input-hint { display: none; }

    /* ── ③設定モーダル：1カラム（ナビは横タブ・中身は全幅） ── */
    .settings-modal-overlay { padding: 8px; }
    .settings-modal {
        flex-direction: column;
        height: 94dvh;
        max-height: none;
        border-radius: 14px;
    }
    .settings-nav {
        width: 100%;
        flex-shrink: 0;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 14px 44px 10px 12px;
    }
    .settings-nav-title { display: none; }
    .settings-nav-item {
        flex: 0 0 auto;
        font-size: 0.95rem;
        padding: 8px 14px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .settings-content { padding: 18px 16px; }

    /* ── ④時間割：画面幅にフィット（スクロールなし・コマ名は折返し） ── */
    .timetable-container { overflow-x: hidden; }
    .timetable-table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }
    .timetable-table th, .timetable-table td { padding: 2px; }
    .timetable-table th:first-child,
    .timetable-table td:first-child { width: 52px; }
    .timetable-table th { font-size: 0.72rem; }
    .timetable-table td:first-child { font-size: 0.62rem; }
    .timetable-course-card {
        font-size: 0.66rem;
        line-height: 1.35;
        padding: 3px 2px 3px 5px;
        word-break: break-all;
        overflow: hidden;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .timetable-course-card .timetable-course-name {
        white-space: normal;
        word-break: break-all;
    }
    /* 「曜日を追加する」縦帯は幅を圧迫するためモバイルでは出さない（追加はPCで） */
    .add-day-head, .add-day-column, .add-day-blank { display: none; }

    /* ── ⑤サイドバー：さらに大きく（Geminiのメニュー基準） ── */
    .sidebar-link {
        font-size: 1.08rem;
        padding: 13px 14px;
        border-radius: 12px;
    }
    .sidebar-link .sidebar-icon { font-size: 1.15rem; }
    .sidebar-recent-item {
        font-size: 1.02rem;
        padding: 12px 12px 12px 14px;
        border-radius: 10px;
    }
    .sidebar-section-label, .sidebar-recent-header { font-size: 0.82rem; }
    .sidebar-account-btn { font-size: 1.02rem; padding: 12px 10px; }
}
/* --------------------------------------------------------------------------
   モバイル：ヘッダー講義チップ＋入力カプセルの整列修正
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 講義チップ（チャット画面のみJSが表示。未割り当て=「講義を割り当て」/割り当て済み=講義名） */
    .mtb-assign {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 42vw;
        border: 1px solid var(--border-color-active);
        border-radius: 999px;
        background: var(--bg-surface);
        color: var(--text-secondary);
        font-size: 0.88rem;
        font-weight: 600;
        padding: 7px 12px;
        cursor: pointer;
    }
    .mtb-assign.assigned { color: var(--text-primary); }
    .mtb-assign .mtb-assign-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mtb-assign .bi-chevron-down { font-size: 0.7rem; flex-shrink: 0; }
    /* スレッド内の旧・割り当てピルはヘッダーへ移設したため非表示 */
    .chat-empty-assign { display: none; }

    /* 入力カプセル：＋/プレースホルダー/送信の縦位置を中央で揃える */
    .app-main.app-main--chat .chat-input-capsule {
        align-items: center;
        align-content: center;
        gap: 0;
        min-height: 0;
    }
    .app-main.app-main--chat .chat-attached-files:empty { display: none; }
    /* border-box高さとパディングの食い合いでテキストが沈むため、
       パディングは最小にして行高24pxで垂直中央に載せる（厚みはカプセル側の余白で出す） */
    .app-main.app-main--chat .chat-input-capsule .chat-input-field {
        padding: 2px 4px;
        min-height: 28px;
        line-height: 24px;
    }
}
/* --------------------------------------------------------------------------
   時間割モバイルUI：タブ廃止 → チップ＋ボトムシート
   -------------------------------------------------------------------------- */
.tt-mobile-chip { display: none; }

@media (max-width: 768px) {
    /* デスクトップ用タブ列はモバイルでは出さない */
    .timetable-tabs .tt-tabs { display: none; }

    .tt-mobile-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 70vw;
        border: 1px solid var(--border-color-active);
        border-radius: 999px;
        background: var(--bg-surface);
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 700;
        padding: 10px 16px;
        margin: 0 0 10px;
        cursor: pointer;
    }
    .tt-mobile-chip .tt-mobile-chip-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tt-mobile-chip .bi-chevron-down { font-size: 0.75rem; color: var(--text-muted); }
}

/* ボトムシート（モバイル時間割メニュー） */
.tt-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
}
.tt-sheet {
    width: 100%;
    background: var(--bg-surface);
    border-radius: 18px 18px 0 0;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
    max-height: 75dvh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.tt-sheet-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 2px 10px 10px;
}
.tt-sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 10px;
    font-size: 1.02rem;
    color: var(--text-primary);
    cursor: pointer;
}
.tt-sheet-row:active { background: var(--bg-surface-hover); }
.tt-sheet-row.current .tt-sheet-name { font-weight: 700; }
.tt-sheet-row.danger { color: var(--danger-text); }
.tt-sheet-row i.bi { font-size: 1.05rem; flex-shrink: 0; }
.tt-sheet-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-sheet-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.tt-sheet-sep { height: 1px; background: var(--border-color); margin: 8px 4px; }
/* ドロワー右上の閉じるボタン（モバイルのみ。背景タップでも閉じるが視覚的な導線として置く） */
.drawer-close-btn { display: none; }
@media (max-width: 768px) {
    .drawer-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-secondary);
        font-size: 1.25rem;
        cursor: pointer;
        z-index: 5;
    }
    .drawer-close-btn:active { background: var(--bg-surface-hover); }
    /* ×と最初の項目が重ならないよう、ナビの開始位置を下げる */
    .app-sidebar .sidebar-nav { padding-top: 58px; }
}
/* モバイル：講義一覧ヘッダー（タイトル1行＋操作は折返しで下段に） */
@media (max-width: 768px) {
    .courses-index-header {
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .courses-index-title {
        width: 100%;
        font-size: 1.35rem;
    }
    .courses-index-header .btn,
    .courses-index-header select,
    .courses-index-header [class*="filter"],
    .courses-index-header [class*="sort"] {
        white-space: nowrap;
    }
}

/**
 * チャット入力欄の下に常時出す注意書き。
 * AIの出力は誤りうるという事実の告知で、ChatGPT/Claudeと同じ扱い。
 *
 * 入力欄はモバイルで position:fixed になるため、このテキストも同じ枠内に置く。
 * ただし親は display:flex の横並びなので、折り返しを許可して幅100%を取らせないと
 * 入力欄の「右隣」に並んでしまう。
 */
.workspace-chat-input-area { flex-wrap: wrap; }
.chat-ai-disclaimer {
    flex: 0 0 100%;
    width: 100%;
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-tertiary, #9aa4ae);
}
@media (max-width: 768px) {
    .chat-ai-disclaimer { font-size: 10px; margin-top: 4px; }
}