/* src/static_novels/css/tree.css */

/* ============================================
   カラーパレット（薄い色／パステル調）
============================================ */
:root {
    /* 男性（薄い青） */
    --color-male: #6BA3D6;
    --bg-male: #D6E8F7;
    --border-male: #6BA3D6;

    /* 女性（薄いピンク） */
    --color-female: #D66B6B;
    --bg-female: #F7D6D6;
    --border-female: #D66B6B;

    /* AI生成（男性スタイル：薄い水色） */
    --color-ai-male: #87CEEB;
    --bg-ai-male: #E3F0FA;
    --border-ai-male: #87CEEB;

    /* AI生成（女性スタイル：薄いローズ） */
    --color-ai-female: #EB8A9A;
    --bg-ai-female: #FAE3E8;
    --border-ai-female: #EB8A9A;

    /* 共通 */
    --color-self: #FFC107;
    --bg-self: rgba(255, 193, 7, 0.12);

    /* ブロック状態 */
    --color-blocked: #adb5bd;
    --bg-blocked: #f1f3f5;

    /* 投稿可 */
    --color-can-post: #28a745;
    --bg-can-post: rgba(40, 167, 69, 0.08);
}

/* ============================================
   ツリー基本構造
============================================ */
.tree-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.tree-list li {
    margin: 0;
    padding: 0;
}

.tree-children {
    list-style: none;
    padding-left: 1.5rem;
    margin: 0;
    border-left: 2px solid #e9ecef;
    margin-left: 10px;
}

/* ============================================
   ツリーノード（共通）
============================================ */
.tree-node {
    margin: 2px 0;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background-color 0.15s;
    font-size: 0.9rem;
}

.tree-node-content {
    padding: 4px 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    min-height: 32px;
}

/* ============================================
   性別カラー（男性：薄い青）
============================================ */
.tree-node.gender-male {
    background-color: var(--bg-male);
    border-left-color: var(--border-male);
}

.tree-node.gender-male .gender-icon {
    color: var(--color-male);
}

/* ============================================
   性別カラー（女性：薄いピンク）
============================================ */
.tree-node.gender-female {
    background-color: var(--bg-female);
    border-left-color: var(--border-female);
}

.tree-node.gender-female .gender-icon {
    color: var(--color-female);
}

/* ============================================
   AI生成（男性スタイル：薄い水色）点線
============================================ */
.tree-node.ai-male {
    background-color: var(--bg-ai-male);
    border-left-color: var(--border-ai-male);
    border-style: dashed;
    border-width: 1px 0 1px 3px;
}

.tree-node.ai-male .gender-icon {
    color: var(--color-ai-male);
}

/* ============================================
   AI生成（女性スタイル：薄いローズ）点線
============================================ */
.tree-node.ai-female {
    background-color: var(--bg-ai-female);
    border-left-color: var(--border-ai-female);
    border-style: dashed;
    border-width: 1px 0 1px 3px;
}

.tree-node.ai-female .gender-icon {
    color: var(--color-ai-female);
}

/* ============================================
   アイコン
============================================ */
.tree-node .gender-icon {
    width: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ============================================
   AIバッジ（薄いグレー、控えめ）
============================================ */
.tree-node .ai-badge {
    font-size: 0.55rem;
    padding: 1px 8px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    color: #999;
    font-weight: normal;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* ============================================
   ブロック状態
============================================ */
.tree-node.is-blocked {
    background-color: var(--bg-blocked);
    border-left-color: var(--color-blocked);
    opacity: 0.7;
}

.tree-node .blocked-icon {
    color: var(--color-blocked);
    font-size: 0.8rem;
}

/* ============================================
   ユーザー自身の投稿（薄い黄色）
============================================ */
.tree-node.is-self {
    background-color: var(--bg-self);
    border-left-color: var(--color-self);
}

/* ============================================
   投稿可能ノード
============================================ */
.tree-node.can-post {
    background-color: var(--bg-can-post);
    border-left-color: var(--color-can-post);
}

.tree-node.can-post:hover {
    background-color: rgba(40, 167, 69, 0.15);
    cursor: pointer;
}

/* ============================================
   ノードタイトル
============================================ */
.tree-node .node-title {
    font-size: 0.85rem;
    word-break: break-word;
}

.tree-node .node-title a {
    color: inherit;
    text-decoration: none;
}

.tree-node .node-title a:hover {
    text-decoration: underline;
    color: #0d6efd;
}

/* ============================================
   ノードメタ情報
============================================ */
.tree-node .node-meta {
    font-size: 0.7rem;
    color: #999;
    flex-shrink: 0;
}

/* ============================================
   ホバー効果（薄いグレー）
============================================ */
.tree-node:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.tree-node.gender-male:hover {
    background-color: #cde0f0;
}

.tree-node.gender-female:hover {
    background-color: #f0cdcd;
}

.tree-node.ai-male:hover {
    background-color: #d8eaf5;
}

.tree-node.ai-female:hover {
    background-color: #f5d8de;
}

/* ============================================
   バッジ調整
============================================ */
.tree-node .badge {
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 10px;
}

/* ============================================
   凡例
============================================ */
.tree-legend {
    font-size: 0.75rem;
    border-radius: 8px;
    background: #f8f9fa !important;
    padding: 6px 12px !important;
    flex-wrap: wrap;
}

/* ============================================
   モバイル対応
============================================ */
@media (max-width: 576px) {
    .tree-node-content {
        padding: 3px 6px;
        font-size: 0.8rem;
        gap: 1px 3px;
        min-height: 28px;
    }

    .tree-node .gender-icon {
        font-size: 0.75rem;
        width: 16px;
    }

    .tree-node .node-title {
        font-size: 0.78rem;
    }

    .tree-node .node-meta {
        font-size: 0.6rem;
    }

    .tree-children {
        padding-left: 0.8rem;
    }

    .tree-node .badge {
        font-size: 0.5rem;
        padding: 1px 4px;
    }

    .tree-node .ai-badge {
        font-size: 0.5rem;
        padding: 0px 6px;
    }
}

@media (min-width: 768px) {
    .tree-node-content {
        padding: 5px 14px;
        min-height: 36px;
    }

    .tree-children {
        padding-left: 2rem;
    }
}