/* ===================== Attachments (upload image) ===================== */
.attach-btn { width:36px;height:36px;border-radius:999px;border:1px solid var(--bubble-border);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; }
/* Không dùng display:none cho file input -> dùng visually-hidden */
.sr-only-file{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.attach-btn:hover { background: #f3f4f6; }
.attach-btn svg { width: 18px; height: 18px; }

:root{
  --bg:#f3f4f6; --brand:#003366; --brand-2:#0055aa; --text:#0f172a; --muted:#64748b;
  --bubble-user:#f1f5f9; --bubble-bot:#fff; --bubble-border:#e2e8f0; --radius:12px; --footer-h:64px;
  --ui-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --media-max:360px; --thumb-size:40px;
}
.prompt-wrap.has-thumb #prompt{ padding-top:calc(var(--thumb-size) + 28px); padding-left:12px; min-height:calc(var(--thumb-size) + 56px); }
.prompt-wrap.has-thumb #prompt::placeholder{ opacity:.9; }

.thumb-box{ position:absolute; top:10px; left:12px; display:inline-flex; align-items:center; gap:8px; z-index:2; background:transparent; padding:0; border-radius:12px; }
.thumb-box img{ width:var(--thumb-size); height:var(--thumb-size); border-radius:12px; object-fit:cover; border:1px solid var(--bubble-border); box-shadow:0 2px 6px rgba(0,0,0,.08); }

.thumb-actions{ position:absolute; top:-6px; right:-6px; display:flex; gap:6px; z-index:5; }
.thumb-remove, .thumb-action-btn{
  width:22px; height:22px; border-radius:999px; border:1px solid rgba(0,0,0,.15);
  background:rgba(17,24,39,.95); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-2px); transition:opacity .15s ease, transform .15s ease;
}
.thumb-box:hover .thumb-action-btn, .thumb-box:hover .thumb-remove{ opacity:1; transform:translateY(0); }
@media (hover:none){ .thumb-action-btn, .thumb-remove{ opacity:1; transform:none; } }

.attach-btn.in-input{
  border-color:transparent; background:transparent; box-shadow:none; color:#94a3b8;
  position:absolute; left:8px; bottom:8px; z-index:2; width:36px; height:36px;
}
.attach-btn.in-input svg{ stroke:currentColor; }
.attach-btn.in-input:hover, .attach-btn.in-input:focus-visible{
  background:#fff; border-color:transparent; box-shadow:0 0 0 2px #e5e7eb; color:#0f172a;
}
.attach-btn.in-input:active{ box-shadow:0 0 0 2px #d1d5db; }
.attach-btn.in-input:disabled{ opacity:.45; box-shadow:none; pointer-events:none; }
.prompt-wrap.has-thumb .attach-btn.in-input{ display:none !important; }

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--text); font-family:var(--ui-font);
  display:flex; justify-content:center; align-items:stretch; min-height:100svh; overflow-x:hidden;
}
input,textarea,button{ font-family:var(--ui-font); }
.hidden{ display:none !important; }

