/* ==========================
   FUFUTIETIE 統合デザイン
   - 青いグラデーション背景
   - 大型アバター配置  
   - 半透明チャットバブル
   - 白いマンダラパターン
   - スマートフォン最適化
========================== */

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

/* 動的レスポンシブ変数 - 画面サイズに応じて自動調整 */
:root {
    /* ビューポート単位を使用した基本サイズ */
    --base-unit: 1vmin; /* 画面の小さい方の1% */
    --text-scale: calc(0.8rem + 0.5vw); /* 動的フォントサイズ */
    --padding-scale: calc(0.4rem + 0.8vw); /* 最適化されたパディング */
    --margin-scale: calc(0.2rem + 0.6vw); /* 最適化されたマージン */
    --border-radius-scale: calc(0.5rem + 0.5vw); /* 動的角丸 */
    
    /* チャットエリア関連 */
    --chat-area-height: clamp(350px, 50vh, 700px); /* 画面高さの50%、最小350px、最大700px（改善） */
    --message-max-height: clamp(300px, 60vh, 900px); /* メッセージ最大高さ（長文対応） */
    --message-width: clamp(300px, 85vw, 800px); /* メッセージ幅 */
    
    /* 入力エリア関連 */
    --input-bottom: clamp(8px, 2vh, 25px); /* 入力エリアの下部位置（さらにコンパクト化） */
    --input-height: clamp(60px, 8vh, 80px); /* 入力エリア高さ */
    --input-total-space: calc(var(--input-bottom) + var(--input-height) + 20px); /* 入力欄が占める総空間 */
    
    /* フォントサイズ階層 */
    --font-xs: clamp(0.7rem, 2vw, 0.8rem);
    --font-sm: clamp(0.8rem, 2.5vw, 0.9rem);
    --font-md: clamp(0.9rem, 3vw, 1rem);
    --font-lg: clamp(1.1rem, 4vw, 1.3rem);
    --font-xl: clamp(1.3rem, 5vw, 1.8rem);
    --font-xxl: clamp(1.8rem, 6vw, 2.5rem);
}

/* デフォルト: 白い背景バリエーション */
body {
    font-family: 'Inter', sans-serif;
    /* シンプルな白い背景 */
    background: 
        url('forest_background.jpg') center center / cover no-repeat fixed,
        #FFFFFF; /* 真っ白の標準背景 */
    color: #333333; /* 読みやすい濃いグレー */
    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* 青いグラデーション背景バリエーション（従来デザイン保持） */
body.blue-theme {
    background: 
        url('forest_background.jpg') center center / cover no-repeat fixed,
        linear-gradient(135deg, 
            #1A1F6C 0%,    /* 深い青 */
            #2A2F7C 25%,   /* 中間青 */
            #3A3F8C 50%,   /* 中間青紫 */
            #4A3D9E 75%,   /* 紫がかった青 */
            #5A4DAE 100%   /* より紫がかった青 */
        );
    color: #FFFFFF;
}

/* メインタイトル - FUFUTIETIE */
.main-title-container {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
    text-align: center;
    /* 完全透過設定 */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* メインロゴコンテナ */
.main-logo {
    display: inline-block;
    position: relative;
    /* 完全透過設定 */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* 画像ロゴスタイル */
.logo-image {
    height: clamp(40px, 8vw, 80px);
    width: auto;
    max-width: 90vw;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    /* 透過PNG完全対応 - 強化版 */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /* 背景透過強制 */
    mix-blend-mode: normal;
    isolation: isolate;
    /* 視覚エフェクト */
    filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4));
    animation: logoGlow 3s ease-in-out infinite;
    /* 画像レンダリング最適化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* PNG透過部分の処理最適化 */
    object-fit: contain;
    object-position: center;
}

.logo-image.loaded {
    opacity: 1;
}

/* フォールバック用テキストロゴ */
.fallback-title {
    font-size: var(--font-xxl);
    font-weight: 700;
    color: #FF6B35;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    animation: titleGlow 3s ease-in-out infinite;
    letter-spacing: clamp(1px, 0.5vw, 3px);
    margin: 0;
    display: none; /* デフォルトで非表示（画像読み込み失敗時に表示） */
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    .logo-image {
        height: clamp(35px, 7vw, 70px);
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
    }
    
    .main-logo {
        background: none !important;
        background-color: transparent !important;
    }
}

@media (max-width: 480px) {
    .logo-image {
        height: clamp(30px, 6vw, 60px);
        background: transparent;
    }
    
    .main-title-container {
        top: 30px;
        background: transparent;
    }
    
    .main-logo {
        background: transparent;
    }
}

/* 超小型スマートフォン対応 */
@media (max-width: 360px) {
    .logo-image {
        height: clamp(25px, 5vw, 50px);
        background: transparent;
    }
    
    .main-title-container {
        top: 25px;
        background: transparent;
    }
    
    .main-logo {
        background: transparent;
    }
}

/* 横向きスマートフォン対応 */
@media (max-height: 500px) and (orientation: landscape) {
    .logo-image {
        height: clamp(25px, 4vh, 45px);
        background: transparent;
    }
    
    .main-title-container {
        top: 20px;
        background: transparent;
    }
    
    .main-logo {
        background: transparent;
    }
}

/* 画像ロゴ用のグローエフェクト */
@keyframes logoGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4)); 
    }
    50% { 
        filter: drop-shadow(0 0 25px rgba(255, 107, 53, 0.7)) 
                drop-shadow(0 0 35px rgba(255, 107, 53, 0.5)); 
    }
}

/* 従来のテキストタイトル（フォールバック用） */
.main-title {
    font-size: var(--font-xxl);
    font-weight: 700;
    color: #FF6B35;
    text-align: center;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    animation: titleGlow 3s ease-in-out infinite;
    letter-spacing: clamp(1px, 0.5vw, 3px);
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 107, 53, 0.6); }
    50% { text-shadow: 0 0 30px rgba(255, 107, 53, 0.9), 0 0 40px rgba(255, 107, 53, 0.7); }
}

/* 白いマンダラパターン */
.mandala-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* 曼荼羅専用のグラデーション背景を追加 */
    background: 
        radial-gradient(
            ellipse at 30% 20%,
            rgba(138, 43, 226, 0.15) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 70% 80%,
            rgba(75, 0, 130, 0.12) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at center,
            rgba(25, 25, 112, 0.08) 0%,
            rgba(72, 61, 139, 0.06) 40%,
            transparent 70%
        );
    /* オーロラ効果を追加 */
    overflow: hidden;
}

.mandala-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.mandala1 {
    width: clamp(400px, 80vw, 800px);
    height: clamp(400px, 80vw, 800px);
    animation: rotateClockwise 60s linear infinite;
    border-style: dashed;
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.mandala2 {
    width: clamp(300px, 60vw, 600px);
    height: clamp(300px, 60vw, 600px);
    animation: rotateCounterClockwise 45s linear infinite;
    border-style: dotted;
    box-shadow: 
        0 0 15px rgba(255, 182, 193, 0.3),
        inset 0 0 15px rgba(255, 182, 193, 0.15);
}

.mandala3 {
    width: clamp(200px, 40vw, 400px);
    height: clamp(200px, 40vw, 400px);
    animation: rotateClockwise 30s linear infinite;
    border-style: solid;
    box-shadow: 
        0 0 10px rgba(255, 107, 53, 0.4),
        inset 0 0 10px rgba(255, 107, 53, 0.2);
}

/* 追加の曼荼羅レイヤー */
.mandala4 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(500px, 90vw, 900px);
    height: clamp(500px, 90vw, 900px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rotateClockwise 90s linear infinite;
    border-style: double;
    box-shadow: 
        0 0 30px rgba(138, 43, 226, 0.3),
        inset 0 0 30px rgba(138, 43, 226, 0.15);
}

.mandala5 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(150px, 30vw, 300px);
    height: clamp(150px, 30vw, 300px);
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rotateCounterClockwise 25s linear infinite;
    border-style: ridge;
    box-shadow: 
        0 0 8px rgba(255, 215, 0, 0.5),
        inset 0 0 8px rgba(255, 215, 0, 0.25);
}

/* 曼荼羅ジオメトリック要素 */
.mandala-geometry {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(600px, 100vw, 1000px);
    height: clamp(600px, 100vw, 1000px);
    transform: translate(-50%, -50%);
    animation: rotateClockwise 120s linear infinite;
}

