/* ==========================================================
   サイバー・ネオン スタイリッシュ CSS (完全リフレッシュ版)
   ========================================================== */

/* ネオンスクロールバー */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.25);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 240, 255, 0.6);
    box-shadow: 0 0 10px #00F0FF;
}

.chat-message-anim {
    /* 完全固定・揺れゼロ */
}

/* 吹き出し: 自分 (サイバーグラデーション + ネオングロー) */
.bubble-mine {
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 50%, #D946EF 100%);
    color: #FFFFFF;
    border-radius: 20px 20px 4px 20px;
    position: relative;
    word-break: break-word;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* 吹き出し: 相手 (ダークサイバーガラス + ネオンエッジ) */
.bubble-other {
    background: rgba(18, 24, 38, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F1F5F9;
    border-radius: 20px 20px 20px 4px;
    border: 1px solid rgba(0, 240, 255, 0.25);
    position: relative;
    word-break: break-word;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 240, 255, 0.08);
}

/* ネオンパルスアニメーション */
@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 18px rgba(0, 240, 255, 0.8);
    }
}

.neon-pulse-cyan {
    animation: neonPulse 2s infinite ease-in-out;
}

/* 🍡 もちもちプルプルアニメーション */
@keyframes mochi-jiggle {
    0%, 100% {
        transform: scale(1, 1) rotate(0deg);
    }
    20% {
        transform: scale(1.02, 0.98) rotate(-0.4deg);
    }
    40% {
        transform: scale(0.985, 1.015) rotate(0.4deg);
    }
    60% {
        transform: scale(1.012, 0.988) rotate(-0.2deg);
    }
    80% {
        transform: scale(0.995, 1.005) rotate(0.1deg);
    }
}

.mochi-jiggle-anim {
    animation: mochi-jiggle 3.2s ease-in-out infinite;
    transform-origin: center bottom;
}

/* 🔥 ドラゴニック・フレア 猛炎アニメーション ＆ 燃え盛る火炎エフェクト */
@keyframes dragon-fire-blaze {
    0% {
        background-position: 0% 0%;
        box-shadow: 0 0 22px rgba(255, 38, 0, 0.95), 0 -6px 30px rgba(255, 120, 0, 0.85), 0 0 55px rgba(255, 60, 0, 0.7), inset 0 0 14px #FFE57F;
        border-color: #FF2600;
    }
    25% {
        background-position: 50% 30%;
        box-shadow: 0 0 30px rgba(255, 70, 0, 1), 0 -10px 42px rgba(255, 150, 0, 0.95), 0 0 70px rgba(255, 90, 0, 0.85), inset 0 0 18px #FFFBEB;
        border-color: #FF4500;
    }
    50% {
        background-position: 100% 70%;
        box-shadow: 0 0 40px rgba(255, 20, 0, 1), 0 -14px 55px rgba(255, 180, 0, 1), 0 0 85px rgba(255, 60, 0, 0.95), inset 0 0 22px #FFFDF5;
        border-color: #FF6600;
    }
    75% {
        background-position: 50% 100%;
        box-shadow: 0 0 28px rgba(255, 60, 0, 1), 0 -8px 38px rgba(255, 130, 0, 0.9), 0 0 65px rgba(255, 80, 0, 0.8), inset 0 0 16px #FFF5C0;
        border-color: #FF3700;
    }
    100% {
        background-position: 0% 0%;
        box-shadow: 0 0 22px rgba(255, 38, 0, 0.95), 0 -6px 30px rgba(255, 120, 0, 0.85), 0 0 55px rgba(255, 60, 0, 0.7), inset 0 0 14px #FFE57F;
        border-color: #FF2600;
    }
}

@keyframes flame-wave-top {
    0%, 100% {
        transform: translateY(0) scaleY(1) scaleX(1) skewX(0deg);
        filter: drop-shadow(0 -4px 8px rgba(255, 80, 0, 0.85)) brightness(1);
    }
    25% {
        transform: translateY(-4px) scaleY(1.3) scaleX(0.95) skewX(-3deg);
        filter: drop-shadow(0 -7px 14px rgba(255, 140, 0, 0.95)) brightness(1.2);
    }
    50% {
        transform: translateY(-1px) scaleY(1.08) scaleX(1.03) skewX(2deg);
        filter: drop-shadow(0 -5px 10px rgba(255, 60, 0, 0.9)) brightness(1.05);
    }
    75% {
        transform: translateY(-5px) scaleY(1.4) scaleX(0.92) skewX(-2.5deg);
        filter: drop-shadow(0 -9px 18px rgba(255, 180, 0, 1)) brightness(1.3);
    }
}

