/* TVORBA — Liquid Noir: private AI image studio design system */
/* Canonical production UI for templates/index.html.            */

/* 1. Tokens */
:root{
  color-scheme: dark;

  /* Liquorice surface scale */
  --bg: #050507;
  --bg-2: #080608;
  --bg-3: #0C0A0D;
  --panel: #0E0D0F;
  --panel-2: #151416;
  --panel-3: #1C1A1C;

  /* Ivory / champagne text scale */
  --text: #F3EFE7;
  --text-2: #E8E5DD;
  --muted: #9B958D;
  --muted-2: #6E6A64;

  /* Olive / lime-gold accent scale */
  --accent: #B8E06C;
  --accent-2: #9FCA55;
  --accent-3: #C6E98A;
  --gold: #C8C4BC;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --line-3: rgba(255,255,255,.22);

  /* Functional tones */
  --ok: #B8E06C;
  --ok-2: #234A1C;
  --error: #D9264A;
  --error-2: #5A141F;
  --warning: #D4A65B;
  --info: #6B9ED4;

  /* Shape */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Elevation */
  --shadow: 0 24px 70px rgba(0,0,0,.70);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.38);
  --glow: 0 0 34px rgba(184,224,108,.18);
  --focus: 0 0 0 2px rgba(184,224,108,.30);

  /* Layout */
  --top-height: 56px;
  --composer-pad: 10px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Typography */
  --font: 15px/1.55 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* 2. Base / reset */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{
  scroll-behavior:smooth;
  min-width:320px;
  overflow-x:clip;
  color-scheme:dark;
}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(184,224,108,.08), transparent 45%),
    linear-gradient(180deg, #080508 0%, var(--bg) 45%, #060506 100%);
  font:var(--font);
  color:var(--text);
  min-height:100dvh;
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block;max-width:100%}
button,select,input,textarea{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;outline:2px solid transparent;outline-offset:2px}
button,select,input,textarea{background:none;border:0}
button{cursor:pointer;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid transparent;outline-color:var(--accent);box-shadow:var(--focus);border-radius:var(--radius-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 3. App shell */
.app{position:relative;display:flex;flex-direction:column;min-height:100dvh;margin:0 auto;max-width:860px}

/* 4. Header */
.top{
  position:sticky;top:0;z-index:50;height:var(--top-height);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;
  background:linear-gradient(180deg, rgba(8,5,8,.97), rgba(14,8,11,.88));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  min-width:0;
}
.brand-wrap{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.brand-text{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.brand-mark{
  flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.14);border-radius:12px;font-size:18px;color:var(--accent);background:var(--panel-2)
}
.brand{font:700 16px Georgia,'Times New Roman',serif;letter-spacing:.02em;color:var(--text)}
.brand-subtitle{font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase;margin-top:1px;white-space:nowrap}
.brand-safety{display:none}
.header-persona{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.persona-avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.08);background:var(--panel);box-shadow:0 0 16px rgba(184,224,108,.10)}
.persona-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.persona-name{font:600 15px Georgia,'Times New Roman',serif;color:var(--text);letter-spacing:.02em}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.online-dot.engine-off{background:var(--error);box-shadow:0 0 8px var(--error)}
.online-label{font-size:11px;color:var(--muted)}
.icon-btn{min-width:44px;min-height:44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);border:1px solid rgba(255,255,255,.08);color:var(--text-2);font-size:18px;transition:background .15s,border-color .15s}
.icon-btn:hover,.icon-btn:focus-visible{background:var(--panel-3);border-color:rgba(255,255,255,.16)}
.settings-btn{font-size:20px}

/* 5. Chat / empty */
.chat{flex:1;display:flex;flex-direction:column;gap:18px;padding:14px 14px calc(150px + var(--safe-bottom));width:100%}
.empty.chat-empty{margin:auto;text-align:center;color:var(--muted);padding:6vh 18px 10vh;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:520px;width:100%}
.empty-hero{display:flex;flex-direction:column;align-items:center;gap:8px}
.empty-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg, var(--accent), var(--gold));display:grid;place-items:center;font-size:32px;color:var(--bg);box-shadow:0 0 34px rgba(184,224,108,.18)}
.empty strong{font:700 clamp(24px,5vw,32px) Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:var(--text)}
.empty p{color:var(--muted);max-width:420px;line-height:1.55;margin:0;font-size:14px}
.empty-suggestions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;margin-top:8px}
.suggestion-card{background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:12px;text-align:left;font-size:13px;color:var(--text-2);cursor:pointer;transition:background .15s,border-color .15s,transform .12s}
.suggestion-card:hover,.suggestion-card:focus-visible{background:var(--panel-3);border-color:rgba(255,255,255,.16);transform:translateY(-2px)}
.suggestion-card .sug-title{display:block;font-weight:600;color:var(--text);margin-bottom:2px}
.suggestion-card .sug-desc{display:block;font-size:11px;color:var(--muted)}

