/* Region Edit — bảng màu theo node graph Lotuz Flow (components/flow/flow-primitives.jsx). */
:root {
  --bg:#0d0f14; --canvas:#13151b; --panel:rgba(17,20,27,.8); --panel-solid:#11141b; --ctl:#1a1d23; --ctl-2:#171b24; --ctl-hover:#22262e;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12); --line-3:rgba(255,255,255,.16);
  --text:#e7e9ee; --text-2:rgba(255,255,255,.7); --muted:rgba(255,255,255,.45); --faint:rgba(255,255,255,.28);
  --accent:#22d3ee; --accent-2:#67e8f9; --accent-ink:#a5f3fc; --accent-bg:rgba(6,182,212,.1); --accent-line:rgba(34,211,238,.32); --glow:0 8px 24px rgba(6,182,212,.22);
  --violet:#c084fc; --violet-bg:rgba(192,132,252,.1); --violet-line:rgba(192,132,252,.32);
  --green:#34d399; --green-bg:rgba(16,185,129,.1); --green-line:rgba(52,211,153,.3);
  --warn:#fbbf24; --warn-bg:rgba(245,158,11,.1); --warn-line:rgba(251,191,36,.28);
  --danger:#fb7185; --danger-bg:rgba(244,63,94,.1); --danger-line:rgba(251,113,133,.3);
  --ok:#34d399; --r-panel:18px; --r-ctl:12px; --r-sm:8px;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:13px/1.45 system-ui, "Segoe UI", sans-serif; overflow:hidden; }
button, input, select, textarea { font:inherit; color:inherit; }
[hidden] { display:none !important; }
.hidden { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.ic.big { width:28px; height:28px; }
.ic.lotus { color:var(--accent); width:20px; height:20px; filter:drop-shadow(0 0 6px rgba(34,211,238,.45)); }
.panel { border:1px solid var(--line); background:var(--panel); border-radius:var(--r-panel); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); backdrop-filter:blur(6px); }
.micro { margin:0; font-size:9px; text-transform:uppercase; letter-spacing:.22em; color:rgba(103,232,249,.7); }
.small { font-size:11.5px; color:var(--text-2); word-break:break-word; margin:0; }
.muted { color:var(--muted); }
.warn { color:var(--warn); font-size:11.5px; }
code, kbd { font:11px ui-monospace, Consolas, monospace; }
kbd { padding:1px 6px; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; background:var(--ctl); color:var(--text); }

/* ── khung chính ── */
#app { height:100vh; display:grid; grid-template-columns:64px 1fr 360px; grid-template-rows:52px auto 1fr; gap:8px; padding:8px; }
#top { grid-column:1/4; grid-row:1; display:flex; align-items:center; gap:10px; padding:0 10px 0 14px; min-width:0; }
.brand { display:flex; align-items:center; gap:8px; font-size:14px; white-space:nowrap; }
.brand b { letter-spacing:.02em; }
#top .name { color:var(--text-2); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; max-width:34vw; }
#top .sp { flex:1; }
#pauseBanner { grid-column:1/4; grid-row:2; padding:7px 14px; border-radius:12px; border:1px solid var(--danger-line); background:var(--danger-bg); color:#fecdd3; font-size:12px; }
#tools { grid-column:1; grid-row:3; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; overflow-y:auto; }
#stage { grid-column:2; grid-row:3; position:relative; overflow:hidden; cursor:crosshair; border-radius:var(--r-panel); border:1px solid var(--line);
  background:var(--canvas) radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 22px 22px; }
#cv { position:absolute; inset:0; }
#side { grid-column:3; grid-row:3; display:flex; flex-direction:column; min-height:0; overflow:hidden; }

/* ── chip / nút ── */
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:var(--text-2);
  border-radius:999px; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.chip.accent { border-color:var(--accent-line); background:var(--accent-bg); color:var(--accent-ink); }
