/* ═════════ studio layout ═════════ */
body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.top { flex: none; }
.top { height: 52px; position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 10px; }
/* start: panel toggle · mark · مشاريعي / project name · save */
.top-start { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.top .brand .mark { width: 28px; height: 28px; border-radius: 8px; }
.crumb { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13.5px; }
.crumb a { color: var(--muted); text-decoration: none; padding: 4px 6px; border-radius: 8px; white-space: nowrap; }
.crumb a:hover { color: var(--ink); background: var(--sunk); }
.crumb .sl { color: var(--faint); }
.crumb input { border-color: transparent; background: transparent; font-family: var(--display); font-weight: 600; font-size: 15px; padding: 5px 10px; border-radius: 10px; width: clamp(140px, 22vw, 320px); }
.crumb input:hover { background: var(--sunk); }
.crumb input:focus { background: var(--card); border-color: var(--copper); }
#proj_msg { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* end: feedback · one quiet group of icons · balance + account · panel toggle */
.top-end { display: flex; align-items: center; gap: 8px; }
.tgroup { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 980px; background: var(--sunk); }
.tgroup .btn, .tgroup .themebtn, .tgroup .bellbtn { border: 0; background: transparent; width: 32px; height: 32px; padding: 0; box-shadow: none; }
.tgroup .btn:hover, .tgroup .themebtn:hover, .tgroup .bellbtn:hover { background: var(--card); }
.tgroup .langpick { position: relative; width: 32px; height: 32px; justify-content: center; padding: 0; border: 0; background: transparent; }
.tgroup .langpick:hover { background: var(--card); }
.tgroup .langpick select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ptog { color: var(--muted); }
.ptog[aria-pressed="false"] { color: var(--copper); background: var(--copper-soft); }
.fbbtn { color: var(--muted); }
/* account menu */
.who .avbtn { border: 0; padding: 0; cursor: pointer; background: none; display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.who .avbtn svg { width: 14px; height: 14px; }
.menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 8px; width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; z-index: 40; animation: pop .18s; }
.menu .mh { padding: 10px 10px 8px; display: grid; gap: 1px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .mh b { font-size: 14px; } .menu .mh small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.menu a, .menu button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; background: none; border: 0; font-size: 13.5px; cursor: pointer; text-align: start; width: 100%; }
.menu a:hover, .menu button:hover { background: var(--sunk); }
.menu .out-link { color: var(--bad); }
.who { display: flex; align-items: center; gap: 6px; }
.who .bal { display: inline-flex; align-items: center; gap: 7px; background: var(--copper-soft); color: var(--link); border-radius: 980px; padding: 3px 4px 3px 12px; font-size: 13px; }
[dir=ltr] .who .bal { padding: 3px 12px 3px 4px; }
.who .bal b { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.who .bal button { border: 0; background: var(--solid); color: var(--on-solid); border-radius: 980px; padding: 3px 11px; font-size: 12px; font-weight: 400; cursor: pointer; transition: background .2s; }
.who .bal button:hover { background: var(--solid-h); }
.who .av { width: 30px; height: 30px; border-radius: 50%; background: var(--mark-bg); color: var(--mark-fg); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 13px; }

.studio { display: grid; grid-template-columns: 78px var(--pw, 344px) minmax(0, 1fr) var(--ow, 318px); flex: 1; min-height: 0; transition: grid-template-columns .45s cubic-bezier(.32, .72, 0, 1); }
.studio.no-panel { --pw: 0px; } .studio.no-out { --ow: 0px; }
.studio.no-panel .panel, .studio.no-out .out { overflow: hidden; padding-inline: 0; border: 0; }
.studio.no-panel .panel > *, .studio.no-out .out > * { opacity: 0; pointer-events: none; }
.panel > *, .out > * { transition: opacity .25s; }

/* rail */
.rail { background: var(--card); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; }
.rail button { position: relative; border: 0; background: transparent; border-radius: 12px; padding: 10px 4px 8px; display: grid; justify-items: center; gap: 4px; cursor: pointer; color: var(--muted); transition: background .15s, color .15s; }
.rail button span { font-size: 11.5px; font-weight: 500; }
.rail button:hover { background: var(--sunk); color: var(--ink); }
.rail button.on { background: var(--sunk); color: var(--copper); }
.rail button.on span { color: var(--ink); font-weight: 600; }
.rail button::before { content: ''; position: absolute; inset-inline-start: -8px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--copper); transform: scaleY(0); transition: transform .45s var(--ease-art); }
.rail button.on::before { transform: scaleY(1); }
.rail button { transition: background .25s, color .25s; }
.rail button.done::after { content: ''; position: absolute; top: 8px; inset-inline-end: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* settings panel */
.panel { overflow-y: auto; padding: 18px 16px 30px; border-inline-end: 1px solid var(--line); }
.panel section { display: none; gap: 12px; }
.panel section.on { display: grid; }
@keyframes slide { from { opacity: 0; transform: translateX(8px) } }
.sec-head { margin-bottom: 4px; }
.sec-head h2 { font-size: 21px; }
.sec-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.seg-lg button { padding: 10px 6px; font-size: 14px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets .chip { cursor: pointer; font-family: var(--mono); font-weight: 500; }
.presets .chip:hover { border-color: var(--line2); color: var(--ink); }
.presets .chip.on { background: var(--solid); color: var(--on-solid); border-color: transparent; }

.drop { border: 1.5px dashed var(--line2); border-radius: 18px; background: var(--card); padding: 22px 14px; display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.hot { border-color: var(--copper); background: var(--copper-soft); }
.drop-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--copper-soft); color: var(--copper); display: grid; place-items: center; }
.drop b { font-weight: 600; font-size: 14px; }
.drop small { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
.filecard { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; }
.filecard .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--sunk); display: grid; place-items: center; color: var(--ink); }
.filecard b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filecard small { color: var(--muted); font-size: 12px; }
.filecard .fix { grid-column: 1 / -1; }
.loading { color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; padding: 6px 2px; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--copper); animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg) } }