/* 6. Composer */
.composer-wrap{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px 14px calc(8px + var(--safe-bottom));background:linear-gradient(0deg, var(--bg) 60%, transparent);pointer-events:none}
.composer{max-width:860px;margin:0 auto;width:100%;position:relative;pointer-events:auto;background:var(--panel-2);border:1px solid rgba(255,255,255,.10);border-radius:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;padding:8px;transition:border-color .15s}
.composer:focus-within{border-color:rgba(255,255,255,.18)}
.composer-top{display:flex;flex-direction:column;gap:6px}
.attachment-preview{display:flex;flex-wrap:wrap;gap:6px;padding:0 2px 2px}
.attachment-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2);background:var(--panel-3);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:5px 10px;min-height:28px}
.attachment-chip.parent-chip{border-style:dashed;border-color:var(--accent);color:var(--accent-3)}
.parent-thumb{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.08);background:var(--panel)}
.attachment-name{max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-remove{width:28px;height:28px;background:transparent;border:0;color:var(--muted);font-size:15px;padding:0;display:grid;place-items:center;cursor:pointer}
.attachment-remove:hover{color:var(--text)}
.attestation-wrap{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px;background:var(--panel-3);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius)}
.attestation-label{font-size:11px;color:var(--text-2)}
.attestation-input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--panel);color:var(--text);font-size:13px}
.attestation-hint{font-size:10px;color:var(--muted)}
.attestation-submit{align-self:flex-start;padding:6px 12px;border-radius:999px;border:0;background:var(--accent);color:var(--bg);font-size:12px;font-weight:600;cursor:pointer}
.attestation-submit:hover{background:var(--accent-2)}
.attestation-error{color:var(--error);font-size:11px}
.chat-input-row{display:flex;align-items:flex-end;gap:8px;position:relative}
.chat-input-row textarea{flex:1;min-height:22px;max-height:120px;background:transparent;color:var(--text);font-size:15px;line-height:1.45;padding:10px 4px;resize:none;outline:none}
.chat-input-row textarea::placeholder{color:var(--muted-2)}
.chat-input-row textarea::-webkit-scrollbar{display:none}
.tool-plus,.send,.cancel-btn{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0}
.tool-plus{background:var(--panel-3);color:var(--text);font-size:24px;font-weight:300;border:1px solid rgba(255,255,255,.10);transition:background .15s,border-color .15s}
.tool-plus:hover,.tool-plus:focus-visible{background:var(--panel);border-color:rgba(255,255,255,.18)}
.send{background:var(--accent);color:var(--bg);border:0;font-size:18px;transition:transform .1s,background .2s}
.send:hover,.send:focus-visible{background:var(--accent-3)}
.send:active{transform:scale(.96)}
.send:disabled{opacity:.35}
.cancel-btn{background:transparent;color:var(--error);font-size:16px;font-weight:700;border:1.5px solid var(--error);transition:background .15s}
.cancel-btn:hover,.cancel-btn:focus-visible{background:var(--error-2)}

