/* Meeting length bar — segmented countdown for allocated meeting time */
.length-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 560px;
}
.length-bars-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  white-space: nowrap;
  margin: 0;
}
.length-bars-track {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background: var(--surface);
  border: 2px solid color-mix(in oklab, var(--accent) 45%, var(--border));
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 8%, transparent),
    0 6px 22px color-mix(in oklch, var(--accent) 12%, transparent);
}
.length-bars-segments {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 100%;
  padding: 8px;
}
.length-bars-overtime-segments {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 100%;
  padding: 8px;
}
.length-bars-overtime-segments .length-segment {
  min-width: 4px;
}
.length-segment {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px;
  background: color-mix(in oklab, var(--surface), var(--border) 40%);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  position: relative;
}
.length-segment-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 5px;
  transition: width 120ms linear;
}
.length-segment--green .length-segment-fill {
  background: linear-gradient(90deg, color-mix(in oklab, var(--success), black 14%), var(--success));
}
.length-segment--blue .length-segment-fill {
  background: linear-gradient(90deg, #0369a1, #38bdf8);
}
.length-segment--orange .length-segment-fill {
  background: linear-gradient(90deg, #c2410c, #fb923c);
}
.length-segment--red .length-segment-fill {
  background: linear-gradient(90deg, #991b1b, #ef4444 55%, #f87171);
}
.length-bars-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg);
  padding: 6px 14px;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-width: calc(100% - 24px);
  border-radius: 8px;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  box-shadow: 0 2px 12px color-mix(in oklch, var(--fg) 8%, transparent);
  backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}
.length-bars-overtime-wrap {
  width: 100%;
}
.length-bars-overtime-wrap[hidden] {
  display: none !important;
}
.length-bars-overtime-track {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background: color-mix(in oklab, #450a0a 8%, var(--surface));
  border: 2px solid color-mix(in oklab, #e11d48 55%, var(--border));
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in oklch, #e11d48 10%, transparent),
    0 4px 18px color-mix(in oklch, #e11d48 16%, transparent);
  animation: length-heartbeat 2.4s ease-in-out infinite;
  transform-origin: center center;
}
.length-bars-label--overtime {
  font-size: 16px;
  color: #fff;
  white-space: nowrap;
  background: color-mix(in oklab, #7f1d1d 78%, transparent);
  border-color: color-mix(in oklab, #fecaca 35%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, #fff 12%, transparent),
    0 2px 14px color-mix(in oklch, #000 28%, transparent);
  text-shadow: 0 1px 2px color-mix(in oklch, #000 55%, transparent);
}
.length-bars--overtime .length-bars-cap {
  color: #e11d48;
}
.length-bars--overtime .length-bars-track--main {
  display: none;
}
.length-bars--overtime {
  gap: 4px;
}
@keyframes length-heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.028); }
  24% { transform: scale(1); }
  36% { transform: scale(1.016); }
  48% { transform: scale(1); }
}

/* Cost bar stack — horizontal active bar + expired tokens */
.cost-bars-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  width: 100%;
}
.cost-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  min-height: 152px;
  overflow: hidden;
}
.cost-bars-expired {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.cost-bars-expired:empty {
  flex: 0 0 0;
  gap: 0;
  overflow: hidden;
}
.cost-bar-active {
  flex: 1 1 120px;
  min-width: 100px;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.cost-bar-active-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  white-space: nowrap;
}
.cost-bar-active-track {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background: var(--surface);
  border: 2px solid color-mix(in oklab, var(--accent) 45%, var(--border));
  overflow: hidden;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 8%, transparent),
    0 6px 22px color-mix(in oklch, var(--accent) 12%, transparent);
}
.cost-bar-active-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent), black 12%),
    var(--accent)
  );
  border-radius: 8px 0 0 8px;
  transition: width 120ms linear;
}
.cost-bar-active-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  background: color-mix(in oklch, white 55%, var(--accent));
  opacity: 0.75;
}
.cost-bar-active-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cost-dollar-block,
.cost-minute-block {
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--accent), white 22%);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  z-index: 2;
  will-change: left;
}
.cost-minute-block {
  background: color-mix(in oklab, var(--success), white 18%);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--success) 35%, transparent);
}
.cost-bars--time .cost-bar-active-fill {
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--success), black 12%),
    var(--success)
  );
}
.cost-bars--time .cost-bar-active-cap {
  color: var(--success);
}
.cost-bars--time .cost-token--60 { flex: 34 1 0; }
.cost-bars--time .cost-token--180 { flex: 38 1 0; }
.cost-bars--time .cost-token--360 { flex: 42 1 0; }
.cost-bars--time .cost-token--720 { flex: 46 1 0; }
.cost-bars--time .cost-token--1440 { flex: 50 1 0; }
.cost-bars--time .cost-token--7200 { flex: 54 1 0; }
.cost-bars--time .cost-token--60 .cost-token-fill {
  background: linear-gradient(to top, color-mix(in oklab, var(--success), black 10%), var(--success));
}
.cost-bars--time .cost-token--60 .cost-token-label { color: #fff; }
.cost-bars--time .cost-token--180 .cost-token-track {
  border-color: color-mix(in oklab, #0ea5e9 50%, var(--border));
  box-shadow: 0 4px 16px color-mix(in oklch, #0ea5e9 18%, transparent);
}
.cost-bars--time .cost-token--180 .cost-token-fill {
  background: linear-gradient(to top, #0369a1, #38bdf8 55%, #7dd3fc);
}
.cost-bars--time .cost-token--180 .cost-token-label { color: #fff; font-size: 11px; }
.cost-bars--time .cost-token--360 .cost-token-track {
  border-color: color-mix(in oklab, #d4a017 50%, var(--border));
  box-shadow: 0 4px 16px color-mix(in oklch, #d4a017 18%, transparent);
}
.cost-bars--time .cost-token--360 .cost-token-fill {
  background: linear-gradient(to top, #9a7209, #e6c04a 55%, #f7e08a);
}
.cost-bars--time .cost-token--360 .cost-token-label { color: #5c4206; font-size: 11px; }
.cost-bars--time .cost-token--720 .cost-token-track {
  border-color: color-mix(in oklab, #9ca3af 55%, var(--border));
  box-shadow: 0 4px 18px color-mix(in oklch, #cbd5e1 22%, transparent);
}
.cost-bars--time .cost-token--720 .cost-token-fill {
  background: linear-gradient(to top, #6b7280, #d1d5db 45%, #f9fafb);
}
.cost-bars--time .cost-token--720 .cost-token-label { color: #374151; font-size: 11px; }
.cost-bars--time .cost-token--1440 .cost-token-track {
  border-color: color-mix(in oklab, #7c3aed 50%, var(--border));
  box-shadow: 0 4px 20px color-mix(in oklch, #7c3aed 20%, transparent);
}
.cost-bars--time .cost-token--1440 .cost-token-fill {
  background: linear-gradient(to top, #4c1d95, #7c3aed 45%, #c4b5fd);
}
.cost-bars--time .cost-token--1440 .cost-token-label { color: #ede9fe; font-size: 11px; }
.cost-bars--time .cost-token--7200 .cost-token-track {
  border-color: color-mix(in oklab, #be123c 45%, var(--border));
  box-shadow: 0 4px 22px color-mix(in oklch, #be123c 22%, transparent);
}
.cost-bars--time .cost-token--7200 .cost-token-fill {
  background: linear-gradient(to top, #881337, #e11d48 45%, #fda4af);
}
.cost-bars--time .cost-token--7200 .cost-token-label { color: #fff1f2; font-size: 11px; }
.cost-bar-active-spent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  text-shadow: 0 0 10px var(--bg), 0 1px 2px var(--bg);
  pointer-events: none;
  z-index: 3;
}
.cost-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 34 1 0;
  min-width: 22px;
  width: auto;
  overflow: hidden;
}
.cost-token--500 { flex: 40 1 0; }
.cost-token--1000 { flex: 46 1 0; }
.cost-token--5000 { flex: 52 1 0; }
.cost-token-cap {
  max-width: 100%;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  display: none;
}
.cost-token-track {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cost-token--500 .cost-token-track {
  border-color: color-mix(in oklab, #d4a017 50%, var(--border));
  box-shadow: 0 4px 16px color-mix(in oklch, #d4a017 18%, transparent);
}
.cost-token--1000 .cost-token-track {
  border-color: color-mix(in oklab, #9ca3af 55%, var(--border));
  box-shadow: 0 4px 18px color-mix(in oklch, #cbd5e1 22%, transparent);
}
.cost-token--5000 .cost-token-track {
  border-color: color-mix(in oklab, #7c3aed 50%, var(--border));
  box-shadow: 0 4px 20px color-mix(in oklch, #7c3aed 20%, transparent);
}
.cost-token-fill {
  position: absolute;
  inset: 0;
  border-radius: 7px;
}
.cost-token--100 .cost-token-fill {
  background: linear-gradient(to top, color-mix(in oklab, var(--success), black 10%), var(--success));
}
.cost-token--500 .cost-token-fill {
  background: linear-gradient(to top, #9a7209, #e6c04a 55%, #f7e08a);
}
.cost-token--1000 .cost-token-fill {
  background: linear-gradient(to top, #6b7280, #d1d5db 45%, #f9fafb);
}
.cost-token--5000 .cost-token-fill {
  background: linear-gradient(to top, #4c1d95, #7c3aed 45%, #c4b5fd);
}
.cost-token-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: lowercase;
  pointer-events: none;
  z-index: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1;
  padding: 4px 0;
}
.cost-token--100 .cost-token-label { color: #fff; }
.cost-token--500 .cost-token-label { color: #5c4206; font-size: 11px; }
.cost-token--1000 .cost-token-label { color: #374151; font-size: 11px; }
.cost-token--5000 .cost-token-label { color: #ede9fe; font-size: 11px; }
.cost-token.is-entering {
  animation: token-enter 0.45s ease-out both;
}
.cost-token.is-born {
  animation: token-born 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.cost-token.is-consolidating {
  animation: token-merge-out 0.42s ease-in forwards;
}
@keyframes token-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes token-born {
  0% { opacity: 0; transform: scale(0.5); filter: brightness(1.4); }
  60% { transform: scale(1.08); filter: brightness(1.15); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes token-merge-out {
  to { opacity: 0; transform: scale(0.35) translateY(12px); filter: blur(1px); }
}
.cost-bar-ghost {
  border-radius: 10px !important;
  overflow: hidden;
}
.cost-bar-ghost .cost-bar-active-spent,
.cost-bar-ghost .cost-bar-active-cap {
  display: none;
}

@media (max-width: 640px) {
  .cost-bars-wrap { margin-bottom: 10px; }
  .length-bars-track { height: 96px; }
  .length-bars-overtime-track { height: 96px; }
  .length-bars-label { font-size: 18px; }
  .length-bars-label--overtime { font-size: 14px; }
  .cost-bars { max-width: 100%; gap: 8px; }
  .cost-bar-active { flex-basis: 88px; min-width: 72px; }
  .cost-bar-active-track { height: 96px; }
  .cost-token { flex: 28 1 0; min-width: 18px; }
  .cost-token--500 { flex: 36 1 0; }
  .cost-token--1000 { flex: 38 1 0; }
  .cost-token--5000 { flex: 42 1 0; }
  .cost-token-track { height: 96px; }
}