.capacity { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; background: var(--sunk); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.capacity b { font-family: var(--display); font-size: 22px; color: var(--ink); font-weight: 600; grid-row: span 2; }
.capacity.bad { background: var(--bad-soft); color: var(--bad-ink); }

/* viewport */
.view { position: relative; overflow: hidden; min-width: 0; background: radial-gradient(120% 90% at 50% 30%, var(--view-b) 0%, var(--view-b) 35%, var(--view-c) 100%); }
.view canvas { display: block; width: 100%; height: 100%; }
.hud { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--nav-line); border-radius: 980px; padding: 6px 14px; font-size: 12.5px; color: var(--muted); white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; }
.hud b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vtools { position: absolute; top: 14px; inset-inline-end: 14px; display: grid; gap: 6px; }
.vtools .btn { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-color: var(--nav-line); box-shadow: var(--shadow); }
.vtools .btn:hover { background: var(--card); }
.vtools #v_hand.on { background: var(--copper); color: #fff; border-color: transparent; }
.vtools #v_hand { margin-bottom: 6px; }
/* the hand tool: the whole view says what a drag will do */
.view.hand canvas { cursor: grab; }
.view.hand.grabbing canvas { cursor: grabbing; }
.view .handtip { position: absolute; top: 60px; left: 50%; translate: -50% 0; z-index: 3; pointer-events: none; font-size: 12.5px; padding: 6px 12px; border-radius: 980px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow); color: var(--ink); opacity: 0; transition: opacity .25s; }
.view.hand .handtip { opacity: 1; }
.empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; pointer-events: none; padding-bottom: 80px; }
.empty > * { pointer-events: auto; }
.empty-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--card); border: 1px solid transparent; display: grid; place-items: center; color: var(--copper); box-shadow: var(--shadow); }
.empty h3 { font-size: 21px; margin-top: 6px; }
.empty p { margin: 0; color: var(--muted); }
.empty-act { display: flex; gap: 8px; margin-top: 6px; }