/* 7. Messages */
.msg{display:flex;gap:10px;animation:fadeIn .28s cubic-bezier(.16,1,.3,1);max-width:100%}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg.user{align-self:flex-end;max-width:82%;flex-direction:column;align-items:flex-end}
.msg.user .msg-content{background:var(--panel-2);color:var(--text);border:1px solid rgba(255,255,255,.08);border-right:2px solid var(--accent);border-radius:20px 20px 4px 20px;padding:12px 18px;font-size:15px;line-height:1.5;box-shadow:0 4px 16px rgba(0,0,0,.22);word-break:break-word}
.msg.assistant{align-self:flex-start;width:100%;align-items:flex-start}
.msg-avatar{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid rgba(255,255,255,.08);color:var(--gold);font-size:16px;display:grid;place-items:center}
.msg-body{flex:1;min-width:0;background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:4px 20px 20px 20px;padding:14px 18px;font-size:14px;line-height:1.6;color:var(--text-2);box-shadow:0 4px 16px rgba(0,0,0,.22)}
.msg.assistant.is-parent .msg-body{border-color:var(--accent);box-shadow:0 0 0 1px rgba(184,224,108,.12),0 4px 16px rgba(0,0,0,.22)}
.msg.assistant.error .msg-body{border-color:var(--error);color:var(--error)}
.msg-body p:first-child{margin-top:0}
.msg-body p:last-child{margin-bottom:0}
.loading-pulse{color:var(--accent-3);font-weight:600;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* 8. Image result card */
.image-card{position:relative;display:flex;flex-direction:column;gap:10px;width:100%}
.image-frame{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm)}
.msg-image{width:100%;display:block;max-height:64dvh;object-fit:contain;background:var(--panel);opacity:0;transition:opacity .3s ease}
.msg-image.loaded{opacity:1}
.msg-image.rejected{opacity:.45;filter:grayscale(.6)}
.image-status{position:absolute;top:10px;left:10px;display:flex;gap:6px;align-items:center;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:var(--text-2);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.08)}
.image-status .dot{width:7px;height:7px;border-radius:50%;background:var(--warning)}
.image-status.approved .dot{background:var(--accent)}
.image-status.rejected .dot{background:var(--error)}
.image-meta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted)}
.image-meta.ok{color:var(--accent)}
.image-meta.warn{color:var(--warning)}
.parent-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--accent);background:rgba(184,224,108,.10);border:1px dashed var(--accent);border-radius:999px;padding:5px 11px}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 2px}
.result-actions.secondary{padding-top:0;margin-top:4px}
.result-actions.secondary[hidden]{display:none}
.result-actions button,.result-actions .act{
  font-size:13px;font-weight:500;color:var(--text-2);background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 14px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s
}
.result-actions button:hover,.result-actions .act:hover{background:var(--panel-3);border-color:rgba(255,255,255,.16)}
.result-actions button.primary,.result-actions .act.primary{background:var(--accent);border-color:var(--accent-2);color:var(--bg)}
.result-actions button.danger,.result-actions .act.danger{background:var(--error-2);border-color:var(--error);color:var(--text)}
.result-actions button:disabled{opacity:.45}
.result-actions button.more{padding:8px 10px;margin-left:auto}

/* Overlay quick actions kept for backward compatibility / concepts */
.image-actions{position:absolute;top:8px;right:8px;display:flex;gap:8px;z-index:2}
.image-actions button{min-width:44px;min-height:44px;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(12,8,12,.55);backdrop-filter:blur(6px);color:var(--text);font-size:16px;display:grid;place-items:center;transition:transform .1s,background .15s,border-color .15s}
.image-actions button:hover{background:rgba(12,8,12,.82);border-color:var(--line-2);transform:scale(1.08)}
.image-actions button:disabled{opacity:.4;transform:none}

