/* /Pages/Tenant/Assistant/Assistant.razor.rz.scp.css */
/* AI アシスタント専用ページのレイアウト (CSS isolation) */

/* grid-main (MainLayout のスクロール領域。ヘッダ下〜viewport 下端を占める definite height) を
   このページが満たし、chat-host を flex で「残り高さ全部」に伸ばす。
   旧実装の height: calc(100vh - 130px/220px) はヘッダ高さの推測値で、モバイルでは引きすぎて
   画面下部に余白が出る (実機ヘッダ可変で溢れる恐れも) ため、固定 px を排して flex 充填にする。
   ※ height:100% は親 grid-main が definite height のとき解決する (tenant レイアウトでは常に成立)。 */
.forest-assistant-page[b-e6kxflis2i] {
    max-width: 960px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.forest-assistant-page-chat-host[b-e6kxflis2i] {
    flex: 1 1 auto;
    min-height: 360px; /* 極端に低い viewport では floor を保ち grid-main 側にスクロールを委ねる */
    overflow: hidden;
}

/* md 以上 (768px+): 説明文が表示される分、chat-host の最低高だけ引き上げる (高さ自体は flex 充填) */
@media (min-width: 768px) {
    .forest-assistant-page-chat-host[b-e6kxflis2i] {
        min-height: 480px;
    }
}
/* /Shared/Components/VoiceAssistant/AssistantChatPanel.razor.rz.scp.css */
/* AssistantChatPanel 専用スタイル (CSS isolation)
   .razor.css は Blazor が ::deep / class scope 制御を自動付与する */

.forest-assistant-panel[b-92eltlvd5e] { min-height: 0; }
.forest-assistant-chat-wrap[b-92eltlvd5e] { min-height: 0; overflow: hidden; }

/* DxAIChat ルート (.dxbl-chatui-root) に「確定した高さ」を物理的に与える。
   - 高さを与えないと DxAIChat が natural height (= 内容物高さ) に膨らみ、wrap を突き抜けて
     入力欄が下端固定にならない (= メッセージ直後に来てしまう)。chat-wrap は position: relative
     なので、inset: 0 の絶対配置で wrap を必ず埋め、DxAIChat 内部の flex
     (メッセージ領域伸縮 + 入力欄下端固定) を成立させる。
   - !! ::deep 必須 !! forest-assistant-chat-inner は <DxAIChat CssClass> で子コンポーネントの
     ルートに付与される class。Blazor の scope 属性 (b-xxxxx) は親 .razor 内の生 HTML にしか
     刻まれず、子コンポーネントのルート要素には付かない。そのため scope 付きの素のセレクタ
     (.forest-assistant-chat-inner) は永久にマッチしない (← 旧 height:100% が効かず本バグが
     発生していた真因)。::deep で scope を子側へ貫通させてマッチさせる。
   - 絶対配置だが z-index は auto (0) のまま。マイク FAB (z 10) / typing bubble (z 5) /
     トースト (z 20) は上に重なり、操作も阻害しない。 */
.forest-assistant-chat-wrap[b-92eltlvd5e]  .forest-assistant-chat-inner {
    position: absolute;
    inset: 0;
}

/* EmptyMessageAreaTemplate: メッセージ無し時の案内 */
.forest-assistant-empty[b-92eltlvd5e] { height: 100%; color: #6c757d; }
.forest-empty-icon[b-92eltlvd5e] { font-size: 3rem; color: #adb5bd; }
.forest-empty-title[b-92eltlvd5e] { font-size: 1.1rem; color: #495057; }
.forest-empty-hint[b-92eltlvd5e] { line-height: 1.6; }

/* 手動接続 (dev fallback) は上部ステータスバーに開閉式で配置 */
.forest-assistant-livekit-config[b-92eltlvd5e] { position: relative; }
.forest-assistant-livekit-config[open] .forest-assistant-livekit-config-body[b-92eltlvd5e] {
    position: absolute;
    right: 0;
    top: 1.4rem;
    min-width: 280px;
    z-index: 30;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 接続成功トースト: 画面上中央に絶対配置 (3 秒で C# 側 JustConnected が false に戻り消える) */
.forest-connect-toast[b-92eltlvd5e] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(24, 165, 88, 0.95);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    animation: forest-connect-toast-in-b-92eltlvd5e 0.3s ease-out, forest-connect-toast-out-b-92eltlvd5e 0.4s ease-in 2.6s forwards;
    pointer-events: none;
}

.forest-connect-toast-icon[b-92eltlvd5e] { font-size: 1.05rem; line-height: 1; }

@keyframes forest-connect-toast-in-b-92eltlvd5e {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes forest-connect-toast-out-b-92eltlvd5e {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, -8px); }
}

/* AI typing bubble: AI 応答中の左下ローディング (灰背景 + 緑アクセント、AI 吹き出し風) */
.forest-ai-typing[b-92eltlvd5e] {
    position: absolute;
    left: 16px;
    bottom: 82px;
    max-width: calc(100% - 100px);
    z-index: 5;
    pointer-events: none;
    animation: forest-typing-banner-in-b-92eltlvd5e 0.18s ease-out;
}

.forest-ai-typing-bubble[b-92eltlvd5e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f1f3f5;
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #495057;
    max-width: 100%;
}

.forest-ai-typing-icon[b-92eltlvd5e] { font-size: 1.1rem; color: #18a558; flex-shrink: 0; }

.forest-ai-typing-dots[b-92eltlvd5e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.forest-ai-typing-dots span[b-92eltlvd5e] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18a558;
    opacity: 0.5;
    animation: forest-ai-typing-dot-b-92eltlvd5e 1.2s infinite ease-in-out;
}

.forest-ai-typing-dots span:nth-child(2)[b-92eltlvd5e] { animation-delay: 0.18s; }
.forest-ai-typing-dots span:nth-child(3)[b-92eltlvd5e] { animation-delay: 0.36s; }

@keyframes forest-ai-typing-dot-b-92eltlvd5e {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

.forest-ai-typing-text[b-92eltlvd5e] {
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    color: #212529;
    max-width: 240px;
}

/* user typing bubble: ユーザー発話中の右下ローディング (DxAIChat の user 吹き出し色に近い紫系) */
.forest-user-typing[b-92eltlvd5e] {
    position: absolute;
    right: 16px;
    bottom: 146px; /* マイク row (bottom: 82px) + マイク FAB 48px + gap 約 16px */
    max-width: calc(100% - 80px);
    z-index: 5;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    animation: forest-typing-banner-in-b-92eltlvd5e 0.18s ease-out;
}

.forest-user-typing-bubble[b-92eltlvd5e] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #e7e2f5;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #4a3a82;
    max-width: 100%;
}

.forest-user-typing-dots[b-92eltlvd5e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.forest-user-typing-dots span[b-92eltlvd5e] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6f51c2;
    opacity: 0.5;
    animation: forest-user-typing-dot-b-92eltlvd5e 1.2s infinite ease-in-out;
}

.forest-user-typing-dots span:nth-child(2)[b-92eltlvd5e] { animation-delay: 0.18s; }
.forest-user-typing-dots span:nth-child(3)[b-92eltlvd5e] { animation-delay: 0.36s; }

@keyframes forest-user-typing-dot-b-92eltlvd5e {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

.forest-user-typing-text[b-92eltlvd5e] {
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    color: #2d2455;
    max-width: 240px;
}

/* フローティングコンテナ: DxAIChat の右下 / 入力欄に被らない位置 / 縦並び (banner→mic) */
/* DxAIChat の input area の高さを越えるよう bottom=82px を初期値とする。
   将来 DevExpress のスタイル更新で input area 高が変わった場合はここを調整 */
.forest-mic-floating[b-92eltlvd5e] {
    position: absolute;
    right: 16px;
    bottom: 82px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 10;
    pointer-events: none; /* container は素通り、子のボタンだけ反応 */
}

.forest-mic-floating > *[b-92eltlvd5e] { pointer-events: auto; }

.forest-mic-fab[b-92eltlvd5e] {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.forest-mic-fab:hover[b-92eltlvd5e] { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.forest-mic-fab:active[b-92eltlvd5e] { transform: scale(0.94); }
.forest-mic-fab:disabled[b-92eltlvd5e] { cursor: default; opacity: 0.7; }

/* ミュート ミニボタン: Live 中だけ FAB の左隣に出現 / 状態で色とアイコン変化 */
.forest-mic-mute[b-92eltlvd5e] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    color: #495057;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
}

.forest-mic-mute:hover[b-92eltlvd5e] { transform: scale(1.08); }
.forest-mic-mute:active[b-92eltlvd5e] { transform: scale(0.92); }
.forest-mic-mute.forest-mic-mute-on[b-92eltlvd5e] {
    background: #d93636;
    color: #fff;
    border-color: transparent;
    animation: forest-mute-pulse-b-92eltlvd5e 1.6s infinite ease-in-out;
}

@keyframes forest-mute-pulse-b-92eltlvd5e {
    0%, 100% { box-shadow: 0 2px 8px rgba(217, 54, 54, 0.5); }
    50% { box-shadow: 0 2px 14px rgba(217, 54, 54, 0.8); }
}

.forest-mic-fab.forest-mic-idle[b-92eltlvd5e] { background: linear-gradient(135deg, #ff9a44, #ff6a00); }
.forest-mic-fab.forest-mic-connecting[b-92eltlvd5e] { background: #adb5bd; }
.forest-mic-fab.forest-mic-live[b-92eltlvd5e] { background: linear-gradient(135deg, #2dd36f, #18a558); }
.forest-mic-fab.forest-mic-error[b-92eltlvd5e] { background: linear-gradient(135deg, #f1646c, #d93636); }

.forest-mic-fab.forest-mic-live[b-92eltlvd5e]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(45, 211, 111, 0.6);
    animation: forest-mic-pulse-b-92eltlvd5e 1.5s infinite;
}

@keyframes forest-mic-pulse-b-92eltlvd5e {
    0% { box-shadow: 0 0 0 0 rgba(45, 211, 111, 0.6); }
    70% { box-shadow: 0 0 0 14px rgba(45, 211, 111, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 211, 111, 0); }
}

.forest-wave[b-92eltlvd5e] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 22px;
}

.forest-wave span[b-92eltlvd5e] {
    display: inline-block;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: #fff;
    animation: forest-wave-bar-b-92eltlvd5e 1s infinite ease-in-out;
}

.forest-wave span:nth-child(2)[b-92eltlvd5e] { animation-delay: 0.15s; }
.forest-wave span:nth-child(3)[b-92eltlvd5e] { animation-delay: 0.3s; }
.forest-wave span:nth-child(4)[b-92eltlvd5e] { animation-delay: 0.45s; }
.forest-wave span:nth-child(5)[b-92eltlvd5e] { animation-delay: 0.6s; }

@keyframes forest-wave-bar-b-92eltlvd5e {
    0%, 100% { height: 6px; }
    50% { height: 20px; }
}

/* typing バナー: フローティングコンテナ内なので背景を不透明にして DxAIChat の吹き出しと区別 */
.forest-typing-banner[b-92eltlvd5e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    line-height: 1.2;
    backdrop-filter: blur(4px);
    animation: forest-typing-banner-in-b-92eltlvd5e 0.2s ease-out;
}

.forest-typing-ai[b-92eltlvd5e] { background: rgba(45, 211, 111, 0.92); color: #fff; }
.forest-typing-user[b-92eltlvd5e] { background: rgba(255, 154, 68, 0.95); color: #fff; }
.forest-typing-reconnect[b-92eltlvd5e] { background: rgba(255, 193, 7, 0.95); color: #5a3d00; }

.forest-typing-icon[b-92eltlvd5e] { font-size: 1rem; line-height: 1; }
.forest-typing-icon-spin[b-92eltlvd5e] { animation: forest-typing-icon-rotate-b-92eltlvd5e 1.4s linear infinite; }
.forest-typing-label[b-92eltlvd5e] { font-weight: 500; }

@keyframes forest-typing-icon-rotate-b-92eltlvd5e {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.forest-typing-dots[b-92eltlvd5e] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 2px;
}

.forest-typing-dots span[b-92eltlvd5e] {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    animation: forest-typing-dot-b-92eltlvd5e 1.2s infinite ease-in-out;
}

.forest-typing-dots span:nth-child(2)[b-92eltlvd5e] { animation-delay: 0.15s; }
.forest-typing-dots span:nth-child(3)[b-92eltlvd5e] { animation-delay: 0.3s; }

@keyframes forest-typing-dot-b-92eltlvd5e {
    0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.4); }
}

@keyframes forest-typing-banner-in-b-92eltlvd5e {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Interim transcription プレビュー: 確定前の途中文字列 (typing バナーの直下) */
.forest-interim[b-92eltlvd5e] {
    max-width: 280px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.35;
    word-break: break-word;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0.85;
    animation: forest-typing-banner-in-b-92eltlvd5e 0.15s ease-out;
}

.forest-interim-ai[b-92eltlvd5e] { border-left: 3px solid #18a558; color: #1a4d2e; }
.forest-interim-user[b-92eltlvd5e] { border-left: 3px solid #d97300; color: #5a3000; }

/* レスポンシブ: 小画面 (xs / sm 576px 未満) はマイク FAB を縮小し、typing bubble の最大幅を画面幅基準に */
@media (max-width: 575.98px) {
    .forest-mic-floating[b-92eltlvd5e] { right: 8px; bottom: 70px; gap: 6px; }
    .forest-mic-fab[b-92eltlvd5e] { width: 44px; height: 44px; font-size: 18px; }
    .forest-mic-mute[b-92eltlvd5e] { width: 32px; height: 32px; font-size: 14px; }
    .forest-ai-typing[b-92eltlvd5e] { left: 8px; bottom: 70px; max-width: calc(100vw - 90px); }
    .forest-user-typing[b-92eltlvd5e] { right: 8px; bottom: 124px; max-width: calc(100vw - 90px); }
    .forest-ai-typing-text[b-92eltlvd5e],
    .forest-user-typing-text[b-92eltlvd5e] { max-width: 58vw; }
    .forest-typing-banner[b-92eltlvd5e] { padding: 3px 10px; font-size: 0.8rem; }
    .forest-connect-toast[b-92eltlvd5e] { top: 8px; padding: 6px 14px; font-size: 0.82rem; }
    .forest-assistant-livekit-config[open] .forest-assistant-livekit-config-body[b-92eltlvd5e] {
        position: static;
        min-width: 0;
        margin-top: 4px;
    }
}

/* レスポンシブ: タブレット (sm-md 576-767px) では typing bubble の最大幅だけ少し広げる */
@media (min-width: 576px) and (max-width: 767.98px) {
    .forest-ai-typing[b-92eltlvd5e],
    .forest-user-typing[b-92eltlvd5e] { max-width: calc(100vw - 110px); }
}

@media (prefers-reduced-motion: reduce) {
    .forest-mic-fab.forest-mic-live[b-92eltlvd5e]::after,
    .forest-wave span[b-92eltlvd5e],
    .forest-typing-dots span[b-92eltlvd5e],
    .forest-ai-typing-dots span[b-92eltlvd5e],
    .forest-user-typing-dots span[b-92eltlvd5e],
    .forest-mic-mute.forest-mic-mute-on[b-92eltlvd5e],
    .forest-typing-icon-spin[b-92eltlvd5e] { animation: none; }
    .forest-typing-banner[b-92eltlvd5e],
    .forest-ai-typing[b-92eltlvd5e],
    .forest-user-typing[b-92eltlvd5e],
    .forest-connect-toast[b-92eltlvd5e] { animation: none; }
}
/* /Shared/Components/VoiceAssistant/FloatingAssistantButton.razor.rz.scp.css */
/* FloatingAssistantButton 専用スタイル (CSS isolation)
   - .razor.css は Blazor が ::deep / class scope 制御を自動付与する
   - DevExpress 内部 class への上書きは `::deep` で scope 越えが必要 */

.forest-assistant-fab[b-w8z007dils] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff9a44, #ff6a00);
    color: white;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 1040;
    transition: transform 0.15s ease;
}

.forest-assistant-fab:hover[b-w8z007dils] {
    transform: scale(1.06);
}

.forest-assistant-fab:active[b-w8z007dils] {
    transform: scale(0.95);
}

/* 音声対話中はパルスで「聞いている」状態を示す */
.forest-assistant-fab-live[b-w8z007dils] {
    background: linear-gradient(135deg, #2dd36f, #18a558);
    animation: forest-fab-pulse-b-w8z007dils 1.5s infinite;
}

@keyframes forest-fab-pulse-b-w8z007dils {
    0% { box-shadow: 0 0 0 0 rgba(45, 211, 111, 0.6); }
    70% { box-shadow: 0 0 0 14px rgba(45, 211, 111, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 211, 111, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .forest-assistant-fab-live[b-w8z007dils] { animation: none; }
}

/* !! ポップアップ外装 (.forest-assistant-popup / .forest-assistant-popup-body) のスタイルはここに書けない !!
   DxPopup は body 直下 (dxbl-modal-root) へテレポートされ、この component の CSS isolation scope 属性
   (b-xxxxx) を持つ祖先が存在しない。そのため ::deep (= [scope] .forest-assistant-popup) は一切マッチしない。
   小画面オーバーフロー対策 (max-width / max-height / margin クランプ) は グローバル CSS
   wwwroot/css/app.css の `.forest-assistant-popup.dxbl-popup` に置いている。
   なお内部 AssistantChatPanel は別 component (自前の scope) なので、その .razor.css の ::deep は
   テレポート後も要素自身に scope 属性が付くため有効 (入力欄下端固定はそちらで成立)。 */