/* checks + export */
.out { background: var(--card); border-inline-start: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.out-sec { padding: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.out-sec:empty { display: none; }
.out-sec.sticky { position: sticky; top: 0; background: var(--card); z-index: 2; }
.out-sec h3 { font-size: 15px; display: flex; align-items: center; gap: 7px; }
.out-sec h3 svg { color: var(--copper); }
.checks { display: grid; gap: 8px; }
.small-note { font-size: 12.5px; }
.progress { height: 4px; border-radius: 4px; background: var(--sunk); overflow: hidden; position: relative; }
.progress::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--copper), transparent); animation: run 1.1s ease-in-out infinite; }
@keyframes run { from { transform: translateX(160%) } to { transform: translateX(-260%) } }
.gen-state { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--sunk); border-radius: 12px; padding: 10px 12px; }
.stat span { display: block; color: var(--muted); font-size: 11.5px; }
.stat b { font-family: var(--display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.stat.wide { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.price { background: var(--tile); color: #f5f5f7; border-radius: 14px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.price b { font-family: var(--display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price s { opacity: .55; margin-inline-end: 6px; }
.files { display: grid; gap: 6px; }
.fileln { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); font-family: var(--mono); font-size: 12px; direction: ltr; transition: border-color .15s, background .15s; }
.fileln:hover { border-color: var(--copper); background: var(--hover); }
.fileln svg { color: var(--copper); }
.boards { display: grid; gap: 6px; }
.boardln { display: flex; justify-content: space-between; font-size: 12.5px; padding: 8px 12px; background: var(--sunk); border-radius: 10px; }

/* ═════════ the agent ═════════ */
.ai { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: min(660px, calc(100% - 32px)); z-index: 5; }
.ai-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 999px; isolation: isolate; box-shadow: 0 14px 34px -14px rgba(124, 58, 237, .55), 0 8px 22px -12px rgba(219, 39, 119, .4); }
/* a rotating rainbow seen through a 2 px ring */
.ai-bar::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ang, 0deg), var(--ai1), var(--ai2), var(--ai3), var(--ai4), var(--ai1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ang 5s linear infinite; z-index: -1; }
.ai-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--glass); backdrop-filter: blur(8px); z-index: -2; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ang { to { --ang: 360deg } }
.ai-orb { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--ai1), var(--ai2) 55%, var(--ai3)); background-size: 200% 200%; animation: orb 6s ease-in-out infinite, breathe 3s ease-in-out infinite; }
.ai-orb svg { width: 20px; height: 20px; }
@keyframes orb { 50% { background-position: 100% 100%; } }
@keyframes breathe { 50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(219, 39, 119, .10); } }
.ai-bar input { border: 0; background: transparent; box-shadow: none; padding: 8px 4px; font-size: 14.5px; }
.ai-bar input:focus { box-shadow: none; }
.ai-go { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; cursor: pointer; color: #fff; display: grid; place-items: center; background: linear-gradient(135deg, var(--ai2), var(--ai1)); transition: transform .15s, opacity .15s; }
.ai-go:hover { transform: scale(1.06); }
.ai-go:disabled, .ai-review:disabled { opacity: .35; cursor: default; transform: none; }
.ai-review { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink); white-space: nowrap; }
.ai-review:hover { border-color: #c4b5fd; color: var(--ai1); }
/* thinking: the ring races, the orb spins, the bar shimmers */
.ai.thinking .ai-bar::before { animation-duration: 1.1s; }
.ai.thinking .ai-orb svg { animation: rot 1.4s linear infinite; }
.ai.thinking .ai-bar::after { background: linear-gradient(100deg, var(--glass) 30%, var(--ai-soft) 50%, var(--glass) 70%); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0 } to { background-position: -120% 0 } }

