/* CP-207 MosaicTile + CP-201 detail reveal; no ongoing decorative animation. */
.ay-traffic-dashboard{color:#eae5f0;font:13px/1.6 system-ui,"Microsoft YaHei",sans-serif;--traffic-cyan:#a1ded4;--traffic-line:#c5afd420;--traffic-ease:cubic-bezier(.2,.7,.2,1)}
.ay-traffic-status{font-size:11px;color:#9e94ac;margin:0 0 15px}.ay-traffic-featured,.ay-traffic-grid{display:grid;gap:12px;align-items:start}.ay-traffic-featured{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px}.ay-traffic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ay-traffic-card{min-width:0;border:1px solid var(--traffic-line);border-radius:18px;background:linear-gradient(135deg,#30273c44,#1a1925 75%);overflow:hidden;transition:border-color .16s var(--traffic-ease),box-shadow .16s var(--traffic-ease)}.ay-traffic-featured .ay-traffic-card{background:radial-gradient(ellipse at 0 0,#5d426c38,transparent 80%),#201c2b}
.ay-traffic-overview{list-style:none;display:flex;flex-direction:column;gap:20px;padding:18px;cursor:pointer;transition:background .16s var(--traffic-ease)}.ay-traffic-overview::-webkit-details-marker{display:none}.ay-traffic-overview:hover{background:#c6a8df09}.ay-traffic-overview:focus-visible{outline:2px solid #a1ded4;outline-offset:-4px;border-radius:18px}.ay-traffic-card[aria-expanded=true]{border-color:#c6a8df60;box-shadow:0 10px 30px #0002}
.ay-traffic-card-head{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0}.ay-traffic-name{font-size:12px;font-weight:600;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ay-traffic-badge{font-size:9px;white-space:nowrap;display:flex;align-items:center;gap:5px;color:#acbfb7}.ay-traffic-badge:before{content:'';width:5px;height:5px;border-radius:50%;background:#a1d8b9}.ay-traffic-badge.stale{color:#d5ba90}.ay-traffic-badge.stale:before{background:#d5ba90}
.ay-traffic-main{display:flex;align-items:center;gap:12px;justify-content:space-between;min-width:0}.ay-traffic-main-copy{min-width:0}.ay-traffic-quota-label{display:block;color:#a79ab6;font-size:10px;margin-bottom:4px}.ay-traffic-main strong{display:block;font-size:clamp(21px,2.7vw,30px);font-weight:650;letter-spacing:-.04em;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums;color:#c6e8dd}.ay-traffic-card[data-quota=unknown] .ay-traffic-main strong{font-size:19px;color:#cfbfdb}
.ay-traffic-gauge{width:44px;height:44px;display:grid;place-items:center;position:relative;flex:none;color:#a8bfb8}.ay-traffic-gauge svg{width:44px;height:44px;transform:rotate(-90deg)}.ay-traffic-gauge circle.track{stroke:#d7c1ed16}.ay-traffic-gauge circle.fill{stroke:#a1ded4;stroke-linecap:round;stroke-dasharray:var(--traffic-used,0) 113.1}.ay-traffic-gauge b{position:absolute;font-size:9px;font-weight:500}.ay-traffic-gauge.unknown svg{opacity:.5}.ay-traffic-gauge.unknown circle.track{stroke-dasharray:3 5;stroke:#b5a2c4}.ay-traffic-gauge.unknown b{font-size:18px;color:#b5a2c4}
.ay-traffic-card-foot{display:flex;align-items:center;justify-content:space-between;gap:7px;color:#9d91ad;font-size:10px}.ay-traffic-card-foot small{font-size:10px}.ay-traffic-expand{white-space:nowrap;color:#c5b1d9;font-size:10px}.ay-traffic-grid .ay-traffic-overview{gap:16px;padding:16px}.ay-traffic-grid .ay-traffic-gauge{display:none}.ay-traffic-grid .ay-traffic-main strong{font-size:23px}.ay-traffic-grid [data-quota=unknown] .ay-traffic-main strong{font-size:18px}
.ay-traffic-body{padding:0 18px 18px;border-top:1px solid #c9b0dd14;animation:traffic-detail-in .4s cubic-bezier(.2,.9,.2,1)}.ay-traffic-quota-detail{padding:14px 0}.ay-traffic-quota-detail small{display:block;color:#b8aac8;font-size:10px;line-height:1.8}.ay-traffic-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ay-traffic-stat span{display:block;font-size:10px;color:#ac9fbb}.ay-traffic-stat strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#e7deef;white-space:nowrap}
.ay-traffic-rates{display:flex;gap:14px;flex-wrap:wrap;color:var(--traffic-cyan);font-size:11px;margin-top:14px}.ay-traffic-body>small{font-size:9px;color:#93869f}.ay-traffic-resources{margin-top:14px}.ay-traffic-meter{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:10px;color:#b8acc3;margin-top:10px}.ay-traffic-meter small{font-size:10px}.ay-traffic-meter meter{grid-column:1/-1;width:100%;height:6px;accent-color:#a1ded4}.ay-traffic-meta{color:#92859f;white-space:pre-line;overflow-wrap:anywhere;font-size:9px;line-height:1.8;margin:14px 0 0}
.ay-traffic-explanation{margin-top:18px;color:#93879f;font-size:10px}.ay-traffic-explanation summary{cursor:pointer}.ay-traffic-explanation p{max-width:650px;line-height:1.8}.ay-traffic-shell{max-width:980px;margin:32px auto;padding:24px;background:#17141e;color:#eae5f0;border-radius:22px;border:1px solid #c5afd420}.ay-traffic-shell>header{margin-bottom:20px}.ay-traffic-shell h1{font:600 23px system-ui;margin:0}.ay-traffic-shell header small,.ay-traffic-shell header p{display:none}
.hc-social .ay-usage-dialog{width:min(900px,calc(100vw - 24px));max-height:88vh;padding:22px;box-sizing:border-box;border-radius:20px;background:#191620}.ay-usage-dialog>header{margin-bottom:18px}.ay-usage-dialog>header small{display:none}.ay-usage-dialog>header h2{font-size:21px;margin:0;font-weight:650}.ay-usage-dialog .ay-traffic-card-head{margin:0}.hc-social .ay-traffic-overview{font-weight:400}
@keyframes traffic-detail-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:650px){.ay-traffic-grid{grid-template-columns:1fr}.ay-traffic-grid .ay-traffic-overview{gap:12px}.ay-traffic-grid .ay-traffic-main strong{font-size:23px}.ay-traffic-grid .ay-traffic-gauge{display:grid}.ay-traffic-shell{margin:0;padding:18px 14px;border:0;border-radius:0}.hc-social .ay-usage-dialog{padding:16px}.ay-traffic-featured{grid-template-columns:1fr}.ay-traffic-overview{gap:14px}.ay-traffic-main strong{font-size:28px}}
@media(prefers-reduced-motion:reduce){.ay-traffic-dashboard *{animation:none!important;transition:none!important}}

.ay-traffic-card{padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:none}.ay-traffic-card:focus-visible{outline:2px solid #a1ded4;outline-offset:2px}.ay-traffic-card:hover{border-color:#c6a8df50}.ay-traffic-card:active .ay-traffic-overview{transform:scale(.985);transition:transform .11s cubic-bezier(.2,.78,.18,1)}
.ay-traffic-inspector[hidden]{display:none}.ay-traffic-inspector{margin-top:14px;border:1px solid #c5afd430;border-radius:18px;background:#211b2b;overflow:hidden;animation:traffic-detail-in .4s cubic-bezier(.2,.9,.2,1)}.ay-traffic-inspector-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px}.ay-traffic-inspector h3{margin:0;font-size:13px;font-weight:600}.ay-traffic-inspector .ay-traffic-close{width:28px;height:28px;font-size:20px;line-height:1;border:0;border-radius:8px;background:#ffffff08;color:#bba8cd;cursor:pointer}.ay-traffic-close:focus-visible{outline:2px solid #a1ded4}.ay-traffic-inspector .ay-traffic-body{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;animation:none;padding-top:14px}.ay-traffic-inspector .ay-traffic-quota-detail{padding:0}.ay-traffic-inspector .ay-traffic-totals{align-self:center}.ay-traffic-inspector .ay-traffic-rates{margin:0}.ay-traffic-inspector .ay-traffic-resources{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:0}.ay-traffic-inspector .ay-traffic-meta{grid-column:1/-1;margin:0}
@media(max-width:650px){.ay-traffic-inspector .ay-traffic-body{grid-template-columns:1fr}.ay-traffic-inspector .ay-traffic-resources{grid-template-columns:1fr;gap:6px}}

/* Preserve the card surface inside the voice workspace's generic button rules. */
.ay-traffic-dashboard button.ay-traffic-card{display:block;padding:0;border:1px solid var(--traffic-line);border-radius:18px;color:inherit;font:inherit;text-align:left}
.ay-traffic-dashboard button.ay-traffic-card[aria-expanded=true]{border-color:#c6a8df60}
.hc-social .ay-traffic-dashboard button.ay-traffic-card:hover:not(:disabled){background:radial-gradient(ellipse at 0 0,#5d426c38,transparent 80%),#201c2b}
.ay-traffic-dashboard .ay-traffic-inspector-head .ay-traffic-close{padding:0;display:grid;place-items:center}
