/* OneTradeVN — giao diện AI Hỏi Đáp kiểu chuẩn (như ChatGPT/Claude): toàn trang, cột hội thoại ở giữa,
   tin nhắn AI không khung, tin nhắn người dùng dạng bong bóng bo tròn bên phải, ô nhập bo tròn nổi ở đáy,
   màn hình chào với các gợi ý câu hỏi. Dùng biến màu của trang nên tự đổi theo chế độ sáng/tối. */

/* ── Bố cục toàn trang (desktop) ── */
@media(min-width:769px){
  #ai-modal{top:var(--ai-top,58px);padding:0;align-items:stretch;justify-content:center;background:var(--bg-deep,#050c15);transition:none}
  #ai-modal .modal-backdrop{display:none}
  #ai-modal .modal-container{max-width:860px;width:100%;height:100%;border:none;border-radius:0;background:transparent;box-shadow:none;transform:none;transition:none}
}

/* ── Thanh tiêu đề gọn ── */
#ai-modal .modal-hdr{background:transparent;border:none;padding:14px 16px 4px;gap:10px}
#ai-modal .modal-hdr .ai-avatar{width:30px;height:30px;font-size:14px}
#ai-modal .modal-hdr .ai-info .ai-name{font-size:15px}
#ai-modal .mmt-ai-badge,#ai-modal .modal-close{display:none!important}
#ai-modal .memory-badge{margin-left:auto}
#backBtnNav{flex-shrink:0}
@media(max-width:768px){#backBtnNav{display:none!important}}  /* mobile dùng thanh tab dưới cùng */

/* Một icon AI duy nhất (sparkle, màu trắng trên nền gradient) ở mọi nơi */
.ai-avatar,.hero-logo,.msg-ai .msg-avatar{color:#fff}
#ai-modal .modal-hdr .ai-avatar .ot-ai-ico{font-size:17px}
.chat-hero .hero-logo .ot-ai-ico{font-size:30px}

/* Chọn thị trường làm ngữ cảnh: các viên thuốc nhỏ ở giữa */
#ai-modal #modal-market-tabs{justify-content:center;gap:6px;padding:6px 16px 10px;border:none;background:transparent}
#ai-modal .mmt-tab{border:1px solid var(--border);border-radius:16px;padding:5px 13px}
#ai-modal .mmt-tab.active{background:rgba(0,212,255,.1);border-color:var(--cyan,#00d4ff)}

/* ── Tin nhắn ── */
#ai-modal #chat-messages{padding:8px 16px 18px;gap:24px;scrollbar-width:thin}
#ai-modal .msg{gap:12px;max-width:100%}
#ai-modal .msg-bubble{font-size:15px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
#ai-modal .msg-ai .msg-avatar{width:28px;height:28px;font-size:12px;margin-top:2px}
#ai-modal .msg-ai .msg-avatar .ot-ai-ico{font-size:15px}
#ai-modal .msg-ai .msg-bubble{background:transparent;border:none;box-shadow:none;border-radius:0;padding:2px 0;max-width:100%;color:var(--text-hi)}
#ai-modal .msg-user .msg-avatar{display:none}
#ai-modal .msg-user .msg-bubble{background:var(--bg-card,#0c1a2c);border:1px solid var(--border);border-radius:20px;padding:10px 16px;max-width:78%;color:var(--text-hi)}
#ai-modal .sai-thinking{color:var(--text-lo);animation:otChatPulse 1.4s ease-in-out infinite}
@keyframes otChatPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Màn hình chào ── */
.chat-hero{margin:auto;width:100%;max-width:660px;text-align:center;padding:16px 4px}
.chat-hero .hero-logo{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,#a855f7,#00d4ff);box-shadow:0 0 30px rgba(168,85,247,.35)}
.chat-hero h2{margin:0 0 6px;font-size:26px;font-weight:700;color:var(--text-hi)}
.chat-hero p{margin:0 0 22px;font-size:13.5px;color:var(--text-lo)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* 2 hang the (thi truong / lich-tin) dung lien nhau khong co khoang cach — them margin de tach ro thanh 2 nhom */
.hero-grid+.hero-grid{margin-top:12px}
.hero-card{text-align:left;padding:13px 15px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card,#0c1a2c);color:var(--text-mid);font-family:inherit;font-size:13px;line-height:1.5;cursor:pointer;transition:border-color .15s,transform .15s,color .15s}
.hero-card:hover{border-color:var(--cyan,#00d4ff);color:var(--text-hi);transform:translateY(-1px)}
@media(max-width:560px){.hero-grid{grid-template-columns:1fr}.chat-hero h2{font-size:21px}}

/* ── Ô nhập kiểu viên thuốc nổi ── */
#ai-modal #chat-input-area{background:transparent;border:none;padding:6px 16px 12px;display:flex;flex-direction:column}
#ai-modal .api-config-row,#ai-modal .quick-prompts{display:none}
#ai-modal .chat-row{align-items:flex-end;gap:6px;padding:8px 8px 8px 20px;background:var(--bg-card,#0c1a2c);border:1px solid var(--border-hi,rgba(0,212,255,.3));border-radius:28px;box-shadow:0 6px 28px rgba(0,0,0,.3);transition:border-color .15s}
#ai-modal .chat-row:focus-within{border-color:var(--cyan,#00d4ff)}
#ai-modal #chatInput{flex:1;border:none;background:transparent;box-shadow:none;border-radius:0;padding:9px 0;font-size:15px;line-height:1.5;height:40px;min-height:40px;max-height:180px;overflow-y:hidden}
#ai-modal #chatInput:focus{box-shadow:none}
#ai-modal .voice-btn,#ai-modal .send-btn{width:40px;height:40px;border-radius:50%;flex-shrink:0}
#ai-modal .voice-btn{background:transparent;border:none}
.chat-disclaimer{margin-top:8px;text-align:center;font-size:11px;color:var(--text-lo)}

/* ── Chế độ sáng: bỏ nền hộp riêng của khu tin nhắn / ô nhập để cả trang một màu ── */
body.mode-light #ai-modal{background:#f3f6fb}
body.mode-light #ai-modal #chat-messages{background:transparent}
body.mode-light #ai-modal #chat-input-area{background:transparent;box-shadow:none;border:none}
body.mode-light #ai-modal .chat-row{background:#fff;border-color:rgba(0,80,190,.25);box-shadow:0 6px 24px rgba(0,40,120,.10)}
body.mode-light #ai-modal #chatInput{background:transparent}

/* ── Câu trả lời AI có định dạng nhẹ (đoạn, gạch đầu dòng, đậm, ghi chú) ── */
#ai-modal .msg-bubble.rich{white-space:normal}
#ai-modal .msg-bubble.rich p{margin:0 0 .65em}
#ai-modal .msg-bubble.rich p:last-child,#ai-modal .msg-bubble.rich ul:last-child,#ai-modal .msg-bubble.rich ol:last-child{margin-bottom:0}
#ai-modal .msg-bubble.rich ul,#ai-modal .msg-bubble.rich ol{margin:0 0 .65em;padding-left:1.25em}
#ai-modal .msg-bubble.rich ul{list-style:none;padding-left:.15em}
#ai-modal .msg-bubble.rich li{margin:.32em 0}
#ai-modal .msg-bubble.rich strong{color:var(--text-hi);font-weight:700}
#ai-modal .msg-bubble.rich p.msg-note{margin-top:.9em;font-size:12px;line-height:1.5;color:var(--text-lo)}
#ai-modal .msg-bubble.rich li:not(.emo){position:relative;padding-left:1.05em}
#ai-modal .msg-bubble.rich li:not(.emo)::before{content:"•";position:absolute;left:0;color:var(--cyan,#00d4ff)}

/* ── Gợi ý nhanh: chip nhỏ gọn dạng viên thuốc ── */
.chat-hero .hero-logo{width:46px;height:46px;border-radius:14px;margin-bottom:12px}
.chat-hero .hero-logo .ot-ai-ico{font-size:26px}
.chat-hero h2{font-size:22px}
.chat-hero p{margin-bottom:16px;font-size:13px}
.hero-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hero-card{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:12.5px;line-height:1.3;text-align:center}
.hero-card .hc-ic{font-size:14px;line-height:1}
@media(max-width:560px){.hero-grid{gap:6px}.hero-card{font-size:12px;padding:6px 12px}}

/* ── Hàng "hỏi nhanh" + gợi ý hỏi tiếp ── */
.hero-cap{margin:14px 0 8px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-lo)}
.hero-card.sub{padding:5px 11px;font-size:12px;background:transparent;color:var(--text-lo)}
.hero-card.sub:hover{color:var(--text-hi)}
.followups{display:flex;flex-wrap:wrap;gap:6px;margin:-12px 0 0 40px}
@media(max-width:560px){.followups{margin-left:0}}
.chat-disclaimer a{color:var(--cyan,#00d4ff);text-decoration:underline}

/* ── Tối ưu điện thoại cho khung AI ── */
@media(max-width:768px){
  #ai-modal #modal-market-tabs{display:none!important}   /* AI tự nhận biết thị trường qua câu hỏi + bảng nhanh; tab này không còn tác dụng */
  #ai-modal .modal-hdr{padding:10px 12px 4px}
  #ai-modal #chat-messages{padding:6px 12px 12px;gap:18px}
  #ai-modal .msg-bubble{font-size:14.5px;line-height:1.65}
  #ai-modal .msg-user .msg-bubble{max-width:88%;padding:9px 14px}
  #ai-modal .msg{gap:10px}
  .chat-hero{padding:4px 0}
  .chat-hero .hero-logo{width:40px;height:40px;margin-bottom:8px;border-radius:12px}
  .chat-hero .hero-logo .ot-ai-ico{font-size:22px}
  .chat-hero h2{font-size:19px;margin-bottom:10px}
  .chat-hero p{display:none}
  .hero-cap{margin:10px 0 6px}
  .hero-grid{gap:6px}
  .hero-card{padding:8px 12px;min-height:36px;font-size:12.5px}       /* vùng chạm >= 36px */
  .hero-card.sub{padding:7px 11px;min-height:34px;font-size:12px}
  .followups{margin-top:-8px}
  #ai-modal #chat-input-area{padding:4px 10px 8px}
  #ai-modal .chat-row{padding:6px 6px 6px 16px}
  #ai-modal #chatInput{font-size:16px}                                  /* >=16px: iOS không tự phóng to khi bấm vào ô nhập */
  .chat-disclaimer{font-size:10px;line-height:1.35;margin-top:6px}
  .chat-disclaimer .dis-b{display:none}
}
/* Màn hình thấp (điện thoại nhỏ / bàn phím mở): bỏ logo, bớt 2 chip cuối để vừa khung không phải cuộn */
@media(max-width:768px) and (max-height:700px){
  .chat-hero .hero-logo{display:none}
  .hero-cap + .hero-grid .hero-card.sub:nth-child(n+6){display:none}
}