/* Dodo AI Hub v2.1 — Chat + Content + Search */

/* ── トグルボタン ── */
#dodo-aih-chat-toggle {
    position: fixed; bottom: 20px; right: 20px; z-index: 99998;
    background: linear-gradient(135deg, #FFD93D, #FF6B6B);
    border: none; border-radius: 50px; padding: 10px 18px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25); transition: transform .2s, bottom .3s;
    font-size: 14px; color: #333; font-weight: 700;
}
#dodo-aih-chat-toggle:hover { transform: scale(1.08); }
.dodo-aih-toggle-icon { font-size: 22px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; }
.dodo-aih-toggle-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ★ Music Player重なり回避 */
#dodo-aih-chat-toggle.dodo-aih-offset-music { bottom: 86px; }
#dodo-aih-chat-panel.dodo-aih-offset-music  { bottom: 146px; }

/* ── パネル ── */
#dodo-aih-chat-panel {
    position: fixed; bottom: 80px; right: 20px; z-index: 99999;
    width: 360px; max-width: calc(100vw - 32px); max-height: 540px;
    background: #1a1a2e; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: "Hiragino Sans","Yu Gothic","Meiryo",sans-serif; transition: bottom .3s;
}
#dodo-aih-chat-panel.dodo-aih-hidden { display: none !important; }

/* ヘッダー */
.dodo-aih-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #16213e; border-bottom: 1px solid #0f3460; }
#dodo-aih-chat-close { background: none; border: none; color: #888; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; }
#dodo-aih-chat-close:hover { background: rgba(255,255,255,.1); color: #fff; }

/* キャラ選択 */
.dodo-aih-char-selector { display: flex; gap: 4px; flex-wrap: wrap; }
.dodo-aih-char-btn {
    background: rgba(255,255,255,.08); border: 2px solid transparent; border-radius: 20px;
    padding: 3px 10px 3px 3px; cursor: pointer; font-size: 12px; color: #ccc;
    transition: all .2s; display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.dodo-aih-char-btn:hover { background: rgba(255,255,255,.15); }
.dodo-aih-char-btn.active { color: #fff; font-weight: 700; }
.dodo-aih-char-btn-icon { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.dodo-aih-char-btn-icon img { width: 100%; height: 100%; object-fit: cover; }

/* メッセージ */
.dodo-aih-chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 360px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.dodo-aih-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; word-wrap: break-word; animation: dodoFade .3s ease; }
@keyframes dodoFade { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
.dodo-aih-msg-user { align-self: flex-end; background: #0f3460; color: #e0e0e0; border-bottom-right-radius: 4px; }
.dodo-aih-msg-ai { align-self: flex-start; background: #222; color: #f0f0f0; border-bottom-left-radius: 4px; }
.dodo-aih-msg-ai .dodo-aih-msg-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dodo-aih-msg-avatar { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.dodo-aih-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dodo-aih-msg-char { font-size: 12px; font-weight: 700; }
.dodo-aih-msg-system { align-self: center; background: rgba(255,255,255,.05); color: #888; font-size: 12px; padding: 6px 12px; border-radius: 10px; }
.dodo-aih-msg-typing { align-self: flex-start; background: #222; color: #888; padding: 10px 14px; border-radius: 16px; }
.dodo-aih-typing-dots span { animation: dodoDots 1.2s infinite; display: inline-block; }
.dodo-aih-typing-dots span:nth-child(2) { animation-delay: .2s; }
.dodo-aih-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dodoDots { 0%,80%,100%{opacity:.3}40%{opacity:1} }

/* ★ サジェスチョンボタン */
.dodo-aih-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; animation: dodoFade .3s ease; }
.dodo-aih-suggestion-btn {
    background: rgba(255,217,61,.15); border: 1px solid rgba(255,217,61,.4);
    border-radius: 16px; padding: 6px 14px; font-size: 12px; color: #FFD93D;
    cursor: pointer; transition: all .2s; white-space: nowrap;
}
.dodo-aih-suggestion-btn:hover { background: rgba(255,217,61,.3); transform: translateY(-1px); }

/* 入力 */
.dodo-aih-chat-input-wrap { display: flex; padding: 10px 12px; background: #16213e; border-top: 1px solid #0f3460; gap: 8px; }
#dodo-aih-input { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 8px 16px; color: #fff; font-size: 14px; outline: none; }
#dodo-aih-input::placeholder { color: #666; }
#dodo-aih-input:focus { border-color: #FFD93D; }
#dodo-aih-send { background: #FFD93D; border: none; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
#dodo-aih-send:hover { transform: scale(1.1); }
#dodo-aih-send:disabled { opacity: .5; }
.dodo-aih-chat-footer { text-align: center; padding: 5px; font-size: 10px; color: #555; background: #16213e; }

/* ── コンテンツツール ── */
.dodo-aih-content-tools { margin: 30px 0; padding: 20px; background: linear-gradient(135deg,#f8f9fa,#e9ecef); border-radius: 12px; border: 1px solid #dee2e6; }
.dodo-aih-tools-label { font-size: 14px; font-weight: 700; color: #495057; margin-bottom: 10px; }
.dodo-aih-tools-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.dodo-aih-tool-btn { background: #fff; border: 1px solid #ced4da; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 13px; transition: all .2s; color: #333; }
.dodo-aih-tool-btn:hover { background: #FFD93D; border-color: #FFD93D; transform: translateY(-1px); }
.dodo-aih-tool-btn:disabled { opacity: .5; cursor: wait; }
.dodo-aih-result { margin-top: 16px; padding: 16px; background: #fff; border-radius: 8px; border: 1px solid #dee2e6; font-size: 14px; line-height: 1.8; }
.dodo-aih-error { color: #c0392b; }

/* ── AI検索 ── */
.dodo-aih-search-box { max-width: 600px; margin: 20px auto; }
.dodo-aih-search-input-wrap { display: flex; gap: 8px; }
.dodo-aih-search-input { flex: 1; padding: 12px 18px; border: 2px solid #dee2e6; border-radius: 30px; font-size: 15px; outline: none; }
.dodo-aih-search-input:focus { border-color: #FFD93D; }
.dodo-aih-search-btn { background: #FFD93D; border: none; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; font-size: 20px; }
.dodo-aih-search-answer { background: #f0f7ff; padding: 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; line-height: 1.7; border-left: 4px solid #3498db; }
.dodo-aih-search-item { display: block; padding: 12px 16px; margin-bottom: 8px; background: #fff; border: 1px solid #eee; border-radius: 8px; text-decoration: none; color: #333; transition: box-shadow .2s; }
.dodo-aih-search-item:hover { box-shadow: 0 3px 12px rgba(0,0,0,.1); }
.dodo-aih-search-item-title { font-weight: 700; color: #2c3e50; margin-bottom: 4px; }
.dodo-aih-search-item-meta { font-size: 12px; color: #999; }

/* ── モバイル ── */
@media (max-width: 480px) {
    #dodo-aih-chat-panel { width: calc(100vw - 20px); right: 10px; bottom: 70px; max-height: 70vh; }
    #dodo-aih-chat-toggle { bottom: 12px; right: 12px; padding: 8px 14px; }
    .dodo-aih-toggle-label { display: none; }
    #dodo-aih-chat-toggle.dodo-aih-offset-music { bottom: 78px; }
    #dodo-aih-chat-panel.dodo-aih-offset-music  { bottom: 138px; }
}