/* css/image-editor.css — ZSky wrapper layout + AI side panel.
   Uses the tool-page CSS vars (--bg/--surface/--border/--accent/--accent2). */
.zie-main { max-width: 1500px; margin: 0 auto; padding: 6.5rem 1.5rem 2rem; }
.zie-breadcrumb { font-size: .8rem; color: var(--text-dim); margin-bottom: 1rem; }
.zie-breadcrumb a { color: var(--accent); text-decoration: none; }
.zie-h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700; line-height: 1.15; color: #fff; margin-bottom: .5rem; }
.zie-sub { font-size: 1rem; color: var(--text-dim); margin-bottom: 1.25rem; max-width: 70ch; }
.zie-workspace { display: flex; gap: 1rem; align-items: stretch; }
.zie-aipanel { flex: 0 0 240px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; height: 78vh; }
.zie-aihead { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .25rem; }
.zie-aibtn { width: 100%; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.03); color: var(--text); font-size: .88rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .2s; text-align: left; }
.zie-aibtn:hover:not(:disabled) { border-color: var(--accent); background: rgba(56,189,248,.06); }
.zie-aibtn:disabled { opacity: .4; cursor: not-allowed; }
.zie-aibtn.zie-ai { background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(129,140,248,.12)); }
.zie-aibtn.is-busy { pointer-events: none; opacity: .6; }
.zie-aigroup { display: flex; flex-direction: column; gap: .6rem; margin-top: .25rem; }
.zie-aigroup[hidden], .zie-aihint[hidden] { display: none; }
.zie-aihint { font-size: .75rem; color: var(--text-dim); line-height: 1.5; margin-top: .25rem; }
.zie-canvaswrap { flex: 1 1 auto; min-width: 0; }
.zie-frame { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: 14px; background: #1a1a1a; }
.zie-attrib { font-size: .72rem; color: var(--text-dim); margin-top: .9rem; }
.zie-attrib a { color: var(--accent); text-decoration: none; }
.zie-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: rgba(12,12,20,.95); border: 1px solid var(--border); color: var(--text);
  padding: .7rem 1.2rem; border-radius: 12px; font-size: .85rem; z-index: 10002;
  opacity: 0; transition: opacity .3s; pointer-events: none; }
.zie-toast.show { opacity: 1; }
@media (max-width: 900px) {
  .zie-workspace { flex-direction: column; }
  .zie-aipanel { flex: none; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; }
  .zie-frame { height: 65vh; }
}
/* Generative Edit block */
.zie-genedit { display: flex; flex-direction: column; gap: .5rem; margin-top: .35rem;
  padding-top: .6rem; border-top: 1px solid var(--border); }
.zie-edit-prompt { width: 100%; resize: vertical; min-height: 64px; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03);
  color: var(--text); font-family: inherit; font-size: .85rem; line-height: 1.4; outline: none; }
.zie-edit-prompt:focus { border-color: var(--accent); }
.zie-edit-prog { font-size: .75rem; color: var(--text-dim); line-height: 1.4; margin: 0; }
@media (max-width: 900px) { .zie-genedit { width: 100%; } }