/* こぴぺたくん チャットボット用スタイル - 本番環境デザイン適用版 */

/* 
 * 変更履歴:
 * 2025-01-16: 本番環境のデザインを適用
 * - カラースキームを本番環境に合わせた（青→緑、白→グレー）
 * - ボタンの角丸を減らした（24px → 3px）
 * - テーマ CSS 変数を使用
 * - 新機能（タイピングインジケーター、タイムスタンプ等）は維持
 * 
 * 注意: JavaScriptとの整合性を保つため、クラス名は開発環境のものを維持
 */

/* チャットボットコンテナ */
#copipeta-chatbot-container {
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
    max-width: 900px; /* PC: 600px * 1.5 */
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    /* heightを指定しない場合は、中身に応じて高さが決まる */
}

/* チャット履歴エリア */
#copipeta-chat-history {
    height: 525px; /* PC: 350px * 1.5 */
    max-height: 525px; /* 最大高さを制限 */
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 3px;
    scroll-behavior: smooth;
    flex-grow: 0; /* PC版では固定高さを維持 */
}

/* スクロールバーのスタイリング */
#copipeta-chat-history::-webkit-scrollbar {
    width: 6px;
}

#copipeta-chat-history::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#copipeta-chat-history::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

#copipeta-chat-history::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* メッセージコンテナ */
.copipeta-message-wrapper {
    display: flex;
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease-in;
}

/* ユーザーメッセージのラッパー */
.copipeta-message-wrapper.user-message {
    justify-content: flex-end;
}

/* AIメッセージのラッパー */
.copipeta-message-wrapper.model-message {
    justify-content: flex-start;
}

/* メッセージバブル共通スタイル */
.copipeta-message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ユーザーメッセージのバブル */
.user-message .copipeta-message-bubble {
    background-color: #dcf8c6; /* ユーザーメッセージの背景色（薄い緑） */
    color: #333333;
    border-radius: 15px 15px 0 15px; /* 右下だけ角 */
    margin-right: 8px;
}

/* AIメッセージのバブル */
.model-message .copipeta-message-bubble {
    background-color: #f1f0f0; /* モデルメッセージの背景色（薄いグレー） */
    color: #333333;
    border: 1px solid #e0e0e0;
    border-radius: 15px 15px 15px 0; /* 左下だけ角 */
    margin-left: 8px;
}

/* システムメッセージ */
.system-message {
    text-align: center;
    margin: 16px 0;
}

.system-message .copipeta-message-bubble {
    background-color: #ffebee; /* エラーっぽい色 (薄い赤) */
    color: #c62828; /* 少し濃い赤文字 */
    border: 1px solid #ef9a9a;
    border-radius: 5px; /* 少し角ばった感じ */
    padding: 12px 16px;
    display: inline-block;
    max-width: 80%;
    font-size: 0.9em;
}

/* タイムスタンプ（新機能） */
.copipeta-timestamp {
    font-size: 0.75em;
    color: #999;
    margin-top: 4px;
    text-align: right;
}

.model-message .copipeta-timestamp {
    text-align: left;
}

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* チャットコントロールエリア */
#copipeta-chat-controls {
    background-color: #f9f9f9; /* コンテナと同じ背景色 */
    border-top: none;
    padding: 0;
    flex-shrink: 0;
}

/* 入力フォーム */
#copipeta-chat-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

#copipeta-input-container {
    display: flex;
    gap: 10px;
    flex: 1;
}

/* テキスト入力欄 */
#copipeta-user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
    background-color: #ffffff;
    box-sizing: border-box;
}

#copipeta-user-input:focus {
    border-color: var(--ark-color--link, #003276);
    background-color: #ffffff;
}

#copipeta-user-input::placeholder {
    color: #999;
}

/* 送信ボタン */
#copipeta-send-button {
    padding: 0 15px;
    background-color: var(--ark-color--main, #ff9c39);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    height: 40px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
}

#copipeta-send-button:hover {
    background-color: var(--ark-color--link, #003276);
}

#copipeta-send-button:active {
    transform: scale(0.98);
}

/* アクションボタンエリア */
#copipeta-action-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* アクションボタン共通スタイル */
.copipeta-action-btn {
    padding: 0 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: white;
    height: 40px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
}

