/* HyperAI's own parts, on HyperCluster's shared design (/ui/hc.css): the Train and Run steps,
   lists of jobs, models and keys, the job log, code samples, a chat with your own model, the
   Credit page and the prices on the home page. Colours, type, buttons, cards, pills and forms all
   come from hc.css. */

[hidden] { display: none !important; }
code, pre, .mono { font-family: var(--mono); }
.ai-error { color: var(--bad); font-size: 14px; min-height: 1.2em; overflow-wrap: anywhere; }
.ai-error:empty { min-height: 0; }
.ai-wrap { width: 100%; max-width: 1100px; }
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
textarea.input.code, input.input.code { font-family: var(--mono); font-size: 13px; }
textarea.input.code { min-height: 70px; }
input[type="file"].input { height: auto; padding: 9px 10px; color: var(--muted); font-size: 14px; }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card-2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; font-size: 14px; }
.link-btn:hover { color: var(--link-2); }
.btn.danger { color: var(--bad); }
.card > h2, .card > h3 { margin: 0; }
.card h2 { font-size: 20px; }

/* ---------- Train → Keep → Try it → Use it anywhere ---------- */
.ai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container site (min-width: 1000px) { .ai-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ai-steps a { display: flex; gap: 10px; align-items: center; height: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--text); text-decoration: none; }
.ai-steps a:hover { border-color: var(--line-2); color: var(--text); }
.ai-steps .n { width: 28px; height: 28px; border-radius: 50%; background: var(--card-2); color: var(--muted); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-steps b { font-size: 14px; }
.ai-steps li[aria-current] a { border-color: rgba(47, 140, 255, .55); background: rgba(47, 140, 255, .08); }
.ai-steps li[aria-current] .n { background: var(--blue); color: #050911; }

/* ---------- two columns: a form beside a list ---------- */
.ai-two { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container site (min-width: 1150px) { .ai-two { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
/* Fields side by side line up at the bottom, however their labels wrap. */
.ai-grid2, .ai-grid3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: end; }
@container site (min-width: 600px) { .ai-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- lists: jobs, models, keys ---------- */
.ai-list { display: flex; flex-direction: column; gap: 8px; }
.ai-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.ai-row:hover { border-color: var(--line-2); }
.ai-row[aria-current="true"] { border-color: var(--link); background: rgba(47, 140, 255, .08); }
.ai-row .t { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-row .s { grid-column: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-row .pill { grid-row: 1 / span 2; grid-column: 2; }
.ai-bar { height: 6px; background: var(--field); border-radius: 999px; overflow: hidden; }
.ai-bar span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 999px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chips span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); color: var(--text); }
.ai-chips span b { color: var(--muted); font-weight: 500; margin-right: 4px; }
.ai-chips span .score { color: var(--muted); margin-left: 4px; }
.ai-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ai-log { background: #03060c; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin: 0; max-height: 420px; min-height: 3em; overflow: auto; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: #c3cfdf; }
.ai-canvas { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm); background: var(--field); }
.ai-way { background: var(--field); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; }

/* ---------- code samples (Use it in your app) ---------- */
.ai-code { background: #03060c; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin: 0; overflow-x: auto; font-size: 12.5px; line-height: 1.55; color: #c3cfdf; }
.ai-code code { font-size: inherit; }
.ai-docs p code, .ai-docs li code, .ai-docs td code, .card p code { font-size: .88em; color: #c3cfdf; background: var(--field); border-radius: 6px; padding: 1px 5px; }
.ai-docs h3 { margin-top: 8px; }
.ai-docs ul { margin: 0; padding-left: 20px; }
.ai-reveal { border: 1px solid rgba(52, 211, 153, .45); background: var(--good-bg); border-radius: var(--r-sm); padding: 14px; }
.ai-reveal code { display: block; overflow-wrap: anywhere; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; user-select: all; font-size: 13px; }
.ai-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); }
.ai-key.revoked { opacity: .55; }
.ai-chatlog { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.ai-chatlog:empty { display: none; }
.ai-chatlog .msg { max-width: 85%; padding: 10px 12px; border-radius: var(--r-sm); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.ai-chatlog .msg.user { align-self: flex-end; background: var(--blue-bg); }
.ai-chatlog .msg.assistant { align-self: flex-start; background: var(--field); border: 1px solid var(--line); }
.ai-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.ai-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex-shrink: 0; }
.ai-key .main { flex: 1 1 320px; min-width: 0; }
.ai-key form { display: flex; gap: 8px; align-items: center; }
.ai-key form .input { width: 130px; height: 40px; }
table.t td.fail { color: var(--bad); }
table.t.errors td { white-space: normal; }
table.t.errors td:first-child { white-space: nowrap; color: var(--muted); }

/* ---------- Credit ---------- */
.ai-packs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ai-pack { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.ai-pack:hover { border-color: var(--link); }
.ai-pack .p { font-size: 22px; font-weight: 700; }
.ai-pack[disabled] { opacity: .6; cursor: wait; }
.ai-ledger { list-style: none; margin: 0; padding: 0; }
.ai-ledger li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ai-ledger li:last-child { border-bottom: 0; }
.ai-ledger .plus { color: var(--good); font-weight: 600; }

/* ---------- prices (the home page) ---------- */
.ai-prices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* The dialog over the page while a dataset uploads and is checked (training.js). */
.ai-modal{border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);color:var(--text);padding:28px 26px 22px;width:min(420px,calc(100vw - 32px));text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.ai-modal:focus,.ai-modal:focus-visible{outline:none}
.ai-modal::backdrop{background:rgba(3,6,12,.72);backdrop-filter:blur(2px)}
.ai-modal h2{font-size:18px;margin:12px 0 4px}
.ai-modal .aim-name{color:var(--muted);word-break:break-all;margin:0 0 14px}
.ai-modal .aim-icon{width:52px;height:52px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ai-modal .aim-icon svg{width:26px;height:26px}
.ai-modal[data-state=busy] .aim-icon{border:3px solid var(--line-2);border-top-color:var(--blue);animation:aim-spin 1s linear infinite}
.ai-modal[data-state=ok] .aim-icon{background:var(--good-bg);color:var(--good)}
.ai-modal[data-state=error] .aim-icon{background:var(--bad-bg);color:var(--bad)}
.ai-modal .aim-bar{height:8px;border-radius:99px;background:var(--field);overflow:hidden;margin:4px 0 12px}
.ai-modal .aim-bar span{display:block;height:100%;width:0;background:var(--blue);transition:width .3s}
.ai-modal .aim-bar.busy span{width:35%;animation:aim-slide 1.2s ease-in-out infinite}
.ai-modal .aim-status{margin:0}
.ai-modal .aim-note{margin:10px 0 0}
.ai-modal .aim-ok{margin-top:18px;min-width:120px}
@keyframes aim-spin{to{transform:rotate(360deg)}}
@keyframes aim-slide{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.ai-modal[data-state=busy] .aim-icon,.ai-modal .aim-bar.busy span{animation:none}}