@keyframes flame-wave-bottom {
    0%, 100% {
        transform: translateY(0) scaleY(1) skewX(0deg);
        filter: drop-shadow(0 3px 6px rgba(255, 80, 0, 0.75));
    }
    35% {
        transform: translateY(3px) scaleY(1.25) skewX(1.8deg);
        filter: drop-shadow(0 5px 10px rgba(255, 120, 0, 0.9));
    }
    70% {
        transform: translateY(-1px) scaleY(0.92) skewX(-1.5deg);
        filter: drop-shadow(0 2px 5px rgba(255, 60, 0, 0.7));
    }
}

@keyframes dragon-ember-fly {
    0% {
        transform: translate(0, 0) scale(0.6);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translate(calc(var(--spark-x, 0px) * 0.3), -8px) scale(1.1);
    }
    70% {
        opacity: 0.9;
        transform: translate(calc(var(--spark-x, 0px) * 0.8), -24px) scale(0.9);
    }
    100% {
        transform: translate(var(--spark-x, 0px), -40px) scale(0.2);
        opacity: 0;
    }
}

.dragon-ember-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 10%, #FFE600 40%, #FF3700 80%, transparent 100%);
    box-shadow: 0 0 8px #FF6600, 0 0 16px #FFD700;
    pointer-events: none;
    z-index: 25;
    animation: dragon-ember-fly 1.5s infinite ease-out;
}

.flame-anim-top {
    animation: flame-wave-top 1.4s ease-in-out infinite;
    transform-origin: center bottom;
}

.flame-anim-bottom {
    animation: flame-wave-bottom 1.7s ease-in-out infinite;
    transform-origin: center top;
}

/* リアクションピル */
.reaction-pill {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: rgba(14, 20, 32, 0.9);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: #E2E8F0;
}
.reaction-pill:hover {
    transform: scale(1.1);
    border-color: #00F0FF;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}
.reaction-pill.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: #00F0FF;
    color: #00F0FF;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* アバター選択 */
.avatar-option.selected {
    background-color: rgba(0, 240, 255, 0.2);
    border: 2px solid #00F0FF;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
    transform: scale(1.08);
}

/* カラー選択 */
.color-option.selected {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px #080B12, 0 0 0 4px #00F0FF, 0 0 15px #00F0FF;
}

/* タップハイライト除去 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ライト背景時の視認性最適化 */
.theme-light-text .bubble-other {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0F172A !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

.theme-light-text .user-name-text {
    font-weight: 800 !important;
    filter: brightness(0.7) !important;
}

.theme-light-text span[class*="text-cyan-300"] {
    color: #475569 !important;
}

/* ==========================================================
   📱 スマホ・ステータスバー回避 ＆ 美しい角丸統一・大画面モーダルCSS
   ========================================================== */
#petz-modal {
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    padding-bottom: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

#petz-modal > div {
    width: 98vw !important;
    max-width: 540px !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 14px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 14px) !important;
    margin-top: 0px !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
}

#profile-modal, #gacha-result-modal, #rename-pen-modal {
    padding-top: calc(env(safe-area-inset-top, 0px) + 40px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
}

#profile-modal > div, #gacha-result-modal > div, #rename-pen-modal > div {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 60px) !important;
}

/* 📱 チャットヘッダーのセーフエリア完全対応（上部アイコン切れ・被りを徹底防止） */
#app > header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
    padding-bottom: 12px !important;
    min-height: calc(env(safe-area-inset-top, 0px) + 64px) !important;
    box-sizing: border-box !important;
}

@supports (padding-top: env(safe-area-inset-top)) {
    #app > header {
        padding-top: max(20px, calc(env(safe-area-inset-top) + 12px)) !important;
        min-height: max(72px, calc(env(safe-area-inset-top) + 64px)) !important;
    }
}

/* 🔒 非表示モーダルの画面覆い・クリック遮断を100%完全防止 */
.hidden {
    display: none !important;
}

