/*
 * Colors are Windows 11's (WinUI/Fluent theme resources), so the widget and the flyout match
 * the shell around them. Both follow the taskbar's theme ("Windows mode"), set by main.js.
 */
:root {
  --text: #fff;                                 /* TextFillColorPrimary */
  --text-2: rgba(255, 255, 255, 0.786);         /* TextFillColorSecondary */
  --text-3: rgba(255, 255, 255, 0.545);         /* TextFillColorTertiary */
  --subtle-hover: rgba(255, 255, 255, 0.0605);  /* SubtleFillColorSecondary */
  --subtle-press: rgba(255, 255, 255, 0.0419);  /* SubtleFillColorTertiary */
  --control: rgba(255, 255, 255, 0.0605);       /* ControlFillColorDefault */
  --control-hover: rgba(255, 255, 255, 0.0837); /* ControlFillColorSecondary */
  --control-press: rgba(255, 255, 255, 0.0326); /* ControlFillColorTertiary */
  --control-stroke: rgba(255, 255, 255, 0.0698);/* ControlStrokeColorDefault */
  --card: rgba(255, 255, 255, 0.0512);          /* CardBackgroundFillColorDefault */
  --card-stroke: rgba(0, 0, 0, 0.1);            /* CardStrokeColorDefault */
  --track: rgba(255, 255, 255, 0.1);
  --ok: #6ccb5f;                                /* SystemFillColorSuccess */
  --warn: #fce100;                              /* SystemFillColorCaution */
  --bad: #ff99a4;                               /* SystemFillColorCritical */
  /* AcrylicBackgroundFillColorDefault: tint and luminosity layers over the blur. */
  --flyout: rgba(44, 44, 44, 0.96);
  --ease: cubic-bezier(0, 0, 0, 1);             /* ControlFastOutSlowInKeySpline */
  color-scheme: dark;
}
:root[data-theme="light"] {
  --text: rgba(0, 0, 0, 0.896);
  --text-2: rgba(0, 0, 0, 0.62);
  --text-3: rgba(0, 0, 0, 0.446);
  --subtle-hover: rgba(0, 0, 0, 0.0373);
  --subtle-press: rgba(0, 0, 0, 0.0241);
  --control: rgba(255, 255, 255, 0.7);
  --control-hover: rgba(249, 249, 249, 0.5);
  --control-press: rgba(249, 249, 249, 0.3);
  --control-stroke: rgba(0, 0, 0, 0.0578);
  --card: rgba(255, 255, 255, 0.7);
  --card-stroke: rgba(0, 0, 0, 0.0578);
  --track: rgba(0, 0, 0, 0.1);
  --ok: #0f7b0f;
  --warn: #9d5d00;
  --bad: #c42b1c;
  --flyout: rgba(249, 249, 249, 0.88);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: transparent; overflow: hidden; height: 100%; }
body {
  color: var(--text);
  font: 12px/1.35 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  user-select: none;
  cursor: default;
}
.dim { color: var(--text-2); }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------------------------------ */
/* Taskbar widget: transparent so the real taskbar shows through, with the hover and pressed */
/* states of the notification-area buttons next to it.                                        */

body.panel #widget, body.dock #details { display: none; }
/*
 * Measured from the notification-area buttons of the Windows 11 taskbar: 4 px above and below,
 * 4 px corners, a translucent fill and a 1 px border (lighter at the top on a dark taskbar,
 * darker at the bottom on a light one).
 */
:root {
  --tb-hover: rgba(255, 255, 255, 0.0605);
  --tb-hover-border: rgba(255, 255, 255, 0.0605);
  --tb-hover-border-top: rgba(255, 255, 255, 0.1);
  --tb-hover-border-bottom: rgba(255, 255, 255, 0.0605);
  --tb-press: rgba(255, 255, 255, 0.0419);
}
:root[data-theme="light"] {
  --tb-hover: rgba(255, 255, 255, 0.5);
  --tb-hover-border: rgba(0, 0, 0, 0.02);
  --tb-hover-border-top: rgba(0, 0, 0, 0.02);
  --tb-hover-border-bottom: rgba(0, 0, 0, 0.06);
  --tb-press: rgba(255, 255, 255, 0.3);
}
#widget {
  position: absolute; top: 4px; bottom: 4px; left: 0;
  display: flex; align-items: center;
  /* The fill stops inside the border, as in the shell: the border only tints what's behind. */
  border: 1px solid transparent; border-radius: 4px; background-clip: padding-box;
}
#widget:hover, #widget.open {
  background-color: var(--tb-hover);
  border-color: var(--tb-hover-border-top) var(--tb-hover-border) var(--tb-hover-border-bottom);
}
#widget:active { background-color: var(--tb-press); border-color: var(--tb-hover-border); }
#widget:active #compact { opacity: 0.786; }

