.token-window{position:fixed;margin:0;padding:0;border:1px solid #ffffffa8;border-radius:20px;background:linear-gradient(135deg,#f4f6faac,#e8edf388);backdrop-filter:blur(24px) saturate(125%);color:#344258;box-shadow:inset 0 1px #fff8,0 24px 70px #17264130;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:hidden;box-sizing:border-box}.token-window[open]{display:flex;flex-direction:column}.token-head{height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #93a3bf25;cursor:grab;touch-action:none;box-sizing:border-box}.token-head>div{min-width:0}.token-head b{font-size:calc(13px * var(--pg-ts,1))}.token-head small{display:block;font-size:calc(10px * var(--pg-ts,1));color:#8290a4;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}.token-head nav{display:flex}.token-head button{width:27px;height:28px;padding:0;color:#8290a4;font-size:calc(17px * var(--pg-ts,1));border:0;background:transparent;border-radius:7px}.token-head button:hover{background:#8a9ebc15}.token-body{padding:20px 22px;overflow:auto;min-height:0;flex:1}.token-summary{display:flex;flex-direction:column;gap:6px}.token-summary>span{font-size:calc(11px * var(--pg-ts,1));color:#7f8b9e}.token-summary strong{font-size:calc(34px * var(--pg-ts,1));font-weight:550;letter-spacing:-1px;font-variant-numeric:tabular-nums}.token-summary small{font-size:calc(10px * var(--pg-ts,1));color:#8793a6}.token-users{display:flex;gap:5px;margin:20px 0 14px;overflow:auto}.token-users button,.token-views button{font-size:calc(11px * var(--pg-ts,1));color:#7d8ba0;padding:7px 10px;white-space:nowrap;border-radius:8px}.token-users button[aria-pressed=true]{background:#7288bb19;color:#536bb3}.token-views{display:flex;gap:4px;border-bottom:1px solid #92a2ba26;padding-bottom:10px}.token-views button{display:flex;align-items:center;gap:6px;flex:1;justify-content:center}.token-views button[aria-pressed=true]{background:#ffffff75;color:#5067b3;box-shadow:0 2px 8px #25395708}.token-chart{min-height:200px;margin-top:20px;overflow:auto}.token-chart table{width:100%;border-collapse:collapse;font-size:calc(11px * var(--pg-ts,1));font-variant-numeric:tabular-nums}.token-chart th{text-align:right;color:#8a96a8;font-weight:500;padding:0 0 10px}.token-chart th:first-child{text-align:left}.token-chart td{text-align:right;padding:12px 0;border-top:1px solid #8a9bb21b}.token-chart td:first-child{text-align:left}.token-chart td b{font-weight:500;display:flex;align-items:center;gap:6px}.token-chart td small{display:block;font-size:calc(9px * var(--pg-ts,1));color:#8692a4;margin-top:5px}.token-chart i,.token-legend i{display:inline-block;width:6px;height:6px;border-radius:50%;flex-shrink:0}.token-bars{display:grid;gap:22px;padding:8px 0}.token-bars header{display:flex;justify-content:space-between;font-size:calc(11px * var(--pg-ts,1));margin-bottom:9px}.token-bars b{font-weight:500;font-variant-numeric:tabular-nums}.token-bar-track{height:10px;border-radius:4px;background:#91a0b413;overflow:hidden}.token-bar-track i{height:100%;display:block;border-radius:4px}.token-donut{display:flex;align-items:center;gap:20px}.token-donut svg{width:55%;max-width:240px;flex-shrink:0}.token-donut text,.token-line text{fill:currentColor;font:calc(10px * var(--pg-ts,1)) Arial,"PG Hangul",sans-serif}.token-donut .token-donut-value{font-size:calc(18px * var(--pg-ts,1));font-weight:600}.token-donut>div{flex:1}.token-donut p{display:flex;align-items:center;gap:7px;font-size:calc(11px * var(--pg-ts,1))}.token-donut b{margin-left:auto;font-weight:500}.token-line{width:100%;min-width:300px}.token-chart-note{font-size:calc(10px * var(--pg-ts,1));color:#8693a6}.token-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:calc(10px * var(--pg-ts,1))}.token-legend span{display:flex;gap:6px;align-items:center}.token-body footer{font-size:calc(10px * var(--pg-ts,1));color:#8995a7;line-height:1.6;margin-top:22px}.token-mini .token-body,.token-mini>.popup-resize-handle{display:none!important}.token-empty{font-size:calc(12px * var(--pg-ts,1));color:#8b97a8}.party-room .room-actions>.room-token-total{display:flex;flex-direction:column;align-items:flex-end;padding:3px 12px!important;margin-right:8px;border-right:1px solid #8c9bb42b;color:var(--room-muted);font-variant-numeric:tabular-nums}.room-token-total span{font-size:calc(12px * var(--pg-ts,1));font-weight:600}.room-token-total small{font-size:calc(8px * var(--pg-ts,1));opacity:.65;margin-top:3px}.dark .token-window{background:linear-gradient(135deg,#29344ac9,#1e2a3aaa);color:#dce5f4;border-color:#c9d9f22e}.dark .token-views button[aria-pressed=true]{background:#9bb5ea1e;color:#bacbfa}

/* Compact default, charts keep room to grow when resized. */
.token-head{height:56px;padding:10px 15px}.token-body{padding:15px 17px}.token-summary{gap:4px}.token-summary strong{font-size:calc(28px * var(--pg-ts,1))}.token-users{margin:14px 0 9px;gap:3px}.token-users button,.token-views button{padding:6px 8px}.token-views{padding-bottom:8px;gap:2px}.token-chart{min-height:160px;margin-top:12px}.token-chart td{padding:9px 0}.token-chart td small{max-width:155px;white-space:normal}.token-chart th,.token-chart td{padding-right:7px}.token-chart th:last-child,.token-chart td:last-child{padding-right:0}.token-donut{gap:12px}.token-donut svg{width:49%;max-width:210px}.token-donut p{font-size:calc(10px * var(--pg-ts,1));gap:5px}.token-donut p span{overflow-wrap:anywhere}.token-donut p b{white-space:nowrap}.token-bars{gap:15px;padding:4px 0}.token-body footer{margin-top:13px;font-size:calc(9px * var(--pg-ts,1))}.token-head small{max-width:230px}.token-line{min-width:280px}

.token-window{min-width:min(300px,calc(100vw - 24px));min-height:min(360px,calc(100dvh - 24px));container-type:inline-size}.token-window.token-mini{min-width:0;min-height:0}
@container(max-width:340px){.token-head{padding:9px 12px}.token-head small{max-width:155px}.token-body{padding:12px}.token-summary strong{font-size:calc(25px * var(--pg-ts,1))}.token-views button{padding:6px 3px;font-size:calc(10px * var(--pg-ts,1));gap:4px}.token-users{margin-top:12px}.token-chart{min-height:135px}.token-chart table{font-size:calc(10px * var(--pg-ts,1))}.token-chart td small{font-size:calc(8px * var(--pg-ts,1));max-width:102px}.token-chart th,.token-chart td{padding-right:5px}.token-line{min-width:0}.token-donut{gap:8px}.token-donut svg{width:48%}.token-donut .token-donut-value{font-size:calc(16px * var(--pg-ts,1))}.token-donut p{font-size:calc(9px * var(--pg-ts,1))}.token-body footer{font-size:calc(9px * var(--pg-ts,1))}}
/* Keep timeline marks and labels bounded when the window expands. */
.token-window .token-line{display:block;width:100%;min-width:0;max-width:500px;height:auto;max-height:240px;aspect-ratio:500 / 240}

/* 2026-10-05 Claude: how the hourly chart is split (small, under the legend) */
html body .token-window .token-chart-foot{margin:6px 0 0;font-size:calc(12px * var(--pg-ts,1));line-height:1.5;color:var(--pg-muted,#6b7385)}/* above the phone's 15px rule for p */
html body.dark .token-window .token-chart-foot{color:#9aa6ba}