.chip.ok { border-color:var(--green-line); background:var(--green-bg); color:#a7f3d0; }
.chip.warn { border-color:var(--warn-line); background:var(--warn-bg); color:#fde68a; }
.chip.danger { border-color:var(--danger-line); background:var(--danger-bg); color:#fecdd3; }
.chip.user { cursor:pointer; text-transform:none; letter-spacing:0; font-size:12px; }
.chip.user:hover { border-color:var(--danger-line); color:#fecdd3; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 12px; border-radius:10px; border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  color:var(--text); cursor:pointer; transition:background .15s, border-color .15s, color .15s; white-space:nowrap; text-decoration:none; }
.btn:hover { border-color:var(--accent-line); background:var(--accent-bg); color:var(--accent-ink); }
.btn.ghost { border-color:transparent; background:none; color:var(--text-2); }
.btn.ghost:hover { border-color:var(--line-2); background:rgba(255,255,255,.04); color:var(--text); }
.btn.primary { border-color:rgba(34,211,238,.45); background:linear-gradient(180deg, #0891b2, #0e7490); color:#fff; box-shadow:var(--glow); font-weight:600; }
.btn.primary:hover { background:linear-gradient(180deg, #06b6d4, #0891b2); color:#fff; }
.btn.small { padding:4px 9px; font-size:11.5px; border-radius:8px; }
.btn.danger:hover { border-color:var(--danger-line); background:var(--danger-bg); color:#fecdd3; }
button:disabled, .btn:disabled { opacity:.45; cursor:default; pointer-events:none; }
.iconbtn { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  color:var(--muted); cursor:pointer; }
.iconbtn:hover { color:var(--accent-2); border-color:var(--accent-line); background:var(--accent-bg); }

/* ── thanh công cụ trái (SidebarNavButton) ── */
.tool { width:46px; min-height:44px; padding:4px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:12px;
  border:1px solid transparent; background:none; color:rgba(255,255,255,.45); cursor:pointer; transition:all .15s; }
.tool span { font-size:8.5px; font-weight:500; line-height:1.1; text-align:center; }
.tool:hover { color:rgba(255,255,255,.8); background:rgba(255,255,255,.04); border-color:var(--line); }
.tool.on { border-color:rgba(34,211,238,.3); background:rgba(8,145,178,.9); color:#fff; box-shadow:var(--glow); }
.tool.danger:hover { color:#fecdd3; border-color:var(--danger-line); background:var(--danger-bg); }
#tools .sep { width:28px; height:1px; background:var(--line); margin:4px 0; flex:0 0 auto; }
#tools input[type=range] { writing-mode:vertical-lr; direction:rtl; height:96px; width:18px; accent-color:var(--accent); flex:0 0 auto; }
.sizeval { font-size:10px; color:var(--muted); margin-top:-2px; }

/* ── canvas ── */
#hint { position:absolute; left:12px; bottom:10px; color:var(--muted); background:rgba(13,15,20,.75); padding:4px 10px; border-radius:999px; font-size:11px; pointer-events:none; border:1px solid var(--line); }
#empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; cursor:default; }
.emptycard { max-width:420px; padding:22px; display:flex; flex-direction:column; gap:10px; }
.emptycard h2 { margin:0; font-size:18px; font-weight:600; }
.emptycard .btn { align-self:flex-start; }

/* ── panel phải: tab + nội dung + thanh chạy ── */
.tabs { display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--line); }
.tab { flex:1; padding:7px 6px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:rgba(255,255,255,.55); cursor:pointer; font-size:11.5px; }
.tab:hover { color:rgba(255,255,255,.85); border-color:var(--line-3); }
.tab.on { border-color:rgba(34,211,238,.35); background:var(--accent-bg); color:var(--accent-ink); }
.tab .count { font-size:10px; color:var(--muted); }
.panes { flex:1; min-height:0; overflow-y:auto; }
.pane { display:none; padding:12px; flex-direction:column; gap:12px; }
.pane.on { display:flex; }
.field { display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); min-width:0; flex:1; }
.row { display:flex; gap:8px; }
.row > * { min-width:0; }
.row.center { align-items:center; }
input[type=text], input[type=password], select, textarea { width:100%; background:var(--ctl-2); color:var(--text); border:1px solid var(--line); border-radius:var(--r-ctl);
  padding:8px 11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.02); outline:none; transition:border-color .15s; }
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus { border-color:rgba(6,182,212,.5); }
select { appearance:none; padding-right:28px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,.35) 50%), linear-gradient(135deg, rgba(255,255,255,.35) 50%, transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat; }
select option { background:var(--panel-solid); }
textarea { resize:vertical; min-height:62px; }
input[type=file] { font-size:11.5px; color:var(--text-2); }
input[type=file]::file-selector-button { margin-right:8px; padding:5px 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--ctl); color:var(--text); cursor:pointer; }
#swatches { display:flex; gap:6px; flex:1; }
.sw { width:24px; height:24px; border-radius:8px; border:2px solid transparent; cursor:pointer; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
.sw.on { border-color:#fff; box-shadow:0 0 0 2px rgba(34,211,238,.4); }

/* chế độ: thêm cyan · thay tím · đổi màu xanh lá */
.modes { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.mode { display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:8px 9px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.03);
  color:var(--text-2); cursor:pointer; text-align:left; }
.mode b { font-size:12px; font-weight:600; }
.mode span { font-size:10px; color:var(--muted); line-height:1.25; }
.mode:hover { border-color:var(--line-3); }
.mode.on.m-recolor { border-color:var(--green-line); background:var(--green-bg); color:#a7f3d0; }
.mode.on.m-replace { border-color:var(--violet-line); background:var(--violet-bg); color:#e9d5ff; }
.mode.on.m-add { border-color:var(--accent-line); background:var(--accent-bg); color:var(--accent-ink); }

.runbar { border-top:1px solid var(--line); padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; background:rgba(13,15,20,.35); }
.runbar .row > .btn { flex:1; }
#msg { min-height:16px; }

/* ── lịch sử ── */
#runs { display:flex; flex-direction:column; gap:10px; }
.run { border:1px solid var(--line); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:7px; background:rgba(255,255,255,.02); }
.run img { width:100%; border-radius:9px; background:#000; display:block; }
.run .top { display:flex; justify-content:space-between; gap:6px; align-items:center; }
.run .top b { font-size:12px; }
.run .who { color:var(--muted); font-size:10.5px; margin-left:6px; font-weight:400; }
.badge { font-size:9px; padding:2px 7px; border-radius:999px; border:1px solid var(--line-2); text-transform:uppercase; letter-spacing:.12em; }
.b-done { color:#a7f3d0; border-color:var(--green-line); background:var(--green-bg); }
.b-running { color:#fde68a; border-color:var(--warn-line); background:var(--warn-bg); }
.b-error { color:#fecdd3; border-color:var(--danger-line); background:var(--danger-bg); }
.b-dry { color:var(--muted); }
.mtag { font-size:9px; padding:1px 6px; border-radius:999px; text-transform:uppercase; letter-spacing:.1em; border:1px solid var(--line-2); }
.mtag.recolor { color:#a7f3d0; border-color:var(--green-line); }
.mtag.replace { color:#e9d5ff; border-color:var(--violet-line); }
.mtag.add { color:var(--accent-ink); border-color:var(--accent-line); }
.run .acts { display:flex; gap:6px; flex-wrap:wrap; }
.run a { color:var(--accent-2); }
.pass { color:var(--ok); } .fail { color:var(--danger); }
.emptyruns { color:var(--muted); font-size:12px; padding:8px 2px; }

/* ── hộp thoại ── */
.modal { position:fixed; inset:0; background:rgba(5,7,10,.72); display:flex; align-items:center; justify-content:center; z-index:30; padding:16px; }
.dlg { width:min(460px, 100%); max-height:calc(100vh - 32px); overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--panel-solid); }
.dlg.wide { width:min(860px, 100%); }
.dlghead { display:flex; align-items:center; justify-content:space-between; }
.small-tabs { padding:0; border:0; }
.opane { display:none; flex-direction:column; gap:10px; }
.opane.on { display:flex; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.card { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.02); cursor:pointer; text-align:left; padding:0; display:flex; flex-direction:column; }
.card:hover { border-color:var(--accent-line); box-shadow:var(--glow); }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; background:#000; display:block; }
.card .meta { padding:7px 9px; display:flex; flex-direction:column; gap:2px; }
.card .meta b { font-size:11.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .meta span { font-size:10px; color:var(--muted); }
.drop { border:1.5px dashed var(--line-3); border-radius:14px; padding:34px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text-2); cursor:pointer; text-align:center; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accent-bg); color:var(--accent-ink); }
.drop input { display:none; }
.keys { border-collapse:collapse; font-size:12px; }
.keys td { padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.keys td:first-child { white-space:nowrap; color:var(--muted); }
#dropHint { position:fixed; inset:0; z-index:40; background:rgba(6,182,212,.12); border:2px dashed var(--accent); display:flex; align-items:center; justify-content:center; pointer-events:none; }
#dropHint div { padding:12px 20px; border-radius:14px; background:var(--panel-solid); color:var(--accent-ink); border:1px solid var(--accent-line); }

/* ── đăng nhập ── */
#login { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;
  background:var(--bg) radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 22px 22px; }
#login form { width:min(360px, 100%); display:flex; flex-direction:column; gap:12px; padding:22px; background:var(--panel-solid); }
#loginMsg { color:var(--danger); min-height:16px; }

/* ── so sánh trước/sau ── */
#cmp { position:fixed; inset:0; background:rgba(0,0,0,.88); display:none; z-index:35; align-items:center; justify-content:center; flex-direction:column; gap:12px; }
#cmp .box { position:relative; max-width:94vw; max-height:84vh; }
#cmp img { display:block; max-width:94vw; max-height:84vh; user-select:none; }
#cmp #after { position:absolute; inset:0; clip-path:inset(0 0 0 50%); }
#cmp .bar { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); box-shadow:0 0 10px var(--accent); left:50%; pointer-events:none; }
#cmp .ctl { display:flex; gap:10px; align-items:center; color:var(--text-2); }
#cmp .ctl input { width:min(360px, 60vw); accent-color:var(--accent); }

/* ── Claude: soạn lệnh (tab Lệnh) + soi kết quả (thẻ lượt) ── */
.brain { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--violet-line); border-radius:14px; background:var(--violet-bg); }
.brain.off { opacity:.5; }
.brain textarea { min-height:54px; }
.brain .btn .ic, .review .ic { color:var(--violet); }
/* Ghi chú Claude có trần cao: dài quá thì cuộn trong khung, không đẩy ô lệnh khỏi màn laptop 1366×768. */
#brainOut { display:flex; flex-direction:column; gap:4px; max-height:8.5em; overflow:auto; }
#brainOut .note { color:var(--text); }
.review { display:flex; flex-direction:column; gap:5px; padding:8px; border-radius:10px; border:1px solid var(--violet-line); background:rgba(192,132,252,.05); }
.review .ic { width:13px; height:13px; vertical-align:-2px; }
.review .sug { display:flex; gap:6px; align-items:center; justify-content:space-between; flex-wrap:wrap; }

/* Laptop 1366×768 (vùng nhìn ~657 px cao): thanh trái gọn lại, bỏ chữ dưới icon (tooltip vẫn còn). */
@media (max-height: 720px) and (min-width: 901px) {
  #tools { gap:2px; padding:6px 0; }
  .tool { min-height:30px; padding:2px 0; }
  .tool span { display:none; }
  #tools input[type=range] { height:56px; }
  #tools .sep { margin:1px 0; }
}
/* Màn hẹp: công cụ thành một hàng ngang trên canvas, panel xuống dưới. */
@media (max-width: 900px) {
  #app { grid-template-columns:1fr; grid-template-rows:52px auto auto 1fr 44vh; }
  #top, #pauseBanner { grid-column:1; }
  #tools { grid-column:1; grid-row:3; flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:4px 8px; }
  #tools .sep { width:1px; height:28px; margin:0 4px; }
  #tools input[type=range] { writing-mode:horizontal-tb; direction:ltr; width:90px; height:18px; }
  .tool span { display:none; }
  #stage { grid-column:1; grid-row:4; }
  #side { grid-column:1; grid-row:5; }
  #usageChip, #kieChip, #top .name { display:none; }
}