/* リセットボタン */
#copipeta-reset-button {
    background-color: var(--ark-color--link, #003276);
}

#copipeta-reset-button:hover {
    background-color: #ffca28;
}

/* 共有ボタン */
#copipeta-share-button {
    background-color: #607d8b;
}

#copipeta-share-button:hover {
    background-color: #78909c;
}

#copipeta-share-button.copied {
    background-color: #4caf50;
    color: white;
}

/* ステータス表示 */
#copipeta-chat-status {
    text-align: center;
    font-size: 0.85em;
    color: #666;
    padding: 8px 16px;
    min-height: 20px;
    flex-shrink: 0;
}

#copipeta-chat-status.loading {
    color: #007cba;
}

#copipeta-chat-status.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007cba;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* 選択肢ボタン */
.copipeta-buttons-container {
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    clear: both;
}

.copipeta-choice-button {
    padding: 6px 12px;
    background-color: #ffffff;
    color: var(--ark-color--link, #007bff);
    border: 1px solid var(--ark-color--link, #007bff);
    border-radius: 15px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
    line-height: 1.4;
}

.copipeta-choice-button:hover {
    background-color: var(--ark-color--link, #007bff);
    color: #ffffff;
}

/* タイピングインジケーター（新機能） */
.copipeta-typing-indicator {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #f1f0f0; /* AIメッセージと同じ背景色 */
    border-radius: 15px 15px 15px 0;
    display: inline-flex;
    margin-bottom: 8px;
}

.copipeta-typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #666;
    margin: 0 2px;
    animation: typing 1.4s infinite;
}

.copipeta-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.copipeta-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
}

/* レスポンシブデザイン */
@media (max-width: 767px) {
    #copipeta-chatbot-container {
        width: 90vw; /* スマホ: 幅85% */
        max-width: 90vw;
        height: 70vh; /* スマホ: 高さ70% */
        margin: 10vh auto; /* 上下左右中央寄せ */
        padding: 10px;
        border-radius: 5px;
    }
    
    #copipeta-chat-history {
        height: auto; /* 固定高さを解除 */
        flex-grow: 1; /* 残りの高さを埋める */
        margin-bottom: 10px;
        padding: 10px;
    }
    
    /* メッセージの最大幅を調整 */
    .copipeta-message-wrapper.user-message,
    .copipeta-message-wrapper.model-message {
        max-width: 90%;
    }
    
    .copipeta-message-bubble {
        max-width: 100%;
        padding: 10px 14px;
        font-size: 14px;
    }
    
    #copipeta-chat-form {
        flex-direction: column;
        gap: 8px;
    }
    
    #copipeta-input-container {
        width: 100%;
    }
    
    #copipeta-user-input {
        width: 100%;
        font-size: 16px; /* iOSでのズーム防止 */
    }
    
    #copipeta-send-button {
        width: 100%;
        padding: 10px 15px;
        font-size: 16px;
        line-height: normal;
    }
    
    /* リセット・共有ボタンを囲むdiv */
    .copipeta-sub-buttons {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    
    /* リセット・共有ボタンの幅を調整 */
    .copipeta-sub-buttons #copipeta-reset-button,
    .copipeta-sub-buttons #copipeta-share-button {
        width: calc(50% - 4px); /* gap(8px)の半分を引く */
    }
    
    #copipeta-action-buttons {
        flex-direction: row;
        width: 100%;
    }
    
    .copipeta-action-btn {
        flex: 1;
    }
    
    /* 選択肢ボタンの調整 */
    .copipeta-choice-button {
        font-size: 0.85em;
        padding: 5px 10px;
    }
}

/* ダークモード対応（オプション・新機能） */
@media (prefers-color-scheme: dark) {
    #copipeta-chatbot-container {
        background-color: #1a1a1a;
        border-color: #333;
    }
    
    #copipeta-chat-history {
        background-color: #0d0d0d;
    }
    
    .model-message .copipeta-message-bubble {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
    
    #copipeta-user-input {
        background-color: #2a2a2a;
        border-color: #444;
        color: #e0e0e0;
    }
    
    #copipeta-chat-controls {
        background-color: #1a1a1a;
        border-top-color: #333;
    }
    
    .copipeta-action-btn {
        background-color: #2a2a2a;
        border-color: #444;
        color: #e0e0e0;
    }
}