/* 9. Modals */
.modal{display:none;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.modal-panel{position:relative;z-index:2;width:min(100%,460px);background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;max-height:90dvh;overflow:auto;display:flex;flex-direction:column}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;min-height:44px}
.modal-head h3{margin:0;font-size:18px;font-weight:600}
.modal-head button{min-width:44px;min-height:44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:transparent;border:0;color:var(--muted);font-size:22px;transition:background .15s,color .15s}
.modal-head button:hover,.modal-head button:focus-visible{background:var(--panel-2);color:var(--text)}
.settings-body{display:flex;flex-direction:column;gap:16px}
.settings-section{padding:16px;background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius)}
.settings-section h4{margin:0 0 8px;font-size:14px;color:var(--text)}
.version-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.version-row:last-child{border-bottom:0}
.version-value{color:var(--text);font-family:var(--font-mono)}
.primary-btn,button.primary,.primary[type="button"],.primary[type="submit"]{background:var(--accent);border:1px solid var(--accent-2);color:var(--bg);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;min-height:44px;cursor:pointer}
.primary-btn:hover,button.primary:hover{background:var(--accent-3)}

/* 10. Mask editor */
.mask-panel{width:min(100%,720px)}
.mask-stage{position:relative;flex:1;min-height:300px;max-height:62dvh;overflow:hidden;background:#000;border-radius:var(--radius-sm);touch-action:none;isolation:isolate}
.mask-stage canvas{position:absolute;inset:0;max-width:100%;max-height:62dvh;object-fit:contain}
#maskBase{pointer-events:none}
#maskOverlay{pointer-events:auto;touch-action:none;mix-blend-mode:screen}
.mask-tools{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mask-tools button,.mask-tools label{font-size:13px;padding:8px 12px;background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:999px;color:var(--text-2);min-height:44px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.mask-tools button.active{background:var(--accent);border-color:var(--accent-2);color:var(--bg)}
.mask-tools input[type=range]{flex:1;min-width:80px;max-width:140px;accent-color:var(--accent)}
.mask-help{padding:10px 0;font-size:12px;color:var(--muted)}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.confirm-actions button{padding:10px 18px;border-radius:999px;font-size:14px;background:var(--panel-2);color:var(--text-2);border:1px solid rgba(255,255,255,.12);min-height:44px}
.confirm-actions .primary{background:var(--accent);color:var(--bg);border-color:var(--accent-2)}

/* 11. Detail modal */
.detail-panel{width:min(100%,560px)}
.detail-image{width:100%;border-radius:var(--radius-sm);object-fit:contain;background:var(--panel);border:1px solid rgba(255,255,255,.08)}
.detail-meta{font-size:13px;color:var(--text-2);line-height:1.55;margin-top:12px}

/* 12. Drag-and-drop */
body.drag-over::after{
  content:'Pusť pro nahrání obrázku';position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;font-size:18px;font-weight:700;color:var(--text);
  border:4px dashed var(--accent-3);pointer-events:none
}

/* 13. Responsive */
@media (min-width: 900px){
  .chat{padding:18px 18px calc(140px + var(--safe-bottom));gap:20px}
  .composer-wrap{padding:10px 18px calc(10px + var(--safe-bottom))}
  .composer{padding:10px}
}
@media (min-width: 1200px){
  .app{max-width:860px}
}
@media (max-width: 600px){
  .top{height:52px;padding:0 12px}
  .persona-avatar{width:34px;height:34px}
  .persona-name{font-size:15px}
  .chat{padding:10px 12px calc(150px + var(--safe-bottom));gap:14px}
  .composer-wrap{padding:8px 10px calc(8px + var(--safe-bottom))}
  .composer{border-radius:20px}
  .msg.user{max-width:86%}
  .msg-avatar{width:28px;height:28px;font-size:14px}
  .msg-body{padding:12px 14px;font-size:14px}
  .empty-icon{width:56px;height:56px;font-size:28px}
  .empty strong{font-size:24px}
  .empty-suggestions{grid-template-columns:1fr}
  .result-actions button,.result-actions .act{font-size:12px;padding:6px 10px}
}
@media (max-width: 360px){
  .online-label{display:none}
  .brand-subtitle{display:none}
}

/* 14. Accessibility / motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media (prefers-contrast:more){
  :root{--line:rgba(255,255,255,.35);--line-2:rgba(255,255,255,.55);--text:#fff}
  .msg-body,.msg.user .msg-content,.attachment-chip,.composer,.attestation-wrap,.settings-section,.suggestion-card,.mask-tools button,.mask-tools label,.result-actions button,.result-actions .act{border-width:2px}
}