#compact { display: flex; align-items: center; gap: 4px; padding: 0 6px; white-space: nowrap; }
#compact:has(> .dim, > .toast) { padding: 0 8px; }
.chip { display: flex; align-items: center; gap: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.toast { font-weight: 400; }
.ring { width: 15px; height: 15px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: var(--track); }
.ring .fg { stroke-linecap: round; transition: stroke-dasharray 0.8s var(--ease); }

/*
 * The provider's mark inside its usage ring. Both marks share one color and
 * optical size (the ring carries the usage color); sizes are even so everything centers on
 * whole pixels.
 */
.ring-mark { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.ring-mark .ring { position: absolute; inset: 0; width: 24px; height: 24px; }
.ring-mark .ring circle { stroke-width: 1.6; }
.chip .mark { position: relative; flex: none; fill: currentColor; color: var(--text); }
/* The spark is all thin rays and the Codex mark a solid shape: balance their weight. */
.chip .mark.claude { width: 14px; height: 14px; }
.chip .mark.codex { width: 12px; height: 12px; }

/* ------------------------------------------------------------------------------------------ */
/* Flyout: on the system's acrylic backdrop (see tauri.conf.json), laid out like the shell's   */
/* own flyouts.                                                                               */

/* The blur comes from the window's acrylic; its own tint is Windows 10's (a muddy gray), so the
   flyout paints the Windows 11 tint over it. DWM rounds the corners. */
html:has(body.panel) { background: var(--flyout); }
#details {
  padding: 12px 16px 16px;
  animation: flyout-in 0.25s var(--ease);
}
@keyframes flyout-in { from { opacity: 0; transform: translateY(16px); } }

header { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
header .title { font-weight: 600; font-size: 14px; }
header #updated { margin-left: auto; margin-right: 4px; }
.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--text);
  transition: background-color 83ms linear;
}
.icon-btn:hover { background: var(--subtle-hover); }
.icon-btn:active { background: var(--subtle-press); color: var(--text-2); }
#refresh.spin svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#accounts { display: flex; flex-direction: column; gap: 12px; }
.acc-head .name { font-size: 12px; font-weight: 600; color: var(--text-2); }
.plan {
  font-size: 11px; padding: 0 6px; border-radius: 4px;
  background: var(--control); border: 1px solid var(--control-stroke); color: var(--text-2);
}
.acc-meta { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 1px 0 2px; }
.win { margin-top: 8px; }
.acct .win:first-of-type { margin-top: 6px; }
.win .row { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.win .row b { font-weight: 600; }
.bar { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; margin: 5px 0 3px; }
.bar > div { height: 100%; border-radius: 2px; }
.reset { font-size: 11px; color: var(--text-2); }
.error { color: var(--warn); font-size: 12px; margin-top: 4px; }
.empty { color: var(--text-2); padding: 4px 0 2px; }

/* Accounts: cards like the Settings app's, the signed-in one raised. */
.acct { padding: 10px 12px 11px; margin-top: 4px; border-radius: 4px; border: 1px solid transparent; }
.acct.active { background: var(--card); border-color: var(--card-stroke); }
.acct-head { display: flex; align-items: center; gap: 8px; }
.acct-head .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.acct-head .in-use, .acct-head .use { margin-left: auto; flex: none; }
.acct-head .in-use { color: var(--ok); font-weight: 600; }
.acct-head .in-use.pending { opacity: 0.55; }
.acct-head .use {
  min-height: 24px; padding: 2px 11px; border-radius: 4px;
  background: var(--control); border: 1px solid var(--control-stroke); color: var(--text);
  transition: background-color 83ms linear;
}
.acct-head .use:hover { background: var(--control-hover); }
.acct-head .use:active { background: var(--control-press); color: var(--text-2); }
.acct-head .use:disabled { opacity: 0.6; }
.acct-head .use.busy { color: transparent; position: relative; }
.acct-head .use.busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--text-3); border-top-color: var(--text); animation: spin 0.7s linear infinite;
}

/* Usage-limit resets held by an account */
.reset-grant { display: flex; gap: 6px; align-items: baseline; margin-top: 8px; font-size: 11px; color: var(--text-2); }
.reset-grant span { color: var(--text); }
.reset-grant.usable, .reset-grant.usable span { color: var(--ok); }