/* 🥷 忍術ドロン！煙アニメーション（ダブりアイテムの破片へんげ演出） */
@keyframes ninjaSmokePuff {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    30% {
        transform: scale(1.4);
        opacity: 1;
        filter: blur(1px);
    }
    70% {
        transform: scale(1.8);
        opacity: 0.9;
        filter: blur(4px);
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
        filter: blur(10px);
    }
}

.ninja-smoke-anim {
    animation: ninjaSmokePuff 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* ==========================================================
   📱 携帯の横揺れ・グラグラ完全固定 ＆ 縦型ロック固定スタイル
   ========================================================== */
html {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    touch-action: pan-y !important;
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: auto !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    touch-action: pan-y !important;
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-touch-callout: none;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 📱 アプリ本体：横画面にしても常に中央に縦型スマホサイズ（max-width: 480px）で固定ロック */
#app {
    width: 100% !important;
    max-width: 480px !important;
    height: 100% !important;
    height: 100dvh !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
}

/* 📱 チャットタイムライン：縦スクロールのみ許可・横ズレを100%遮断 */
#chat-messages {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ========================================================
   💬 チャット吹き出しスキンシステム（超豪華・ハイクオリティデザイン）
   ======================================================== */

/* ⚡ 1. サイバーシアンフキダシ (SR) - シュッとした鋭角サイバーカット＆超近未来ホログラム！ */
.bubble-mine.bubble-skin-bubble_cyber_blue,
.bubble-other.bubble-skin-bubble_cyber_blue {
    position: relative !important;
    background: linear-gradient(135deg, rgba(4, 16, 36, 0.96) 0%, rgba(2, 38, 68, 0.96) 60%, rgba(4, 20, 42, 0.96) 100%) !important;
    border: 1.8px solid #00F0FF !important;
    border-right: 3.5px solid #00F0FF !important; /* 右側にシュッとしたサイバーバー */
    border-radius: 3px 16px 2px 14px !important; /* 鋭角と流線型のシュッとした非対称カット */
    box-shadow: 
        0 0 16px rgba(0, 240, 255, 0.8), 
        inset 0 0 12px rgba(0, 240, 255, 0.25), 
        0 4px 15px rgba(0, 0, 0, 0.6) !important;
    color: #E0FFFF !important;
    font-family: 'Chakra Petch', 'Orbitron', 'M PLUS 1p', sans-serif !important;
    font-weight: 700 !important;
    font-style: italic !important; /* スピード感あふれるシュッとした斜体 */
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.85), 0 0 16px rgba(0, 240, 255, 0.4) !important;
    letter-spacing: 0.08em !important;
    backdrop-filter: blur(12px) !important;
    padding: 9px 16px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.bubble-other.bubble-skin-bubble_cyber_blue {
    border-radius: 16px 3px 14px 2px !important;
    border-right: 1.8px solid #00F0FF !important;
    border-left: 3.5px solid #00F0FF !important; /* 相手側は左側にサイバーバー */
}

/* ⚡ 吹き出し右上のサイバーマーカー */
.bubble-mine.bubble-skin-bubble_cyber_blue::after {
    content: '⚡' !important;
    position: absolute !important;
    top: -10px !important;
    right: -6px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 8px #00F0FF) !important;
    pointer-events: none !important;
    animation: pulse 1.8s infinite ease-in-out !important;
}
.bubble-other.bubble-skin-bubble_cyber_blue::after {
    content: '⚡' !important;
    position: absolute !important;
    top: -10px !important;
    left: -6px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 8px #00F0FF) !important;
    pointer-events: none !important;
    animation: pulse 1.8s infinite ease-in-out !important;
}

.bubble-mine.bubble-skin-bubble_cyber_blue p,
.bubble-other.bubble-skin-bubble_cyber_blue p {
    position: relative !important;
    z-index: 1 !important;
    font-family: 'Chakra Petch', 'Orbitron', 'M PLUS 1p', sans-serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    letter-spacing: 0.08em !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.85), 0 0 16px rgba(0, 240, 255, 0.4) !important;
}