.mandala-geometry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent 100%
    );
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.mandala-geometry::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.3) 80%,
        transparent 100%
    );
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* 曼荼羅パーティクル効果 */
.mandala-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(800px, 120vw, 1200px);
    height: clamp(800px, 120vw, 1200px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mandala-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: mandalaParticleFloat 8s infinite ease-in-out;
}

.mandala-particle:nth-child(1) { 
    top: 10%; left: 50%; 
    animation-delay: 0s; 
    background: rgba(255, 107, 53, 0.8);
}
.mandala-particle:nth-child(2) { 
    top: 20%; left: 80%; 
    animation-delay: 1s; 
    background: rgba(138, 43, 226, 0.8);
}
.mandala-particle:nth-child(3) { 
    top: 50%; left: 90%; 
    animation-delay: 2s; 
    background: rgba(255, 215, 0, 0.8);
}
.mandala-particle:nth-child(4) { 
    top: 80%; left: 80%; 
    animation-delay: 3s; 
    background: rgba(255, 182, 193, 0.8);
}
.mandala-particle:nth-child(5) { 
    top: 90%; left: 50%; 
    animation-delay: 4s; 
    background: rgba(255, 107, 53, 0.8);
}
.mandala-particle:nth-child(6) { 
    top: 80%; left: 20%; 
    animation-delay: 5s; 
    background: rgba(138, 43, 226, 0.8);
}
.mandala-particle:nth-child(7) { 
    top: 50%; left: 10%; 
    animation-delay: 6s; 
    background: rgba(255, 215, 0, 0.8);
}
.mandala-particle:nth-child(8) { 
    top: 20%; left: 20%; 
    animation-delay: 7s; 
    background: rgba(255, 182, 193, 0.8);
}

@keyframes rotateClockwise {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateCounterClockwise {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

/* 曼荼羅パーティクルアニメーション */
@keyframes mandalaParticleFloat {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }
    25% { 
        transform: scale(1.3) rotate(90deg);
        opacity: 0.8;
    }
    50% { 
        transform: scale(0.8) rotate(180deg);
        opacity: 1;
    }
    75% { 
        transform: scale(1.2) rotate(270deg);
        opacity: 0.7;
    }
}

/* 曼荼羅呼吸アニメーション */
@keyframes mandalaBreathing {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.8;
    }
}

/* 曼荼羅フラクタル要素 */
.mandala-fractal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(350px, 70vw, 700px);
    height: clamp(350px, 70vw, 700px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mandala-fractal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    animation: rotateCounterClockwise 35s linear infinite;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.3),
        inset 0 0 15px rgba(255, 215, 0, 0.2);
}

.mandala-fractal::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: 40%;
    border: 2px solid rgba(255, 182, 193, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    animation: rotateClockwise 28s linear infinite;
    box-shadow: 
        0 0 12px rgba(255, 182, 193, 0.4),
        inset 0 0 12px rgba(255, 182, 193, 0.25);
}

/* 曼荼羅スピリチュアルシンボル */
.mandala-symbols {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(200px, 40vw, 400px);
    height: clamp(200px, 40vw, 400px);
    transform: translate(-50%, -50%);
    animation: rotateClockwise 150s linear infinite;
    pointer-events: none;
}

.mandala-symbol {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
}

.mandala-symbol:nth-child(1) { top: 0%; left: 50%; transform: translateX(-50%); }
.mandala-symbol:nth-child(2) { top: 15%; right: 15%; }
.mandala-symbol:nth-child(3) { top: 50%; right: 0%; transform: translateY(-50%); }
.mandala-symbol:nth-child(4) { bottom: 15%; right: 15%; }
.mandala-symbol:nth-child(5) { bottom: 0%; left: 50%; transform: translateX(-50%); }
.mandala-symbol:nth-child(6) { bottom: 15%; left: 15%; }
.mandala-symbol:nth-child(7) { top: 50%; left: 0%; transform: translateY(-50%); }
.mandala-symbol:nth-child(8) { top: 15%; left: 15%; }

/* 曼荼羅エネルギー波動 */
.mandala-energy-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(100px, 20vw, 200px);
    height: clamp(100px, 20vw, 200px);
    transform: translate(-50%, -50%);
    animation: mandalaBreathing 6s ease-in-out infinite;
    pointer-events: none;
}

.mandala-energy-wave::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(138, 43, 226, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: mandalaEnergyPulse 4s ease-in-out infinite;
}

.mandala-energy-wave::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    background: radial-gradient(
        circle,
        rgba(255, 107, 53, 0.3) 0%,
        rgba(255, 107, 53, 0.15) 30%,
        transparent 70%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: mandalaEnergyPulse 3s ease-in-out infinite reverse;
}

/* エネルギーパルスアニメーション */
@keyframes mandalaEnergyPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.9;
    }
}

/* 曼荼羅オーロラ効果 */
.mandala-aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        45deg,
        transparent 20%,
        rgba(138, 43, 226, 0.08) 30%,
        rgba(75, 0, 130, 0.06) 40%,
        transparent 50%,
        rgba(25, 25, 112, 0.04) 60%,
        rgba(138, 43, 226, 0.06) 70%,
        transparent 80%
    );
    animation: mandalaAuroraMove 20s ease-in-out infinite;
}

/* 参考画像風の角マンダラ - 左上と右下配置 */
.corner-mandala {
    position: absolute;
    width: clamp(300px, 35vw, 500px);
    height: clamp(300px, 35vw, 500px);
    pointer-events: none;
    z-index: 2;
}

.corner-mandala-top-left {
    top: -15%;
    left: -15%;
    transform: rotate(0deg);
    animation: cornerMandalaRotate 80s linear infinite;
}

.corner-mandala-bottom-right {
    bottom: -15%;
    right: -15%;
    transform: rotate(180deg);
    animation: cornerMandalaRotate 80s linear infinite reverse;
}

/* 曼荼羅SVGパターンを模倣したCSS */
.mandala-detailed-pattern {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

.mandala-detailed-pattern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle,
        transparent 30%,
        rgba(255, 255, 255, 0.8) 31%,
        rgba(255, 255, 255, 0.8) 32%,
        transparent 33%,
        transparent 45%,
        rgba(255, 255, 255, 0.6) 46%,
        rgba(255, 255, 255, 0.6) 47%,
        transparent 48%,
        transparent 60%,
        rgba(255, 255, 255, 0.4) 61%,
        rgba(255, 255, 255, 0.4) 62%,
        transparent 63%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
}

.mandala-detailed-pattern::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    background: 
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.7) 15deg,
            transparent 30deg,
            rgba(255, 255, 255, 0.7) 45deg,
            transparent 60deg,
            rgba(255, 255, 255, 0.7) 75deg,
            transparent 90deg,
            rgba(255, 255, 255, 0.7) 105deg,
            transparent 120deg,
            rgba(255, 255, 255, 0.7) 135deg,
            transparent 150deg,
            rgba(255, 255, 255, 0.7) 165deg,
            transparent 180deg,
            rgba(255, 255, 255, 0.7) 195deg,
            transparent 210deg,
            rgba(255, 255, 255, 0.7) 225deg,
            transparent 240deg,
            rgba(255, 255, 255, 0.7) 255deg,
            transparent 270deg,
            rgba(255, 255, 255, 0.7) 285deg,
            transparent 300deg,
            rgba(255, 255, 255, 0.7) 315deg,
            transparent 330deg,
            rgba(255, 255, 255, 0.7) 345deg,
            transparent 360deg
        );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

/* 曼荼羅花びらパターン */
.mandala-petals {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

.mandala-petal {
    position: absolute;
    width: 5px;
    height: 42%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 20%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.95) 80%,
        transparent 100%
    );
    border-radius: 50px;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

