/* Artifacts: the app that runs inside an answer and its wide view beside the chat. Uses the chat's tokens only. */
.art-box{display:block;container-type:inline-size;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.art-head{display:flex;align-items:center;gap:2px;min-height:52px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line)}
.art-head .art-name{display:flex;align-items:baseline;gap:10px;margin-right:8px}
.art-head .art-name b{flex:0 1 auto;min-width:0}
.art-head .art-name small{flex:none}
.art-head .icon-btn{flex:none;width:34px;height:34px}
.art-head .icon-btn svg{width:17px;height:17px}
.art-box .art-status{margin:12px 12px 0}
.art-box .art-status:not([hidden])+.art-stage{margin-top:12px;border-top:1px solid var(--line)}
.art-box .art-stage{flex:none;height:420px;margin:0;border:0;border-radius:0}
.art-box .art-code{flex:none;max-height:460px;margin:0;border:0;border-radius:0}
.art-box .art-code pre{min-height:0}

.art-card{display:flex;align-items:center;gap:14px;max-width:520px;padding:12px 18px 12px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.art-mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--hover);color:var(--tx2)}
.art-info{flex:1;min-width:0;display:grid;gap:1px}
.art-info b{overflow:hidden;font-weight:500;color:var(--tx);text-overflow:ellipsis;white-space:nowrap}
.art-info small{font-size:13px;color:var(--mut)}
.art-info small.waiting{justify-self:start;font-size:13px}
.art-card.bad .art-info small{color:var(--err)}
.art-card.pending .art-mark{animation:blink 1.6s ease-in-out infinite}

.art{display:flex;flex-direction:column;min-width:0;height:100dvh;background:var(--side);border-left:1px solid var(--line);animation:art-in .4s var(--ease)}
@keyframes art-in{from{opacity:0;transform:translateX(20px)}}
.art-top{flex:none;display:flex;align-items:center;gap:4px;min-height:56px;padding:8px 10px 8px 18px}
.art-name{flex:1;min-width:0;display:grid}
.art-name b{overflow:hidden;font-size:15px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.art-name small{overflow:hidden;font-size:12.5px;color:var(--mut);text-overflow:ellipsis;white-space:nowrap}
.art-seg{flex:none;display:flex;margin-right:6px;padding:3px;border-radius:999px;background:var(--hover)}
.art-seg button{height:30px;padding:0 14px;border-radius:999px;font-size:13.5px;color:var(--mut);transition:background .2s,color .2s}
.art-seg button:hover{color:var(--tx)}
.art-seg button[aria-pressed=true]{background:var(--card);color:var(--tx);box-shadow:0 0 0 1px var(--line)}
.art-ver{flex:none;display:flex;align-items:center;font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.art-ver .icon-btn{width:28px}
.art-ver .icon-btn:disabled{opacity:.3;pointer-events:none}
.art-status{flex:none;margin:0 14px 10px;padding:9px 14px;border-radius:12px;background:var(--hover);font-size:13.5px;color:var(--tx2)}
.art-status.bad{color:var(--err)}
.art-stage,.art-code{flex:1;min-height:0;margin:0 14px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.art-stage{position:relative;background:var(--card)}
.art-stage iframe{display:block;width:100%;height:100%;border:0}
.art-wait{position:absolute;inset:0;display:grid;place-content:center}
.art-code{display:flex;flex-direction:column;background:var(--code)}
.art-files{flex:none;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px}
.art-tabs{flex:1;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.art-tabs button{padding:5px 11px;border-radius:8px;color:#9a968e;white-space:nowrap;transition:background .15s,color .15s}
.art-tabs button:hover{color:#dedad2}
.art-tabs button[aria-pressed=true]{background:rgba(255,255,255,.09);color:#f3f0ea}
.art-files .code-copy{flex:none}
.art-code pre{flex:1;margin:0;padding:14px 16px;overflow:auto;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#dedad2;tab-size:2}
.art-code code.hljs{padding:0;background:none}
.art-foot{flex:none;display:flex;flex-wrap:wrap;gap:8px;min-height:14px;padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
.art-foot:not(:has(.btn:not([hidden]))){padding-top:0}
.art-foot .btn{height:38px;padding:0 16px;font-size:13.5px}

@media (min-width:1100px){
 .art-on .app{grid-template-columns:284px minmax(0,1fr) minmax(440px,46vw)}
 .art-on.side-off .app{grid-template-columns:0 minmax(0,1fr) minmax(440px,50vw)}
 [data-surface=glass] .art{background:var(--g-solid);border-left:1px solid var(--g-line)}
 @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-surface=glass] .art{background:var(--g-dense);-webkit-backdrop-filter:var(--g-blur-lg);backdrop-filter:var(--g-blur-lg)}
 }
}
@media (max-width:1099px){
 .art{position:fixed;inset:0;z-index:40;border-left:0;background:var(--bg);animation-name:art-up}
 @keyframes art-up{from{opacity:0;transform:translateY(16px)}}
 .art-top{flex-wrap:wrap;row-gap:8px;padding:10px 10px 10px 16px}
 .art-top .art-name{flex:1 1 calc(100% - 44px);order:1}
 #art-close{order:2}
 .art-top .art-seg{order:3;margin-right:auto}
 .art-ver{order:4}
 #art-again{order:5}
 #art-save{order:6}
 .art-stage,.art-code{margin:0 10px}
 .art-foot{padding-inline:10px}
}
/* The header folds into two rows whenever the answer column is narrow: on a phone or beside the wide view. */
@container (max-width:520px){
 .art-head{flex-wrap:wrap;padding:12px 8px 8px 12px}
 .art-head .art-name{flex:1 1 100%;margin:0 4px 10px}
 .art-head .art-seg{margin-right:auto}
}
@media (max-width:640px){
 .art-box .art-stage{height:360px}
 .art-box .art-code{max-height:400px}
}
@media (prefers-reduced-motion:reduce){.art,.art-card.pending .art-mark{animation:none}}