/* 🌟 2. 黄金のネオンフキダシ (UR 最高峰) - 重厚メタル鉄板 ＆ ギラギラ黄金オーラ ＆ キラキラ✨増量 ＆ 鮮明フォント！ */
.bubble-mine.bubble-skin-bubble_gold_neon,
.bubble-other.bubble-skin-bubble_gold_neon {
    position: relative !important;
    background: linear-gradient(135deg, #181005 0%, #38240A 25%, #6B4912 50%, #38240A 75%, #181005 100%) !important;
    border: 2.5px solid #FDE047 !important;
    border-radius: 20px 20px 4px 20px !important;
    box-shadow: 
        0 0 35px rgba(250, 204, 21, 0.95),
        0 0 65px rgba(234, 179, 8, 0.55),
        0 8px 25px rgba(0, 0, 0, 0.85),
        inset 0 2px 5px rgba(254, 240, 138, 0.8),
        inset 0 -3px 6px rgba(0, 0, 0, 0.9),
        inset 0 0 15px rgba(234, 179, 8, 0.5) !important;
    color: #FFFFFF !important;
    font-family: 'Zen Kaku Gothic New', 'IBM Plex Sans JP', 'Montserrat', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    overflow: visible !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    margin-right: 8px !important;
}
.bubble-other.bubble-skin-bubble_gold_neon {
    border-radius: 20px 20px 20px 4px !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* 🌟 左上に舞う黄金のキラキラ星 ✨ */
.bubble-mine.bubble-skin-bubble_gold_neon::before {
    content: '✨' !important;
    position: absolute !important;
    top: -12px !important;
    left: -6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 1)) !important;
    pointer-events: none !important;
    animation: pulse 2s infinite ease-in-out !important;
}
.bubble-other.bubble-skin-bubble_gold_neon::before {
    content: '✨' !important;
    position: absolute !important;
    top: -12px !important;
    right: -6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 1)) !important;
    pointer-events: none !important;
    animation: pulse 2s infinite ease-in-out !important;
}

/* 🌟 右上に舞う増量キラキラ星 ✨ ✨ */
.bubble-mine.bubble-skin-bubble_gold_neon::after {
    content: '✨ ✨' !important;
    position: absolute !important;
    top: -12px !important;
    right: -8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 1)) !important;
    pointer-events: none !important;
    animation: bounce 2.2s infinite ease-in-out !important;
}
.bubble-other.bubble-skin-bubble_gold_neon::after {
    content: '✨ ✨' !important;
    position: absolute !important;
    top: -12px !important;
    left: -8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 1)) !important;
    pointer-events: none !important;
    animation: bounce 2.2s infinite ease-in-out !important;
}

.bubble-mine.bubble-skin-bubble_gold_neon p,
.bubble-other.bubble-skin-bubble_gold_neon p {
    position: relative !important;
    z-index: 1 !important;
    color: #FFFFFF !important;
    font-family: 'Zen Kaku Gothic New', 'IBM Plex Sans JP', 'Montserrat', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(250, 204, 21, 0.9), 0 0 20px rgba(234, 179, 8, 0.6) !important;
}