.ai-pop { position: absolute; bottom: calc(100% + 12px); inset-inline: 0; background: var(--card); border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 0 16px 14px; display: none; max-height: min(46vh, calc(100vh - 260px)); overflow-y: auto; overscroll-behavior: contain; }
.ai-pop.show { display: grid; gap: 10px; animation: pop .25s cubic-bezier(.2, .9, .3, 1.2); }
.ai-pop::before { content: ''; position: absolute; top: 0; inset-inline: 16px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--ai1), var(--ai2), var(--ai3), var(--ai4)); }
.ai-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; background: var(--card); padding: 14px 0 6px; margin-bottom: -4px; }
.ai-head b { font-family: var(--display); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ai-head b svg { color: var(--ai2); }
.ai-sum { font-size: 14px; line-height: 1.7; }
.ai-steps { display: grid; gap: 7px; counter-reset: s; }
.ai-step { display: grid; grid-template-columns: 24px 1fr; gap: 8px; font-size: 13px; line-height: 1.6; }
.ai-step::before { counter-increment: s; content: counter(s); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ai1), var(--ai2)); }
.ai-step b { display: block; font-weight: 600; }
.ai-step span { color: var(--muted); }
.ai-apply { justify-self: start; border: 0; border-radius: 99px; padding: 9px 16px; color: #fff; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, var(--ai1), var(--ai2) 60%, var(--ai3)); box-shadow: 0 8px 18px -10px rgba(124, 58, 237, .8); display: inline-flex; gap: 6px; align-items: center; }
.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ai2); animation: dot 1s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: .15s; background: var(--ai1); }
.ai-dots i:nth-child(3) { animation-delay: .3s; background: var(--ai3); }
@keyframes dot { 50% { transform: translateY(-5px); opacity: .5 } }
.ai-err { color: var(--bad); font-size: 13px; }
.ai-checks { display: grid; gap: 4px; padding: 9px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid var(--warn-line); font-size: 12.5px; line-height: 1.6; }
.ai-checks b { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--warn-ink); }
.ai-checks .bad { color: var(--bad); }
.ai-checks .warn { color: var(--warn-ink); }
.ai-more summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; }
.ai-more summary::-webkit-details-marker { display: none; }
.ai-more summary::before { content: '▸ '; }
.ai-more[open] summary::before { content: '▾ '; }
.ai-more[open] .ai-steps { margin-top: 8px; }
.ai-q { font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.ai-changes { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, var(--ai-soft), var(--ai-soft2)); border: 1px solid var(--ai-line); }
.ai-chg { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; font-size: 13px; }
.ai-chg span { color: var(--muted); }
.ai-chg s { color: var(--faint); text-decoration-color: rgba(0, 0, 0, .25); font-variant-numeric: tabular-nums; }
.ai-chg svg { color: var(--ai2); }
.ai-chg b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3ch; }
.ai-note { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.ai-note.ok { color: var(--ok); }
.ai-hint { position: absolute; bottom: calc(100% + 8px); inset-inline: 10px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.ai-hint b { color: var(--ink); font-weight: 600; }
.ai:hover .ai-hint, .ai:focus-within .ai-hint { opacity: 1; transform: none; }
.ai-pop.show ~ .ai-hint { display: none; }

/* top-up */

@media (max-width: 1180px) { .studio { grid-template-columns: 72px var(--pw, 310px) minmax(0, 1fr) var(--ow, 280px); } }
.seg-4 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; border-radius: 16px; }
.seg-4 button { border-radius: 13px; }
#rail .off { opacity: .35; pointer-events: none; }
.when { display: grid; gap: 10px; padding: 2px 0 4px 0; }
.when[hidden] { display: none; }
.fileln .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: left; }
.fileln small { font-family: var(--body); color: var(--muted); font-size: 11.5px; white-space: nowrap; }
/* long file names must shrink, never widen the column */
.out-sec, #result { min-width: 0; }
.files { grid-template-columns: minmax(0, 1fr); }
.fileln { min-width: 0; overflow: hidden; }
.out-sec, #result { grid-template-columns: minmax(0, 1fr); }
.announce { background: var(--copper-soft); color: var(--ink); text-align: center; font-size: 13px; padding: 8px 16px; }
.dims { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.lockbtn { width: 38px; height: 40px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.lockbtn.on { background: var(--copper-soft); color: var(--copper); border-color: var(--copper-line); }
.hud .sep { font-style: normal; margin: 0 8px; color: var(--faint); }

/* «القطعة / الألواح / مفكك» — only when the part is split across boards */
.vmodes { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 2; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--nav-line); box-shadow: var(--shadow); border-radius: 980px; animation: enter-fast .6s var(--ease-art) both; }
.vmodes button { padding: 6px 14px; white-space: nowrap; }
.vmodes button b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 980px; background: var(--copper); color: #fff; font-size: 11px; margin-inline-start: 4px; padding: 0 5px; }

/* optional cards (text): folded by default, one line until opened */
details.group.opt { gap: 0; }
details.group.opt > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
details.group.opt > summary::-webkit-details-marker { display: none; }
details.group.opt > summary h4 { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; color: var(--ink); margin: 0; }
details.group.opt > summary h4 svg { color: var(--copper); }
details.group.opt > summary h4 small { color: var(--faint); font-weight: 500; font-size: 11.5px; }
details.group.opt > summary .chev { color: var(--muted); transition: transform .35s var(--ease-art); }
details.group.opt[open] > summary .chev { transform: rotate(180deg); }
details.group.opt .opt-body { display: grid; gap: 12px; padding-top: 12px; }
details.group.opt[open] .opt-body { animation: enter-fast .5s var(--ease-art) both; }
details.group.opt:not([open]) { background: transparent; border-style: dashed; }
details.group.opt:not([open]):hover { background: var(--card); }
.linkbtn { justify-self: center; border: 0; background: none; color: var(--link); font-size: 12.5px; cursor: pointer; padding: 2px 6px; text-decoration: none; text-underline-offset: 3px; }
.linkbtn:hover { text-decoration: underline; }

/* the agent changed something here: a glowing ring in the AI colours + a soft burst of sparks */
.rail button .ai-ring { position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--ang, 0deg), var(--ai1), var(--ai2), var(--ai3), var(--ai4), var(--ai1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.rail button.ai-glow .ai-ring { animation: ang 1.6s linear infinite, ai-ring 2.4s ease-out both; }
.rail button.ai-glow { animation: ai-glow 2.4s ease-out both; }
.rail button.ai-glow svg { animation: ai-ink 2.4s ease-out both; }
@keyframes ai-ring { 0% { opacity: 0 } 12% { opacity: 1 } 70% { opacity: .9 } 100% { opacity: 0 } }
@keyframes ai-glow {
  0% { box-shadow: 0 0 0 0 transparent; }
  15% { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--ai2) 55%, transparent), 0 0 34px 6px color-mix(in srgb, var(--ai1) 30%, transparent); background: color-mix(in srgb, var(--ai1) 10%, var(--card)); }
  45% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--ai1) 40%, transparent); }
  60% { box-shadow: 0 0 16px 2px color-mix(in srgb, var(--ai3) 40%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes ai-ink { 15%, 60% { color: var(--ai1); } }
.ai-burst { position: absolute; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.ai-burst i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px var(--c); opacity: 0; animation: ai-spark .95s cubic-bezier(.16, 1, .3, 1) var(--t) both; }
@keyframes ai-spark {
  0% { transform: rotate(var(--a)) translateX(4px) scale(.6); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--r)) scale(.15); opacity: 0; }
}
/* …and the control it moved */
.ai-touched { animation: ai-touched 2.4s ease-out; border-radius: 12px; }
@keyframes ai-touched {
  0% { box-shadow: 0 0 0 0 transparent; }
  18% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ai1) 55%, transparent), 0 0 18px 2px color-mix(in srgb, var(--ai2) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .rail button.ai-glow, .rail button.ai-glow .ai-ring, .ai-burst, .ai-touched { animation: none !important; } }