/* 24方向の花びら */
.mandala-petal:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.mandala-petal:nth-child(2) { transform: translate(-50%, -100%) rotate(15deg); }
.mandala-petal:nth-child(3) { transform: translate(-50%, -100%) rotate(30deg); }
.mandala-petal:nth-child(4) { transform: translate(-50%, -100%) rotate(45deg); }
.mandala-petal:nth-child(5) { transform: translate(-50%, -100%) rotate(60deg); }
.mandala-petal:nth-child(6) { transform: translate(-50%, -100%) rotate(75deg); }
.mandala-petal:nth-child(7) { transform: translate(-50%, -100%) rotate(90deg); }
.mandala-petal:nth-child(8) { transform: translate(-50%, -100%) rotate(105deg); }
.mandala-petal:nth-child(9) { transform: translate(-50%, -100%) rotate(120deg); }
.mandala-petal:nth-child(10) { transform: translate(-50%, -100%) rotate(135deg); }
.mandala-petal:nth-child(11) { transform: translate(-50%, -100%) rotate(150deg); }
.mandala-petal:nth-child(12) { transform: translate(-50%, -100%) rotate(165deg); }
.mandala-petal:nth-child(13) { transform: translate(-50%, -100%) rotate(180deg); }
.mandala-petal:nth-child(14) { transform: translate(-50%, -100%) rotate(195deg); }
.mandala-petal:nth-child(15) { transform: translate(-50%, -100%) rotate(210deg); }
.mandala-petal:nth-child(16) { transform: translate(-50%, -100%) rotate(225deg); }
.mandala-petal:nth-child(17) { transform: translate(-50%, -100%) rotate(240deg); }
.mandala-petal:nth-child(18) { transform: translate(-50%, -100%) rotate(255deg); }
.mandala-petal:nth-child(19) { transform: translate(-50%, -100%) rotate(270deg); }
.mandala-petal:nth-child(20) { transform: translate(-50%, -100%) rotate(285deg); }
.mandala-petal:nth-child(21) { transform: translate(-50%, -100%) rotate(300deg); }
.mandala-petal:nth-child(22) { transform: translate(-50%, -100%) rotate(315deg); }
.mandala-petal:nth-child(23) { transform: translate(-50%, -100%) rotate(330deg); }
.mandala-petal:nth-child(24) { transform: translate(-50%, -100%) rotate(345deg); }

@keyframes cornerMandalaRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 曼荼羅内層パターン */
.mandala-inner-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 41%,
        rgba(255, 255, 255, 0.1) 42%,
        transparent 43%,
        transparent 55%,
        rgba(255, 255, 255, 0.15) 56%,
        rgba(255, 255, 255, 0.15) 57%,
        transparent 58%
    );
    animation: rotateCounterClockwise 60s linear infinite;
}

.mandala-inner-layer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.4) 22.5deg,
        transparent 45deg,
        rgba(255, 255, 255, 0.4) 67.5deg,
        transparent 90deg,
        rgba(255, 255, 255, 0.4) 112.5deg,
        transparent 135deg,
        rgba(255, 255, 255, 0.4) 157.5deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.4) 202.5deg,
        transparent 225deg,
        rgba(255, 255, 255, 0.4) 247.5deg,
        transparent 270deg,
        rgba(255, 255, 255, 0.4) 292.5deg,
        transparent 315deg,
        rgba(255, 255, 255, 0.4) 337.5deg,
        transparent 360deg
    );
}

.mandala-inner-layer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    box-shadow: 
        0 0 15px rgba(255, 255, 255, 0.6),
        inset 0 0 15px rgba(255, 255, 255, 0.3);
}

/* 曼荼羅装飾線 */
.mandala-decorative-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
}

.mandala-line {
    position: absolute;
    width: 3px;
    height: 47%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.9) 30%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.9) 70%,
        transparent 100%
    );
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.mandala-line:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.mandala-line:nth-child(2) { transform: translate(-50%, -100%) rotate(45deg); }
.mandala-line:nth-child(3) { transform: translate(-50%, -100%) rotate(90deg); }
.mandala-line:nth-child(4) { transform: translate(-50%, -100%) rotate(135deg); }
.mandala-line:nth-child(5) { transform: translate(-50%, -100%) rotate(180deg); }
.mandala-line:nth-child(6) { transform: translate(-50%, -100%) rotate(225deg); }
.mandala-line:nth-child(7) { transform: translate(-50%, -100%) rotate(270deg); }
.mandala-line:nth-child(8) { transform: translate(-50%, -100%) rotate(315deg); }

/* モバイル最適化 - 角マンダラ */
@media (max-width: 768px) {
    .corner-mandala {
        width: clamp(220px, 40vw, 350px);
        height: clamp(220px, 40vw, 350px);
    }
    
    .corner-mandala-top-left {
        top: -10%;
        left: -10%;
    }
    
    .corner-mandala-bottom-right {
        bottom: -10%;
        right: -10%;
    }
}

@media (max-width: 480px) {
    .corner-mandala {
        width: clamp(180px, 35vw, 280px);
        height: clamp(180px, 35vw, 280px);
    }
    
    .corner-mandala-top-left {
        top: -8%;
        left: -8%;
    }
    
    .corner-mandala-bottom-right {
        bottom: -8%;
        right: -8%;
    }
    
    .mandala-petal {
        height: 35%;
        width: 3px;
    }
    
    .mandala-line {
        height: 40%;
        width: 1.5px;
    }
}

@media (max-width: 380px) {
    .corner-mandala {
        width: clamp(150px, 30vw, 220px);
        height: clamp(150px, 30vw, 220px);
    }
    
    .corner-mandala-top-left {
        top: -5%;
        left: -5%;
    }
    
    .corner-mandala-bottom-right {
        bottom: -5%;
        right: -5%;
    }
    
    /* 極小画面でのヘッダー調整 */
    header {
        padding: 0 clamp(8px, 2vw, 15px);
        height: clamp(45px, 7vh, 55px);
    }
    
    /* 極小画面でのハンバーガーメニュー */
    .menu-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        font-size: 0.85rem !important;
        padding: 6px !important;
        border-radius: 6px !important;
    }
}

/* 大画面での角マンダラ最適化 */
@media (min-width: 1200px) {
    .corner-mandala {
        width: clamp(400px, 30vw, 600px);
        height: clamp(400px, 30vw, 600px);
    }
    
    .corner-mandala-top-left {
        top: -20%;
        left: -20%;
    }
    
    .corner-mandala-bottom-right {
        bottom: -20%;
        right: -20%;
    }
}

@media (min-width: 1600px) {
    .corner-mandala {
        width: clamp(500px, 28vw, 700px);
        height: clamp(500px, 28vw, 700px);
    }
    
    .mandala-petal {
        width: 6px;
        height: 44%;
    }
    
    .mandala-line {
        width: 4px;
        height: 48%;
    }
}

.mandala-aurora::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        -45deg,
        transparent 30%,
        rgba(255, 182, 193, 0.08) 40%,
        rgba(255, 107, 53, 0.06) 50%,
        transparent 60%,
        rgba(255, 215, 0, 0.04) 70%,
        transparent 80%
    );
    animation: mandalaAuroraMove 25s ease-in-out infinite reverse;
}

@keyframes mandalaAuroraMove {
    0%, 100% { 
        transform: translateX(-20%) translateY(-10%) rotate(0deg);
        opacity: 0.3;
    }
    25% { 
        transform: translateX(10%) translateY(-20%) rotate(1deg);
        opacity: 0.6;
    }
    50% { 
        transform: translateX(20%) translateY(10%) rotate(-1deg);
        opacity: 0.4;
    }
    75% { 
        transform: translateX(-10%) translateY(20%) rotate(0.5deg);
        opacity: 0.7;
    }
}

/* ヘッダー */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(50px, 8vh, 70px);
    background: transparent; /* 背景を完全に透明に */
    display: flex;
    justify-content: space-between; /* 左右に分ける */
    align-items: center;
    z-index: 999;
    padding: 0 var(--padding-scale);
    /* backdrop-filterを削除してクリアな透明感を演出 */
}

/* 左側のアクション（履歴ボタン） */
.header-left {
    display: flex;
    align-items: center;
}

/* 右側のアクション（ハンバーガーメニュー） */
.header-right {
    display: flex;
    align-items: center;
}

.icon-button {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    padding: clamp(10px, 2.5vw, 14px);
    border-radius: clamp(8px, 2vw, 12px);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: clamp(1.1rem, 2.8vw, 1.3rem);
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    width: clamp(42px, 9vw, 52px);
    height: clamp(42px, 9vw, 52px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* コピーライトと同じ強い文字影を追加 */
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 0.8),
        1px 0 4px rgba(0, 0, 0, 0.8),
        -1px 0 4px rgba(0, 0, 0, 0.8),
        0 -1px 4px rgba(0, 0, 0, 0.8);
}