/* ☁️ 3. もこもこ雲フキダシ (SSR) - 本物のぷくぷく・モコモコ雲シェイプ！ */
.bubble-mine.bubble-skin-bubble_cloud,
.bubble-other.bubble-skin-bubble_cloud {
    position: relative !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 50%, #E0F2FE 100%) !important;
    border: 3px solid #FFFFFF !important;
    border-radius: 30px !important;
    box-shadow: 
        0 0 0 3px rgba(56, 189, 248, 0.45),
        0 8px 25px rgba(56, 189, 248, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 -3px 6px rgba(186, 230, 253, 0.7),
        inset 0 3px 6px rgba(255, 255, 255, 0.9) !important;
    color: #0369A1 !important;
    font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    overflow: visible !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
}

/* ☁️ 雲の上部モコモコバブル */
.bubble-mine.bubble-skin-bubble_cloud::before,
.bubble-other.bubble-skin-bubble_cloud::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    left: 22% !important;
    width: 24px !important;
    height: 18px !important;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    box-shadow: 
        18px -4px 0 3px #FFFFFF,
        34px -1px 0 0px #FFFFFF,
        0 -2px 0 2px rgba(56, 189, 248, 0.45),
        18px -6px 0 4px rgba(56, 189, 248, 0.45),
        34px -3px 0 2px rgba(56, 189, 248, 0.45) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ☁️ 雲の下部モコモコバブル */
.bubble-mine.bubble-skin-bubble_cloud::after,
.bubble-other.bubble-skin-bubble_cloud::after {
    content: '' !important;
    position: absolute !important;
    bottom: -9px !important;
    right: 22% !important;
    width: 22px !important;
    height: 16px !important;
    background: #E0F2FE !important;
    border-radius: 50% !important;
    box-shadow: 
        -16px 2px 0 2px #E0F2FE,
        -32px 0px 0 0px #E0F2FE,
        0 2px 0 2px rgba(56, 189, 248, 0.45),
        -16px 4px 0 3px rgba(56, 189, 248, 0.45),
        -32px 2px 0 2px rgba(56, 189, 248, 0.45) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.bubble-mine.bubble-skin-bubble_cloud p,
.bubble-other.bubble-skin-bubble_cloud p {
    position: relative !important;
    z-index: 1 !important;
    color: #0369A1 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* 👾 4. 8bitレトロドットフキダシ (SSR) - 完全アンチエイリアスOFF・本格ファミコンドット絵！ */
.bubble-mine.bubble-skin-bubble_pixel,
.bubble-other.bubble-skin-bubble_pixel {
    position: relative !important;
    background: #08080C !important;
    border: 3px solid #FFFFFF !important;
    border-radius: 0px !important; /* 完全なカクカク四角 */
    box-shadow: 
        5px 5px 0px #00FF9D, 
        5px 5px 0px 2px #000000, 
        0 0 15px rgba(0, 255, 157, 0.4) !important;
    color: #FFFFFF !important;
    font-family: 'DotGothic16', 'Silkscreen', 'Press Start 2P', monospace !important;
    font-weight: 900 !important;
    font-size: 16px !important; /* 16px固定で最も美しいドット絵に */
    line-height: 1.5 !important;
    letter-spacing: 0.08em !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
    text-rendering: geometricPrecision !important;
    image-rendering: pixelated !important;
    overflow: visible !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    margin-right: 8px !important;
}
.bubble-other.bubble-skin-bubble_pixel {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* 👾 吹き出しの上に浮かぶレトロインベーダー */
.bubble-mine.bubble-skin-bubble_pixel::after {
    content: '👾' !important;
    position: absolute !important;
    top: -12px !important;
    right: -8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    filter: drop-shadow(2px 2px 0px #000000) !important;
    pointer-events: none !important;
    image-rendering: pixelated !important;
}
.bubble-other.bubble-skin-bubble_pixel::after {
    content: '👾' !important;
    position: absolute !important;
    top: -12px !important;
    left: -8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    filter: drop-shadow(2px 2px 0px #000000) !important;
    pointer-events: none !important;
    image-rendering: pixelated !important;
}

.bubble-mine.bubble-skin-bubble_pixel p,
.bubble-other.bubble-skin-bubble_pixel p {
    position: relative !important;
    z-index: 1 !important;
    color: #FFFFFF !important;
    font-family: 'DotGothic16', 'Silkscreen', 'Press Start 2P', monospace !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.08em !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
    text-rendering: geometricPrecision !important;
    text-shadow: 2px 2px 0px #000000, 0 0 8px rgba(0, 255, 157, 0.6) !important;
}

/* 💖 5. ピンクラブラブフキダシ (SR) - つるつるてかてかグロス ＆ 周りにランダム💖 ＆ 手書き風フォント！ */
.bubble-mine.bubble-skin-bubble_pink_heart,
.bubble-other.bubble-skin-bubble_pink_heart {
    position: relative !important;
    background: linear-gradient(180deg, #FF66B2 0%, #FF1493 48%, #E6007A 50%, #FF3399 100%) !important;
    border: 2.5px solid #FFF0F5 !important;
    border-radius: 24px 24px 6px 24px !important;
    box-shadow: 
        0 0 25px rgba(255, 105, 180, 0.85),
        0 0 12px rgba(255, 20, 147, 0.6),
        0 6px 18px rgba(0, 0, 0, 0.35),
        inset 0 4px 10px rgba(255, 255, 255, 0.9),
        inset 0 -4px 10px rgba(153, 0, 77, 0.6) !important;
    color: #FFFFFF !important;
    font-family: 'Hachi Maru Pop', 'Yomogi', 'Kiwi Maru', cursive, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    overflow: visible !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    margin-right: 8px !important;
}
.bubble-other.bubble-skin-bubble_pink_heart {
    border-radius: 24px 24px 24px 6px !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* 💖 吹き出しの右上にちょこんと浮かぶキュートな「💕」 */
.bubble-mine.bubble-skin-bubble_pink_heart::after {
    content: '💕' !important;
    position: absolute !important;
    top: -10px !important;
    right: -8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.9)) !important;
    pointer-events: none !important;
    animation: bounce 2s infinite ease-in-out !important;
}
.bubble-other.bubble-skin-bubble_pink_heart::after {
    content: '💕' !important;
    position: absolute !important;
    top: -10px !important;
    left: -8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.9)) !important;
    pointer-events: none !important;
    animation: bounce 2s infinite ease-in-out !important;
}

.bubble-mine.bubble-skin-bubble_pink_heart p,
.bubble-other.bubble-skin-bubble_pink_heart p {
    position: relative !important;
    z-index: 1 !important;
    color: #FFFFFF !important;
    font-family: 'Hachi Maru Pop', 'Yomogi', 'Kiwi Maru', cursive, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(136, 0, 68, 0.8) !important;
}

/* 📜 6. アンティーク羊皮紙フキダシ (R) - 魔法洋書＆クラシックブロンズ */
.bubble-mine.bubble-skin-bubble_vintage,
.bubble-other.bubble-skin-bubble_vintage {
    background: linear-gradient(135deg, #2E1A0C 0%, #4D2D16 50%, #2E1A0C 100%) !important;
    border: 2px solid #D97706 !important;
    border-radius: 14px 14px 4px 14px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(217, 119, 6, 0.25) !important;
    color: #FEF3C7 !important;
    font-family: 'Cinzel', 'Times New Roman', serif !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
.bubble-other.bubble-skin-bubble_vintage {
    border-radius: 14px 14px 14px 4px !important;
}










/* ==========================================================
   📱 モバイル対応・返信引用＆フキダシ画面はみ出し完全防止
   ========================================================== */
.chat-message-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.chat-message-item > div {
    max-width: 86% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    .chat-message-item > div {
        max-width: 78% !important;
    }
}

.bubble-mine, .bubble-other {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.reply-quote-box {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.reply-quote-box > div,
.reply-quote-box > p {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================
   🌌 超美麗・近未来サイバーネオン背景アニメーション（流動オーラ＆グリッド）
   ========================================================== */
@keyframes auroraFloatCyan {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.35;
    }
    33% {
        transform: translate(35px, 45px) scale(1.18) rotate(45deg);
        opacity: 0.55;
    }
    66% {
        transform: translate(-25px, 30px) scale(0.9) rotate(-30deg);
        opacity: 0.4;
    }
}

@keyframes auroraFloatMagenta {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.35;
    }
    33% {
        transform: translate(-40px, -35px) scale(1.22) rotate(-40deg);
        opacity: 0.6;
    }
    66% {
        transform: translate(30px, -50px) scale(0.92) rotate(35deg);
        opacity: 0.42;
    }
}

@keyframes auroraFloatPurple {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(45px, -40px) scale(1.2);
        opacity: 0.55;
    }
}

@keyframes gridDrift {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 60px;
    }
}

@keyframes scanlineGlitch {
    0%, 100% {
        opacity: 0.15;
    }
    50% {
        opacity: 0.25;
    }
}

.animate-aurora-cyan {
    animation: auroraFloatCyan 14s ease-in-out infinite alternate;
}

.animate-aurora-magenta {
    animation: auroraFloatMagenta 16s ease-in-out infinite alternate;
}

.animate-aurora-purple {
    animation: auroraFloatPurple 18s ease-in-out infinite alternate;
}

.animate-grid-drift {
    animation: gridDrift 10s linear infinite;
}

.bg-cyber-grid {
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.09) 1px, transparent 1px);
    background-size: 32px 32px;
}

.bg-scanlines {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.35)
    );
    background-size: 100% 4px;
    animation: scanlineGlitch 4s ease-in-out infinite alternate;
}

/* 🍙 7. お米粒ドットフキダシ (SSR) - 散りばめられた白米ドット＆海苔フレーム＆ふっくらツヤツヤ */
.bubble-mine.bubble-skin-bubble_rice_dot,
.bubble-other.bubble-skin-bubble_rice_dot,
.msg-bubble.bubble-skin-bubble_rice_dot {
    position: relative !important;
    background-color: #FFFDF8 !important;
    background-image: 
        radial-gradient(circle, #FFFFFF 2.5px, transparent 2.5px),
        radial-gradient(circle, #FEF08A 1.5px, transparent 1.8px),
        radial-gradient(circle, #CBD5E1 1.8px, transparent 2px) !important;
    background-size: 22px 22px, 34px 34px, 18px 18px !important;
    background-position: 0 0, 11px 11px, 5px 17px !important;
    border: 3px solid #0F172A !important;
    border-radius: 24px 24px 6px 24px !important;
    box-shadow: 
        0 4px 18px rgba(245, 158, 11, 0.25),
        0 0 0 2px #FEF3C7,
        0 0 16px rgba(254, 240, 138, 0.4),
        inset 0 2px 6px rgba(255, 255, 255, 0.95),
        inset 0 -2px 6px rgba(226, 232, 240, 0.5) !important;
    color: #0F172A !important;
    font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    overflow: visible !important;
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    margin-right: 8px !important;
}
.bubble-other.bubble-skin-bubble_rice_dot,
.msg-bubble.bubble-other.bubble-skin-bubble_rice_dot {
    border-radius: 24px 24px 24px 6px !important;
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* 🍙 吹き出しの上にちょこんと乗る可愛いミニおにぎり＆米粒 */
.bubble-mine.bubble-skin-bubble_rice_dot::after,
.msg-bubble.bubble-mine.bubble-skin-bubble_rice_dot::after {
    content: '🍙' !important;
    position: absolute !important;
    top: -12px !important;
    right: -8px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35)) !important;
    pointer-events: none !important;
    animation: bounce 2.2s infinite ease-in-out !important;
}
.bubble-other.bubble-skin-bubble_rice_dot::after,
.msg-bubble.bubble-other.bubble-skin-bubble_rice_dot::after {
    content: '🍙' !important;
    position: absolute !important;
    top: -12px !important;
    left: -8px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35)) !important;
    pointer-events: none !important;
    animation: bounce 2.2s infinite ease-in-out !important;
}

.bubble-mine.bubble-skin-bubble_rice_dot p,
.bubble-other.bubble-skin-bubble_rice_dot p,
.msg-bubble.bubble-skin-bubble_rice_dot p {
    position: relative !important;
    z-index: 1 !important;
    color: #0F172A !important;
    font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* 🏷️ スクロールバー非表示ユーティリティ */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}



/* 🍁 もみじ舞い散る紅葉フキダシ (SSR) */
.bubble-mine.bubble-skin-bubble_autumn_maple,
.bubble-other.bubble-skin-bubble_autumn_maple,
.msg-bubble.bubble-skin-bubble_autumn_maple {
    background: linear-gradient(135deg, #7C2D12 0%, #991B1B 50%, #B91C1C 100%) !important;
    border: 2px solid #F59E0B !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
    color: #FEF3C7 !important;
    position: relative;
}
.bubble-mine.bubble-skin-bubble_autumn_maple::after,
.msg-bubble.bubble-mine.bubble-skin-bubble_autumn_maple::after {
    content: "🍁";
    position: absolute;
    top: -10px;
    right: 8px;
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.8));
}
.bubble-other.bubble-skin-bubble_autumn_maple::after,
.msg-bubble.bubble-other.bubble-skin-bubble_autumn_maple::after {
    content: "🍁";
    position: absolute;
    top: -10px;
    left: 8px;
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.8));
}