/* ═════════ phones: one column — sections, the 3-D view, the settings, then checks + files */
@media (max-width: 760px) {
  body { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
  header.top { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; position: sticky; top: 0; }
  .ptog, .fbbtn span, .tgroup > a[href="/docs.html"], .who .bal button, .who .bal > svg, #proj_save span { display: none; }
  .fbbtn { padding: 7px; }
  .top-start { order: 2; flex-basis: 100%; }
  .crumb { flex: 1; } .crumb input { width: 100%; }
  .top-end { margin-inline-start: auto; gap: 4px; }
  .who { gap: 4px; }
  .who .bal { padding: 3px 10px; }
  .studio { display: flex; flex-direction: column; flex: none; }
  .rail { order: 0; flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 6px 8px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail button { flex: 1 0 auto; min-width: 62px; padding: 8px 4px 6px; }
  .rail button::before { inset-inline: 14px; top: auto; bottom: -6px; width: auto; height: 3px; transform: scaleX(0); }
  .rail button.on::before { transform: scaleX(1); }
  .view { order: 1; height: 58vh; min-height: 360px; flex: none; }
  .panel { order: 2; overflow: visible; border-inline-end: 0; padding: 18px 14px 24px; }
  .out { order: 3; overflow: visible; border-inline-start: 0; border-top: 1px solid var(--line); }
  .out-sec.sticky { position: static; }
  .ai { bottom: 12px; width: calc(100% - 20px); }
  .ai-review { padding: 8px 10px; }
  .ai-hint { display: none; }
}

/* the files the machine will get, in order */
.filesplan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); padding-top: 4px; }
.filesplan b { font-weight: 600; color: var(--ink); width: 100%; }
.filesplan span { display: inline-flex; align-items: center; gap: 5px; background: var(--sunk); border-radius: 980px; padding: 3px 10px 3px 4px; color: var(--ink); }
[dir=rtl] .filesplan span { padding: 3px 4px 3px 10px; }
.filesplan i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: var(--card); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }

/* the agent's answer can be folded into a chip and opened again */
.ai-head .acts { display: flex; gap: 2px; }
.ai-chip { position: absolute; bottom: calc(100% + 10px); inset-inline-start: 50%; translate: 50% 0; display: none; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 980px; border: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow); font-size: 13px; color: var(--ink); cursor: pointer; max-width: 80%; }
[dir=ltr] .ai-chip { translate: -50% 0; }
.ai-chip svg { color: var(--ai2); flex: none; }
.ai-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chip.show { display: inline-flex; animation: pop .22s; }

/* «جودة المعاينة» */
.vtools #v_q { margin-top: 6px; }
.qpop { position: absolute; top: 0; inset-inline-end: calc(100% + 8px); width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 4px; z-index: 5; animation: pop .18s; }
.qpop > b { font-size: 13px; padding: 2px 6px 6px; }
.qpop button { display: grid; gap: 1px; text-align: start; border: 0; background: none; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--ink); }
.qpop button:hover { background: var(--sunk); }
.qpop button.on { background: var(--copper-soft); }
.qpop button.on span { color: var(--link); font-weight: 600; }
.qpop button span { font-size: 13.5px; } .qpop button small { font-size: 11.5px; color: var(--muted); }
.qpop p { margin: 4px 6px 2px; font-size: 11.5px; color: var(--faint); }