.icon-button:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: rgba(255, 107, 53, 0.4);
    color: #FF6B35;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
    /* ホバー時もシャドウを維持 */
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.8),
        2px 0 6px rgba(0, 0, 0, 0.8),
        -2px 0 6px rgba(0, 0, 0, 0.8),
        0 -2px 6px rgba(0, 0, 0, 0.8);
}

.icon-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* アクティブ時もシャドウを維持 */
    text-shadow: 
        0 0 6px rgba(0, 0, 0, 0.9),
        0 1px 3px rgba(0, 0, 0, 0.8),
        1px 0 3px rgba(0, 0, 0, 0.8),
        -1px 0 3px rgba(0, 0, 0, 0.8),
        0 -1px 3px rgba(0, 0, 0, 0.8);
}

/* ハンバーガーメニュー - 美しいデザイン */
.menu-toggle {
    cursor: pointer;
    padding: clamp(10px, 2.5vw, 14px);
    color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 滑らかなアニメーション */
    border-radius: clamp(8px, 2vw, 12px);
    background: rgba(255, 255, 255, 0.15); /* 少し明るい背景 */
    backdrop-filter: blur(15px); /* 美しいブラー効果 */
    border: 1px solid rgba(255, 255, 255, 0.25); /* 縁を少し目立たせる */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 正方形を保証 */
    width: clamp(42px, 9vw, 52px);
    height: clamp(42px, 9vw, 52px);
    min-width: 42px;
    min-height: 42px;
    aspect-ratio: 1 / 1; /* 正方形アスペクト比を強制 */
    font-size: clamp(1.1rem, 2.8vw, 1.3rem); /* アイコンを少し大きく */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 軽い影 */
    /* コピーライトと同じ強い文字影を追加 */
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 0.8),
        1px 0 4px rgba(0, 0, 0, 0.8),
        -1px 0 4px rgba(0, 0, 0, 0.8),
        0 -1px 4px rgba(0, 0, 0, 0.8);
}

/* Font Awesome アイコンの正常表示を保証 */
.menu-toggle .fa-bars {
    line-height: 1;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* フォールバック用CSSハンバーガーアイコン */
.hamburger-fallback {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 14px;
}

.hamburger-fallback span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* Font Awesome が利用できない場合のフォールバック表示 */
@media screen and (min-width: 0) {
    .menu-toggle .fa-bars:not([class*="fa-"]) + .hamburger-fallback {
        display: flex;
    }
}

/* Font Awesome読み込み失敗時の自動切り替え */
.menu-toggle:not(.fa-loaded) .hamburger-fallback {
    display: flex;
}

.menu-toggle:hover {
    color: #FF6B35;
    background: rgba(255, 107, 53, 0.2); /* ホバー時の背景 */
    border-color: rgba(255, 107, 53, 0.4);
    transform: translateY(-1px) scale(1.02); /* 浮き上がる効果 */
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25); /* オレンジの影 */
    /* ホバー時もシャドウを維持し、少し強化 */
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.8),
        2px 0 6px rgba(0, 0, 0, 0.8),
        -2px 0 6px rgba(0, 0, 0, 0.8),
        0 -2px 6px rgba(0, 0, 0, 0.8);
}

.menu-toggle:active {
    transform: translateY(0) scale(0.98); /* クリック時の押し込み効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* アクティブ時もシャドウを維持 */
    text-shadow: 
        0 0 6px rgba(0, 0, 0, 0.9),
        0 1px 3px rgba(0, 0, 0, 0.8),
        1px 0 3px rgba(0, 0, 0, 0.8),
        -1px 0 3px rgba(0, 0, 0, 0.8),
        0 -1px 3px rgba(0, 0, 0, 0.8);
}

/* フルスクリーンナビゲーションモーダル */
.nav-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-modal.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.nav-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
}

.nav-modal-content {
    position: relative;
    margin: auto;
    background: rgba(31, 31, 31, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    width: 90vw;
    max-height: 80vh;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-modal.show .nav-modal-content {
    transform: scale(1);
}

.nav-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-modal-header h3 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nav-close-btn {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 2rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.nav-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.nav-menu-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 500;
}

.nav-item:hover {
    background: linear-gradient(135deg, #FF6B35, #FF8E53);
    border-color: rgba(255, 107, 53, 0.5);
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

.nav-item i {
    font-size: 1.2em;
    min-width: 20px;
}

.nav-item span {
    flex: 1;
}

/* ハンバーガーメニューの位置を相対位置に */
.header-right {
    position: relative;
}

/* モバイル対応 */
@media (max-width: 480px) {
    .nav-modal-content {
        padding: 30px 20px;
        max-width: 95vw;
    }
    
    .nav-modal-header h3 {
        font-size: 1.4rem;
    }
    
    .nav-item {
        padding: 12px 15px;
        font-size: 1rem;
    }
    
    /* 会話履歴モーダルのモバイル対応 */
    .modal-content {
        padding: 20px 15px;
        max-width: 95vw;
        max-height: 85vh;
    }
    
    .modal-close-button {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 1.5rem;
    }
    
    /* メッセージのモバイル最適化 */
    .current-message {
        padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px);
        margin-bottom: clamp(6px, 1.5vh, 10px);
        line-height: 1.35;
    }
    
    /* モバイル用動的サイズ調整 - 短文 */
    .current-message.short-text {
        padding: clamp(6px, 1.5vw, 9px) clamp(10px, 2.5vw, 14px);
        margin-bottom: clamp(4px, 1vh, 7px);
        line-height: 1.3;
    }
    
    /* モバイル用動的サイズ調整 - 中文 */
    .current-message.medium-text {
        padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px);
        margin-bottom: clamp(6px, 1.5vh, 10px);
        line-height: 1.35;
    }
    
    /* モバイル用動的サイズ調整 - 長文 */
    .current-message.long-text {
        padding: clamp(10px, 2.2vw, 14px) clamp(14px, 3.2vw, 18px);
        margin-bottom: clamp(8px, 1.8vh, 12px);
        line-height: 1.4;
        max-height: calc(70vh - 150px);
        overflow-y: auto;
    }
}

/* メインコンテンツ */
.main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    z-index: 10;
}

/* 大型アバター配置 - 画面いっぱい + 森の背景 */
.avatar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* 森の背景画像 */
    background-image: url('forest_background.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 3Dシーンでは操作を有効化 */
    pointer-events: auto;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* A-Frame 3Dシーン最適化 */
#avatar-aframe-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    outline: none;
    background: transparent !important;
    /* 神秘的なグロー効果 */
    filter: 
        drop-shadow(0 0 30px rgba(255, 215, 0, 0.3))
        drop-shadow(0 0 60px rgba(255, 107, 53, 0.2));
    /* 3D表示の最適化 */
    image-rendering: optimizeQuality;
}

/* A-Frame キャンバス要素の透明背景強制 */
#avatar-aframe-scene canvas {
    background: transparent !important;
    background-color: transparent !important;
}

/* A-Frame コンテナの透明背景 */
#avatar-aframe-scene .a-canvas {
    background: transparent !important;
}

/* 旧Three.js 3Dキャンバス（後方互換性） */
#avatar-3d-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    outline: none;
    background: transparent !important;
    /* 神秘的なグロー効果 */
    filter: 
        drop-shadow(0 0 30px rgba(255, 215, 0, 0.3))
        drop-shadow(0 0 60px rgba(255, 107, 53, 0.2));
    /* 3D表示の最適化 */
    image-rendering: optimizeQuality;
}

/* ローディングインジケーター */
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    padding: clamp(20px, 4vw, 30px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 107, 53, 0.3);
}

.loading-text {
    color: #FF6B35;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.6);
    margin-bottom: 15px;
    text-align: center;
}

/* ローディングスピナー */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 107, 53, 0.3);
    border-top: 3px solid #FF6B35;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
}

/* 美しいアニメーション背景 */
.avatar-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        #1A1F6C 0%, 
        #2A2F7C 25%, 
        #3A3F8C 50%, 
        #4A3D9E 75%, 
        #5A4DAE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.animated-avatar {
    text-align: center;
    z-index: 10;
    position: relative;
    padding: var(--padding-scale);
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vh, 15px);
}

.avatar-text {
    font-size: var(--font-xxl);
    font-weight: 700;
    color: #FF6B35;
    margin-bottom: clamp(8px, 2vh, 15px);
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.7);
    animation: titleGlow 3s ease-in-out infinite;
    letter-spacing: clamp(1px, 0.5vw, 3px);
}

