:root{
  --google-blue:#1a73e8;
  --google-red:#ea4335;
  --google-yellow:#fbbc04;
  --google-green:#34a853;
  --surface-bg:#f8f9fa;
  --card-bg:#ffffff;
  --border-color:#dadce0;
  --text-primary:#202124;
  --text-secondary:#5f6368;
}
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Google Sans','Roboto',-apple-system,sans-serif;
  background-color:var(--surface-bg);
  color:var(--text-primary);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ---------- Header ---------- */
.gc-header{
  background:#fff;border-bottom:1px solid var(--border-color);
  padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:.75rem;
}
.gc-header-left{display:flex;align-items:center;gap:.6rem}
.gc-title{font-weight:700;font-size:1.15rem;color:#3c4043;letter-spacing:-.2px}
.gc-divider{color:var(--border-color);font-weight:300}
.gc-subbrand{font-size:1.05rem;font-weight:500;color:var(--text-secondary)}
.host-pill{
  background:#e8f0fe;color:var(--google-blue);font-family:'Roboto Mono',monospace;
  font-size:.8rem;font-weight:500;padding:.35rem .75rem;border-radius:16px;border:1px solid #d2e3fc;
}

/* ---------- Single control bar: scenario + request ---------- */
.control-bar{
  background:#fff;border-bottom:2px solid #e8eaed;padding:.85rem 1.5rem;
  box-shadow:0 2px 4px rgba(0,0,0,.04);
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
}
.control-group{display:flex;align-items:center;gap:.6rem;min-width:0}
.control-label{
  font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-secondary);white-space:nowrap;
}
.gc-select{
  appearance:none;
  background:#fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a73e8'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") no-repeat right .7rem center/1.2rem;
  padding:.45rem 2.2rem .45rem .8rem;border:1px solid var(--google-blue);border-radius:6px;
  font-family:'Google Sans',sans-serif;font-size:.88rem;font-weight:600;color:var(--google-blue);
  cursor:pointer;
}
.gc-select:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(26,115,232,.25)}
.control-group.request{flex:1;min-width:280px}
.request-url{
  font-family:'Roboto Mono',monospace;font-size:.88rem;font-weight:500;color:var(--text-primary);
  background:#f1f3f4;border:1px solid var(--border-color);border-radius:4px;
  padding:.35rem .7rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.request-note{font-size:.75rem;color:var(--text-secondary);white-space:nowrap}

/* ---------- Workspace ---------- */
.gc-workspace{
  display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;
  padding:.4rem 1.5rem 1.25rem;
}
.gc-card{
  background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 6px rgba(60,64,67,.08);
}
.card-header{
  padding:.85rem 1.2rem;border-bottom:1px solid var(--border-color);
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;
  min-height:76px;
}
.panel-header-human{background:#f8f9fa;border-left:5px solid #5f6368}
.panel-header-ai{background:#e8f0fe;border-left:5px solid var(--google-blue)}
.header-banner{display:flex;align-items:center;gap:.75rem}
.banner-icon{font-size:1.5rem}
.header-main-title{font-size:1rem;font-weight:700;letter-spacing:.5px;color:var(--text-primary)}
.panel-header-ai .header-main-title{color:var(--google-blue)}
.header-sub-title{font-size:.75rem;color:var(--text-secondary);display:block}
.card-header-right{display:flex;gap:.4rem;flex-wrap:wrap}
.status-chip{font-size:.72rem;font-weight:600;padding:.25rem .55rem;border-radius:4px;white-space:nowrap}
.chip-success{background:#e6f4ea;color:#137333}
.chip-neutral{background:#e8eaed;color:#3c4043}
.chip-accent{background:#d2e3fc;color:#1557b0}
.chip-cdn{background:#fef7e0;color:#b06000}
.chip-size{background:#fff;color:#3c4043;border:1px solid var(--border-color);font-family:'Roboto Mono',monospace}

/* the pivot: user-agent */
.ua-box{
  padding:.8rem 1.2rem;border-bottom:1px solid var(--border-color);
  background:#f8f9fa;min-height:146px;
}
.ua-box.ai{background:#f4f8fe}
.ua-label{
  font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-secondary);display:block;margin-bottom:.3rem;
}
.ua-value{
  font-family:'Roboto Mono',monospace;font-size:.8rem;line-height:1.5;
  background:#fff;border:1px solid var(--border-color);border-radius:4px;
  padding:.4rem .55rem;word-break:break-all;display:block;
  min-height:calc(3em + .8rem);
}
.ua-token{font-weight:700;border-radius:2px;padding:0 .15rem}
.ua-token-human{background:#e8eaed;color:#202124;box-shadow:inset 0 -2px 0 #5f6368}
.ua-token-ai{background:#d2e3fc;color:#1557b0;box-shadow:inset 0 -2px 0 var(--google-blue)}
.ua-token-search{background:#e6f4ea;color:#137333;box-shadow:inset 0 -2px 0 var(--google-green)}

/* client selector inside the right panel */
.ua-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.35rem;flex-wrap:wrap}
.client-select{
  appearance:none;
  background:#fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") no-repeat right .5rem center/1.1rem;
  border:1px solid var(--border-color);border-radius:4px;
  padding:.3rem 1.9rem .3rem .55rem;
  font-family:'Roboto Mono',monospace;font-size:.76rem;font-weight:500;color:var(--text-primary);
  cursor:pointer;
}
.client-select:focus-visible{outline:2px solid var(--google-blue);outline-offset:1px}
.client-static{
  border:1px solid var(--border-color);border-radius:4px;background:#fff;
  padding:.3rem .55rem;font-family:'Roboto Mono',monospace;font-size:.76rem;
  font-weight:500;color:var(--text-secondary);
}

/* matched pattern chips */
.pattern-row{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem;align-items:center}
.pattern-row-label{
  font-size:.66rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text-secondary);margin-right:.15rem;
}
.pattern-chip{
  font-family:'Roboto Mono',monospace;font-size:.7rem;padding:.15rem .4rem;border-radius:3px;
  background:#fff;border:1px solid var(--border-color);color:var(--text-secondary);
}
.pattern-chip.on{background:#d2e3fc;border-color:#a8c7fa;color:#1557b0;font-weight:700}
.pattern-chip.off{background:#e6f4ea;border-color:#b7e1c3;color:#137333;font-weight:700}

/* right panel when a search crawler is selected */
.panel-header-search{background:#e6f4ea;border-left:5px solid var(--google-green)}
.panel-header-search .header-main-title{color:#137333}
.ua-box.search{background:#f4faf6}
.decision-band.search{background:#e6f4ea}
.decision-band.search .decision-value{
  color:#137333;font-weight:600;font-family:'Google Sans',sans-serif;font-size:.85rem;
}
.chip-search{background:#e6f4ea;color:#137333}

/* routing decision, elevated to its own band */
.decision-band{
  padding:.7rem 1.2rem;border-bottom:1px solid var(--border-color);
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  background:#fff;min-height:64px;
}
.decision-band.ai{background:#e8f0fe}
.decision-label{
  font-size:.68rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary);
}
.decision-value{font-size:.85rem;font-weight:500;color:var(--text-secondary)}
.decision-band.ai .decision-value{color:var(--google-blue);font-weight:600;font-family:'Roboto Mono',monospace;font-size:.8rem;word-break:break-all}

.card-body{
  padding:1.2rem;display:flex;flex-direction:column;
  height:440px;overflow-y:auto;
}
/* fade the cut so a scrolled pane reads as deliberate, not truncated */
.card-body::after{
  content:"";position:sticky;bottom:-1.2rem;display:block;
  height:2.2rem;margin:-2.2rem -1.2rem -1.2rem;
  background:linear-gradient(rgba(255,255,255,0),#fff);
  pointer-events:none;flex-shrink:0;
}

/* mock page */
.mock-page{background:#fff;border:1px solid #e8eaed;border-radius:6px;padding:1rem}
.mock-nav{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #e8eaed;padding-bottom:.6rem;margin-bottom:.75rem;font-size:.85rem;
}
.mock-ad{
  background:#f8f9fa;border:1px dashed var(--border-color);color:var(--text-secondary);
  padding:.4rem;text-align:center;font-size:.72rem;margin-bottom:.8rem;border-radius:4px;
}
.mock-price{font-size:1.15rem;font-weight:700;color:var(--google-green);margin:.5rem 0}

/* raw payload pane fills the card so columns end level */
.raw-view{
  font-family:'Roboto Mono',monospace;font-size:.82rem;color:#0f172a;background:#f1f5f9;
  padding:1.2rem;border-radius:6px;border:1px solid #cbd5e1;
  white-space:pre-wrap;word-break:break-word;line-height:1.6;
  flex:1 0 auto;
}

/* ---------- Manifests, tabbed ---------- */
.manifests-section{padding:1.5rem;background:#fff;border-top:1px solid var(--border-color)}
.section-title-bar h3{font-size:1.1rem;color:var(--text-primary);margin-bottom:.25rem}
.section-title-bar p{font-size:.85rem;color:var(--text-secondary)}
.section-title-bar code{font-family:'Roboto Mono',monospace;background:#f1f3f4;padding:.1rem .3rem;border-radius:3px}
.manifest-card{
  border:1px solid var(--border-color);border-radius:8px;overflow:hidden;
  background:#fff;margin-top:1rem;
}
.manifest-tabs{display:flex;border-bottom:1px solid var(--border-color);background:#f8f9fa}
.manifest-tab{
  appearance:none;background:none;border:none;cursor:pointer;
  font-family:'Roboto Mono',monospace;font-size:.85rem;font-weight:500;color:var(--text-secondary);
  padding:.8rem 1.2rem;border-bottom:3px solid transparent;display:flex;align-items:center;gap:.5rem;
}
.manifest-tab .tab-desc{
  font-family:'Google Sans',sans-serif;font-size:.72rem;color:#80868b;font-weight:400;
}
.manifest-tab[aria-selected="true"]{color:var(--google-blue);border-bottom-color:var(--google-blue);background:#fff}
.manifest-tab:focus-visible{outline:2px solid var(--google-blue);outline-offset:-2px}
.manifest-view{
  font-family:'Roboto Mono',monospace;font-size:.82rem;line-height:1.6;color:#0f172a;
  background:#fff;padding:1.2rem;white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow-y:auto;
}

/* ---------- Footer ---------- */
.gc-footer{
  background:#fff;border-top:1px solid var(--border-color);padding:.6rem 1.5rem;
  display:flex;justify-content:flex-end;gap:1.5rem;font-size:.78rem;color:var(--text-secondary);
  flex-wrap:wrap;margin-top:auto;
}
.footer-item{display:flex;align-items:center;gap:.35rem}
.gc-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-blue{background:var(--google-blue)}
.dot-green{background:var(--google-green)}
.dot-yellow{background:var(--google-yellow)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .gc-workspace{grid-template-columns:1fr}
  .gc-header{padding:.75rem 1rem}
  .control-bar{padding:.85rem 1rem;gap:.75rem}
  .control-group.request{width:100%}
  .request-note{display:none}
  .card-body{height:auto;max-height:440px}
  .gc-workspace{padding:1rem}
  .manifests-section{padding:1.25rem 1rem}
  .manifest-tab .tab-desc{display:none}
}