/* スマホサイズのとき、フォーム文字を16px以上に */
@media (max-width: 767.98px) {
  input,
  textarea,
  select,
  .form-control {
    font-size: 16px !important;
  }
}

/* チャットウィンドウ */
#okojo-ai-chat {
    height: 60vh;
    overflow-y: auto;
    background: #f5f7fa;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #e3e6ec;
}

/* バブル（共通） */
.bubble {
    max-width: 80%;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    line-height: 1.6;
    font-size: 15px;
    white-space: pre-wrap;
}

/* ユーザー（左） */
.bubble-user {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    margin-left: auto;
}

/* AI（右） */
.bubble-ai {
    background: #e6f0ff;
    border: 1px solid #bcd4f0;
    margin-right: auto;
}

/* ローディング演出 */
.typing {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #777;
    border-radius: 50%;
    margin-right: 4px;
    animation: typing 1s infinite;
}

@keyframes typing {
    0% { opacity: .2; }
    50% { opacity: 1; }
    100% { opacity: .2; }
}

/* ========== チャット入力エリアのボタン共通 ========== */
#okojo-ai-send,
#okojo-ai-voice {
    border: none;
    outline: none;
    cursor: pointer;
    height: 44px;                /* 親指で押しやすいサイズ */
    min-width: 80px;
    border-radius: 8px;          /* 角を丸く */
    display: inline-block;
    align-items: center;
    justify-content: center;
    font-size: 20px;             /* アイコン大きめ */
    transition: all 0.15s ease;
    margin-left: 6px;
    margin-top: 1em;
}

/* ホバー（PC用） */
#okojo-ai-send:hover,
#okojo-ai-voice:hover {
    opacity: 0.85;
}

/* 押したときの“カチッ”としたフィードバック */
#okojo-ai-send:active,
#okojo-ai-voice:active {
    transform: scale(0.92);
}


/* ========== 音声入力ボタン ========== */
#okojo-ai-voice {
    background: #ffd54f; /* 明るい黄色 */
    color: #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    font-weight: bold;
}

/* 録音中の色（recognition.start() のとき textContent を ■ にしてる場合） */
#okojo-ai-voice.recording {
    background: #d32f2f; /* 赤くする */
    color: #fff;
}


/* ========== 送信ボタン ========== */
#okojo-ai-send {
    background: #42a5f5; /* 明るめの青 */
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    font-weight: bold;
}

/* スマホ専用サイズ（iPhoneでズームさせないために16px以上） */
@media (max-width: 767.98px) {
    #okojo-ai-input {
        font-size: 16px;
    }

    #okojo-ai-send,
    #okojo-ai-voice {
        height: 46px;
       margin-top: 1em;
        font-size: 22px;
    }
}