/* Chat AI (aiapi) — tone violet→cyan. Dùng cm-* variables. */
[v-cloak]{display:none !important;}

.aiapi-chat{
  display:flex; flex-direction:column;
  height:calc(100vh - 215px); min-height:460px; margin-bottom:24px;
  background:var(--cm-gradient-card);
  border:1px solid var(--cm-border);
  border-radius:var(--cm-radius-lg);
  overflow:hidden;
}

/* ── thanh trên ── */
.aiapi-chat-top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--cm-border);
  background:rgba(124,58,237,0.06);
}
.aiapi-chat-top-left{display:flex; align-items:center; gap:8px; min-width:0;}
.aiapi-chat-mlabel{color:var(--cm-text-muted);}
.aiapi-chat-model{max-width:340px; min-width:180px;}
.aiapi-chat-gear{
  width:38px; height:38px; flex:0 0 auto; border-radius:var(--cm-radius-md);
  border:1px solid var(--cm-border); background:var(--cm-bg-card); color:var(--cm-text-secondary);
  cursor:pointer; transition:var(--cm-transition-fast);
}
.aiapi-chat-gear:hover,.aiapi-chat-gear.active{color:#a855f7; border-color:var(--cm-primary-border);}
.aiapi-chat-top-right{display:flex; align-items:center; gap:12px;}
.aiapi-chat-balance{
  font-weight:700; color:#facc15; white-space:nowrap;
  background:rgba(250,204,21,0.1); padding:6px 12px; border-radius:var(--cm-radius-full); font-size:var(--cm-font-sm);
}
.aiapi-chat-clear{
  background:none; border:none; color:var(--cm-text-muted); cursor:pointer; font-size:15px;
}
.aiapi-chat-clear:hover{color:var(--cm-danger);}

/* ── panel cài đặt ── */
.aiapi-chat-settings{
  padding:14px 16px; border-bottom:1px solid var(--cm-border);
  background:rgba(0,0,0,0.15);
}
.aiapi-set-row{margin-bottom:12px;}
.aiapi-set-row label,.aiapi-set-grid label{
  display:block; font-size:var(--cm-font-sm); color:var(--cm-text-secondary); margin-bottom:6px;
}
.aiapi-set-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.aiapi-set-grid input[type=range]{width:100%; accent-color:#a855f7;}
@media (max-width:640px){.aiapi-set-grid{grid-template-columns:1fr;}}

/* ── khung hội thoại ── */
.aiapi-chat-stream{
  flex:1 1 auto; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:16px;
}
.aiapi-chat-hello{
  margin:auto; text-align:center; color:var(--cm-text-muted); max-width:420px;
}
.aiapi-chat-hello-icon{
  font-size:38px; margin-bottom:12px;
  background:linear-gradient(135deg,#7c3aed,#06b6d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.aiapi-msg{display:flex; gap:12px; align-items:flex-start; max-width:100%;}
.aiapi-msg-ava{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.aiapi-msg-user .aiapi-msg-ava{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.aiapi-msg-assistant .aiapi-msg-ava{background:linear-gradient(135deg,#0891b2,#06b6d4);}
.aiapi-msg-body{
  flex:1 1 auto; min-width:0;
  background:var(--cm-bg-card); border:1px solid var(--cm-border);
  border-radius:var(--cm-radius-md); padding:12px 14px;
}
/* KHÁCH ở PHẢI, AI ở TRÁI (như Claude.ai) */
.aiapi-msg-user{flex-direction:row-reverse;}
.aiapi-msg-user .aiapi-msg-body{flex:0 1 auto; max-width:80%; background:rgba(124,58,237,0.14); border-color:var(--cm-primary-border);}
.aiapi-msg-text{
  color:var(--cm-text-primary); white-space:pre-wrap; word-wrap:break-word; line-height:1.6; font-size:var(--cm-font-base);
}
.aiapi-msg-reason{
  margin-bottom:8px; border:1px dashed var(--cm-border-strong); border-radius:var(--cm-radius-sm); overflow:hidden;
}
.aiapi-msg-reason-head{
  padding:6px 10px; font-size:var(--cm-font-xs); color:var(--cm-text-muted); cursor:pointer;
  display:flex; align-items:center; gap:6px; background:rgba(0,0,0,0.15);
}
.aiapi-msg-reason-head .fa-chevron-up,.aiapi-msg-reason-head .fa-chevron-down{margin-left:auto;}
.aiapi-msg-reason-body{
  margin:0; padding:10px; font-size:var(--cm-font-xs); color:var(--cm-text-secondary);
  white-space:pre-wrap; word-wrap:break-word; max-height:240px; overflow:auto; background:rgba(0,0,0,0.1);
}
.aiapi-cursor{
  display:inline-block; width:8px; height:16px; margin-left:2px; vertical-align:text-bottom;
  background:#a855f7; animation:aiapi-blink 1s steps(2) infinite;
}
@keyframes aiapi-blink{0%,100%{opacity:1;}50%{opacity:0;}}

/* ── ô nhập ── */
.aiapi-chat-input{
  display:flex; gap:10px; align-items:flex-end; padding:12px 16px; border-top:1px solid var(--cm-border);
  background:rgba(0,0,0,0.15);
}
.aiapi-chat-input textarea{
  flex:1 1 auto; resize:none; max-height:160px;
  background:var(--cm-bg-card); border:1px solid var(--cm-border); border-radius:var(--cm-radius-md);
  color:var(--cm-text-primary); padding:12px 14px; font-size:var(--cm-font-base); line-height:1.5; font-family:inherit;
}
.aiapi-chat-input textarea:focus{outline:none; border-color:var(--cm-primary-border);}
.aiapi-send,.aiapi-stop{
  width:46px; height:46px; flex:0 0 auto; border:none; border-radius:var(--cm-radius-md);
  color:#fff; cursor:pointer; font-size:16px; transition:var(--cm-transition-fast);
}
.aiapi-send{background:linear-gradient(135deg,#7c3aed,#06b6d4);}
.aiapi-send:disabled{opacity:.45; cursor:not-allowed;}
.aiapi-send:not(:disabled):hover{box-shadow:0 6px 16px rgba(124,58,237,0.4);}
.aiapi-stop{background:var(--cm-danger);}
.aiapi-stop:hover{filter:brightness(1.1);}
.aiapi-chat-foot{
  padding:8px 16px 12px; font-size:var(--cm-font-xs); color:var(--cm-text-muted); text-align:center;
}

/* Mobile: chừa đáy để nút Send KHÔNG đè widget hỗ trợ (fixed góc phải-dưới) */
@media (max-width:640px){
  .aiapi-chat{ height:calc(100vh - 180px); min-height:400px; margin-bottom:80px; }
  .aiapi-msg-user .aiapi-msg-body{ max-width:88%; }
}