/* --- Base Container --- */
#nca-container {
    position: fixed;
    z-index: var(--nca-z-index, 1999);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    margin: 0;
}
#nca-container.nca-fading-out,
#nca-container.nca-hidden-on-scroll {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

@media ( max-width: 598px ) {
    #nca-container {
        display: none;
    }
}

/* =================================================================
    横書きモード (Horizontal)
================================================================= */
#nca-container.nca-horizontal {
    bottom: 2rem;
    padding: 0 1rem;
}
.nca-horizontal .nca-speech-bubble {
    padding: 2.2em;
    margin-top: 12px;
    background-color: var(--nca-bubble-rgba-color);
    border-radius: 10px;
    border: 2px solid #333;
}
.nca-horizontal .nca-speech-bubble::before {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border: 12px solid transparent;
    top: -24px; left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #333;
}
.nca-horizontal .nca-action-button {
    top: var(--nca-h-button-v-offset);
}
.nca-horizontal .nca-scroll-icon {
    left: 50%;
    animation: nca-float 1.5s ease-in-out infinite;
}
.nca-horizontal .nca-scroll-icon.up { top: 0; animation-direction: reverse; }
.nca-horizontal .nca-scroll-icon.down { bottom: 0; }


/* =================================================================
    縦書きモード (Vertical)
================================================================= */
#nca-container.nca-vertical {
    top: 50%;
    transform: translateY(-50%);
    padding: 1rem 0;
    margin-top: 1rem;
}

@media screen and (min-width: 992px) and (max-width:1199.98px) {
    #nca-container.nca-vertical {
        top: 65%;
        height: 50vh!important;
    }
}
.nca-vertical .nca-speech-bubble {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 3em;
    background-color: var(--nca-bubble-rgba-color);
    border-radius: 10px;
    border: 2px solid #333;
}
#nca-container.nca-vertical.nca-hidden-on-scroll {
    transform: translate(20px, -50%);
}
.nca-vertical .nca-content-wrapper { height: 100%; width: 100%; }
.nca-vertical .nca-content { 
    transition: transform 0.5s ease-in-out;
}

/* 吹き出し口のスタイル (CSSのみに変更) */
.nca-vertical .nca-speech-bubble::before,
.nca-vertical .nca-speech-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent; /* 共通の基本サイズ */
    display: block;
}

/* 枠線用の三角形 (::before を利用) */
.nca-vertical .nca-speech-bubble::before {
    /* border-color は各方向で設定 */
}

/* 内側の色用の三角形 (::after を追加) */
.nca-vertical .nca-speech-bubble::after {
    border-width: 10px; /* 枠線より少し小さくする */
    /* background-color と同じ色を border-color に設定 */
}


/* 左向きのくちばし */
.nca-vertical .beak-left::before {
    left: -10px; /* border-width + border-width_inner + border-width_bubble などで調整 */
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #333; /* 枠線の色 */
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.nca-vertical .beak-left::after {
    left: -7px; /* ::before より少し内側 */
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--nca-bubble-rgba-color); /* 吹き出しの背景色 */
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* 右向きのくちばし */
.nca-vertical .beak-right::before {
    right: -10px; /* border-width + border-width_inner + border-width_bubble などで調整 */
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #333; /* 枠線の色 */
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.nca-vertical .beak-right::after {
    right: -7px; /* ::before より少し内側 */
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--nca-bubble-rgba-color); /* 吹き出しの背景色 */
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* 上向きのくちばし */
.nca-vertical .beak-top::before {
    top: -26px; /* border-width + border-width_inner + border-width_bubble などで調整 */
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #333; /* 枠線の色 */
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}
.nca-vertical .beak-top::after {
    top: -22px; /* ::before より少し内側 */
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--nca-bubble-rgba-color); /* 吹き出しの背景色 */
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* 下向きのくちばし */
.nca-vertical .beak-bottom::before {
    bottom: -26px; /* border-width + border-width_inner + border-width_bubble などで調整 */
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #333; /* 枠線の色 */
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}
.nca-vertical .beak-bottom::after {
    bottom: -22px; /* ::before より少し内側 */
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--nca-bubble-rgba-color); /* 吹き出しの背景色 */
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}
.nca-vertical .nca-action-button {
    writing-mode: horizontal-tb;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

/* アイコンのスタイル */
.nca-vertical .nca-scroll-icon {
    top: 50%;
    transform: translateY(-50%);
    animation: nca-pulse 1.8s ease-in-out infinite;
}
.nca-vertical .nca-scroll-icon.prev { right: 0.5rem; }
.nca-vertical .nca-scroll-icon.next { left: 0.5rem; }

/* --- 共通コンポーネント --- */
.nca-speech-bubble { height: 100%; width: 100%; box-sizing: border-box; }
.nca-content-wrapper { height: 100%; overflow: hidden; }
.nca-content { margin: 0; padding: 0; word-wrap: break-word; line-height: 2; }
@media(max-width: 991.98px) {
    .nca-content { line-height: 1.8!important; }
}
.nca-scroll-icon { position: absolute; width: 32px; height: 32px; padding: 4px; opacity: 0!important; transition: opacity 0.3s; fill: currentColor; cursor: pointer; z-index: 2; box-sizing: border-box; pointer-events: none; }
.nca-scroll-icon.visible { opacity: 1!important; pointer-events: auto; }
@keyframes nca-float { 0% { margin-top: 0; } 50% { margin-top: 6px; } 100% { margin-top: 0; } }
@keyframes nca-pulse { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }
.nca-action-button { position: absolute; right: 12px; padding: 8px 14px; background-color: var(--nca-button-color, #0f2350); color: #fff; text-decoration: none; border-radius: 20px; font-weight: bold; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: background-color 0.3s, transform 0.2s; z-index: 10; border: 2px solid #fff; }
.nca-action-button:hover { filter: brightness(85%); }
.nca-action-button::after { content: ''; position: absolute; bottom: -8px; right: 16px; width: 0; height: 0; border: 8px solid transparent; border-top-color: var(--nca-button-color, #007bff); transition: border-top-color 0.3s; }
.nca-action-button:hover::after { filter: brightness(85%); }