/* Trang /chat — dùng chung biến màu với style.css, thêm layout riêng cho khu soạn prompt */

.chat-page{display:flex;flex-direction:column;height:100vh;overflow:hidden;max-width:100vw;}

.chat-header{border-bottom:1px solid var(--border);}
.chat-header-right{display:flex;align-items:center;gap:10px;position:relative;}
.chat-header .pill{
  background:var(--bg-panel-2);border:1px solid var(--border);
  border-radius:999px;padding:4px 12px;font-size:.85rem;color:var(--text-muted);
}

.icon-btn{
  background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--radius-s);
  width:34px;height:34px;font-size:1.05rem;cursor:pointer;color:var(--text-primary);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s ease, transform .1s ease;
}
.icon-btn:hover{border-color:var(--accent-2);}
.icon-btn:active{transform:scale(.94);}

/* ---------- menu gộp (thay cho nhiều nút rời) ---------- */
.menu-wrap{position:relative;}
.dropdown-menu{
  display:none;position:absolute;right:0;top:calc(100% + 8px);width:220px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  box-shadow:0 14px 34px rgba(0,0,0,.45);overflow:hidden;z-index:60;
  animation:dropIn .15s ease;
}
.dropdown-menu.open{display:block;}
.dropdown-menu .dropdown-item{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
  text-align:left;padding:11px 14px;color:var(--text-primary);cursor:pointer;font-size:.92rem;
  font-family:inherit;transition:background .12s ease;
}
.dropdown-menu .dropdown-item:hover{background:rgba(255,255,255,.05);}
.dropdown-menu .dropdown-item + .dropdown-item{border-top:1px solid var(--border);}

@keyframes dropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

.chat-shell{
  flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;
  max-width:900px;width:100%;margin:0 auto;padding:16px 16px 0;
}

/* ---------- messages ---------- */
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 4px 16px;display:flex;flex-direction:column;gap:14px;}
.msg{display:flex;animation:msgIn .25s ease both;}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.msg-user{justify-content:flex-end;}
.msg-bot{justify-content:flex-start;}
.msg-bubble{
  max-width:85%;padding:12px 16px;border-radius:var(--radius-m);
  white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;
}
.msg-user .msg-bubble{background:var(--accent-2);color:#0F1115;border-bottom-right-radius:4px;}
.msg-bot .msg-bubble{background:var(--bg-panel);border:1px solid var(--border);border-bottom-left-radius:4px;}
.msg-bubble .file-chip{
  display:inline-block;background:var(--bg-panel-2);border:1px solid var(--border);
  border-radius:var(--radius-s);padding:2px 8px;font-size:.8rem;margin:4px 4px 0 0;
}

/* Hiệu ứng "đang gõ" thay vì chữ tĩnh */
.typing-dots{display:inline-flex;gap:4px;align-items:center;padding:2px 0;}
.typing-dots span{
  width:6px;height:6px;border-radius:50%;background:var(--text-muted);
  animation:typingBounce 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0);opacity:.5;}
  30%{transform:translateY(-4px);opacity:1;}
}

/* ---------- attach preview (before sending) ---------- */
.attach-preview{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px;}
.attach-preview:empty{display:none;}
.attach-item{
  display:flex;align-items:center;gap:6px;background:var(--bg-panel-2);
  border:1px solid var(--border);border-radius:var(--radius-s);
  padding:5px 10px;font-size:.82rem;color:var(--text-muted);
  animation:msgIn .2s ease both;
}
.attach-item .remove{cursor:pointer;color:var(--danger);font-weight:600;}

/* ---------- composer ---------- */
.composer{
  border:1px solid var(--border);border-radius:var(--radius-m);
  background:var(--bg-panel);padding:10px 12px 12px;margin:10px 0 16px;
  transition:border-color .15s ease;
}
.composer:focus-within{border-color:var(--accent-2);}
.composer-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.composer-hint{font-size:.75rem;color:var(--text-muted);}

.prompt-textarea{
  width:100%;resize:vertical;min-height:90px;max-height:50vh;
  background:transparent;border:none;outline:none;color:var(--text-primary);
  font-family:'Inter',sans-serif;font-size:1rem;line-height:1.5;padding:6px 2px;
}

.composer-actions{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.char-count{font-size:.78rem;color:var(--text-muted);}
.btn-accent{
  background:var(--accent);color:var(--accent-ink);border:none;
  border-radius:var(--radius-s);padding:8px 20px;font-weight:600;cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.btn-accent:hover{filter:brightness(1.08);}
.btn-accent:active{transform:scale(.97);}
.btn-accent:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- panel lịch sử ---------- */
.panel-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;
}
.panel-overlay.open{display:block;animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.history-panel{
  position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;
  background:var(--bg-panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .2s ease;
}
.panel-overlay.open .history-panel{transform:translateX(0);}

.history-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.history-header h3{margin:0;font-size:1rem;}
.history-list{flex:1;overflow-y:auto;padding:8px;}
.history-empty{color:var(--text-muted);font-size:.85rem;padding:16px 8px;text-align:center;}

.history-item{
  display:flex;align-items:center;gap:8px;padding:10px 10px;border-radius:var(--radius-s);
  cursor:pointer;transition:background .12s ease;margin-bottom:4px;
}
.history-item:hover{background:rgba(255,255,255,.05);}
.history-item.active{background:var(--bg-panel-2);border:1px solid var(--accent-2);}
.history-item-title{flex:1;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.history-item-delete{
  flex-shrink:0;background:none;border:none;color:var(--text-muted);cursor:pointer;
  font-size:.9rem;padding:2px 6px;border-radius:6px;
}
.history-item-delete:hover{color:var(--danger);background:rgba(229,115,94,.12);}

/* ---------- settings modal ---------- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
  align-items:center;justify-content:center;z-index:100;
}
.modal-overlay.open{display:flex;animation:fadeIn .15s ease;}
.modal{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:22px;width:90%;max-width:360px;animation:dropIn .18s ease;
}
.field-label{display:block;margin:12px 0 4px;font-size:.85rem;color:var(--text-muted);}
.field-select{
  width:100%;background:var(--bg-panel-2);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius-s);padding:8px;font-family:inherit;
}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}

@media (max-width:600px){
  .chat-shell{padding:10px 10px 0;}
  .msg-bubble{max-width:92%;}
}