.avatar-subtitle {
    font-size: var(--font-lg);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    animation: subtitleFloat 4s ease-in-out infinite;
}



@keyframes subtitleFloat {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-5px); opacity: 1; }
}

/* 浮遊パーティクル */
.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: floatUp 8s infinite linear;
}

.particle:nth-child(1) {
    left: 15%;
    animation-delay: 0s;
    animation-duration: 8s;
}

.particle:nth-child(2) {
    left: 35%;
    animation-delay: 3s;
    animation-duration: 10s;
}

.particle:nth-child(3) {
    left: 55%;
    animation-delay: 6s;
    animation-duration: 9s;
}

.particle:nth-child(4) {
    left: 75%;
    animation-delay: 2s;
    animation-duration: 11s;
}

.particle:nth-child(5) {
    left: 85%;
    animation-delay: 5s;
    animation-duration: 7s;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

/* アバター部分は動的サイズ調整により自動対応 */

#avatar-video {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    object-position: center;
    transition: all 0.3s ease;
    animation: avatarPulse 4s ease-in-out infinite;
    /* コントロール完全非表示 */
    outline: none;
    border: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    /* 背景透過動画最適化設定 */
    background: transparent;
    /* MOV背景透過サポート強化 */
    mix-blend-mode: normal;
    /* 千手観音の神秘的な発光効果 */
    filter: 
        contrast(1.1) 
        saturate(1.2) 
        brightness(1.05)
        drop-shadow(0 0 30px rgba(255, 215, 0, 0.3))
        drop-shadow(0 0 60px rgba(255, 255, 255, 0.2));
}

/* グレー背景のみを除去するCSS（アバター保護版） */
#avatar-video.gray-bg-removal {
    /* グレー背景を透明化するフィルター（アバター部分は保護） */
    filter: 
        /* グレー色域を特定して除去 */
        contrast(1.6)
        brightness(1.1)
        saturate(1.3);
    /* クロマキー風の効果でグレーを透明に近づける */
    background: 
        linear-gradient(135deg, 
            rgba(128,128,128,0) 0%,    /* 薄いグレーを透明に */
            rgba(160,160,160,0) 30%,   /* 中グレーを透明に */ 
            rgba(192,192,192,0) 60%,   /* 明るいグレーを透明に */
            transparent 100%);
    mix-blend-mode: multiply;
    position: relative;
}

#avatar-video.gray-bg-removal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* グレー背景部分をマスク */
    background: 
        radial-gradient(ellipse at center, 
            transparent 45%,           /* 中央（アバター部分）は透明 */
            rgba(128,128,128,0.7) 70%, /* グレー背景部分を暗く */
            rgba(100,100,100,0.9) 100% /* 端の部分をより暗く */
        );
    mix-blend-mode: darken;
    pointer-events: none;
}

#avatar-video.gray-bg-removal-strong {
    filter: 
        contrast(1.8)
        brightness(1.15)
        saturate(1.4)
        hue-rotate(5deg);
    background: 
        radial-gradient(circle, 
            rgba(128,128,128,0) 0%,
            rgba(160,160,160,0) 40%,
            rgba(192,192,192,0) 80%);
    mix-blend-mode: multiply;
    position: relative;
}

#avatar-video.gray-bg-removal-strong::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at center, 
            transparent 40%,
            rgba(120,120,120,0.8) 65%,
            rgba(90,90,90,0.95) 100%
        );
    mix-blend-mode: darken;
    pointer-events: none;
}

#avatar-video.gray-bg-removal-soft {
    filter: 
        contrast(1.4)
        brightness(1.05)
        saturate(1.2);
    background: 
        linear-gradient(45deg, 
            rgba(140,140,140,0) 0%,
            rgba(170,170,170,0) 50%,
            rgba(200,200,200,0) 100%);
    mix-blend-mode: multiply;
    position: relative;
}

#avatar-video.gray-bg-removal-soft::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at center, 
            transparent 50%,
            rgba(130,130,130,0.5) 75%,
            rgba(110,110,110,0.7) 100%
        );
    mix-blend-mode: darken;
    pointer-events: none;
}

/* 極端版 - クロマキー風の背景除去 */
#avatar-video.gray-bg-removal-extreme {
    filter: 
        contrast(2.0)
        brightness(1.2)
        saturate(1.5)
        hue-rotate(8deg);
    /* グレー系の色をより積極的に除去 */
    background: 
        conic-gradient(from 0deg, 
            rgba(128,128,128,0) 0deg,
            rgba(150,150,150,0) 90deg,
            rgba(170,170,170,0) 180deg,
            rgba(190,190,190,0) 270deg,
            rgba(128,128,128,0) 360deg);
    mix-blend-mode: screen;
    position: relative;
}

#avatar-video.gray-bg-removal-extreme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at center, 
            transparent 35%,           /* アバター部分をより狭く保護 */
            rgba(100,100,100,0.9) 60%, /* グレー背景を強く除去 */
            rgba(70,70,70,1) 100%      /* 端は完全に暗く */
        );
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* 動画コントロールを完全に非表示 */
#avatar-video::-webkit-media-controls {
    display: none !important;
}

#avatar-video::-webkit-media-controls-panel {
    display: none !important;
}

#avatar-video::-webkit-media-controls-play-button {
    display: none !important;
}

#avatar-video::-webkit-media-controls-volume-slider {
    display: none !important;
}

#avatar-video::-webkit-media-controls-mute-button {
    display: none !important;
}

#avatar-video::-webkit-media-controls-timeline {
    display: none !important;
}

#avatar-video::-webkit-media-controls-current-time-display {
    display: none !important;
}

#avatar-video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

#avatar-video::-webkit-media-controls-seek-back-button {
    display: none !important;
}

#avatar-video::-webkit-media-controls-seek-forward-button {
    display: none !important;
}

#avatar-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

#avatar-video::-webkit-media-controls-rewind-button {
    display: none !important;
}

#avatar-video::-webkit-media-controls-return-to-realtime-button {
    display: none !important;
}

#avatar-video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
}

/* Firefox用 */
#avatar-video::-moz-media-controls {
    display: none !important;
}

/* IE/Edge用 */
#avatar-video::-ms-media-controls {
    display: none !important;
}

#avatar-video:hover {
    filter: brightness(1.15) saturate(1.3);
    transform: scale(1.05);
}

@keyframes avatarPulse {
    0%, 100% { 
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
    50% { 
        filter: brightness(1.05) saturate(1.1);
        transform: scale(1.01);
    }
}

/* 全画面チャットエリア - 下から積み上げ方式 */
.chat-area {
    position: fixed;
    bottom: calc(var(--input-bottom) + var(--input-height) + 10px); /* 入力欄の少し上 */
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--input-bottom) - var(--input-height) - 100px); /* 最大高さ制限 */
    height: auto; /* 高さを自動調整 */
    padding: clamp(8px, 2vw, 12px) var(--padding-scale) clamp(4px, 1vh, 8px); /* 上下パディング最小化 */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 下揃えで積み上げ */
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    /* スクロールバーのスタイリング */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.5) rgba(255, 255, 255, 0.1);
}

/* Webkit系ブラウザのスクロールバースタイル */
.chat-area::-webkit-scrollbar {
    width: clamp(4px, 1vw, 8px);
}

.chat-area::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.chat-area::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.5);
    border-radius: 10px;
}

.chat-area::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.7);
}

/* 現在の会話表示 - 下から積み上げ */
.current-conversation {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vh, 12px); /* ギャップを最小化 */
    margin-bottom: 0;
    min-height: auto; /* 自動高さ */
    justify-content: flex-end; /* 下揃えで積み上げ */
    padding: 0;
    /* 子要素のはみ出し防止 */
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: justify-content 0.3s ease;
}

/* 長文モード時のスタイル調整 */
.current-conversation.long-message-mode {
    justify-content: flex-start;
    gap: 15px;
    padding-top: 10px;
}

.current-conversation.long-message-mode .current-message {
    animation: longMessageAppear 0.6s ease-out;
}

@keyframes longMessageAppear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* スマートフォンでの長文モード調整 */
@media (max-width: 768px) {
    .current-conversation.long-message-mode {
        gap: 15px;
        padding-top: 15px;
    }
}

