/* public/css/chat-bot.css */

/* --- ラッパー要素: 全てのUIを右下に固定 --- */
#yi-ai-contact-bot-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

/* チャットボタンのスタイル */
#yi-ai-chat-toggle {
    /* ラッパー基準で右下隅に配置 */
    position: absolute; /* ラッパー内の絶対位置 */
    bottom: 0px; 
    right: 0px; 
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--yi-ai-theme-color, #0073aa); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 10000; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

#yi-ai-chat-toggle img {
    width: 32px;
    height: 32px;
}

/* -----------------------------------
 * 初回誘導吹き出しのスタイル (修正箇所)
 * ----------------------------------- */
#yi-ai-initial-balloon {
    /* *** 修正点1: 初期表示状態 (opacity, visibilityを削除) *** */
    position: absolute; 
    bottom: 80px; 
    right: 0; 
    
    background-color: #FE9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 40px 10px 15px; 
    
    max-width: 350px;
	width:     280px;
    min-width: 250px; 
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* トランジションは残す */
    transition: opacity 0.3s, visibility 0.3s, bottom 0.3s;
    z-index: 9999;
}

/* *** 修正点2: 非表示用クラス (JSで付与する) *** */
#yi-ai-initial-balloon.yi-ai-hidden {
    opacity: 0;
    visibility: hidden;
}

/* 吹き出しのしっぽの境界線 (::before を境界線に設定) */
#yi-ai-initial-balloon::before {
    content: '';
    position: absolute;
    right: 15px; 
    bottom: -11px; 
    
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 11px 0 11px;
    border-color: #ddd transparent transparent transparent;
    z-index: 9998; 
}

/* 吹き出しのしっぽ (::after をメインの三角に設定) */
#yi-ai-initial-balloon::after {
    content: '';
    position: absolute;
    right: 16px; 
    bottom: -10px; 
    
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #FE9 transparent transparent transparent;
    z-index: 9999;
}

#yi-ai-initial-balloon p {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
	font-weight:bold;
}

#yi-ai-close-balloon {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #999;
}


/* チャットウィンドウの基本スタイル (変更なし) */
#yi-ai-chat-window {
    position: absolute; 
    bottom: 80px; 
    right: 0px;
    width: 350px;
    height: 450px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 9998;
    background: #fff;
    display: none;
    display: flex;
    flex-direction: column; 
    overflow: hidden;
}

/* ヘッダー */
.yi-ai-header {
    background-color: var(--yi-ai-theme-color, #0073aa);
    color: white;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; 
}

/* ヘッダーの閉じるボタン */
#yi-ai-close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin-left: 10px;
}


/* メッセージエリア */
.yi-ai-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f9f9f9;
}

.yi-ai-message {
    margin-bottom: 15px;
    display: flex;
}

.yi-ai-user-message {
    justify-content: flex-end;
}

.yi-ai-bot-message {
    justify-content: flex-start;
}

.yi-ai-message-content {
    max-width: 80%;
    padding: 10px;
    border-radius: 18px;
    line-height: 1.4;
    font-size: 14px;
}

.yi-ai-user-message .yi-ai-message-content {
    background-color: var(--yi-ai-theme-color, #0073aa);
    color: white;
    border-bottom-right-radius: 2px;
}

.yi-ai-bot-message .yi-ai-message-content {
    background-color: #e0e0e0;
    color: #333;
    border-bottom-left-radius: 2px;
}

/* 入力エリア */
.yi-ai-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #eee;
    flex-shrink: 0; 
}

.yi-ai-input-area input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-right: 8px;
    outline: none;
}

/* -----------------------------------
 * 修正点: 送信ボタンのスタイル
 * ----------------------------------- */
.yi-ai-input-area button {
    background-color: var(--yi-ai-theme-color, #0073aa);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    
    /* 修正点A: 文字サイズを大きくし、紙飛行機のUnicodeを適用 */
    font-size: 20px; 
    line-height: 1;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 修正点B: アイコン化のための調整 */
    padding: 0;
    position: relative;
    overflow: hidden; /* Unicode文字がはみ出さないように */
}

/* 修正点C: Unicodeの紙飛行機（U+2708）を挿入 */
#yi-ai-send-button::before {
    content: "\2708"; /* U+2708: Black Airplane (紙飛行機) */
    position: absolute;
    /* 視覚的な中央揃えと、右向きの紙飛行機として調整 */
    transform: translate(-1px, 1px) rotate(45deg); 
    display: block;
    line-height: 1;
}

/* 修正点D: 元の「▶」テキストを隠す (JSで中身を変更しない前提) */
#yi-ai-send-button {
    text-indent: -9999px; 
    /* Unicode::beforeでテキストを置き換えているため、古いテキストを隠す */
}

/* ボタン無効時のスタイル */
#yi-ai-send-button:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
}

.yi-ai-message-content a {
    color: var(--yi-ai-theme-color, #0073aa);
    text-decoration: underline;
}

/* ローディングスピナー */
.yi-ai-typing {
    display: inline-block;
    color: #555;
    font-style: italic;
    font-size: 14px;
}