:root {
  --component-drawer-width: 400px;
  --component-drawer-bg: var(--color-surface-container);
  --component-drawer-border: var(--color-border-default);
  --component-drawer-mask: var(--color-overlay-mask);
  --component-drawer-padding: var(--spacing-24);
  --component-drawer-gap: var(--spacing-16);
  --component-drawer-title-size: var(--font-size-4);
  --component-drawer-title-line-height: var(--font-line-height-4);
  --component-drawer-title-family: var(--font-family-ui-medium);
  --component-drawer-title-text: var(--color-content-primary);
  --component-drawer-body-size: var(--font-size-5);
  --component-drawer-body-line-height: var(--font-line-height-5);
  --component-drawer-body-text: var(--color-content-secondary);
  --component-drawer-focus-ring: var(--color-interaction-focus-ring);
}

.tte-drawer[hidden] { display: none; }
.tte-drawer { position: fixed; inset: 0; z-index: 40; }
.tte-drawer-mask { position: absolute; inset: 0; border: 0; background: var(--component-drawer-mask); }
.tte-drawer-panel { position: absolute; top: 0; right: 0; display: flex; width: min(var(--component-drawer-width), 100%); height: 100%; flex-direction: column; gap: var(--component-drawer-gap); padding: var(--component-drawer-padding); border-left: 1px solid var(--component-drawer-border); background: var(--component-drawer-bg); }
.tte-drawer-panel[data-side="left"] { right: auto; left: 0; border-right: 1px solid var(--component-drawer-border); border-left: 0; }
.tte-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tte-drawer-title { margin: 0; color: var(--component-drawer-title-text); font-size: var(--component-drawer-title-size); font-family: var(--component-drawer-title-family); line-height: var(--component-drawer-title-line-height); }
.tte-drawer-copy { margin: 0; color: var(--component-drawer-body-text); font-size: var(--component-drawer-body-size); line-height: var(--component-drawer-body-line-height); }
.tte-drawer-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.tte-drawer-panel.is-tree {
  width: min(600px, 100%);
  gap: 20px;
  padding: 0;
  border-left: 0;
}
.tte-drawer-tree-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--color-border-disabled);
}
.tte-drawer-tree-title {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #3d3d3d;
  font-size: var(--font-size-3);
  font-family: var(--font-family-ui-medium);
  line-height: var(--font-line-height-3);
}
.tte-drawer-tree-mark { width: 24px; height: 24px; flex: none; }
.tte-drawer-tree-close {
  display: grid;
  width: 24px;
  height: 24px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: #28282a;
  background: transparent;
  cursor: pointer;
}
.tte-drawer-tree-close .tte-lucide { width: 24px; height: 24px; }
.tte-drawer-tree-close:focus-visible { outline: 3px solid var(--component-drawer-focus-ring); outline-offset: 1px; }
.tte-drawer-tree-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  padding: 0 24px 24px;
  overflow: auto;
}
.tte-drawer-tree-row { display: flex; align-items: flex-start; gap: 8px; }
.tte-drawer-tree-label {
  width: 100px;
  flex: none;
  margin: 0;
  color: rgba(61, 61, 61, 0.5);
  font-size: var(--font-size-5);
  font-family: var(--font-family-ui-regular);
  line-height: var(--font-line-height-5);
}
.tte-drawer-tree-value {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: #282829;
  font-size: var(--font-size-5);
  font-family: var(--font-family-ui-regular);
  line-height: var(--font-line-height-5);
}
.tte-drawer-tree-people { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tte-drawer-tree-person { display: flex; align-items: center; gap: 8px; color: #282829; font-size: var(--font-size-5); line-height: var(--font-line-height-5); }
.tte-drawer-tree-avatar { width: 24px; height: 24px; border-width: 0; box-shadow: none; font-size: 11px; }
.tte-drawer-tree-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tte-drawer-tree-chip {
  display: inline-flex;
  height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  background: var(--color-fill-normal);
  color: #282829;
  font-size: var(--font-size-7);
  line-height: var(--font-line-height-7);
}
.tte-drawer-tree-quota { display: flex; min-width: 0; flex: 1; align-items: center; gap: 16px; }
.tte-drawer-tree-quota-label { flex: none; color: #282829; font-size: var(--font-size-7); line-height: var(--font-line-height-7); }
.tte-drawer-tree-meter { height: 8px; min-width: 80px; flex: 1; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-brand-soft); }
.tte-drawer-tree-meter span { display: block; width: 80%; height: 100%; background: var(--color-brand-normal); }
.tte-drawer-tree-quota-num { flex: none; color: #a1a1a1; font-family: var(--font-family-numeric-regular); font-size: var(--font-size-5); line-height: var(--font-line-height-5); }