@media (max-width: 480px) {
    .current-conversation.long-message-mode {
        gap: 12px;
        padding-top: 12px;
    }
    
    /* ヘッダーのモバイル最適化 */
    header {
        padding: 0 clamp(12px, 3vw, 20px);
        height: clamp(48px, 8vh, 60px);
    }
    
    .header-right {
        margin-right: 0;
    }
    
    /* ハンバーガーメニューのモバイル最適化 */
    .menu-toggle {
        width: clamp(40px, 10vw, 44px) !important;
        height: clamp(40px, 10vw, 44px) !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        aspect-ratio: 1 / 1 !important; /* 正方形を強制 */
        font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
        padding: clamp(8px, 2vw, 10px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: clamp(6px, 1.5vw, 8px) !important;
    }
    
    .hamburger-fallback {
        width: 18px;
        height: 12px;
    }
}
    
    .current-conversation.long-message-mode .current-message {
        margin-bottom: 10px;
    }
}

/* 小画面での長文モード特別調整 */
@media (max-width: 430px) and (max-height: 750px) {
    .current-conversation.long-message-mode {
        justify-content: flex-start;
        padding-top: 5px;
        gap: 8px;
    }
    
    .current-conversation.long-message-mode .current-message {
        max-width: 45vw;
        margin-bottom: 5px;
        font-size: clamp(0.75rem, 2.5vw, 0.85rem);
    }
}

.current-message {
    padding: clamp(10px, 2.2vw, 14px) clamp(14px, 3.2vw, 18px); /* 適応的パディング */
    border-radius: var(--border-radius-scale);
    max-width: clamp(280px, 85vw, 800px);
    animation: messageSlideUp 0.5s ease-out;
    margin-bottom: clamp(8px, 1.8vh, 12px); /* 適応的マージン */
    line-height: 1.4; /* 読みやすい行間 */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    min-height: fit-content; /* 内容に完全フィット */
    height: auto; /* 自動高さ調整 */
    max-height: none; /* 最大高さ制限を削除 */
    overflow-y: visible;
    overflow-x: hidden;
    box-sizing: border-box;
    width: fit-content; /* 内容にフィット */
    display: inline-block; /* より柔軟な表示 */
    vertical-align: top;
    -webkit-line-break: anywhere;
    line-break: anywhere;
    font-size: var(--font-md);
    /* 動的サイズ調整 */
    position: relative;
    /* メッセージ内スクロールバーのスタイリング */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.3) rgba(255, 255, 255, 0.05);
}

/* メッセージ内の最後の要素のマージンを削除 */
.current-message > div > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* メッセージ内の空の段落や余分な改行を削除 */
.current-message p:empty,
.current-message div:empty {
    display: none;
}

/* メッセージ内の最後のbrタグを削除 */
.current-message br:last-child {
    display: none;
}

/* ユーザーメッセージとボットメッセージ両方に適用される追加最適化 */
.current-message.user > div > *:last-child,
.current-message.bot > div > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ユーザーメッセージとボットメッセージの末尾空白削除 */
.current-message.user p:empty,
.current-message.bot p:empty,
.current-message.user div:empty,
.current-message.bot div:empty {
    display: none;
}

.current-message.user br:last-child,
.current-message.bot br:last-child {
    display: none;
}

/* ガラス質感のための疑似要素 */
.current-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.15) 15%, 
        rgba(255, 255, 255, 0.35) 40%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0.35) 60%,
        rgba(255, 255, 255, 0.15) 85%, 
        transparent 100%
    );
    border-radius: inherit;
    pointer-events: none;
}

/* 動的サイズ調整 - 短文用 */
.current-message.short-text {
    padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 16px);
    margin-bottom: clamp(6px, 1.5vh, 10px);
    line-height: 1.35;
}

/* 動的サイズ調整 - 中文用 */
.current-message.medium-text {
    padding: clamp(10px, 2.2vw, 14px) clamp(14px, 3.2vw, 18px);
    margin-bottom: clamp(8px, 1.8vh, 12px);
    line-height: 1.4;
}

/* 動的サイズ調整 - 長文用 */
.current-message.long-text {
    padding: clamp(12px, 2.5vw, 16px) clamp(16px, 3.5vw, 20px);
    margin-bottom: clamp(10px, 2vh, 14px);
    line-height: 1.45;
    max-height: calc(80vh - 200px); /* 長文時のみ制限 */
    overflow-y: auto;
}

/* 長いメッセージ用のスクロール表示クラス */
.current-message.scrollable {
    overflow-y: auto;
}

/* 極端に長い文章用の特別クラス */
.current-message.extra-long {
    max-height: 85vh; /* 画面の85%まで使用可能 */
    overflow-y: auto;
}

.current-message::-webkit-scrollbar {
    width: clamp(4px, 0.8vw, 8px);
}

.current-message::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.current-message::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.4); /* 少し濃くして見やすく */
    border-radius: 10px;
}

.current-message::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.6);
}

.current-message.user {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.015) 0%,
        rgba(255, 255, 255, 0.025) 50%,
        rgba(255, 255, 255, 0.01) 100%
    ) !important; /* ギリギリ見えるレベルの超極薄透明 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12); /* ガラスの光の反射 */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    align-self: flex-start;
    margin-right: auto;
    color: #FFFFFF !important;
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 1),
        1px 1px 2px rgba(0, 0, 0, 1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* 白い背景での視認性向上 */
body:not(.blue-theme) .current-message.user {
    color: #FFFFFF !important;
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 1),
        1px 1px 2px rgba(0, 0, 0, 1);
    border: 1px solid rgba(108, 117, 125, 0.15);
    border-top: 1px solid rgba(108, 117, 125, 0.2);
    border-left: 1px solid rgba(108, 117, 125, 0.18);
}

.current-message.bot {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.015) 0%,
        rgba(255, 255, 255, 0.025) 50%,
        rgba(255, 255, 255, 0.01) 100%
    ) !important; /* ギリギリ見えるレベルの超極薄透明 */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12); /* ガラスの光の反射 */
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    align-self: flex-start;
    margin-right: auto;
    color: #FFFFFF !important;
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 1),
        1px 1px 2px rgba(0, 0, 0, 1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* 白い背景での視認性向上 */
body:not(.blue-theme) .current-message.bot {
    color: #FFFFFF !important;
    text-shadow: 
        0 0 10px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 1),
        1px 1px 2px rgba(0, 0, 0, 1);
    border: 1px solid rgba(108, 117, 125, 0.15);
    border-top: 1px solid rgba(108, 117, 125, 0.2);
    border-left: 1px solid rgba(108, 117, 125, 0.18);
}

.current-message div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.5;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* より強力な折り返し制御 */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

/* Markdown要素の長文対応 - はみ出し防止強化 */
.current-message p {
    margin: 0 0 8px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.5;
    max-width: 100%;
    box-sizing: border-box;
}

.current-message ul, 
.current-message ol {
    margin: 8px 0;
    padding-left: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.current-message li {
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.current-message h1, 
.current-message h2, 
.current-message h3, 
.current-message h4, 
.current-message h5, 
.current-message h6 {
    margin: 8px 0 4px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.current-message pre {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 8px 0;
    max-width: 100%;
    box-sizing: border-box;
}

.current-message code {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 4px;
    border-radius: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-block;
}

@keyframes messageSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 入力エリア */
.chat-input {
    position: fixed;
    bottom: var(--input-bottom); /* CSS変数を使用 */
    left: 50%;
    transform: translateX(-50%);
    width: clamp(280px, 90vw, 800px);
    display: flex;
    align-items: flex-end;
    gap: clamp(8px, 1vw, 15px);
    z-index: 100;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    padding: var(--padding-scale);
    border-radius: clamp(15px, 3vw, 25px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: var(--input-height); /* CSS変数を使用 */
}

#record-button,
#send-button {
    background: linear-gradient(135deg, #FF6B35, #FF8E53);
    border: none;
    color: white;
    width: clamp(40px, 8vw, 60px);
    height: clamp(40px, 8vw, 60px);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
}

#record-button:hover,
#send-button:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
}

#user-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: clamp(10px, 2vw, 20px);
    padding: var(--padding-scale);
    color: #FFFFFF;
    font-size: max(16px, var(--font-md)); /* 16px以上でズームアップ防止 */
    resize: none;
    outline: none;
    backdrop-filter: blur(10px);
    min-height: clamp(20px, 4vh, 40px);
    line-height: 1.4;
    -webkit-text-size-adjust: 100%; /* iOS Safari対応 */
}

/* 白い背景での入力フィールド視認性向上 */
body:not(.blue-theme) #user-input {
    background: rgba(108, 117, 125, 0.15);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #FFFFFF;
}

body:not(.blue-theme) #user-input:focus {
    border-color: rgba(255, 107, 53, 0.5);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

#user-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* 白い背景でのプレースホルダー視認性向上 */
body:not(.blue-theme) #user-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#user-input:focus {
    border-color: rgba(255, 107, 53, 0.5);
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

/* サジェスト質問 */
.suggested-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    order: 1;
}

