/* OE-D71-002 — Artifact viewer panel (F1) */
:root{
  --art-panel-w: 40%;
  --art-panel-min: 320px;
  --art-panel-max: 720px;
}
.app-body.art-open{--art-gap:0;}
.art-panel{
  display:none;
  flex-direction:column;
  flex-shrink:0;
  width:clamp(var(--art-panel-min), var(--art-panel-w), var(--art-panel-max));
  max-width:min(var(--art-panel-max), 48vw);
  background:var(--bg2);
  border-left:1px solid var(--border);
  color:var(--text);
  min-height:0;
  z-index:30;
}
.app-body.art-open .art-panel{display:flex;}
.art-panel.art-fs{
  position:fixed; inset:0; width:100%!important; max-width:none!important;
  z-index:1200; border:none;
  padding-top:env(safe-area-inset-top,0);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.art-resize{
  position:absolute; left:-3px; top:0; bottom:0; width:6px; cursor:col-resize;
  touch-action:none; background:transparent;
}
.art-panel{position:relative;}
.art-hdr{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border);
  min-height:44px; flex-shrink:0;
}
.art-hdr-title{
  flex:1; font:600 13px/1.2 'Space Grotesk',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.art-icon-btn{
  min-width:28px; min-height:28px; width:28px; height:28px;
  border:1px solid var(--border); border-radius:6px;
  background:var(--bg3); color:var(--text2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1;
}
.art-icon-btn:hover,.art-icon-btn:focus-visible{
  border-color:var(--accent); color:var(--text); outline:2px solid var(--accent); outline-offset:1px;
}
.art-tabs{
  display:flex; gap:4px; padding:6px 8px; overflow-x:auto;
  border-bottom:1px solid var(--border); flex-shrink:0;
  scrollbar-width:thin;
}
.art-tab{
  flex:0 0 auto; max-width:160px;
  min-height:28px; padding:4px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:transparent; color:var(--text2); cursor:pointer;
  font:500 11px/1.2 'Space Grotesk',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.art-tab[aria-selected="true"]{
  background:var(--bg3); color:var(--text); border-color:var(--accent);
}
.art-body{
  flex:1; min-height:0; overflow:auto; padding:12px;
  position:relative;
}
.art-toolbar{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; align-items:center;
}
.art-toolbar .art-icon-btn{font-size:12px; padding:0 8px; width:auto;}
.art-empty{
  color:var(--text3); font:12px/1.4 'Space Grotesk',sans-serif; padding:24px 8px; text-align:center;
}
.art-img-stage{
  overflow:auto; max-height:100%;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  touch-action:none; cursor:grab;
}
.art-img-stage.dragging{cursor:grabbing;}
.art-img-stage img{
  display:block; max-width:none; transform-origin:0 0;
  user-select:none; -webkit-user-drag:none;
}
.art-md, .art-text, .art-code{
  font:13px/1.55 'Space Grotesk',sans-serif; color:var(--text);
  white-space:pre-wrap; word-break:break-word;
}
.art-code, .art-text pre, .art-md code{
  font-family:'DM Mono',monospace; font-size:12px;
}
.art-md a{color:var(--accent); text-decoration:underline;}
.art-csv{
  width:100%; border-collapse:collapse; font:12px/1.4 'DM Mono',monospace;
}
.art-csv th, .art-csv td{
  border:1px solid var(--border); padding:4px 8px; text-align:left;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.art-csv th{background:var(--bg3); position:sticky; top:0;}
.art-search-card{
  border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin:0 0 10px;
  background:var(--bg3);
}
.art-search-card a{
  color:var(--accent); font:600 13px/1.3 'Space Grotesk',sans-serif;
  text-decoration:none;
}
.art-search-card a:hover{text-decoration:underline;}
.art-search-dom{color:var(--text3); font:11px/1.2 'DM Mono',monospace; margin:2px 0 6px;}
.art-search-sn{color:var(--text2); font:12px/1.45 'Space Grotesk',sans-serif;}
.art-unsup{
  border:1px solid var(--border); border-radius:8px; padding:16px; background:var(--bg3);
}
.art-pdf-stage{display:flex; flex-direction:column; gap:8px; min-height:240px; flex:1;}
.art-pdf-frame{
  display:none; width:100%; min-height:360px; flex:1;
  border:1px solid var(--border); border-radius:8px; background:var(--bg3);
}
.art-chip-row{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.art-chip{
  min-height:28px; padding:4px 10px;
  border:1px solid var(--border); border-radius:999px;
  background:var(--bg3); color:var(--text2); cursor:pointer;
  font:500 11px/1.2 'Space Grotesk',sans-serif;
}
.art-chip:hover,.art-chip:focus-visible{
  border-color:var(--accent); color:var(--text);
  outline:2px solid var(--accent); outline-offset:1px;
}
.art-pref{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-top:1px solid var(--border);
  font:11px/1.3 'Space Grotesk',sans-serif; color:var(--text3); flex-shrink:0;
}
.art-pref input{width:16px; height:16px;}

@media (max-width:1023px){
  .art-panel{
    position:fixed; left:0; right:0; bottom:0;
    width:100%!important; max-width:none!important;
    height:min(88vh, 720px);
    border-left:none; border-top:1px solid var(--border);
    border-radius:16px 16px 0 0;
    transform:translateY(110%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    z-index:1100;
  }
  .app-body.art-open .art-panel{transform:translateY(0); display:flex;}
  .art-panel.art-fs{
    height:100%; border-radius:0;
    transform:none;
  }
  .art-resize{display:none;}
  @media (prefers-reduced-motion:reduce){
    .art-panel{transition:none;}
  }
}
@media (prefers-reduced-motion:reduce){
  .art-panel,.art-img-stage img{transition:none!important;}
}