/* ===================== Login ===================== */
.login-wrapper{ width:100%; max-width:400px; background:#fff; padding:32px; border-radius:var(--radius); box-shadow:0 4px 14px rgba(0,0,0,.08); text-align:center; margin:16px; }
.login-wrapper h2{ margin-bottom:16px; font-size:clamp(18px,4.5vw,24px); line-height:1.2; }
.login-wrapper input{ width:100%; padding:12px 14px; margin-bottom:8px; border:1px solid var(--bubble-border); border-radius:var(--radius); font-size:16px; }
.login-wrapper small{ display:block; color:#64748b; font-size:12px; margin-bottom:12px; }
.login-wrapper button{ width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer; font-size:15px; }
.login-wrapper button:hover{ background:var(--brand-2); border-color:var(--brand-2); }

/* ===================== Chat wrapper ===================== */
.chat-wrapper{
  width:100%; max-width:920px; height:100svh; background:#fff; border:1px solid var(--bubble-border);
  border-radius:var(--radius); display:flex; flex-direction:column; box-shadow:0 4px 14px rgba(0,0,0,.08); overflow:hidden; contain:layout size style;
}

header{ position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--bubble-border); background:#fff; }
header .title{ text-align:center; flex:1; }
header img{ height:clamp(32px,6vw,64px); width:auto; object-fit:contain; display:block; margin:0 auto 4px; }
header h1{ margin:0; font-size:clamp(16px,4.5vw,20px); font-weight:700; }
header p{ margin:4px 0 0; font-size:clamp(13px,3.8vw,16px); color:#555; }

header .controls{ display:flex; gap:10px; align-items:center; }
.kebab{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.kebab:hover{ background:#f8fafc; }
.kebab svg{ width:18px; height:18px; }
.kebab-menu{ position:absolute; top:44px; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.12); min-width:160px; padding:8px; display:none; z-index:10; }
.kebab-menu.show{ display:block; }
.kebab-item{ width:100%; text-align:left; background:#fff; border:1px solid transparent; border-radius:8px; padding:8px 10px; cursor:pointer; font-size:14px; color:#111827; }
.kebab-item:hover{ background:#f3f4f6; }

/* ===================== Chat area ===================== */
#chat{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 16px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; background:#fff; padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom,0px) + 12px); overscroll-behavior:contain; }
#chat::-webkit-scrollbar{ width:6px; } #chat::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:4px; } #chat::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.35); }

.msg{ max-width:75%; padding:10px 14px; border-radius:var(--radius); line-height:1.6; word-wrap:break-word; white-space:normal; animation:fadeIn .18s ease; display:flex; align-items:flex-start; gap:10px; position:relative; }
.msg.assistant{ align-self:stretch; max-width:100%; background:var(--bubble-bot); }
.msg.user{ align-self:flex-end; background:var(--bubble-user); justify-content:flex-end; }
.avatar{ width:28px; height:28px; border-radius:50%; flex-shrink:0; }

.content a{ color:#0ea5e9; text-decoration:underline; }
.content img, .content video{ max-width:100%; height:auto; border-radius:8px; border:1px solid var(--bubble-border); margin:8px auto; display:block; }
.content table{ border-collapse:collapse; width:100%; margin:8px 0; }
.content th, .content td{ border:1px solid var(--bubble-border); padding:6px 8px; text-align:left; }
.content code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.content pre{ background:#f8fafc; border:1px solid var(--bubble-border); border-radius:8px; padding:10px; overflow:auto; }

.status-chip{ position:absolute; left:42px; top:-12px; font-size:13px; color:var(--muted); user-select:none; pointer-events:none; display:inline-flex; gap:6px; align-items:center; }
.pulse{ animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
@keyframes fadeIn{ from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:translateY(0)} }

/* ===================== Footer (composer) ===================== */
footer{ position:fixed; left:50%; transform:translateX(-50%); width:min(920px,100%); bottom:0; z-index:6; border-top:1px solid var(--bubble-border); background:#fff; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); }
.footer-inner{ display:flex; gap:8px; align-items:flex-end; position:relative; }

.prompt-wrap{ position:relative; flex:1 1 auto; min-width:0; }
#prompt{
  display:block; width:100%; padding:12px 64px 12px 48px; border:1px solid var(--bubble-border); border-radius:12px; outline:none; font-size:16px;
  resize:none; overflow-y:hidden; line-height:1.5; min-height:56px; max-height:40vh; background:#fff; transition:padding .15s ease, height .15s ease;
}
#prompt::placeholder{ font-size:13px; color:#9aa4b2; }

#sendBtn{ display:none !important; }

.inbox-send{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; background:#000; color:#fff; border:1px solid #000;
  display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.inbox-send.show{ display:inline-flex; }
.inbox-send:disabled{ opacity:.5; cursor:not-allowed; }

#scrollBtn{
  position:fixed; bottom:76px; left:50%; transform:translateX(-50%);
  background:#fff; color:#000; border:1px solid #e5e7eb; border-radius:50%;
  width:40px; height:40px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:7;
}
#scrollBtn.show{ opacity:1; visibility:visible; }

.media-wrap{ position:relative; display:block; margin:8px auto; width:min(var(--media-max), 90%); }

/* ===================== Save / Extend / Edit buttons ===================== */
.media-actions{
  position:absolute; top:8px; right:8px; z-index:3;
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
}

/* Dùng chung style cho 3 nút */
.media-actions .media-save,
.media-actions .extend-btn,
.media-actions .media-edit{
  padding:6px 10px; font-size:12px; border-radius:999px;
  border:1px solid rgba(0,0,0,.15); background:rgba(17,24,39,.9); color:#fff;
  cursor:pointer; user-select:none; backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transform:translateY(-2px);
  transition:opacity .2s, visibility .2s, transform .2s;
}

/* Hiện nút theo loại media */
.media-wrap:hover .media-actions .media-save{ opacity:1; visibility:visible; transform:translateY(0); }
.media-wrap[data-kind="video"]:hover  .media-actions .extend-btn{ opacity:1; visibility:visible; transform:translateY(0); }
.media-wrap[data-kind="image"]:hover  .media-actions .media-edit{ opacity:1; visibility:visible; transform:translateY(0); }

/* Mobile: luôn hiện */
@media (hover:none){
  .media-wrap .media-actions .media-save{ opacity:1 !important; visibility:visible !important; transform:none !important; }
  .media-wrap[data-kind="video"] .media-actions .extend-btn{ opacity:1 !important; visibility:visible !important; transform:none !important; }
  .media-wrap[data-kind="image"] .media-actions .media-edit{ opacity:1 !important; visibility:visible !important; transform:none !important; }
}

/* Không cần nút Edit cho video, và không cần Extend cho ảnh */
.media-wrap[data-kind="video"] .media-edit{ display:none !important; }
.media-wrap[data-kind="image"] .extend-btn{ display:none !important; }

/* Trạng thái disabled (dùng chung) */
.media-actions .media-save:disabled,
.media-actions .media-edit:disabled{ opacity:.6; cursor:not-allowed; }

.content .media-wrap a{ display:block; }
.content .media-wrap img, .content .media-wrap video{ display:block; width:100%; height:auto; }

/* ==== STREAM FE ONLY — Modal Extend (universal + fix zoom iOS) ==== */
.extend-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  padding: 24px;
}

/* Hộp dialog chính */
.extend-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  width: min(720px, 96vw);
  max-height: 80vh;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Vùng thân (scroll nội dung nếu dài) */
.extend-body {
  max-height: 70vh;
  overflow: auto;
  padding-right: 8px;
}

/* Khung hiển thị ảnh tham chiếu */
.extend-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7f9;
  border: 1px solid var(--bubble-border, #e6e8ec);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 12px;
}
.extend-preview img,
.extend-preview video,
.extend-preview canvas {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 8px;
}

/* Ô nhập mô tả và input khác trong modal */
.extend-card input,
.extend-card textarea,
.extend-card select {
  width: 100%;
  font-size: 16px;              /* ✅ fix iOS auto-zoom khi focus */
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  font-family: system-ui, sans-serif;
}

/* Hàng nút ở cuối (Gửi / Hủy) */
.extend-card .row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Khóa scroll khi mở modal */
body.kbd-open { overflow: hidden; }

/* Responsive cho mobile */
@media (max-width: 600px) {
  .extend-dialog {
    padding: 8px env(safe-area-inset-right)
             calc(8px + env(safe-area-inset-bottom))
             env(safe-area-inset-left);
  }
  .extend-card {
    width: 100%;
    height: auto;
    max-height: 92svh;
    border-radius: 12px;
    padding: 12px;
  }
  .extend-body { max-height: calc(92svh - 120px); }
  .extend-card textarea { min-height: 120px; }
}

/* ====== Extend dialog placeholder font size ====== */
.extend-card textarea::placeholder { font-size: 13px; }