.suggested-question {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.suggested-question:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: rgba(255, 107, 53, 0.4);
    transform: translateY(-2px);
}

/* モーダル */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    background: rgba(31, 31, 31, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px;
    width: 90vw;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    margin: auto;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* モーダル内のスクロールバースタイリング */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.5) rgba(255, 255, 255, 0.1);
}

/* モーダル内のスクロールバースタイル */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.5);
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.7);
}

.modal-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 2rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.modal-close-button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

/* フッター - 極力コンパクトデザイン */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: clamp(0px, 0.1vh, 1px) clamp(2px, 0.5vw, 4px); /* 極限まで小さいパディング */
    background: transparent; /* 背景を完全に透明 */
    backdrop-filter: none; /* ブラー効果なし */
    color: rgba(255, 255, 255, 0.85); /* 少し明るく */
    font-size: clamp(0.6rem, 1.5vw, 0.7rem); /* 文字サイズをさらに小さく */
    z-index: 50;
    height: auto; /* 高さを自動調整 */
    min-height: clamp(12px, 2vh, 18px); /* 最小高さを極限まで減らす */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 強い文字影で背景に関係なく読みやすく */
    text-shadow: 
        0 0 8px rgba(0, 0, 0, 0.9),
        0 1px 4px rgba(0, 0, 0, 0.8),
        1px 0 4px rgba(0, 0, 0, 0.8),
        -1px 0 4px rgba(0, 0, 0, 0.8),
        0 -1px 4px rgba(0, 0, 0, 0.8);
    line-height: 1;
    margin: 0;
    /* スマホでの表示最適化 */
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* ===========================
   追加の細かい調整（CSS変数で基本は対応済み）
=========================== */

/* 極小画面での追加調整 */
@media (max-width: 320px) {
    :root {
        --chat-area-height: clamp(250px, 30vh, 400px);
        --message-max-height: clamp(250px, 50vh, 700px);
        --font-xs: 0.7rem;
        --font-sm: 0.8rem;
        --font-md: 0.85rem;
    }
}

/* 大画面での追加調整 */
@media (min-width: 1400px) {
    :root {
        --chat-area-height: clamp(400px, 35vh, 600px);
        --message-max-height: clamp(350px, 55vh, 850px);
        --message-width: clamp(400px, 70vw, 1000px);
    }
}

/* 中画面での微調整 */
@media (min-width: 481px) and (max-width: 1024px) {
    :root {
        --chat-area-height: clamp(320px, 35vh, 480px);
        --message-max-height: clamp(280px, 45vh, 650px);
    }
}

/* 低解像度画面での調整 */
@media (max-height: 600px) {
    :root {
        --chat-area-height: clamp(200px, 25vh, 350px);
        --input-bottom: clamp(30px, 5vh, 60px);
    }
}

/* 小さいスマホでの動画とチャット配置最適化 */
@media (max-width: 430px) and (max-height: 750px) {
    /* 動画を全画面に配置 */
    .avatar-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh; /* 全画面表示 */
        width: 100vw;
        transform: none; /* 上への移動を削除 */
        z-index: 5; /* 適切な背景レイヤー位置 */
        padding: 0; /* パディングも削除して完全に画面を覆う */
        box-sizing: border-box;
    }
    
    #avatar-video {
        height: 100%;
        width: 100%;
        object-fit: contain; /* 全体を表示 */
        object-position: center center; /* 中央に配置 */
        transform: scale(0.85); /* 少し小さくして距離感を調整 */
    }
    
    .avatar-animation {
        height: 100%;
        transform: scale(0.75); /* より小さく表示して距離感を調整 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* チャットエリアを下部に配置 - 積み上げ方式 */
    .chat-area {
        position: fixed;
        top: auto; /* topを自動に */
        bottom: calc(var(--input-bottom) + var(--input-height) + 15px); /* 入力欄の少し上 */
        height: auto; /* 高さを自動調整 */
        max-height: calc(100vh - var(--input-bottom) - var(--input-height) - 120px); /* 最大高さ */
        background: transparent; /* 背景を透明に */
        backdrop-filter: none; /* ブラー効果も除去 */
        border-radius: 0;
        margin: 0 5px;
        z-index: 10; /* 動画より前面に */
        padding-bottom: 15px; /* 下部余白を最小限に */
        justify-content: flex-end; /* 下揃え */
    }
    
    /* チャットバブルの横幅を制限 */
    .current-message {
        max-width: 45vw; /* 画面の45%まで */
        font-size: clamp(0.75rem, 2.5vw, 0.85rem);
        padding: clamp(8px, 2vw, 12px); /* パディングを少し大きく */
        line-height: 1.4; /* 行間を少し広く */
        margin-bottom: clamp(6px, 1.5vh, 10px);
        min-height: clamp(40px, 7vh, 70px); /* 小画面での最低サイズ */
        /* 小画面でも透明度を統一 */
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    .current-message.user {
        background: linear-gradient(145deg, 
            rgba(255, 255, 255, 0.008) 0%,
            rgba(255, 255, 255, 0.018) 50%,
            rgba(255, 255, 255, 0.005) 100%
        ) !important; /* 極小画面用ギリギリ見えるレベル */
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 
            0 3px 12px rgba(0, 0, 0, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.04) inset;
        color: #FFFFFF;
        text-shadow: 
            0 0 12px rgba(0, 0, 0, 1),
            0 2px 4px rgba(0, 0, 0, 1),
            1px 1px 3px rgba(0, 0, 0, 1);
    }
    
    .current-message.bot {
        background: linear-gradient(145deg, 
            rgba(255, 255, 255, 0.008) 0%,
            rgba(255, 255, 255, 0.018) 50%,
            rgba(255, 255, 255, 0.005) 100%
        ) !important; /* 極小画面用ギリギリ見えるレベル */
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 
            0 3px 12px rgba(0, 0, 0, 0.18),
            0 1px 0 rgba(255, 255, 255, 0.04) inset;
        color: #FFFFFF;
        text-shadow: 
            0 0 12px rgba(0, 0, 0, 1),
            0 2px 4px rgba(0, 0, 0, 1),
            1px 1px 3px rgba(0, 0, 0, 1);
    }
    
    /* メインロゴを小さく */
    .main-title-container {
        top: 1vh;
        z-index: 200;
    }
    
    .logo-image {
        height: clamp(20px, 3vh, 35px);
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) 
                drop-shadow(0 0 15px rgba(255, 107, 53, 0.6));
    }
    
    .fallback-title {
        font-size: clamp(1rem, 4vw, 1.3rem);
        letter-spacing: clamp(0.5px, 0.3vw, 1.5px);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 107, 53, 0.6);
    }
    
    /* 入力エリア調整 */
    .chat-input {
        width: clamp(260px, 95vw, 400px);
        padding: clamp(6px, 1.5vw, 10px);
        bottom: clamp(10px, 1.5vh, 20px); /* フッターとの隙間をさらに狭く */
        z-index: 100;
        background: rgba(255, 255, 255, 0.25); /* 白っぽい半透明 */
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.4);
    }
    
    /* 入力フィールドも白っぽく調整 */
    #user-input {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #333333; /* 読みやすい色に */
        font-size: max(16px, clamp(0.8rem, 2.5vw, 0.9rem)); /* ズームアップ防止 */
    }
    
    #user-input::placeholder {
        color: rgba(100, 100, 100, 0.8); /* プレースホルダーも読みやすく */
    }
    
    #record-button, #send-button {
        width: clamp(35px, 6vw, 45px);
        height: clamp(35px, 6vw, 45px);
        font-size: clamp(0.8rem, 2vw, 1rem);
    }
    
    #user-input {
        font-size: clamp(0.8rem, 2.5vw, 0.9rem);
        padding: clamp(6px, 1.5vw, 10px);
    }
}

