/* Content Studio — vizuelni jezik LUMI kontrolne table: duboko navy plavo, zvjezdano žuta kao akcenat, zaobljeni Baloo naslovi nad Figtree tekstom, i bijele kartice sa mekom sjenkom. */ :root { /* navy skala — od pozadine bočne trake do naslova */ --navy-900: #172a52; --navy-800: #1d3563; --navy-700: #24417a; --navy-100: #e7ecf7; --star: #ffc93c; --star-soft: #fff3d1; --bg: #f4f6fb; --panel: #ffffff; --line: #e5eaf3; --ink: #16294d; --ink-soft: #5a6a86; --ink-faint: #93a0b7; --ok: #1a8a52; --ok-soft: #e7f6ee; --err: #c0392b; --err-soft: #fdeeec; --radius: 14px; --shadow: 0 1px 2px rgba(23, 42, 82, .05), 0 8px 24px rgba(23, 42, 82, .06); --font-head: "Baloo 2", ui-rounded, "Segoe UI", sans-serif; --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Okvir aplikacije se NIKAD ne skroluje — skroluju samo unutrašnje oblasti. Bez ovoga fokus u polju natjera browser da skroluje isječeni kontejner, pa zaglavlje „pobjegne" gore. */ html, body { height: 100%; overflow: hidden; } body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; } /* Raspored živi ovdje, a ne na , da ga ubačeni elementi ne pomjeraju. */ .app { height: 100%; display: grid; grid-template-columns: 248px 1fr; overflow: hidden; } h1, h2, .brand-text strong, .card-title, .stat-value { font-family: var(--font-head); letter-spacing: -0.01em; } button, input, select, textarea { font: inherit; color: inherit; } /* ── bočna traka ─────────────────────────────────────────────────────────── */ .sidebar { background: var(--navy-900); color: #fff; display: flex; flex-direction: column; padding: 20px 14px; gap: 6px; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 11px; padding: 0 6px 20px; } .brand-mark { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--star); color: var(--navy-900); } .brand-mark svg { width: 22px; height: 22px; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-text strong { font-size: 17px; font-weight: 700; } .brand-text small { font-size: 11.5px; color: #93a6cc; } .nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #7d92bb; padding: 14px 8px 8px; } .nav { display: flex; flex-direction: column; gap: 3px; } .nav-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: #d5deef; font-size: 14px; cursor: pointer; transition: background .15s ease; } .nav-item:hover { background: var(--navy-800); } .nav-item.active { background: var(--star); color: var(--navy-900); font-weight: 600; } .nav-item .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #5d7099; } .nav-item.active .dot { background: var(--navy-900); } .nav-item .dot.ready { background: #3ecf8e; } .nav-item .dot.failed { background: #ff7a6b; } .nav-item .dot.running { background: var(--star); animation: pulse 1.1s ease-in-out infinite; } .nav-item.active .dot.ready, .nav-item.active .dot.failed, .nav-item.active .dot.running { background: var(--navy-900); } .nav-item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes pulse { 50% { opacity: .3; } } .nav-new { margin-top: 12px; padding: 9px 12px; border: 1px dashed #46587f; border-radius: 10px; background: transparent; color: #b9c6de; font-size: 13.5px; cursor: pointer; } .nav-new:hover { border-color: var(--star); color: var(--star); } /* ── glavni okvir ────────────────────────────────────────────────────────── */ .shell { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } .page-head { padding: 20px 26px 16px; background: var(--panel); border-bottom: 1px solid var(--line); } .page-head h1 { font-size: 25px; font-weight: 700; color: var(--navy-800); } .page-head p { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; } .split { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(360px, 5fr) 6fr; gap: 18px; padding: 18px 26px 22px; } @media (max-width: 1100px) { .split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } } /* Nizak prozor: zaglavlje se stanjuje da forma i prikaz dobiju vazduha. */ @media (max-height: 560px) { .page-head { padding: 12px 26px 10px; } .page-head h1 { font-size: 19px; } .page-head p { display: none; } .split { padding: 12px 18px 14px; gap: 12px; } } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .panel-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); } /* ── razgovor ────────────────────────────────────────────────────────────── */ .messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: flex; flex-direction: column; gap: 12px; } /* Prazan razgovor ne treba da otima prostor formi. */ .messages:empty { flex: 0 1 auto; padding: 0; } .bubble { max-width: 92%; padding: 11px 14px; border-radius: var(--radius); white-space: pre-wrap; font-size: 14.5px; } .bubble.user { align-self: flex-end; background: var(--navy-100); color: var(--navy-800); } .bubble.agent { align-self: flex-start; background: #f5f7fb; } .bubble.error { align-self: flex-start; background: var(--err-soft); color: var(--err); } /* ── kartica napretka ────────────────────────────────────────────────────── */ /* `.bubble` je `pre-wrap` zbog poruka nastavnika; kartica se gradi iz HTML-a, pa bi joj svaki prelom reda u markupu postao prazan red na ekranu. */ .bubble.card { max-width: 100%; width: 100%; background: #f7f9fd; border: 1px solid var(--line); white-space: normal; } .bubble.card.finished { background: var(--ok-soft); border-color: #cdeadb; } .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .card-title { font-size: 16px; font-weight: 700; color: var(--navy-800); } .title-mark { color: var(--ok); margin-right: 7px; } .card-clock { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 12.5px; } .phases { list-style: none; margin: 12px 0 0; display: flex; flex-direction: column; gap: 7px; } .phases li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-size: 14px; } .phases li .icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #e8edf6; color: var(--ink-faint); } .phases li.done .icon { background: var(--ok); color: #fff; } .phases li.running .icon { background: var(--star); color: var(--navy-900); animation: pulse 1.1s ease-in-out infinite; } .phases li.running .label { font-weight: 600; } .phases li.pending { color: var(--ink-faint); } /* Preskočena faza izgleda kao završena (vidi `render` u app.js); jedina razlika je što nema izmjereno vrijeme. */ .phases li.skipped .icon { background: var(--ok); color: #fff; } .phases li .time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-faint); } .hint { margin-top: 11px; font-size: 12.5px; color: var(--ink-faint); } .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .badge { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--ok); border: 1px solid #cdeadb; } .says { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; } .says p { font-size: 14px; color: var(--ink-soft); } .details { margin-top: 12px; } .details summary { cursor: pointer; font-size: 12px; color: var(--ink-faint); letter-spacing: .02em; } .details .steps { list-style: none; margin-top: 9px; display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; } .details .steps li { font-size: 12px; color: var(--ink-faint); font-family: ui-monospace, SFMono-Regular, monospace; } .details .steps li.running { color: var(--navy-700); } /* ── unos ────────────────────────────────────────────────────────────────── */ /* Na niskom prozoru forma se skuplja i skroluje u sebi — dugme mora ostati dohvatljivo, a nikad ne smije da isturi panel van ekrana. */ .composer { /* Ne skuplja se — prvo ustupa razgovor. Kad je forma viša od dozvoljenog, `max-height` je siječe i ona skroluje u sebi, umjesto da guta dugme. */ flex: 0 0 auto; max-height: 72%; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding: 15px 18px; display: flex; flex-direction: column; gap: 10px; background: #fcfdff; } .composer button.primary { flex: none; } input[type="text"], textarea, select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; width: 100%; transition: border-color .15s ease; } input[type="text"]:focus, textarea:focus { outline: 0; border-color: var(--navy-700); } /* Ručno razvlačenje ne smije da razvali okvir. */ textarea { resize: vertical; max-height: 45vh; } select { width: auto; } /* ── izbor slika ─────────────────────────────────────────────────────────── */ .file-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* Sklonjen sa ekrana, ali i dalje fokusibilan tastaturom. */ .file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .file-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px dashed #c3cee2; background: #fff; font-size: 13px; font-weight: 600; color: var(--navy-700); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .file-button svg { width: 15px; height: 15px; } .file-button:hover { border-color: var(--star); background: var(--star-soft); } .file-input:focus-visible + .file-button { outline: 2px solid var(--navy-700); outline-offset: 2px; } .file-summary { font-size: 12.5px; color: var(--ink-faint); } .file-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; width: 100%; } .file-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 5px 4px 5px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); max-width: 220px; } .file-chips img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex: none; } .file-chips .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chips button { border: 0; background: transparent; cursor: pointer; flex: none; color: var(--ink-faint); font-size: 15px; line-height: 1; padding: 0 4px; } .file-chips button:hover { color: var(--err); } .file-warning { width: 100%; font-size: 12px; color: #9a6b00; background: var(--star-soft); border-radius: 8px; padding: 7px 10px; } button.primary { border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer; background: var(--star); color: var(--navy-900); font-family: var(--font-head); font-size: 15px; font-weight: 700; box-shadow: 0 1px 2px rgba(23, 42, 82, .12); transition: transform .12s ease, box-shadow .12s ease; } button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 201, 60, .4); } button.primary:disabled { opacity: .45; cursor: default; } /* ── prikaz lekcije ──────────────────────────────────────────────────────── */ .preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .preview-actions { display: flex; align-items: center; gap: 10px; } #version-picker { font-size: 12.5px; padding: 4px 8px; max-width: 190px; } .preview-head a { color: var(--navy-700); text-decoration: none; font-size: 13px; font-weight: 600; } .preview-body { position: relative; flex: 1; min-height: 0; } #preview { width: 100%; height: 100%; border: 0; background: #fff; } .empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--ink-faint); background: var(--bg); } .empty-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--star-soft); color: var(--star); font-size: 22px; } .hidden { display: none !important; } /* ── učitavanje ────────────────────────────────────────────────────────────── Tri oblika, po tome koliko dugo traje i koliko prostora zauzima: spiner (kratka radnja), skeleton (dolazi sadržaj poznatog oblika), prekrivač (mijenja se cijela oblast). */ .spinner { width: 15px; height: 15px; flex: none; border: 2px solid rgba(36, 65, 122, .18); border-top-color: var(--navy-700); border-radius: 50%; animation: spin .7s linear infinite; } .spinner.on-star { border-color: rgba(23, 42, 82, .25); border-top-color: var(--navy-900); } .spinner.big { width: 26px; height: 26px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } /* dugme koje radi: tekst ostaje, spiner se dodaje ispred */ button.primary.busy { cursor: progress; } button.primary.busy .spinner { margin-right: 8px; } button.primary { display: inline-flex; align-items: center; justify-content: center; } /* skeleton — blago navy titranje, nikad sivo */ .skeleton { border-radius: 8px; background: linear-gradient(100deg, #eef1f8 30%, #f7f9fd 45%, #eef1f8 60%); background-size: 260% 100%; animation: shimmer 1.25s ease-in-out infinite; } @keyframes shimmer { to { background-position: -160% 0; } } .skeleton-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fbfcfe; } .skeleton-line { height: 11px; } .skeleton-line.w40 { width: 40%; } .skeleton-line.w70 { width: 70%; } .skeleton-line.w90 { width: 90%; } .skeleton-bubble { align-self: flex-end; width: 55%; height: 46px; border-radius: var(--radius); } /* skeleton u tamnoj bočnoj traci */ .nav .skeleton-nav { height: 34px; border-radius: 10px; background: linear-gradient(100deg, #1f3160 30%, #2b4b8a 45%, #1f3160 60%); background-size: 260% 100%; animation: shimmer 1.25s ease-in-out infinite; } /* prekrivač nad prikazom lekcije */ .loading-veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(244, 246, 251, .92); color: var(--ink-soft); font-size: 13.5px; } /* red koji se učitava u listi verzija */ select:disabled { opacity: .55; cursor: progress; } /* ── izbor vrste ─────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .kind-switch { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .kind-option { cursor: pointer; } .kind-option input { position: absolute; opacity: 0; width: 0; height: 0; } .kind-box { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; transition: border-color .15s ease, background .15s ease; } .kind-icon { grid-row: 1 / 3; font-size: 20px; } .kind-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy-800); } .kind-desc { font-size: 11.5px; color: var(--ink-faint); } .kind-option:hover .kind-box { border-color: #c3cee2; } .kind-option input:checked + .kind-box { border-color: var(--star); background: var(--star-soft); } .kind-option input:focus-visible + .kind-box { outline: 2px solid var(--navy-700); outline-offset: 2px; } /* oznaka vrste u bočnoj traci */ .nav-item .kind-mark { font-size: 12px; flex: none; opacity: .85; } /* ── nalazi kapije ───────────────────────────────────────────────────────── */ .gate { border-radius: var(--radius); padding: 12px 14px; border: 1px solid; } .gate.pad { background: var(--err-soft); border-color: #f6c9c3; } .gate.upozorenje { background: var(--star-soft); border-color: #f5dfa4; } .gate-head { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; margin-bottom: 8px; } .gate.pad .gate-head { color: var(--err); } .gate.upozorenje .gate-head { color: #9a6b00; } .gate-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .gate-list li { font-size: 13px; line-height: 1.45; } .gate-rule { font-weight: 700; } .gate-why { color: var(--ink-soft); display: block; } .gate-fix { margin-top: 11px; } button.fix { border: 0; border-radius: 10px; padding: 8px 15px; cursor: pointer; background: var(--navy-800); color: #fff; font-weight: 600; font-size: 13.5px; } button.fix:disabled { opacity: .5; cursor: default; } /* ── izbor eksperimenta u formi ──────────────────────────────────────────── */ .experiment { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .experiment label { display: flex; flex-direction: column; gap: 4px; } .experiment span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .experiment select { width: 100%; } /* ── alatke desnog panela ────────────────────────────────────────────────── */ button.tool { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; color: var(--navy-700); cursor: pointer; } button.tool:hover { border-color: var(--navy-700); } button.tool.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } button.tool.danger { color: var(--err); border-color: #f6c9c3; } /* telefon: isti okvir koji design system koristi za mobilne šablone */ .preview-body.phone { display: grid; place-items: center; background: var(--bg); padding: 16px; } .preview-body.phone #preview { width: 390px; height: 844px; max-height: 100%; border-radius: 22px; box-shadow: var(--shadow); border: 1px solid var(--line); } /* ── uređivač instrukcija ────────────────────────────────────────────────── */ /* Specifičnije od `.dialog-box`, koji stoji niže u fajlu — prompt traži širinu. */ .dialog-box.editor-box { width: min(640px, 94vw); } .editor-head { display: flex; gap: 9px; } /* `.dialog-box select` (100%) stoji NIŽE u fajlu i pobjeđuje po redoslijedu — zato ovdje treba specifičnija selekcija, inače select proguta polje za ime. */ .dialog-box .editor-head input { flex: 1; min-width: 0; } .dialog-box .editor-head select { flex: none; width: auto; min-width: 120px; } .editor-box textarea { height: min(42vh, 340px); resize: vertical; max-height: 60vh; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12.5px; line-height: 1.6; } .editor-note { font-size: 12px; color: var(--ink-faint); } .dialog-actions .tool.danger { margin-left: auto; } /* ── dijalog ─────────────────────────────────────────────────────────────── */ .dialog { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(23, 42, 82, .35); } .dialog-box { background: #fff; border-radius: var(--radius); padding: 22px; width: min(420px, 92vw); box-shadow: 0 20px 50px rgba(23, 42, 82, .25); display: flex; flex-direction: column; gap: 12px; } .dialog-box h2 { font-family: var(--font-head); font-size: 19px; color: var(--navy-800); } .dialog-box > p { font-size: 13.5px; color: var(--ink-soft); } .dialog-box label { display: flex; flex-direction: column; gap: 4px; } .dialog-box label span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .dialog-box select { width: 100%; } .dialog-actions { display: flex; gap: 9px; margin-top: 4px; } /* varijanta u listi lekcija */ .nav-item .variant-mark { font-size: 11px; color: #7d92bb; flex: none; } /* ── alatke prikaza: grupa je jedna stvar, varijanta je druga ────────────── */ .tool-group { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .tool-group .tool { border: 0; border-radius: 0; padding: 5px 13px; } .tool-group .tool + .tool { border-left: 1px solid var(--line); } .tool-group .tool.active { background: var(--navy-800); color: #fff; } .tool-divider { width: 1px; height: 20px; background: var(--line); } button.tool.accent { border-color: var(--star); background: var(--star-soft); color: var(--navy-800); } button.tool.accent:hover { background: var(--star); } button.tool:disabled { opacity: .45; cursor: not-allowed; } /* ── ocjena ──────────────────────────────────────────────────────────────── */ .rating { display: inline-flex; gap: 5px; } .rating .tool { padding: 4px 10px; font-size: 14px; line-height: 1.2; } .rating .tool.active { background: var(--navy-800); border-color: var(--navy-800); } /* ── nalazi ──────────────────────────────────────────────────────────────── */ .dialog-box.findings-box { width: min(680px, 94vw); } .findings-list { list-style: none; display: flex; flex-direction: column; gap: 9px; max-height: 55vh; overflow-y: auto; } .findings-list li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .findings-list .f-head { display: flex; align-items: baseline; gap: 8px; } .findings-list .f-title { font-weight: 700; color: var(--navy-800); } .findings-list .f-meta { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; } .findings-list .f-note { font-size: 13px; color: var(--ink-soft); margin-top: 4px; } .findings-list li.up { border-left: 3px solid var(--ok); } .findings-list li.down { border-left: 3px solid var(--err); } /* × za brisanje — tiho dok se ne pređe preko stavke */ .nav-item { position: relative; padding-right: 30px; } .nav-remove { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #6b7fa8; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .12s ease; } .nav-item:hover .nav-remove, .nav-remove:focus-visible { opacity: 1; } .nav-remove:hover { color: #ff7a6b; background: rgba(255,255,255,.08); } .nav-item.active .nav-remove { color: var(--navy-900); } /* ── opšti dijalog (zamjena za prompt/confirm) ───────────────────────────── */ .dialog-box.ask-box { width: min(460px, 94vw); } .ask-box textarea { resize: vertical; } .ask-box #ask-text { font-size: 13.5px; color: var(--ink-soft); } .dialog-box .primary.danger { background: var(--err); color: #fff; }