/* ==========================================
   Feature: Require JS Warning
   ========================================== */
.mutyun-js-warning {
    color: #b91c1c;
    font-weight: 700;
    margin: .75em 0;
    padding: 10px;
    border: 1px solid #b91c1c;
    background-color: #fff5f5;
    border-radius: 4px;
}

/* ==========================================
   Feature: Comment Customizer
   ========================================== */
/* Reply Link */
.reply-link {
    text-align: right;
    margin-top: 8px;
}
.mutyun-reply-btn {
    display: inline;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #0073aa;
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
}
.mutyun-reply-btn:hover {
    text-decoration: underline;
}

/* Hide LikeBtn */
.mutyun-hide-likebtn .likebtn-wrapper,
.mutyun-hide-likebtn .likebtn_container,
.mutyun-hide-likebtn .likebtn-like-button {
    display: none !important;
}

/* Self Reply Icon */
.mutyun-self-reply-warning {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background-color: #dc3545;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    cursor: help;
    margin-right: 4px;
    vertical-align: middle;
}

/* Children References */
.mutyun-children {
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.03);
    border-radius: 4px;
    font-size: 0.85em;
}
.mutyun-children-title {
    font-weight: bold;
    margin-bottom: 4px;
}
.mutyun-children-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Toggle Bar */
.comment-view-toggle {
    margin: 1em 0;
    padding: 8px;
    background: #f7f7f7;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.9em;
    flex-wrap: wrap;
}
.comment-view-toggle button {
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
}
.comment-view-toggle button.active {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* AA Mode Button (Mobile Only) */
.mutyun-aa-btn {
    margin-left: auto; /* Push to right */
    display: none; /* Hidden by default on PC */
}
@media (max-width: 768px) {
    .mutyun-aa-btn {
        display: block;
    }
}

/* Tips Bubble (Centered Popover) */
.mutyun-aa-tips {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(40, 40, 40, 0.95);
    color: #fff;
    padding: 15px 20px;
    font-size: 14px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    pointer-events: none;
    text-align: center;
    
    /* テキストに合わせて幅を自動調整（最大90%） */
    width: max-content;
    max-width: 90vw;
    box-sizing: border-box;
    line-height: 1.6;
}
.mutyun-aa-tips.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================
   Tree Mode (Simple Vertical Line)
   ========================================== */
body.comment-tree-mode ul.pseudo-tree-children {
    margin-left: var(--cc-tree-indent, 20px);
    border-left: 1px solid #e5e5e5;
    padding-left: 10px;
    list-style: none;
    margin-bottom: 1em;
}
body.comment-tree-mode ul.pseudo-tree-children > li {
    margin-bottom: 15px;
    position: relative;
}
body.comment-tree-mode .mutyun-children {
    display: none !important;
}

/* ==========================================
   AA Mode (Overlay Style - Horizontal Scroll)
   ========================================== */
body.comment-aa-mode .st-comment-content,
body.comment-aa-mode .comment-content,
body.comment-aa-mode .comment-body {
    font-family: 'Monapo', 'Mona', 'IPAMonaPGothic', 'MS PGothic', 'ＭＳ Ｐゴシック', 'MS PMincho', 'ＭＳ Ｐ明朝', sans-serif !important;
    line-height: var(--opt-lh, 1.1) !important;
    font-size: var(--opt-fs, 16px) !important;
    
    /* 横スクロール設定（全体） */
    white-space: pre !important;       /* 自動改行を禁止 */
    overflow-x: auto !important;       /* 横にはみ出した場合はスクロール */
    word-wrap: normal !important;      /* 単語の折り返し禁止 */
    overflow-wrap: normal !important;  
    max-width: 100%;
    display: block;
    padding-bottom: 8px;
}

/* 【追加】AAモード時でも blockquote (引用) は通常通り折り返す設定 */
body.comment-aa-mode .st-comment-content blockquote,
body.comment-aa-mode .comment-content blockquote,
body.comment-aa-mode .comment-body blockquote {
    white-space: normal !important;      /* 引用内は改行する */
    word-wrap: break-word !important;    /* 単語の折り返しを許可 */
    overflow-wrap: break-word !important;
    overflow-x: visible !important;      /* スクロールバーを出さない */
    max-width: 100%;
    height: auto !important;
}

/* ==========================================
   Popout
   ========================================== */
.mutyun-popout {
    position: absolute;
    z-index: 99999;
    background-color: var(--cc-bg, #ffffff);
    color: var(--cc-text, #333333);
    border: var(--cc-bd-w, 1px) solid var(--cc-bd, #999999);
    border-radius: var(--cc-bd-r, 4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, var(--cc-sh, 0.2));
    padding: 12px;
    max-width: 400px;
    width: 90vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    pointer-events: none;
}
.mutyun-popout.mutyun-warning {
    background-color: var(--sr-bg, #fff5f5);
    color: var(--sr-text, #b91c1c);
    border: var(--sr-bd-w, 1px) solid var(--sr-bd, #cc0000);
    border-radius: var(--sr-bd-r, 4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, var(--sr-sh, 0.2));
}
.mutyun-popout.is-visible {
    opacity: 1;
    visibility: visible;
}
.mutyun-popout .st-comment-body {
    margin: 0; padding: 0; background: transparent; border: none;
}
.mutyun-popout .st-comment-meta {
    border-bottom: 1px solid #eee; padding-bottom: 6px; margin-bottom: 6px;
}