/* 🎃 ハロウィン・ナイトパープル (UR) */
.bubble-mine.bubble-skin-bubble_halloween_night,
.bubble-other.bubble-skin-bubble_halloween_night,
.msg-bubble.bubble-skin-bubble_halloween_night {
    background: linear-gradient(135deg, #1E1035 0%, #3B0764 55%, #2E1065 100%) !important;
    border: 2px solid #F97316 !important;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.55), 0 0 6px rgba(168, 85, 247, 0.4) !important;
    color: #FAF5FF !important;
    position: relative;
}
.bubble-mine.bubble-skin-bubble_halloween_night::after,
.msg-bubble.bubble-mine.bubble-skin-bubble_halloween_night::after {
    content: "🎃";
    position: absolute;
    top: -10px;
    right: 8px;
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.9));
}
.bubble-other.bubble-skin-bubble_halloween_night::after,
.msg-bubble.bubble-other.bubble-skin-bubble_halloween_night::after {
    content: "🎃";
    position: absolute;
    top: -10px;
    left: 8px;
    font-size: 16px;
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.9));
}

/* 🌾 お月見ススキの黄金フキダシ (SR) */
.bubble-mine.bubble-skin-bubble_moon_gold,
.bubble-other.bubble-skin-bubble_moon_gold,
.msg-bubble.bubble-skin-bubble_moon_gold {
    background: linear-gradient(135deg, #0A1128 0%, #1C2541 65%, #16203B 100%) !important;
    border: 2px solid #FDE047 !important;
    box-shadow: 0 0 14px rgba(253, 224, 71, 0.45) !important;
    color: #FEF9C3 !important;
    position: relative;
}
.bubble-mine.bubble-skin-bubble_moon_gold::after,
.msg-bubble.bubble-mine.bubble-skin-bubble_moon_gold::after {
    content: "🌕";
    position: absolute;
    top: -9px;
    right: 8px;
    font-size: 15px;
    filter: drop-shadow(0 0 5px rgba(253, 224, 71, 0.8));
}
.bubble-other.bubble-skin-bubble_moon_gold::after,
.msg-bubble.bubble-other.bubble-skin-bubble_moon_gold::after {
    content: "🌕";
    position: absolute;
    top: -9px;
    left: 8px;
    font-size: 15px;
    filter: drop-shadow(0 0 5px rgba(253, 224, 71, 0.8));
}

/* ☕ ほっこりカフェラテフキダシ (R) */
.bubble-mine.bubble-skin-bubble_cafe_latte,
.bubble-other.bubble-skin-bubble_cafe_latte,
.msg-bubble.bubble-skin-bubble_cafe_latte {
    background: linear-gradient(135deg, #78350F 0%, #92400E 50%, #A16207 100%) !important;
    border: 2px solid #FED7AA !important;
    box-shadow: 0 0 10px rgba(254, 215, 170, 0.35) !important;
    color: #FFF7ED !important;
    position: relative;
}
.bubble-mine.bubble-skin-bubble_cafe_latte::after,
.msg-bubble.bubble-mine.bubble-skin-bubble_cafe_latte::after {
    content: "☕";
    position: absolute;
    top: -9px;
    right: 8px;
    font-size: 15px;
    filter: drop-shadow(0 0 4px rgba(254, 215, 170, 0.7));
}
.bubble-other.bubble-skin-bubble_cafe_latte::after,
.msg-bubble.bubble-other.bubble-skin-bubble_cafe_latte::after {
    content: "☕";
    position: absolute;
    top: -9px;
    left: 8px;
    font-size: 15px;
    filter: drop-shadow(0 0 4px rgba(254, 215, 170, 0.7));
}

/* 🍂 アンティーク枯葉クラフト (R) */
.bubble-mine.bubble-skin-bubble_kraft_leaves,
.bubble-other.bubble-skin-bubble_kraft_leaves,
.msg-bubble.bubble-skin-bubble_kraft_leaves {
    background: linear-gradient(135deg, #573A25 0%, #6E4527 50%, #52341F 100%) !important;
    border: 2px dashed #D97706 !important;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.3) !important;
    color: #FEF3C7 !important;
    position: relative;
}
.bubble-mine.bubble-skin-bubble_kraft_leaves::after,
.msg-bubble.bubble-mine.bubble-skin-bubble_kraft_leaves::after {
    content: "🍂";
    position: absolute;
    top: -9px;
    right: 8px;
    font-size: 15px;
    filter: drop-shadow(0 0 4px rgba(217, 119, 6, 0.7));
}
.bubble-other.bubble-skin-bubble_kraft_leaves::after,
.msg-bubble.bubble-other.bubble-skin-bubble_kraft_leaves::after {
    content: "🍂";
    position: absolute;
    top: -9px;
    left: 8px;
    font-size: 15px;
    filter: drop-shadow(0 0 4px rgba(217, 119, 6, 0.7));
}