/* iPhone13 mini (390x844) + Safari 最適化 */
@media (max-width: 430px) and (min-height: 800px) and (max-height: 900px) {
    /* フッターの調整 */
    footer {
        padding: clamp(0px, 0.1vh, 1px) clamp(3px, 0.8vw, 6px);
        min-height: clamp(14px, 2.2vh, 20px);
        font-size: clamp(0.6rem, 1.6vw, 0.68rem);
    }
    /* Safari セーフエリア対応 */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .main-title-container {
        top: clamp(20px, 3vh, 40px);
        z-index: 200;
    }
    
    .logo-image {
        height: clamp(30px, 6vw, 60px);
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.8)) 
                drop-shadow(0 0 30px rgba(255, 107, 53, 0.4));
    }
    
    .fallback-title {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
        text-shadow: 0 0 15px rgba(255, 107, 53, 0.8), 0 0 30px rgba(255, 107, 53, 0.4);
    }
    
    /* チャット入力欄との隙間を最適化 */
    .chat-area {
        height: clamp(400px, 45vh, 550px);
        bottom: clamp(80px, 12vh, 120px);
        padding-bottom: clamp(15px, 3vh, 25px);
    }
    
    .chat-input {
        bottom: clamp(8px, 1.5vh, 15px); /* より狭い隙間 */
        width: clamp(340px, 90vw, 370px);
    }
    
    /* 積み上がり時のバブルサイズ保持 */
    .current-message {
        min-height: clamp(60px, 8vh, 80px);
        font-size: clamp(14px, 3.5vw, 16px);
        padding: clamp(12px, 3vw, 16px);
    }
    
    /* 長文時はより大きく */
    .current-conversation.long-message-mode .current-message {
        min-height: clamp(120px, 20vh, 300px);
        font-size: clamp(15px, 3.8vw, 17px);
    }
    
    /* 複数メッセージ積み上がり時のサイズ保持 */
    .current-conversation:not(.long-message-mode) .current-message {
        min-height: clamp(50px, 6vh, 70px);
        max-height: clamp(150px, 25vh, 200px);
    }
    
    /* 2つ以上のメッセージがある場合 */
    .current-conversation:not(.long-message-mode) .current-message:nth-child(n+2) {
        margin-top: clamp(8px, 2vh, 12px);
    }
    
    /* 3つ以上のメッセージがある場合はさらに最適化 */
    .current-conversation:not(.long-message-mode) .current-message:nth-child(n+3) {
        font-size: clamp(13px, 3.2vw, 15px);
        padding: clamp(10px, 2.5vw, 14px);
    }
}

/* 極小スマホ（iPhone SE等）への特別対応 */
@media (max-width: 380px) and (max-height: 680px) {
    .avatar-container {
        height: 100vh; /* 全画面表示を維持 */
        min-height: 100vh; /* 最小高さも100vhを保証 */
        top: 0;
        left: 0;
        width: 100vw;
        transform: none; /* 位置移動を削除 */
        position: fixed; /* fixed位置を明示的に設定 */
    }
    
    /* 極小画面での動画距離調整 */
    #avatar-video {
        transform: scale(0.75); /* さらに小さくして距離感を調整 */
    }
    
    .avatar-animation {
        transform: scale(0.65); /* アニメーション背景も調整 */
    }
    
    .chat-area {
        top: auto; /* topを自動に */
        bottom: calc(var(--input-bottom) + var(--input-height) + 15px); /* 入力欄の少し上 */
        height: auto; /* 高さを自動調整 */
        max-height: calc(100vh - var(--input-bottom) - var(--input-height) - 100px); /* 最大高さ */
        margin: 0 2px;
        background: transparent;
        padding-bottom: 10px; /* 下部余白を最小限に */
        justify-content: flex-end; /* 下揃え */
    }
    
    .current-message {
        max-width: 40vw; /* さらに横幅制限 */
        font-size: 0.75rem;
        padding: 6px 8px; /* パディングを少し大きく */
        line-height: 1.4; /* 行間を調整 */
        min-height: clamp(35px, 6vh, 60px); /* 極小画面での最低サイズ */
        /* 極小画面でも同じ透明度を維持 */
        background: none !important; /* 基本のグラデーション背景を使用 */
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #FFFFFF !important; /* 統一された白色 */
        text-shadow: 
            0 0 10px rgba(0, 0, 0, 0.9),
            0 1px 4px rgba(0, 0, 0, 1),
            1px 1px 2px rgba(0, 0, 0, 1); /* 統一されたシャドウ */
    }
    
    .current-message.user {
        background: rgba(255, 255, 255, 0.15) !important; /* より透明に */
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #111111;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9);
    }
    
    .main-title {
        font-size: 0.9rem;
    }
    
    .main-title-container {
        top: 0.5vh;
        z-index: 100; /* タイトルを最前面に */
    }
    
    /* 極小画面でのフッター調整 */
    footer {
        padding: 0px 1px; /* 極限まで小さいパディング */
        min-height: 10px; /* 最小高さを極限まで減らす */
        font-size: 0.55rem; /* 文字サイズを極限まで小さく */
    }
}

/* 横向き小画面での調整 */
@media (max-height: 500px) and (orientation: landscape) {
    .avatar-container {
        height: 100vh; /* 全画面背景として */
        top: 0;
        left: 0;
        width: 100vw;
    }
    
    .chat-area {
        position: fixed;
        top: auto; /* topを自動に */
        left: 50vw; /* 右側50%にチャット */
        width: 48vw;
        bottom: calc(var(--input-bottom) + var(--input-height) + 15px); /* 入力欄の少し上 */
        height: auto; /* 高さを自動調整 */
        max-height: calc(100vh - var(--input-bottom) - var(--input-height) - 80px); /* 最大高さ */
        background: transparent; /* 背景を透明に */
        backdrop-filter: none;
        border-radius: 0;
        margin: 0;
        z-index: 10;
        padding-bottom: 10px; /* 下部余白を最小限に */
        justify-content: flex-end; /* 下揃え */
    }
    
    .current-message {
        max-width: 90%; /* 横向きでは幅制限を緩和 */
        font-size: 0.8rem;
        padding: clamp(8px, 1.5vw, 12px); /* 適切なパディング */
        line-height: 1.4;
        min-height: clamp(40px, 6vh, 70px); /* 横向きでの最低サイズ */
        background: none !important; /* 基本のグラデーション背景を使用 */
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #FFFFFF !important; /* 統一された白色 */
        text-shadow: 
            0 0 10px rgba(0, 0, 0, 0.9),
            0 1px 4px rgba(0, 0, 0, 1),
            1px 1px 2px rgba(0, 0, 0, 1); /* 統一されたシャドウ */
    }
    
    .current-message.user {
        background: rgba(255, 255, 255, 0.15) !important; /* より透明に */
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #FFFFFF;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
    
    .main-title-container {
        top: 1vh;
        left: 2vw;
        transform: none;
        text-align: left;
        z-index: 100;
    }
    
    .logo-image {
        height: clamp(25px, 4vh, 45px);
        background: transparent;
    }
    
    .chat-input {
        left: 50vw;
        width: 48vw;
        transform: none;
        z-index: 100;
    }
}

/* Loading状態 */
.loading {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 引用情報 */
#current-citations {
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ファイル関連のスタイル */
.modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.modal-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#confirm-upload-button {
    background: linear-gradient(135deg, #FF6B35, #FF8E53);
    color: white;
}

#close-upload-modal {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.modal-buttons button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

/* チャットメッセージ履歴 */
.chat-messages {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 15px;
    /* スクロールバーのスタイリング */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.5) rgba(255, 255, 255, 0.1);
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.5);
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.7);
}

.chat-message {
    margin-bottom: 15px;
    padding: 12px 16px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    max-width: 85%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    max-height: 500px;
    overflow-y: visible;
    /* 横方向のはみ出し防止 */
    overflow-x: hidden;
    box-sizing: border-box;
    width: auto;
    /* モーダル内メッセージのスクロールバー */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.3) rgba(255, 255, 255, 0.05);
}

/* 長いメッセージ用のスクロール表示クラス */
.chat-message.scrollable {
    overflow-y: auto;
}

.chat-message::-webkit-scrollbar {
    width: clamp(4px, 0.8vw, 8px);
}

.chat-message::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.chat-message::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.4); /* 少し濃くして見やすく */
    border-radius: 10px;
}

.chat-message::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.6);
}

.chat-message.user {
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.3);
    margin-left: auto;
    margin-right: 0;
}

.chat-message.bot {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 0;
    margin-right: auto;
}