/* SPDX-License-Identifier: Apache-2.0 */
/* MonzArt — MonzBoard's charcoal bar and terracotta accent around a dark desk, so the colours on the canvas read true.
   The panels follow the system's light or dark. */
:root {
  --bar: #1f2228; --bar-ink: #eceae4; --bar-ink-2: #9a978f; --desk: #2b2e34;
  --panel: #ffffff; --ink: #1f2228; --ink-2: #6b665d; --line: #e2ddd3; --hover: #f3f0ea; --field: #faf8f4;
  --accent: #e0572b; --accent-ink: #ffffff; --accent-soft: #fbe3d9;
  --ok: #2f8a5b; --ok-soft: #e1f2e8; --bad: #c0392b; --bad-soft: #fbe4e1;
  --shadow: 0 6px 24px rgba(31, 34, 40, .14), 0 1px 3px rgba(31, 34, 40, .12);
  --font: "Sarabun", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --panel: #262a31; --ink: #eceae4; --ink-2: #a39f96; --line: #383d46; --hover: #30353d; --field: #1f2329; --accent-soft: #4a2a1e; --ok-soft: #1f3a2b; --bad-soft: #4a2320; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body { display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: minmax(0, 1fr); background: var(--desk); color: var(--ink); font: 14px/1.4 var(--font); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; display: block; flex: none; }
.small { font-size: 12.5px; color: var(--ink-2); margin: 4px 0; }
.err { color: var(--bad); }

/* ---- top bar ---- */
.bar { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 6px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--bar); color: var(--bar-ink); min-height: 48px; z-index: 5; }
.brand { font-size: 16px; margin: 0 4px 0 2px; white-space: nowrap; }
.brand b { color: var(--accent); font-weight: 700; }
.bname { background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--bar-ink); padding: 4px 8px; width: min(240px, 28vw); min-width: 60px; }
.bname::placeholder { color: var(--bar-ink-2); }
.bname:hover { border-color: #3a3e46; } .bname:focus { outline: none; border-color: var(--accent); background: #2a2e35; }
.grow { flex: 1; }
.bar .ib { color: var(--bar-ink); }
.bar .ib:hover:not(:disabled) { background: #2f333b; }
.bar .ib:disabled { opacity: .35; cursor: default; }
.bar .ib.ai { background: var(--accent); color: #fff; padding: 0 10px; font-weight: 600; }
.zoomlbl { font-size: 12px; color: var(--bar-ink-2); cursor: pointer; min-width: 42px; text-align: right; }
.acct { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid #3a3e46; background: none; color: var(--bar-ink); cursor: pointer; white-space: nowrap; font-size: 13px; }
.acct b { color: #f2b134; }
.acct.owner { cursor: default; color: var(--bar-ink-2); }

.ib { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 6px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--ink); }
.ib:hover { background: var(--hover); }
.ib.sm { min-width: 28px; height: 28px; padding: 0 4px; }
.tb { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tb:hover:not(:disabled) { background: var(--hover); }
.tb:disabled { opacity: .45; cursor: default; }
.tb.sm { height: 28px; padding: 0 10px; }
.tb.wide { width: 100%; }
.tb.primary, .bar .tb.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tb.primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--accent); }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- tool options (a row under the bar) ---- */
.opts { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); min-height: 46px; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; z-index: 4; }
.opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.opt input[type=range] { width: 120px; accent-color: var(--accent); }
.opt .val { min-width: 44px; color: var(--ink); font-variant-numeric: tabular-nums; }
.opt.chk { gap: 4px; cursor: pointer; }
.chk input { accent-color: var(--accent); }
.sel { height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); padding: 0 6px; max-width: 220px; }
.swatch { width: 36px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer; flex: none; }
.swatch::-webkit-color-swatch-wrapper { padding: 3px; } .swatch::-webkit-color-swatch { border: 0; border-radius: 4px; }
.recent { display: flex; gap: 4px; flex: none; }
.chip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); cursor: pointer; padding: 0; flex: none; }
.chip.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.seg button { border: 0; background: none; padding: 0 10px; height: 30px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg.wide { display: flex; } .seg.wide button { flex: 1; height: auto; min-height: 32px; padding: 4px 8px; line-height: 1.25; }
.acts { display: inline-flex; gap: 4px; flex: none; }
.hint { font-size: 13px; color: var(--ink-2); }

/* ---- the work area: tools | canvas | panel ---- */
.work { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; }
.tools { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; z-index: 3; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 58px; padding: 7px 2px 5px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--ink); flex: none; }
.tool:hover { background: var(--hover); }
.tool.on { background: var(--accent); color: var(--accent-ink); }
.tool .lbl { font-size: 10.5px; line-height: 1.1; white-space: nowrap; opacity: .9; }
.stage { position: relative; overflow: hidden; touch-action: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
#cv.grab { cursor: grab; } #cv.grabbing { cursor: grabbing !important; }
.stage.drop::after { content: ''; position: absolute; inset: 10px; border: 2px dashed var(--accent); border-radius: 14px; pointer-events: none; }

.panel { width: 300px; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; z-index: 3; }
.tabs { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.tab.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tabs .close { display: none; }
.pbody { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.llist { display: flex; flex-direction: column; gap: 2px; }
.lrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; min-height: 44px; }
.lrow:hover { background: var(--hover); }
.lrow.on { background: var(--accent-soft); border-color: var(--accent); }
.thumb { width: 44px; height: auto; max-height: 44px; border-radius: 4px; border: 1px solid var(--line); background: repeating-conic-gradient(#e8e5de 0% 25%, #fff 0% 50%) 50% / 10px 10px; flex: none; }
.lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk .ic, .lk { width: 16px; height: 16px; color: var(--ink-2); }
.lop { font-size: 11px; color: var(--ink-2); }
.lbtns { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 6px; }
.lprops { display: flex; flex-direction: column; gap: 8px; }
.lprops .opt { justify-content: space-between; }
.lprops input[type=range] { flex: 1; }

/* ---- AI ---- */
.aistatus { font-size: 12.5px; border-radius: 8px; padding: 6px 10px; background: var(--hover); color: var(--ink-2); }
.aistatus:empty { display: none; }
.aistatus.ok { background: var(--ok-soft); color: var(--ok); }
.aistatus.ok::before { content: '● '; }
.aistatus.off { background: var(--bad-soft); color: var(--bad); display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.aistatus.off b { font-size: 14px; }
#aiBody { display: flex; flex-direction: column; gap: 10px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cp { border: 1px solid var(--line); background: none; border-radius: 13px; padding: 3px 10px; cursor: pointer; font-size: 12.5px; }
.cp:hover { background: var(--hover); }
.refbox { display: flex; flex-direction: column; gap: 4px; }
.refimg { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.row2 { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.thumbs.big { grid-template-columns: 1fr 1fr; }
.pick { position: relative; }
.pic { display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; overflow: hidden; }
.pic img { display: block; width: 100%; }
.pic:hover { border-color: var(--accent); }
.pic.used { opacity: .45; }
.again { position: absolute; right: 1px; bottom: 1px; min-width: 22px; height: 22px; padding: 1px; background: var(--panel); opacity: .9; }
.again .ic { width: 14px; height: 14px; }
.hist summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.picks { border: 1px solid var(--accent); border-radius: 10px; padding: 8px; }
.fxg { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px 8px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.fxg legend { display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.fxg .swatch { width: 28px; height: 22px; }
.sel.wide { max-width: none; width: 100%; }
.txt { position: absolute; margin: 0; padding: 0; border: 0; outline: 1.5px dashed var(--accent); background: transparent; resize: none; overflow: hidden; white-space: pre; z-index: 3; }
.mode { border: 1px solid var(--line); background: none; border-radius: 8px; padding: 8px 6px; cursor: pointer; font-size: 13px; line-height: 1.25; }
.mode.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.inp { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--field); padding: 8px 10px; }
.prompt { resize: vertical; min-height: 72px; }
#aiBody .opt { justify-content: space-between; } #aiBody .opt input[type=range] { flex: 1; width: auto; }
.hint.warn, .cost.warn { color: var(--bad); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.sides label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.go { height: 44px; font-size: 15px; font-weight: 600; }
.job { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.bar2 { height: 8px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.bar2 i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .6s ease; }
.bar2 i.indef { background: linear-gradient(90deg, var(--accent) 0 40%, #f2b134 50%, var(--accent) 60% 100%); background-size: 200% 100%; animation: slide 1.4s linear infinite; }
@keyframes slide { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.signin { display: flex; flex-direction: column; gap: 8px; }
.signin h3 { margin: 4px 0 0; }
.acctline a { color: var(--accent); }

/* ---- menu, dialogs, toast ---- */
.menu { position: fixed; z-index: 20; min-width: 230px; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.menu { max-height: calc(100vh - 70px); overflow-y: auto; }
.dlg.side { position: fixed; inset: 60px 12px auto auto; margin: 0; width: min(340px, calc(100vw - 24px)); z-index: 30; }
.adj .opt { justify-content: space-between; } .adj .opt input[type=range] { flex: 1; width: auto; }
.mi { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 7px; cursor: pointer; }
.mi:hover { background: var(--hover); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.dlg { border: 0; border-radius: 14px; padding: 0; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); width: min(520px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(20, 22, 26, .45); }
.dlgbody { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.dlgbody h3 { margin: 0; }
.dlgbody .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.dlgbody .row label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-2); flex: 1; min-width: 100px; }
.dlgbody .row.end { justify-content: flex-end; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.keys { border-collapse: collapse; font-size: 13px; }
.keys td { padding: 3px 8px 3px 0; vertical-align: top; }
kbd { font: 12px/1 ui-monospace, monospace; background: var(--hover); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.toast { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: #1f2228; color: #eceae4; padding: 9px 16px; border-radius: 10px; box-shadow: var(--shadow); z-index: 10; max-width: calc(100% - 24px); text-align: center; }

/* ---- tablets in portrait and phones: the panel slides over the canvas ---- */
@media (max-width: 820px) {
  .panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(340px, 92vw); box-shadow: var(--shadow); }
  .tabs .close { display: inline-flex; }
}
@media (max-width: 560px) {
  .hide-s, .zoomlbl { display: none; }
  .brand { display: none; }
  .tool { width: 48px; } .tool .lbl { display: none; }
  .opt input[type=range] { width: 90px; }
}