/* public/src/core/inbox.css */
#notifications {
  position: relative;
}
#notifications[data-unread]:not([data-unread=""])::after {
  content: attr(data-unread);
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: var(--bg);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}
.inbox-panel {
  position: fixed;
  right: 12px;
  bottom: 40px;
  z-index: 60;
  width: min(360px, calc(100vw - 24px));
  max-height: min(480px, 70dvh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 40px #0006;
  padding: 6px;
}
.inbox-panel header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px 8px;
  font-size: 13px;
}
.inbox-panel header small {
  color: var(--muted);
  font-size: 11px;
}
.inbox-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inbox-panel li button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.inbox-panel li button:hover,
.inbox-panel li button:focus-visible {
  background: var(--hover);
}
.inbox-panel .inbox-unread {
  color: var(--text);
}
.inbox-panel .inbox-unread span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
}
.inbox-panel time {
  font-size: 11px;
  color: var(--muted);
}
.inbox-empty {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  padding: 8px 12px 14px;
  margin: 0;
}

/* node_modules/@xterm/xterm/css/xterm.css */
.xterm {
  cursor: text;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.xterm.focus,
.xterm:focus {
  outline: none;
}
.xterm .xterm-helpers {
  position: absolute;
  top: 0;
  z-index: 5;
}
.xterm .xterm-helper-textarea {
  padding: 0;
  border: 0;
  margin: 0;
  position: absolute;
  opacity: 0;
  left: -9999em;
  top: 0;
  width: 0;
  height: 0;
  z-index: -5;
  white-space: nowrap;
  overflow: hidden;
  resize: none;
}
.xterm .composition-view {
  background: #000;
  color: #FFF;
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}
.xterm .composition-view.active {
  display: block;
}
.xterm .xterm-viewport {
  background-color: #000;
  overflow-y: scroll;
  cursor: default;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}
.xterm .xterm-screen {
  position: relative;
}
.xterm .xterm-screen canvas {
  position: absolute;
  left: 0;
  top: 0;
}
.xterm-char-measure-element {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -9999em;
  line-height: normal;
}
.xterm.enable-mouse-events {
  cursor: default;
}
.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
  cursor: pointer;
}
.xterm.column-select.focus {
  cursor: crosshair;
}
.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  color: transparent;
  pointer-events: none;
}
.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}
.xterm .xterm-accessibility-tree {
  font-family: monospace;
  user-select: text;
  white-space: pre;
}
.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: fit-content;
}
.xterm .live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.xterm-dim {
  opacity: 1 !important;
}
.xterm-underline-1 {
  text-decoration: underline;
}
.xterm-underline-2 {
  text-decoration: double underline;
}
.xterm-underline-3 {
  text-decoration: wavy underline;
}
.xterm-underline-4 {
  text-decoration: dotted underline;
}
.xterm-underline-5 {
  text-decoration: dashed underline;
}
.xterm-overline {
  text-decoration: overline;
}
.xterm-overline.xterm-underline-1 {
  text-decoration: overline underline;
}
.xterm-overline.xterm-underline-2 {
  text-decoration: overline double underline;
}
.xterm-overline.xterm-underline-3 {
  text-decoration: overline wavy underline;
}
.xterm-overline.xterm-underline-4 {
  text-decoration: overline dotted underline;
}
.xterm-overline.xterm-underline-5 {
  text-decoration: overline dashed underline;
}
.xterm-strikethrough {
  text-decoration: line-through;
}
.xterm-screen .xterm-decoration-container .xterm-decoration {
  z-index: 6;
  position: absolute;
}
.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
  z-index: 7;
}
.xterm-decoration-overview-ruler {
  z-index: 8;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}
.xterm-decoration-top {
  z-index: 2;
  position: relative;
}
.xterm .xterm-scrollable-element > .scrollbar {
  cursor: default;
}
.xterm .xterm-scrollable-element > .scrollbar > .scra {
  cursor: pointer;
  font-size: 11px !important;
}
.xterm .xterm-scrollable-element > .visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0);
  transition: opacity 100ms linear;
  z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
  opacity: 0;
  pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
  transition: opacity 800ms linear;
}
.xterm .xterm-scrollable-element > .shadow {
  position: absolute;
  display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
  display: block;
  top: 0;
  left: 3px;
  height: 3px;
  width: 100%;
  box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
  display: block;
  top: 3px;
  left: 0;
  height: 100%;
  width: 3px;
  box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
  display: block;
  top: 0;
  left: 0;
  height: 3px;
  width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
  box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}

/* public/src/features/ide/ide.css */
.ide-elevate {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 24px;
}
.ide-elevate-card {
  width: 100%;
  max-width: 520px;
  min-width: 0;
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.ide-elevate-card > svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.ide-elevate-card h1 {
  font-size: 24px;
  font-weight: 500;
  margin: 16px 0 12px;
}
.ide-elevate-card > p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 24px;
  overflow-wrap: anywhere;
}
.ide-elevate-card form {
  display: grid;
  gap: 10px;
}
.ide-elevate-card label {
  font-size: 13px;
}
.ide-elevate-card input {
  width: 100%;
}
.ide-elevate-card .form-error {
  margin: 0;
}
.ide-elevate-card .primary {
  width: 100%;
  margin-top: 4px;
}
.ide-pane [data-ide-remaining] {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .ide-elevate {
    padding: 16px;
  }
  .ide-elevate-card {
    padding: 24px;
  }
  .ide-elevate-card input {
    font-size: 16px;
  }
}

/* public/src/features/cloud/docs.css */
.docs-layout {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 28px;
}
.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.docs-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 7px;
  text-align: left;
  white-space: nowrap;
}
.docs-nav button[aria-current=page] {
  background: var(--selected);
  color: var(--text);
}
.docs-nav svg {
  width: 17px;
  height: 17px;
}
.docs-main {
  min-width: 0;
}
.docs-main > .search-box {
  margin-bottom: 24px;
  max-width: 460px;
  width: 100%;
}
.doc-row,
.doc-list-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 110px 90px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 12px;
  color: var(--muted);
}
.doc-row:hover {
  background: var(--hover);
}
.doc-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.doc-row-title b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.doc-row-title svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.docs-empty {
  padding: 40px 8px;
  color: var(--muted);
}
.docs-empty p {
  color: var(--text);
  margin-bottom: 8px;
}
.legacy-heading {
  font-size: 14px;
  margin: 28px 8px 8px;
}
.doc-detail {
  max-width: 920px;
  margin: auto;
}
.doc-detail header {
  margin: 28px 0;
}
.doc-detail header h1 {
  font-size: 26px;
  overflow-wrap: anywhere;
}
.doc-detail header p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 12px;
}
.doc-reading {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
  min-width: 0;
}
.doc-reading pre {
  max-width: 100%;
  overflow: auto;
}
.doc-reading table {
  display: block;
  max-width: 100%;
  overflow: auto;
}
@media (max-width: 1000px) {
  .doc-row,
  .doc-list-head {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 100px;
  }
  .doc-row > span:last-child,
  .doc-list-head > span:last-child {
    display: none;
  }
  .docs-layout {
    gap: 20px;
    grid-template-columns: 130px minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .docs-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .docs-nav button {
    padding: 8px;
    font-size: 12px;
    gap: 6px;
  }
  .doc-row,
  .doc-list-head {
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 8px;
  }
  .doc-row > span:nth-child(3),
  .doc-list-head > span:nth-child(3) {
    display: none;
  }
  .docs-main > .search-box {
    min-width: 0;
  }
  .doc-detail .page-tools {
    flex-wrap: wrap;
  }
}

/* public/src/modules/project-feed/feed.css */
.feed-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  margin-bottom: 20px;
}
.feed-compose textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
}
.feed-compose textarea:focus {
  outline: none;
}
.feed-compose:focus-within {
  border-color: var(--off);
}
.feed-compose-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.feed-people {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.feed-people .text-button {
  font-size: 12px;
  color: var(--muted);
}
.feed-compose .form-error:empty {
  display: none;
}
.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.feed-post {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.feed-post > div {
  min-width: 0;
  flex: 1;
}
.feed-post header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.feed-post time,
.feed-event time {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.feed-post p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.feed-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--selected);
  border: 1px solid var(--border);
  font-size: 12px;
}
.feed-mention {
  font-weight: 600;
  color: var(--accent);
}
.feed-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0 9px 10px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.feed-event > span:nth-child(2),
.feed-event > a {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.feed-event > a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--off);
  text-underline-offset: 3px;
}
.feed-event > a:hover {
  color: var(--text);
}
.feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--off);
  flex-shrink: 0;
}
.feed-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 24px 0;
}
.feed-more {
  margin: 14px auto 0;
  display: block;
}
@media (max-width: 760px) {
  .feed-post time {
    display: none;
  }
}

/* public/src/modules/project-plan/plan.css */
.plan-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.plan-column {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px;
  min-height: 220px;
  transition: border-color .15s;
}
.plan-column.plan-over {
  border-color: var(--accent);
}
.plan-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.plan-column h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.plan-count {
  font-size: 11px;
  color: var(--muted);
}
.plan-new input {
  width: 100%;
  font-size: 13px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.plan-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
}
.plan-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
}
.plan-card[draggable=true] {
  cursor: grab;
}
.plan-card:hover,
.plan-card:focus-visible {
  border-color: var(--off);
  outline: none;
}
.plan-card b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.plan-card p {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.plan-dragging {
  opacity: .4;
}
.plan-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  min-height: 20px;
}
.plan-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.plan-who small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-card-meta time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.plan-card-meta time svg {
  width: 12px;
  height: 12px;
}
.plan-late .plan-card-meta time {
  color: var(--danger);
}
.plan-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 10px 2px;
}
.plan-hint {
  display: flex;
  justify-content: flex-end;
  margin: 10px 2px 0;
}
.form-dialog.plan-dialog {
  width: min(520px, calc(100vw - 28px));
}
.plan-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.plan-dialog h2 {
  font-size: 19px;
  margin: 0;
}
.plan-dialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  font-size: 13px;
}
.plan-dialog footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.plan-delete {
  color: var(--danger);
}
.plan-dialog .form-error:empty {
  display: none;
}
@media (max-width: 760px) {
  .plan-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-column {
    min-height: 0;
  }
}
.plan-avatar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--selected);
  border: 1px solid var(--border);
  font-size: 10px;
  font-style: normal;
  color: var(--text);
}

/* public/src/modules/project-schedule/schedule.css */
.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  text-align: left;
}
.schedule-list li:first-child .schedule-row {
  border-top: 0;
}
.schedule-row > span {
  flex: 1;
  min-width: 0;
}
.schedule-row b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-row small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.schedule-status {
  font-style: normal;
  display: inline-flex;
}
.schedule-status svg {
  width: 14px;
  height: 14px;
}
.schedule-ok {
  color: var(--muted);
}
.schedule-error,
.schedule-missed {
  color: var(--danger);
}
.form-dialog.schedule-dialog {
  width: min(560px, calc(100vw - 28px));
}
.schedule-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.schedule-dialog h2 {
  font-size: 19px;
  margin: 0;
}
.form-dialog.schedule-dialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
}
.schedule-dialog .form-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.schedule-action {
  border: 0;
  padding: 0;
  margin: 12px 0;
}
.schedule-action legend {
  font-size: 13px;
  margin-bottom: 6px;
  padding: 0;
}
.form-dialog.schedule-dialog .schedule-action label {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
  line-height: 1.6;
}
.form-dialog.schedule-dialog .schedule-action label input {
  width: auto;
  flex: none;
  margin: 4px 0 0;
}
.schedule-action select {
  width: 100%;
  margin-top: 4px;
}
.schedule-dialog footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.schedule-dialog footer > div {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.schedule-delete {
  color: var(--danger);
}
.schedule-dialog .form-error:empty {
  display: none;
}
.schedule-dialog .muted {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}
@media (max-width: 760px) {
  .schedule-dialog .form-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* public/src/modules/project-expert/expert.css */
.expert-select {
  width: 100%;
}
.expert-chosen {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
}
.expert-chosen svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.expert-chosen span {
  min-width: 0;
}
.expert-chosen b {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.expert-chosen small {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}

/* public/src/modules/company-experts/experts.css */
.company-experts-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 16px;
}
.company-experts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.company-expert-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  text-align: left;
  min-width: 0;
}
.company-expert-card:hover {
  background: var(--hover);
}
.company-expert-icon svg {
  width: 20px;
  height: 20px;
}
.company-expert-card b {
  font-size: 14px;
  font-weight: 500;
}
.company-expert-card small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.company-expert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.form-dialog.company-expert-dialog {
  width: min(640px, calc(100vw - 28px));
  max-height: 90dvh;
  overflow: auto;
}
.company-expert-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.company-expert-dialog h2 {
  font-size: 19px;
  margin: 0;
}
.form-dialog.company-expert-dialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
}
.form-dialog.company-expert-dialog textarea {
  resize: vertical;
  width: 100%;
}
.company-expert-dialog .form-columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}
.company-expert-dialog footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.company-expert-delete {
  color: var(--danger);
}
.company-expert-dialog .form-error:empty {
  display: none;
}
@media (max-width: 760px) {
  .company-expert-dialog .form-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* public/src/modules/tickets/tickets.css */
.tickets-stats {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}
.tickets-stats b {
  color: var(--text);
  font-weight: 600;
}
.tickets-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.tickets-spacer {
  flex: 1;
}
.tickets-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tickets-tabs button {
  padding: 6px 12px;
  font-size: 13px;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.tickets-tabs button[aria-selected=true] {
  background: var(--selected);
  color: var(--text);
  font-weight: 600;
}
.tickets-tools select,
.tickets-tools input[type=search] {
  font-size: 13px;
  padding: 6px 8px;
}
.tickets-tools input[type=search] {
  width: 200px;
}
.tickets-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.tickets-list li + li {
  border-top: 1px solid var(--border);
}
.ticket-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  border: 0;
}
.ticket-row:hover {
  background: var(--hover);
}
.ticket-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.ticket-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}
.ticket-row[data-severity=high] .ticket-dot {
  background: var(--danger);
}
.ticket-row[data-severity=medium] .ticket-dot {
  background: var(--warning,#d4a017);
}
.ticket-row[data-severity=low] .ticket-dot {
  background: var(--muted);
}
.ticket-main {
  flex: 1;
  min-width: 0;
}
.ticket-main b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-main small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ticket-human {
  color: var(--danger);
  border-color: var(--danger);
}
.ticket-status {
  font-size: 12px;
  color: var(--muted);
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}
.form-dialog.ticket-dialog {
  width: min(640px, calc(100vw - 28px));
  max-height: 90dvh;
  overflow: auto;
}
.ticket-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ticket-dialog h2 {
  font-size: 18px;
  margin: 0;
  overflow-wrap: anywhere;
}
.form-dialog.ticket-dialog label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  font-size: 13px;
}
.form-dialog.ticket-dialog .ticket-check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.form-dialog.ticket-dialog .ticket-check input {
  width: auto;
  margin: 0;
}
.ticket-dialog .form-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.ticket-dialog textarea {
  width: 100%;
  resize: vertical;
}
.ticket-body {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--border);
  background: var(--panel);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.ticket-ai {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
  line-height: 1.6;
}
.ticket-ai svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ticket-copy {
  align-self: flex-end;
  margin-top: -22px;
}
.ticket-dialog footer {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}
.ticket-dialog .form-error:empty {
  display: none;
}
.ticket-dialog .muted {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0;
}
@media (max-width: 760px) {
  .tickets-tools input[type=search] {
    width: 100%;
  }
  .ticket-status {
    display: none;
  }
}

/* public/src/features/ai/project-work.css */
.hub-work {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-size: 12px;
  text-align: left;
}
.hub-work-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.hub-work-toggle > label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  white-space: nowrap;
}
.hub-work-toggle input {
  appearance: none;
  position: relative;
  width: 28px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--off);
  cursor: pointer;
  flex-shrink: 0;
}
.hub-work-toggle input:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
}
.hub-work-toggle input:checked {
  background: var(--accent);
}
.hub-work-toggle input:checked:before {
  left: 15px;
}
.hub-work-toggle input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hub-work-toggle input:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.hub-work-toggle .text-button {
  font-size: 12px;
  padding: 0;
  text-align: left;
}
.hub-work-toggle small {
  color: var(--danger);
}
.hub-work-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.hub-work-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hub-work-modes button {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  min-height: 34px;
}
.hub-work-modes [aria-checked=true] {
  background: var(--selected);
  border-color: var(--accent);
  color: var(--text);
}
.hub-work-modes button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.hub-work-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.hub-work-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 140px;
  color: var(--muted);
  font-size: 11px;
}
.hub-work-fields select {
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  text-overflow: ellipsis;
  min-width: 0;
  padding: 6px 8px;
}
.hub-work-note,
.hub-folder-unavailable {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.hub-folder-unavailable {
  display: block;
}
.hub-single-folder {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0;
}
.ai-composer.hub-enabled .composer-bottom > :not(.send-button),
.ai-composer.hub-enabled > .ai-scope-slot,
.ai-composer.hub-enabled > [data-ai-provider-note] {
  display: none;
}
.ai-composer.hub-enabled .send-button {
  margin-left: auto;
}
@media (max-width: 760px) {
  .hub-work-fields label {
    flex-basis: 100%;
  }
  .hub-work-modes {
    gap: 4px;
  }
  .hub-work-toggle {
    align-items: flex-start;
  }
}

/* public/src/features/repos/repos.css */
.form-dialog.repo-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: 90dvh;
}
.repo-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.repo-dialog header h2 {
  margin: 0;
}
.repo-dialog fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.repo-dialog fieldset[hidden] {
  display: none;
}
.repo-dialog fieldset > p {
  font-size: 12px;
  line-height: 1.7;
  margin: 4px 0 0;
}
.repo-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 16px 0 4px;
}
.form-dialog .repo-ways label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.form-dialog .repo-ways label:has(input:checked) {
  border-color: var(--accent);
  background: var(--hover);
}
.form-dialog .repo-ways input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}
.repo-ways svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted);
}
.repo-entry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.repo-entry[hidden] {
  display: none;
}
.repo-entry svg {
  width: 14px;
  height: 14px;
}

/* public/src/features/ai/projects.css */
.project-page {
  overflow: auto !important;
  padding: 40px !important;
}
.project-page > section {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.project-heading {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 12px 0 32px;
  border-bottom: 1px solid var(--border);
}
.project-heading-icon,
.project-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  flex-shrink: 0;
}
.project-heading-icon svg {
  width: 28px;
  height: 28px;
}
.project-heading-text {
  min-width: 0;
  flex: 1;
}
.project-heading h1 {
  font-size: 27px;
  overflow-wrap: anywhere;
}
.project-heading p {
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0 16px;
  overflow-wrap: anywhere;
}
.project-people {
  display: flex;
  align-items: center;
  gap: 5px;
}
.project-people > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: var(--selected);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 11px;
}
.project-people small {
  color: var(--muted);
  font-size: 11px;
  margin-left: 5px;
}
.project-header-actions {
  display: flex;
  gap: 8px;
}
.project-sections {
  display: grid;
  gap: 28px;
  padding: 28px 0;
}
.project-sections > section {
  min-width: 0;
}
.project-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.project-section-heading h2 {
  font-size: 16px;
  font-weight: 600;
}
.project-section-heading h2 small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 10px;
}
.project-section-heading > div {
  display: flex;
  gap: 10px;
}
.project-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 18px 0;
}
.project-chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
}
.project-chat-row > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-chat-row > small {
  color: var(--muted);
  font-size: 11px;
}
.project-chat-row > svg {
  width: 16px;
  height: 16px;
}
.project-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.project-skills > button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  text-align: left;
}
.project-skills > button > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.project-skills > button > svg:last-child {
  width: 14px;
  margin-left: auto;
  color: var(--muted);
}
.project-skills span {
  min-width: 0;
}
.project-skills b {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.project-skills small {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 6px;
}
.project-dialog {
  width: min(580px, calc(100vw - 28px));
  max-height: 90dvh;
  overflow: auto;
}
.project-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.project-dialog h2 {
  font-size: 21px;
}
.project-dialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  font-size: 13px;
}
.project-dialog textarea {
  resize: vertical;
  width: 100%;
  max-width: 100%;
}
.project-dialog .muted {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.project-dialog footer {
  margin-top: 20px;
}
.project-create-dialog {
  width: min(900px, calc(100vw - 28px));
}
.project-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.project-template-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project-template-list > p {
  margin-bottom: 8px;
}
.project-template-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
}
.project-template-list button[aria-pressed=true] {
  border-color: var(--off);
  background: var(--selected);
}
.project-template-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.project-template-list b {
  display: block;
  font-size: 13px;
  font-weight: 500;
}
.project-template-list small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
  line-height: 1.5;
}
.project-template-preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  min-width: 0;
}
.project-template-preview h3 {
  font-size: 18px;
  margin: 16px 0 10px;
}
.project-template-preview h4 {
  font-size: 12px;
  margin: 20px 0 8px;
}
.project-template-preview p,
.project-template-preview li {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.project-preview-instructions {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-template-preview ul {
  padding-left: 16px;
}
.project-skill-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.project-create-dialog footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
  align-items: end;
}
.project-create-dialog footer label {
  grid-column: 1;
  margin: 0;
}
.project-create-dialog footer .primary {
  grid-column: 2;
  grid-row: 1;
}
.project-create-dialog footer [role=alert] {
  grid-column: 1/-1;
}
.project-member-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.project-member-row > span:first-child {
  flex: 1;
}
.project-member-row small {
  color: var(--muted);
}
@media (max-width: 760px) {
  .project-page {
    padding: 24px 18px !important;
  }
  .project-heading {
    gap: 12px;
    flex-wrap: wrap;
  }
  .project-heading h1 {
    font-size: 23px;
  }
  .project-heading-icon {
    width: 44px;
    height: 44px;
  }
  .project-header-actions {
    margin-left: auto;
  }
  .project-heading-text {
    flex-basis: calc(100% - 60px);
  }
  .project-skills {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-section-heading h2 small {
    display: block;
    margin: 6px 0 0;
  }
  .project-create-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .project-template-list {
    max-height: 240px;
    overflow: auto;
  }
  .project-template-preview {
    padding: 16px;
  }
  .project-create-dialog footer {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-create-dialog footer .primary {
    grid-column: 1;
    grid-row: auto;
  }
  .project-dialog {
    padding: 18px;
  }
  .project-member-row {
    flex-wrap: wrap;
  }
}
.form-dialog.project-dialog {
  width: min(580px, calc(100vw - 28px));
  max-height: 90dvh;
}
.form-dialog.project-create-dialog {
  width: min(900px, calc(100vw - 28px));
}
.form-dialog.project-dialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.form-dialog.project-dialog label input,
.form-dialog.project-dialog label select,
.form-dialog.project-dialog label textarea {
  margin: 0;
}
.form-dialog.project-create-dialog footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
  align-items: end;
}
.form-dialog.project-create-dialog footer label {
  margin: 0;
}
.project-heading h1 {
  margin: 0;
}
.project-section-heading h2 {
  margin: 0;
}
.project-section-heading {
  margin-bottom: 8px;
}
.project-heading {
  padding-bottom: 24px;
}
.project-sections {
  padding-top: 24px;
  gap: 24px;
}
@media (max-width: 760px) {
  .form-dialog.project-create-dialog footer {
    grid-template-columns: minmax(0, 1fr);
  }
}
.form-dialog.project-create-dialog {
  overflow: hidden;
}
.form-dialog.project-create-dialog > form {
  display: flex;
  flex-direction: column;
  max-height: calc(90dvh - 50px);
}
.form-dialog.project-create-dialog header {
  flex-shrink: 0;
  margin-bottom: 16px;
}
.project-dialog header h2 {
  margin: 0;
}
.form-dialog.project-create-dialog .project-create-layout {
  min-height: 0;
  overflow: auto;
}
.project-template-list > p {
  margin: 0 0 8px;
}
.form-dialog.project-create-dialog footer {
  flex-shrink: 0;
  margin-top: 16px;
}
.form-dialog.project-create-dialog footer .form-error:empty {
  display: none;
}
.project-folder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.project-folder-row > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.project-folder-row b {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-folder-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.project-folder-icon svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.project-folder-browser {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.project-folder-browser:empty {
  display: none;
}
.project-folder-browser button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  text-align: left;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.project-folder-browser button:hover {
  background: var(--hover);
}
.project-folder-browser svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted);
}
.project-folder-browser p {
  margin: 6px 8px;
  font-size: 12px;
}
.form-dialog.project-dialog label small {
  font-size: 11px;
}
.project-folder-browser .project-folder-hidden {
  color: var(--muted);
  font-size: 12px;
}
.hub-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.hub-activity-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 240px;
  text-align: left;
  min-width: 0;
}
.hub-activity-title > svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--muted);
}
.hub-activity-title > span {
  min-width: 0;
}
.hub-activity-title b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.hub-activity-title small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.hub-activity-meta {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.hub-activity-meta small {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.hub-activity-meta a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hub-activity-meta svg {
  width: 13px;
  height: 13px;
}
.hub-activity-status {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.hub-activity-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hub-busy {
  color: var(--accent);
}
.hub-ok {
  color: var(--ux-good,var(--accent));
}
.hub-ask {
  color: var(--ux-warn,var(--accent));
}
.hub-bad {
  color: var(--danger);
}
@media (max-width: 760px) {
  .hub-activity-meta {
    padding-left: 29px;
  }
  .hub-activity-row {
    gap: 8px;
  }
}
.project-page > section {
  max-width: 1240px;
}
.project-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
  padding-top: 8px;
}
.project-main {
  min-width: 0;
}
.project-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}
.project-tabs [role=tab] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.project-tabs [role=tab] svg {
  width: 15px;
  height: 15px;
}
.project-tabs [role=tab][aria-selected=true] {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}
.project-tabs [role=tab]:hover {
  color: var(--text);
}
.project-panel > section + section {
  margin-top: 28px;
}
.project-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 0;
}
.project-config > h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 12px 0 4px;
}
.project-config-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--panel);
}
.project-config-card h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.project-config-card .project-section-heading {
  margin-bottom: 6px;
}
.project-config-text {
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
  overflow-wrap: anywhere;
}
.project-config .project-skills {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.project-config .project-skills > button {
  padding: 10px 12px;
}
@media (max-width: 1100px) {
  .project-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .project-config {
    position: static;
  }
}
.project-config .project-empty {
  padding: 4px 0 2px;
}
@media (max-width: 760px) {
  .project-tabs {
    gap: 0;
  }
  .project-tabs [role=tab] {
    padding: 10px 9px;
  }
  .project-tabs [role=tab] svg {
    display: none;
  }
}

/* public/src/features/ai/engine-chat.css */
.engine-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 0 0 10px;
  margin-bottom: 12px;
  min-width: 0;
}
.engine-folder b {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.engine-folder svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.engine-folder svg:last-child {
  margin-left: auto;
}
.engine-title {
  font-size: 16px !important;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.engine-chat .ai-conversation-header {
  align-items: flex-start;
}
.engine-chat .ai-conversation-header > button {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 10px;
}
.engine-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
}
.engine-tag {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--text);
}
.engine-location {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.engine-location svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.engine-location code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.engine-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.engine-status i {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.engine-busy {
  color: var(--accent);
}
.engine-ask {
  color: var(--ux-warn);
}
.engine-ok {
  color: var(--ux-good);
}
.engine-bad {
  color: var(--danger);
}
.engine-step {
  max-width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
}
.engine-step > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  min-width: 0;
}
.engine-step > summary:before {
  content: "\203a";
  font-size: 16px;
}
.engine-step[open] > summary:before {
  transform: rotate(90deg);
}
.engine-step summary span {
  white-space: nowrap;
}
.engine-step summary code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.engine-step pre {
  max-width: 100%;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 10px;
  background: var(--panel);
}
.engine-finish {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin: 12px 0 24px;
}
.engine-finish svg {
  width: 14px;
  height: 14px;
}
.engine-composer-label {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  font-size: 12px;
  color: var(--muted);
}
.engine-composer-label svg {
  width: 14px;
  height: 14px;
}
.engine-error {
  color: var(--danger);
  font-size: 12px;
  overflow-wrap: anywhere;
  flex-shrink: 0;
  margin: 0;
}
.engine-error:empty {
  display: none;
}
.engine-chat .ai-approval h3 {
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.engine-chat .ai-approval h3 svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
}
.engine-chat .ai-approval button {
  font-size: 12px;
}
.engine-chat .ai-messages {
  padding-right: 4px;
}

/* public/src/features/ai/ai.css */
.page.ai-workspace {
  position: absolute;
  inset: 0;
  max-width: none;
  min-height: 0;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.ai-workspace .full-chat {
  width: min(860px, 100%);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.ai-workspace .ai-welcome {
  width: min(780px, 100%);
  margin: auto;
  flex-shrink: 0;
  padding: 48px 0;
  text-align: center;
}
.ai-welcome .ai-welcome-mark {
  color: var(--accent);
  margin-bottom: 16px;
}
.ai-welcome-mark svg {
  width: 36px;
  height: 36px;
}
.ai-eyebrow {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 8px;
}
.ai-workspace .ai-welcome h1 {
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.ai-welcome > p:not(.ai-eyebrow),
.ai-experts-intro > p:last-child {
  color: var(--muted);
  margin: 0 0 28px;
}
.ai-expert-pills,
.ai-starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}
.ai-expert-pills button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.ai-expert-pills button:hover,
.ai-starters button:hover {
  background: var(--hover);
}
.ai-expert-pills svg {
  width: 15px;
  height: 15px;
}
.ai-starters {
  margin: 16px 0 0;
  gap: 8px 16px;
}
.ai-starters button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
}
.ai-starters svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.ai-welcome-composer .ai-composer,
.ai-workspace .ai-composer,
.ai-panel .ai-composer {
  border: 1px solid var(--off);
  background: var(--input);
  border-radius: 20px;
  text-align: left;
  padding: 16px;
}
.ai-welcome-composer .ai-composer:focus-within,
.ai-workspace .ai-composer:focus-within,
.ai-panel .ai-composer:focus-within {
  border-color: var(--accent);
}
.ai-welcome-composer textarea,
.ai-workspace .ai-composer textarea,
.ai-panel .ai-composer textarea {
  width: 100%;
  min-height: 76px;
  max-height: 200px;
  border: 0;
  background: transparent;
  resize: vertical;
  padding: 0;
  line-height: 1.8;
  box-shadow: none;
}
.ai-composer .composer-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}
.ai-composer .ai-composer-note {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
}
.ai-composer-note svg {
  width: 14px;
  height: 14px;
}
.ai-composer-note small {
  font-size: 11px;
}
.ai-composer-model {
  min-width: 0;
  max-width: 62%;
}
.ai-composer .ai-composer-model select {
  width: 100%;
  max-width: 240px;
  border: 0;
  background: transparent;
  font-size: 12px;
  padding: 4px;
  color: var(--text);
}
.ai-composer .send-button {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 50%;
  padding: 6px;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-composer .send-button:disabled {
  opacity: .4;
}
.ai-composer [data-ai-stop] {
  font-size: 12px;
  padding: 4px 10px;
  min-height: 32px;
}
.ai-composer [hidden] {
  display: none !important;
}
.ai-conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
}
.ai-conversation-header > div {
  min-width: 0;
}
.ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  max-width: 100%;
  padding: 0;
  overflow-wrap: anywhere;
}
.ai-title svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--muted);
}
.ai-conversation-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.ai-space-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  max-width: 38%;
  color: var(--muted);
}
.ai-space-picker svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ai-space-picker select {
  max-width: 100%;
  font-size: 12px;
  padding: 6px;
  background: var(--bg);
  border-color: transparent;
}
.ai-workspace .ai-messages {
  padding: 28px 0 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ai-workspace .ai-message,
.ai-panel .ai-message {
  margin: 0 0 28px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.ai-workspace .ai-message > small,
.ai-panel .ai-message > small {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
  display: block;
}
.ai-message.user {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ai-workspace .ai-message.user .ai-user-bubble,
.ai-panel .ai-message.user .ai-user-bubble {
  display: inline-block;
  max-width: 88%;
  background: var(--panel);
  border-radius: 18px;
  padding: 12px 18px;
  white-space: pre-wrap;
  text-align: left;
}
.ai-message.assistant .ai-answer {
  background: transparent;
  padding: 0;
}
.ai-message-error .ai-answer {
  color: var(--danger);
}
.ai-workspace .ai-compose {
  padding: 8px 0 16px;
  flex-shrink: 0;
}
.ai-workspace .ai-footnote {
  font-size: 10px;
  text-align: center;
  color: var(--muted);
  margin: 8px 0 0;
}
.ai-answer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.ai-answer-actions .icon-button {
  padding: 4px;
  min-height: 28px;
}
.ai-answer-actions .text-button {
  font-size: 11px;
  color: var(--muted);
}
.ai-answer-actions svg {
  width: 14px;
  height: 14px;
}
.ai-workspace .ai-code,
.ai-panel .ai-code {
  background: var(--panel);
}
.ai-workspace .ai-code-bar,
.ai-panel .ai-code-bar {
  flex-wrap: wrap;
}
.ai-answer pre {
  max-width: 100%;
}
.ai-panel.ai-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 30;
  width: min(440px, calc(100vw - var(--rail)));
  box-shadow: -12px 0 32px #0003;
}
.ai-panel #ai-panel-body {
  min-height: 0;
  overflow: hidden;
}
.ai-panel-context {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.ai-panel-context b {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-panel-context button {
  font-size: 12px;
  align-self: flex-start;
}
.ai-panel .ai-compose {
  padding: 8px 12px 16px;
}
.ai-panel .ai-messages {
  padding: 20px 16px;
}
.ai-panel .ai-composer-note {
  display: none;
}
[data-ai-sidebar] {
  padding: 4px 8px 24px;
}
[data-ai-sidebar] .ai-new {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  margin-bottom: 16px;
  border-radius: 10px;
}
[data-ai-sidebar] .ai-new svg {
  width: 16px;
  height: 16px;
}
.ai-sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  margin-bottom: 12px;
}
.ai-sidebar-search svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.ai-sidebar-search input {
  background: transparent;
  border: 0;
  width: 100%;
  padding: 8px 0;
  font-size: 12px;
}
.ai-sidebar-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.ai-sidebar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  padding: 24px 8px 8px;
}
.ai-sidebar-heading .icon-button {
  padding: 0;
  min-height: 24px;
  width: 24px;
}
.ai-sidebar-heading svg {
  width: 14px;
  height: 14px;
}
.ai-space-heading {
  position: relative;
}
.ai-space > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 36px 9px 8px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
}
.ai-space > summary::-webkit-details-marker,
.ai-row-menu > summary::-webkit-details-marker {
  display: none;
}
.ai-space > summary svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--muted);
}
.ai-space > summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-space[open] > summary svg:first-child {
  transform: rotate(90deg);
}
.ai-space-chats {
  padding-left: 12px;
}
.ai-conversation-row {
  display: flex;
  position: relative;
  align-items: center;
  min-width: 0;
  border-radius: 8px;
}
.ai-conversation-row:hover,
.ai-conversation-row:focus-within,
.ai-conversation-row.active {
  background: var(--hover);
}
.ai-conversation-link {
  min-width: 0;
  flex: 1;
  text-align: left;
  padding: 9px 36px 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-conversation-link > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
  font-size: 13px;
}
.ai-conversation-link small {
  font-size: 10px;
  color: var(--muted);
}
.ai-space-heading.active > .ai-space > summary {
  background: var(--hover);
  border-radius: 8px;
}
.ai-row-menu {
  position: absolute;
  right: 4px;
  top: 8px;
  z-index: 2;
}
.ai-row-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--muted);
}
.ai-row-menu > summary:hover {
  background: var(--selected);
}
.ai-row-menu svg {
  width: 15px;
  height: 15px;
}
.ai-row-menu[open] {
  z-index: 10;
}
.ai-row-menu[open] > summary {
  background: var(--selected);
}
.ai-row-actions {
  position: absolute;
  right: 0;
  top: 28px;
  width: 150px;
  padding: 6px;
  border: 1px solid var(--off);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px #0004;
}
.ai-row-actions button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 4px;
}
.ai-row-actions button:hover {
  background: var(--hover);
}
.ai-side-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px;
  line-height: 1.8;
  margin: 0;
}
.ai-space-new {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  padding: 8px;
}
.ai-space-new svg {
  width: 13px;
  height: 13px;
}
.ai-move-dialog {
  width: 380px;
  padding: 24px;
}
.ai-move-dialog h2 {
  font-size: 18px;
  margin-top: 0;
}
.ai-move-dialog label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-move-dialog .page-tools {
  margin-top: 24px;
  justify-content: flex-end;
}
.ai-move-dialog [role=alert] {
  color: var(--danger);
  font-size: 12px;
}
.ai-experts-page {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 40px 0;
}
.ai-experts-intro {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.ai-experts-intro h1 {
  font-size: 28px;
  line-height: 1.4;
  margin: 8px 0 12px;
  font-weight: 600;
}
.ai-experts-intro > p:last-child {
  margin-bottom: 0;
}
.ai-experts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ai-expert-card {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .15s;
}
.ai-expert-card:hover,
.ai-expert-card:focus-visible {
  border-color: var(--accent);
}
.ai-expert-icon {
  color: var(--accent);
}
.ai-expert-icon svg {
  width: 26px;
  height: 26px;
}
.ai-expert-card h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.ai-expert-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  min-height: 40px;
}
.ai-expert-card .tag {
  display: inline-block;
  margin-right: 6px;
}
.ai-expert-card small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
  color: var(--muted);
  font-size: 11px;
}
.ai-expert-card small svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .ai-experts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page.ai-workspace {
    padding: 0 24px;
  }
  .ai-composer-note small {
    display: none;
  }
}
@media (max-width: 760px) {
  .page.ai-workspace {
    padding: 0 16px;
  }
  .ai-workspace .ai-welcome {
    padding: 32px 0;
  }
  .ai-expert-pills {
    margin: 16px 0;
  }
  .ai-expert-pills button {
    font-size: 11px;
    padding: 6px 10px;
  }
  .ai-experts-intro h1 {
    font-size: 23px;
  }
  .ai-conversation-header {
    padding-top: 16px;
    gap: 8px;
  }
  .ai-title {
    font-size: 14px;
  }
  .ai-space-picker {
    max-width: 36%;
  }
  .ai-workspace .ai-messages {
    padding-top: 20px;
  }
  .ai-workspace .ai-compose {
    padding: 8px 0 12px;
  }
  .ai-composer .ai-composer-note {
    display: none;
  }
  .ai-composer .ai-composer-model {
    margin-right: auto;
    max-width: 72%;
  }
  .ai-workspace .ai-composer textarea {
    font-size: 16px;
  }
  .ai-experts-grid {
    grid-template-columns: 1fr;
  }
  .ai-expert-card p {
    min-height: 0;
  }
  .ai-experts-page {
    padding: 24px 0;
  }
  .ai-starters {
    justify-content: flex-start;
  }
  .ai-message.user .ai-user-bubble {
    max-width: 94%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-expert-card {
    transition: none;
  }
}
.ai-conversation-header h1 {
  margin: 0;
  line-height: 1.6;
  font-size: inherit;
}
.ai-welcome-space {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  margin-top: 12px;
}
.ai-welcome-space svg {
  width: 14px;
  height: 14px;
}
.ai-welcome-space select {
  border: 0;
  font-size: 11px;
  background: transparent;
  padding: 4px;
  max-width: 220px;
}
.page.ai-workspace:has(.ai-panes) {
  padding: 0 16px;
  overflow: hidden;
}
.ai-window-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.ai-window-toolbar > div {
  display: flex;
  gap: 4px;
}
.ai-window-toolbar button {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.ai-window-toolbar [aria-pressed=true] {
  background: var(--selected);
  color: var(--text);
}
.ai-panes {
  display: grid;
  flex: 1;
  min-height: 0;
  gap: 12px;
  overflow: hidden;
}
.ai-layout-1 {
  grid-template-columns: minmax(0, 1fr);
}
.ai-layout-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-layout-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.ai-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0 12px;
  border-top: 2px solid transparent;
}
.ai-pane-active {
  border-top-color: var(--accent);
}
.ai-pane-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-height: 30px;
  font-size: 11px;
  color: var(--muted);
}
.ai-pane-bar > button:first-child {
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ai-pane-bar svg {
  width: 14px;
  height: 14px;
}
.ai-pane .full-chat {
  flex: 1;
  height: auto;
}
.ai-pane .ai-welcome {
  padding: 28px 0;
}
.ai-pane .ai-welcome h1 {
  font-size: clamp(20px, 2vw, 30px);
}
.ai-layout-4 .ai-welcome-mark,
.ai-layout-4 .ai-expert-pills,
.ai-layout-4 .ai-starters,
.ai-layout-4 .ai-footnote {
  display: none;
}
.ai-layout-4 .ai-welcome {
  padding: 8px 0;
}
.ai-layout-4 .ai-welcome > p {
  margin-bottom: 8px;
}
.ai-layout-4 .ai-conversation-header {
  padding: 8px 0;
}
.ai-layout-4 .ai-compose {
  padding: 4px 0;
}
.ai-layout-4 textarea {
  min-height: 48px;
}
.ai-layout-4 .ai-composer {
  padding: 10px;
}
.ai-layout-4 .ai-messages {
  padding-top: 12px;
}
.ai-provider-note {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.ai-model-picker {
  position: relative;
  font-size: 11px;
  flex-shrink: 0;
}
.ai-model-picker > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}
.ai-model-picker svg {
  width: 14px;
  height: 14px;
}
.ai-model-controls {
  position: absolute;
  left: 0;
  bottom: 26px;
  z-index: 12;
  width: min(240px, 65vw);
  background: var(--panel);
  border: 1px solid var(--off);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px #0003;
}
.ai-model-controls input {
  width: 100%;
  min-width: 0;
}
.ai-model-controls button {
  text-align: left;
  padding: 6px;
  font-size: 12px;
}
.ai-composer .ai-composer-model {
  flex: 1;
  max-width: none;
  min-width: 0;
}
.ai-composer .ai-composer-model select {
  max-width: 100%;
  text-overflow: ellipsis;
}
.ai-tool-details {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.ai-tool-details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.ai-tool-details svg {
  width: 14px;
  height: 14px;
}
.ai-tool-call {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 2px solid var(--border);
}
.ai-tool-call small {
  display: block;
}
.ai-tool-call pre,
.ai-approval pre {
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 11px;
  background: var(--panel);
  padding: 10px;
}
.ai-approval {
  border: 1px solid var(--off);
  padding: 14px;
  border-radius: 8px;
  margin: 12px 0;
  background: var(--panel);
}
.ai-approval p {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.ai-approval > div {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.ai-approval summary {
  cursor: pointer;
  font-size: 12px;
}
.ai-space-quick {
  position: absolute;
  right: 34px;
  top: 8px;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 5px;
  opacity: 0;
}
.ai-space-quick svg {
  width: 15px;
  height: 15px;
}
.ai-space-heading > .ai-row-menu {
  opacity: 0;
}
.ai-space-heading:hover > .ai-space-quick,
.ai-space-heading:focus-within > .ai-space-quick,
.ai-space-heading:hover > .ai-row-menu,
.ai-space-heading:focus-within > .ai-row-menu,
.ai-space-heading > .ai-row-menu[open] {
  opacity: 1;
}
.ai-space > summary {
  padding-right: 68px;
}
.ai-running,
.ai-unread {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
}
.ai-running {
  border: 1px solid var(--muted);
  border-top-color: transparent;
  animation: ai-spin .9s linear infinite;
}
.ai-unread {
  background: var(--accent);
}
@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (hover: none) {
  .ai-space-quick,
  .ai-space-heading > .ai-row-menu {
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .page.ai-workspace:has(.ai-panes) {
    padding: 0 8px;
  }
  .ai-pane {
    padding: 0 4px;
  }
  .ai-panes.ai-layout-2,
  .ai-panes.ai-layout-4 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    overflow: auto;
  }
  .ai-layout-2 .ai-pane,
  .ai-layout-4 .ai-pane {
    min-height: 70vh;
  }
  .ai-window-toolbar > span {
    display: none;
  }
  .ai-window-toolbar {
    justify-content: flex-end;
  }
  .ai-layout-4 .ai-provider-note {
    display: block;
  }
  .ai-composer .composer-bottom {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-running {
    animation: none;
  }
}
.ai-workspace .ai-layout-4 .ai-composer textarea {
  height: 44px;
  min-height: 44px;
  max-height: 100px;
  line-height: 1.5;
}
.ai-approval,
.ai-tool-details,
.ai-tool-call,
.ai-approval pre {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.ai-approval .ai-command {
  font-family: "JetBrains Mono", monospace;
  white-space: pre;
  max-height: 220px;
  overflow: auto;
  tab-size: 2;
}
.ai-tool-call pre {
  overflow-wrap: anywhere;
}
.ai-approval > div {
  flex-wrap: wrap;
}
.ai-root-badge {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.ai-root-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
.ai-root-switch input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ai-skill-tools {
  font-size: 12px;
  min-width: 0;
}
.ai-skill-tools summary {
  cursor: pointer;
}
.ai-skill-tools form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ai-skill-tools label {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-wrap: anywhere;
}
.ai-skill-tools input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ai-project-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}
.ai-composer {
  position: relative;
}
.ai-ref-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-ref-tags:not(:empty) {
  margin-bottom: 10px;
}
.ai-ref-tags > span,
.ai-message-refs > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ai-ref-tags svg,
.ai-message-refs svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.ai-ref-tags button {
  display: flex;
  align-items: center;
  padding: 2px;
}
.ai-message-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
}
.ai-ref-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(420px, 100%);
  z-index: 12;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--off);
  border-radius: 10px;
  box-shadow: 0 8px 24px #0003;
}
.ai-ref-picker[hidden] {
  display: none;
}
.ai-ref-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}
.ai-ref-picker > input {
  width: 100%;
  min-width: 0;
}
.ai-ref-picker [data-ref-results] {
  max-height: 240px;
  overflow: auto;
  margin-top: 8px;
}
.ai-ref-group {
  display: block;
  color: var(--muted);
  padding: 8px;
  font-size: 11px;
}
.ai-ref-picker [data-ref-results] > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 8px;
  text-align: left;
  font-size: 12px;
}
.ai-ref-picker [data-ref-results] > button:hover {
  background: var(--hover);
}
.ai-ref-picker [data-ref-results] > button > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-ref-picker [data-ref-results] > button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.ai-ref-picker [data-ref-results] > button small {
  color: var(--muted);
}
.ai-answer-actions {
  flex-wrap: wrap;
}
.ai-plugin-picker {
  position: relative;
  font-size: 12px;
}
.ai-plugin-picker > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  color: var(--muted);
  white-space: nowrap;
  list-style: none;
}
.ai-plugin-picker > summary svg {
  width: 14px;
  height: 14px;
}
.ai-plugin-picker > small {
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 10;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  width: 220px;
  max-width: 60vw;
  line-height: 1.5;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 16px #0002;
}
.ai-approval pre {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-mode-slot {
  display: contents;
}
.ai-mode-picker {
  position: relative;
  font-size: 12px;
  flex-shrink: 0;
}
.ai-mode-picker > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 7px;
  color: var(--muted);
  white-space: nowrap;
  list-style: none;
}
.ai-mode-picker > summary::-webkit-details-marker {
  display: none;
}
.ai-mode-picker > summary:hover {
  background: var(--hover);
  color: var(--text);
}
.ai-mode-picker > summary svg {
  width: 14px;
  height: 14px;
}
.ai-mode-picker > summary svg:last-child {
  width: 12px;
  height: 12px;
}
.ai-mode-picker[data-mode=bypass] > summary {
  color: var(--ux-warn);
}
.ai-mode-menu {
  position: absolute;
  left: 0;
  bottom: 32px;
  z-index: 12;
  width: min(300px, 80vw);
  background: var(--panel);
  border: 1px solid var(--off);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 6px 20px #0004;
}
.ai-mode-menu > p {
  margin: 4px 8px 6px;
  color: var(--muted);
  font-size: 11px;
}
.ai-mode-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 7px;
  text-align: left;
}
.ai-mode-menu button:hover:not(:disabled) {
  background: var(--hover);
}
.ai-mode-menu button[aria-checked=true] {
  background: var(--selected);
}
.ai-mode-menu button > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ai-mode-menu button > svg:last-child {
  margin-left: auto;
  color: var(--accent);
}
.ai-mode-menu span {
  min-width: 0;
}
.ai-mode-menu b {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.ai-mode-menu small {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 2px;
}
.ai-mode-menu .ai-mode-busy {
  margin: 4px 8px;
}
@media (max-width: 760px) {
  .ai-mode-picker > summary span {
    display: none;
  }
}
.page-tip.ai-provider-note.is-down,
.page-tip.ai-provider-note.is-down svg {
  color: #e6a23c;
}

/* public/src/features/usage/style.css */
.page.usage-page {
  max-width: 1200px;
  padding: 32px 40px 48px;
  min-width: 0;
}
.usage-page .page-heading {
  margin-bottom: 24px;
  align-items: center;
}
.usage-page .page-heading h1 {
  font-size: 26px;
}
.usage-page .page-heading p {
  font-size: 13px;
}
.usage-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ux-line);
  border-radius: 10px;
  background: var(--panel);
  flex-shrink: 0;
}
.usage-switch button {
  min-height: 36px;
  min-width: 64px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 13px;
}
.usage-switch button[aria-pressed=true] {
  background: var(--hover);
  color: var(--text);
}
.usage-switch button:hover {
  color: var(--text);
}
.usage-summary {
  padding: 24px 28px;
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
  background: var(--panel);
}
.usage-summary h2 {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
.usage-amount {
  display: block;
  font-size: 52px;
  line-height: 1.35;
  letter-spacing: -1.5px;
  font-weight: 600;
  margin: 4px 0 8px;
  font-variant-numeric: tabular-nums;
}
.usage-balance {
  margin: 0;
  font-size: 14px;
}
.usage-reset {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.usage-meter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  color: var(--muted);
}
.usage-meter progress {
  display: block;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 6px;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--hover);
  accent-color: var(--muted);
}
.usage-meter progress::-webkit-progress-bar {
  background: var(--hover);
}
.usage-meter progress::-webkit-progress-value {
  background: var(--muted);
  border-radius: 4px;
}
.usage-meter progress::-moz-progress-bar {
  background: var(--muted);
  border-radius: 4px;
}
.usage-meter span {
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.usage-meter.warn progress {
  accent-color: var(--ux-warn);
}
.usage-meter.warn progress::-webkit-progress-value {
  background: var(--ux-warn);
}
.usage-meter.warn progress::-moz-progress-bar {
  background: var(--ux-warn);
}
.usage-meter.bad progress {
  accent-color: var(--ux-bad);
}
.usage-meter.bad progress::-webkit-progress-value {
  background: var(--ux-bad);
}
.usage-meter.bad progress::-moz-progress-bar {
  background: var(--ux-bad);
}
.usage-meter.warn,
.usage-summary.warn .usage-warning {
  color: var(--ux-warn);
}
.usage-meter.bad,
.usage-summary.bad .usage-warning,
.usage-summary.bad .usage-amount {
  color: var(--ux-bad);
}
.usage-summary.warn {
  border-color: color-mix(in srgb, var(--ux-warn), transparent 60%);
}
.usage-summary.bad {
  border-color: color-mix(in srgb, var(--ux-bad), transparent 60%);
}
.usage-warning {
  font-size: 13px;
  margin: 12px 0 0;
  line-height: 1.8;
}
.usage-days,
.usage-breakdown,
.usage-records {
  margin-top: 28px;
  min-width: 0;
}
.usage-chart {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 10px;
  padding-top: 22px;
}
.usage-day {
  position: relative;
  min-width: 0;
  padding: 0 5px;
  text-align: center;
  border-radius: 4px;
}
.usage-day-track {
  display: block;
  position: relative;
  height: 136px;
  border-bottom: 1px solid var(--ux-line);
}
.usage-bar {
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: var(--bar-height);
  border-radius: 4px 4px 0 0;
  background: var(--muted);
  opacity: .65;
}
.usage-bar.zero {
  height: 2px;
  background: var(--off);
  opacity: .7;
}
.usage-day:hover .usage-bar,
.usage-day:focus .usage-bar {
  opacity: 1;
}
.usage-day-date {
  display: block;
  font-size: 11px;
  color: var(--muted);
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
}
.usage-day-tooltip {
  display: none;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid var(--ux-line);
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}
.usage-day:hover .usage-day-tooltip,
.usage-day:focus .usage-day-tooltip {
  display: block;
}
.usage-day:first-child .usage-day-tooltip,
.usage-day:nth-child(2) .usage-day-tooltip {
  left: 0;
  transform: none;
}
.usage-day:last-child .usage-day-tooltip,
.usage-day:nth-last-child(2) .usage-day-tooltip {
  left: auto;
  right: 0;
  transform: none;
}
.usage-day:focus-visible,
.usage-page [tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.usage-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.usage-breakdown h3 {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin: 0 0 6px;
}
.usage-breakdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.usage-breakdown li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ux-line);
  font-size: 13px;
}
.usage-breakdown li span {
  overflow-wrap: anywhere;
  min-width: 0;
}
.usage-breakdown li b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.usage-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.usage-records .table-scroll,
.usage-members .table-scroll {
  border: 1px solid var(--ux-line);
  border-radius: 10px;
  max-width: 100%;
}
.usage-page .data-table {
  font-size: 12px;
  min-width: 760px;
}
.usage-page .data-table th {
  font-size: 12px;
}
.usage-page .data-table td {
  padding: 14px 12px;
}
.usage-page .data-table tr:last-child td {
  border-bottom: 0;
}
.usage-numeric {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.usage-records time {
  white-space: nowrap;
}
.usage-records [title] {
  cursor: help;
}
.usage-records th [title] {
  border-bottom: 1px dotted var(--muted);
}
.usage-model {
  max-width: 240px;
}
.usage-failed {
  opacity: .6;
}
.usage-failure-label {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  border: 1px solid var(--off);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--muted);
}
.usage-empty {
  padding: 24px;
  margin: 0;
}
.usage-records-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
}
.usage-records-footer button {
  margin-left: auto;
  font-size: 12px;
}
.usage-back {
  margin: -8px 0 16px;
  font-size: 13px;
}
.usage-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.usage-total {
  padding: 20px 24px;
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
  min-width: 0;
}
.usage-total h2 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.usage-total strong {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.usage-default {
  padding: 20px 24px;
  border: 1px solid var(--ux-line);
  border-radius: var(--ux-radius);
  background: var(--panel);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.usage-default label {
  font-weight: 500;
  font-size: 14px;
}
.usage-default p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.usage-default-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.usage-default-controls > span {
  color: var(--muted);
}
.usage-default input {
  width: 120px;
  font-variant-numeric: tabular-nums;
}
.usage-default button {
  font-size: 13px;
}
.usage-form-status {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.usage-form-status:empty {
  display: none;
}
.usage-default > .usage-form-status {
  flex-basis: 100%;
  margin: 0;
}
.usage-members .data-table {
  min-width: 850px;
}
.usage-member-name {
  color: var(--text);
  font-weight: 500;
  max-width: 180px;
  white-space: normal !important;
  text-align: left;
  overflow-wrap: anywhere;
}
.usage-member-name:hover {
  text-decoration: underline;
}
.usage-username {
  display: block;
  font-size: 11px;
  color: var(--muted);
  max-width: 180px;
  overflow-wrap: anywhere;
}
.usage-limit,
.usage-last {
  white-space: nowrap;
}
.usage-members .usage-meter {
  min-width: 100px;
  max-width: 180px;
  display: block;
  margin: 0;
}
.usage-members .usage-meter progress {
  width: 100%;
  height: 4px;
  margin-bottom: 4px;
}
.usage-members .usage-meter span {
  font-size: 10px;
}
.usage-members .data-table td small {
  white-space: nowrap;
  font-size: 11px;
}
.usage-adjust {
  font-size: 12px;
  min-height: 36px;
  padding: 6px 12px;
}
.usage-quota h2 {
  font-size: 19px;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.usage-quota p {
  font-size: 12px;
  color: var(--muted);
}
.usage-quota fieldset {
  border: 0;
  padding: 0;
  margin: 20px 0;
}
.usage-quota-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.usage-quota-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.usage-quota-option small {
  margin-left: auto;
  font-size: 12px;
}
.usage-custom-amount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}
.usage-custom-amount input:disabled {
  opacity: .5;
}
.usage-quota footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
@media (max-width: 1000px) {
  .page.usage-page {
    padding: 28px;
  }
  .usage-chart {
    gap: 4px;
  }
  .usage-day {
    padding: 0 2px;
  }
}
@media (max-width: 1000px) {
  .usage-total {
    padding: 18px;
  }
  .usage-total strong {
    font-size: 26px;
  }
  .usage-default-controls {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  .usage-totals {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .usage-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
  }
  .usage-total h2 {
    font-size: 12px;
    margin: 0;
  }
  .usage-total strong {
    font-size: 25px;
  }
  .usage-default {
    padding: 20px;
    gap: 14px;
  }
  .usage-default-controls {
    width: 100%;
    gap: 8px;
  }
  .usage-default input {
    width: 0;
    flex: 1;
  }
  .usage-default button,
  .usage-adjust {
    min-height: 44px;
  }
  .usage-members .section-heading {
    align-items: flex-start;
  }
}
@media (max-width: 760px) {
  .page.usage-page {
    padding: 24px 16px 40px;
  }
  .usage-page .page-heading {
    align-items: flex-start;
    gap: 16px;
  }
  .usage-page .page-heading h1 {
    font-size: 23px;
  }
  .usage-summary {
    padding: 20px;
  }
  .usage-amount {
    font-size: 42px;
    letter-spacing: -1px;
  }
  .usage-balance {
    font-size: 13px;
  }
  .usage-reset {
    font-size: 11px;
  }
  .usage-chart {
    gap: 2px;
    padding-top: 24px;
  }
  .usage-day {
    padding: 0 1px;
  }
  .usage-day-track {
    height: 112px;
  }
  .usage-bar {
    left: 10%;
    width: 80%;
    border-radius: 2px 2px 0 0;
  }
  .usage-day-date {
    font-size: 10px;
    writing-mode: vertical-rl;
    margin: 0 auto;
    padding-top: 8px;
    line-height: 1;
  }
  .usage-days .section-heading {
    align-items: flex-start;
  }
  .usage-days .section-heading h2 {
    font-size: 14px;
  }
  .usage-days .section-heading small {
    font-size: 10px;
    flex-shrink: 0;
  }
  .usage-breakdown-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .usage-switch button {
    min-height: 40px;
    min-width: 64px;
  }
  .usage-day-tooltip {
    font-size: 11px;
    padding: 6px;
  }
  .usage-day:nth-child(-n+5) .usage-day-tooltip {
    left: 0;
    transform: none;
  }
  .usage-day:nth-last-child(-n+5) .usage-day-tooltip {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* public/src/features/connectors/style.css */
.connectors-page {
  max-width: 1440px;
}
.connector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.connector-card,
.connector-bindings {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}
.connector-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.connector-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.connector-title svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.connector-card h2,
.connector-bindings h2 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}
.connector-card > p,
.connector-bindings > p {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 0;
  line-height: 1.8;
}
.connector-health {
  font-size: 12px;
  line-height: 1.8;
  margin: 16px 0;
  min-height: 22px;
  color: var(--muted);
}
.connector-health div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.connector-health dt {
  flex-shrink: 0;
}
.connector-health dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.connector-error {
  color: var(--danger);
  margin-top: 8px;
}
.connector-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.connector-fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}
.connector-fields label:has([name=webhook]) {
  grid-column: 1/-1;
}
.connector-fields small {
  font-size: 12px;
}
.connector-fields input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}
.connector-callback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
  font-size: 12px;
  color: var(--muted);
}
.connector-callback code {
  flex-basis: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  user-select: all;
}
.connector-callback button {
  min-height: 36px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.connector-callback svg {
  width: 14px;
  height: 14px;
}
.connector-events {
  padding: 0;
  margin: 20px 0;
  border: 0;
  display: flex;
  gap: 10px 16px;
  flex-wrap: wrap;
  font-size: 12px;
}
.connector-events legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--muted);
}
.connector-events label,
.connector-actions > label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.connector-events input {
  margin: 0;
  accent-color: var(--accent);
}
.connector-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  margin: 16px 0;
}
.connector-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.connector-actions > label {
  font-size: 13px;
  margin-right: auto;
}
.connector-actions button {
  min-height: 40px;
  font-size: 13px;
}
.connector-result {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
  margin: 12px 0 0;
}
.connector-result:empty {
  display: none;
}
.connector-guide {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 14px;
  font-size: 13px;
}
.connector-guide summary {
  cursor: pointer;
  color: var(--muted);
  min-height: 28px;
}
.connector-guide p {
  color: var(--muted);
  line-height: 1.9;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}
.connector-bindings {
  margin-top: 24px;
}
.connector-bindings table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.connector-bindings th,
.connector-bindings td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.connector-bindings th {
  color: var(--muted);
  font-weight: 500;
}
.connector-bindings small {
  display: block;
}
.connector-empty {
  padding: 16px 0;
}
[data-im-account] {
  grid-column: 1/-1;
  min-width: 0;
}
.im-platforms {
  margin: 20px 0;
}
.im-platform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.im-platform h3 {
  font-size: 14px;
  margin: 0 0 4px;
}
.im-platform p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.im-platform button {
  flex-shrink: 0;
  min-height: 44px;
  font-size: 13px;
}
[data-im-code]:not([hidden]) {
  padding: 16px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 16px 0;
  overflow-wrap: anywhere;
}
[data-im-code] p {
  margin: 0 0 8px;
}
[data-im-code] small {
  display: block;
  line-height: 1.8;
}
.im-notify {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.im-notify small {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}
[data-im-status] {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
[data-im-status]:empty {
  display: none;
}
@media (max-width: 1100px) {
  .connector-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .connector-card,
  .connector-bindings {
    padding: 18px;
  }
  .connectors-page .page-heading {
    align-items: start;
    flex-wrap: wrap;
  }
  .connector-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .connector-actions button,
  .connector-callback button {
    min-height: 44px;
  }
  .connector-bindings thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .connector-bindings tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .connector-bindings td {
    display: block;
    padding: 4px 0;
    border: 0;
  }
  .connector-bindings td[data-label]::before {
    content: attr(data-label) "\ff1a";
    color: var(--muted);
  }
  .connector-bindings small {
    display: inline;
    margin-left: 8px;
  }
  [data-im-account] .setting-card-top {
    flex-wrap: wrap;
  }
  .im-platform {
    gap: 8px;
  }
  .im-platform p {
    overflow-wrap: anywhere;
  }
  .im-notify {
    align-items: flex-start;
  }
}

/* public/src/features/apps/manage.css */
[data-company-apps] {
  margin-top: 24px;
  min-width: 0;
}
.company-app-list > section {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.company-app-list > section > div {
  min-width: 0;
}
.company-app-list h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
}
.company-app-list p {
  margin: 6px 0;
  font-size: 12px;
}
.company-app-list small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.company-app-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.company-app-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.company-app-form > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.company-app-form .app-wide {
  grid-column: 1/-1;
  margin: 0;
}
.company-app-form fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--border);
}
.company-app-form fieldset label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.company-app-form fieldset small {
  flex-basis: 100%;
  color: var(--muted);
}
[data-app-secret] {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 16px 0;
  background: var(--panel);
}
[data-app-secret] code {
  display: block;
  overflow-wrap: anywhere;
  user-select: all;
  margin: 12px 0;
}
@media (max-width: 760px) {
  .company-app-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-app-list > section {
    flex-direction: column;
    gap: 8px;
  }
}

/* public/src/features/routes/routes.css */
.route-meta {
  color: var(--muted);
  font-size: 13px;
  margin: -8px 0 20px;
}
.route-servers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.route-servers article {
  background: var(--panel);
  border-radius: 12px;
  padding: 16px 18px;
}
.route-servers b {
  display: block;
  font-size: 15px;
}
.route-servers code {
  display: inline-block;
  margin: 6px 0;
  font: 13px/1.4 var(--font-mono);
  color: var(--accent);
}
.route-servers p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.route-card {
  background: var(--panel);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.route-card header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.route-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin: 0;
}
.route-card h2 svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.route-card header small {
  color: var(--muted);
}
.route-badge {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  background: var(--hover);
  border-radius: 999px;
  padding: 3px 10px;
}
.route-chain {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.route-node {
  position: relative;
  flex: 1 1 0;
  min-width: 150px;
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px 12px 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.route-node b {
  font-size: 14px;
}
.route-node small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.route-ip {
  white-space: nowrap;
}
.route-node > .route-dot {
  position: absolute;
  left: 11px;
  top: 19px;
}
.route-accounts {
  flex: 1.6 1 0;
  min-width: 260px;
  padding-left: 14px;
}
.route-accounts ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.route-accounts li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
}
.route-accounts li small {
  grid-column: 2;
}
.route-exits {
  flex: 1.4 1 0;
  min-width: 240px;
  padding: 0;
  background: none;
  gap: 8px;
}
.route-exits .route-node {
  flex: none;
}
.route-arrow {
  display: flex;
  align-items: center;
  color: var(--muted);
}
.route-arrow svg {
  width: 16px;
  height: 16px;
}
.route-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--off);
}
.route-ok {
  background: #55bb85;
}
.route-down {
  background: #e5534b;
}
.route-detour {
  background: #d4a72c;
}
.route-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.route-host {
  display: block;
  color: var(--muted);
  font: 12px/1.5 var(--font-mono);
}
.route-card td .route-dot {
  margin-right: 8px;
}
.route-rules {
  margin: 0;
  padding-left: 20px;
  line-height: 2;
  color: var(--text);
}
.route-rules b {
  color: var(--accent);
  font-weight: 500;
}
@media (max-width: 1100px) {
  .route-servers {
    grid-template-columns: 1fr;
  }
  .route-chain {
    flex-direction: column;
  }
  .route-arrow {
    transform: rotate(90deg);
    justify-content: center;
  }
}

/* public/src/features/ai-admin/plugins.css */
.mcp-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 16px auto;
  min-width: 0;
}
.mcp-add,
.mcp-plugin {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  min-width: 0;
}
.mcp-add > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}
.mcp-add > summary svg,
.mcp-status svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.mcp-add form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.mcp-add form > label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.mcp-add input:not([type=checkbox]),
.mcp-add select {
  width: 100%;
  min-width: 0;
}
.mcp-add [role=status],
.mcp-add fieldset,
.mcp-add [role=alert] {
  grid-column: 1/-1;
  margin: 0;
}
.mcp-add fieldset,
.mcp-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 0;
  padding: 0;
}
.mcp-add legend,
.mcp-roles legend {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.mcp-add [hidden] {
  display: none;
}
.mcp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mcp-plugin > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.mcp-plugin h2,
.mcp-recommendations h2 {
  font-size: 17px;
  margin: 0 0 8px;
}
.mcp-plugin p,
.mcp-plugin small,
.mcp-recommendations > p,
.mcp-empty {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.mcp-address {
  word-break: break-all;
}
.mcp-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mcp-plugin .page-tools {
  flex-wrap: wrap;
  margin: 12px 0;
}
.mcp-plugin .page-tools [role=status] {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.mcp-roles {
  margin: 0 0 16px;
}
.mcp-plugin > details > summary {
  font-size: 13px;
  cursor: pointer;
}
.mcp-tools {
  margin-top: 12px;
}
.mcp-tool,
.mcp-tool-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 128px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mcp-tool-head {
  font-size: 12px;
  color: var(--muted);
  padding-top: 0;
}
.mcp-tool b {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.mcp-tool p {
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcp-tool select {
  width: 100%;
  font-size: 12px;
}
.mcp-tool:last-child {
  border-bottom: 0;
}
.mcp-error,
.mcp-plugin .mcp-error {
  color: var(--danger);
}
.mcp-recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mcp-recommend-grid article {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.mcp-recommend-grid h3 {
  font-size: 14px;
  margin: 0;
}
.mcp-recommend-grid p,
.mcp-recommend-grid small {
  font-size: 12px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.mcp-recommend-grid button {
  margin-top: auto;
}
.mcp-empty {
  padding: 16px 0;
}
@media (max-width: 760px) {
  .mcp-add form,
  .mcp-recommend-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mcp-add,
  .mcp-plugin {
    padding: 14px;
  }
  .mcp-tool-head {
    display: none;
  }
  .mcp-tool {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .mcp-tool > div {
    grid-column: 1/-1;
  }
  .mcp-tool select {
    min-height: 40px;
  }
  .mcp-tool .ai-mobile-label {
    display: inline;
  }
  .mcp-add [role=status] {
    line-height: 1.6;
  }
  .mcp-roles .ai-check {
    min-height: 32px;
  }
}

/* public/src/features/ai-admin/style.css */
.ai-admin {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 24px auto;
}
.ai-provider {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  background: var(--panel);
}
.ai-provider > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ai-provider h2 {
  font-size: 17px;
  margin: 0 0 8px;
}
.ai-provider h2 small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}
.ai-provider p,
.ai-provider small {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ai-provider .page-tools {
  margin: 16px 0;
  flex-wrap: wrap;
}
.ai-provider summary {
  cursor: pointer;
  font-size: 13px;
}
.ai-provider-add > summary {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-provider-add svg {
  width: 16px;
  height: 16px;
}
.ai-provider-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.ai-provider-form > label,
.ai-model-row > label:not(.ai-check) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}
.ai-provider-form input,
.ai-provider-form select,
.ai-model-row input:not([type=checkbox]) {
  width: 100%;
  min-width: 0;
}
.ai-provider-form .ai-provider-description {
  grid-column: 1/-1;
}
.ai-provider-form button {
  justify-self: start;
}
.ai-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  white-space: nowrap;
}
.ai-check input[type=checkbox] {
  width: 15px;
  height: 15px;
  margin: 0;
}
.ai-model-rows {
  border-top: 1px solid var(--border);
}
.ai-model-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.ai-model-row fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1/-1;
  border: 0;
  padding: 0;
  margin: 0;
}
.ai-model-row legend {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.ai-model-row button {
  justify-self: end;
}
.ai-model-row [role=alert],
.ai-provider-form [role=alert] {
  color: var(--danger);
  grid-column: 1/-1;
  margin: 0;
}
.ai-model-row:last-child {
  border-bottom: 0;
}
@media (max-width: 760px) {
  .ai-provider {
    padding: 14px;
  }
  .ai-provider-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .ai-model-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ai-model-row > label:nth-child(3) {
    grid-column: 1/-1;
  }
  .ai-provider > header {
    flex-wrap: wrap;
  }
}
.ai-admin {
  gap: 16px;
  margin: 16px auto;
  max-width: none;
  min-width: 0;
}
.ai-provider {
  padding: 16px;
  min-width: 0;
}
.ai-provider h2 {
  margin-bottom: 4px;
}
.ai-provider header p {
  margin: 4px 0;
}
.ai-provider .page-tools {
  margin: 12px 0;
}
.ai-model-head,
.ai-model-row {
  display: grid;
  grid-template-columns: 34px minmax(100px, 1fr) minmax(100px, .9fr) minmax(120px, 1.2fr) 296px 36px 54px;
  gap: 8px;
  align-items: center;
}
.ai-model-head {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 0;
  border-block: 1px solid var(--border);
}
.ai-model-row {
  padding: 6px 0;
  min-height: 44px;
}
.ai-model-row > label,
.ai-model-row > span {
  min-width: 0;
}
.ai-model-row input:not([type=checkbox]) {
  height: 30px;
  padding: 4px 6px;
  font-size: 12px;
}
.ai-model-row fieldset {
  grid-column: auto;
  display: flex;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.ai-model-row fieldset .ai-check {
  gap: 3px;
  font-size: 11px;
}
.ai-model-row fieldset input[type=checkbox] {
  width: 13px;
  height: 13px;
}
.ai-model-row button {
  padding: 4px 8px;
  min-height: 30px;
  font-size: 12px;
  width: 100%;
}
.ai-model-row button:disabled {
  opacity: .4;
}
.ai-model-row [role=alert]:empty {
  display: none;
}
.ai-upstream {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.ai-mobile-label {
  display: none;
}
@media (max-width: 1100px) {
  .ai-model-head,
  .ai-model-row {
    grid-template-columns: 30px minmax(90px, 1fr) minmax(80px, .8fr) minmax(90px, 1fr) 220px 28px 48px;
    gap: 6px;
  }
  .ai-model-row fieldset {
    gap: 3px;
    flex-wrap: wrap;
  }
  .ai-model-row fieldset .ai-check {
    font-size: 10px;
  }
}
@media (max-width: 900px) {
  .ai-model-head {
    display: none;
  }
  .ai-model-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }
  .ai-model-row [data-label]:before {
    content: attr(data-label);
    font-size: 12px;
    color: var(--muted);
    display: block;
    margin-bottom: 4px;
  }
  .ai-model-row fieldset {
    grid-column: 1/-1;
    gap: 10px;
    flex-wrap: wrap;
  }
  .ai-model-row fieldset .ai-check {
    font-size: 12px;
  }
  .ai-model-row fieldset input[type=checkbox] {
    width: 16px;
    height: 16px;
  }
  .ai-model-row > label:nth-child(4) {
    grid-column: 1/-1;
  }
  .ai-model-row button {
    min-height: 36px;
  }
  .ai-model-row input:not([type=checkbox]) {
    height: 36px;
  }
  .ai-mobile-label {
    display: inline;
  }
  .ai-upstream {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ai-provider h2 small {
    display: block;
    margin: 4px 0;
  }
  .ai-provider-form {
    gap: 12px;
  }
}
@media (min-width: 901px) {
  .ai-provider-add {
    padding: 12px 16px;
  }
  .ai-provider .page-tools button {
    min-height: 32px;
    padding: 6px 10px;
  }
  .ai-provider .page-tools {
    margin: 8px 0;
  }
  .page-heading:has(+ .ai-admin) {
    margin-bottom: 16px;
  }
}
.ai-default-model label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ai-default-model label > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}
.ai-default-model label > span {
  flex: 1;
  min-width: 200px;
}
.ai-default-model b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.ai-default-model small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.ai-default-model select {
  min-width: 220px;
  max-width: 100%;
}

/* public/src/features/task-rules/style.css */
.rules-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
}
.rules-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rules-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}
.rules-card h2 svg {
  width: 18px;
  height: 18px;
}
.rules-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.rules-card textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}
.rules-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rules-switch input {
  width: 16px;
  height: 16px;
}
.rules-clause {
  font-size: 12px;
  line-height: 1.6;
}

/* public/src/features/modules-admin/style.css */
.modules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}
.modules-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.modules-row > svg {
  width: 22px;
  height: 22px;
}
.modules-row h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.modules-row p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.7;
}
.modules-note {
  color: var(--danger) !important;
}
.modules-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.modules-switch input {
  width: 16px;
  height: 16px;
  margin: 0;
}
.modules-global {
  color: var(--muted);
}
@media (max-width: 760px) {
  .modules-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .modules-switch {
    grid-column: 2;
  }
}
.module-home-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}
.module-home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  text-align: left;
}
.module-home-row:hover,
.module-home-row:focus-visible {
  border-color: var(--off);
}
.module-home-row > span {
  flex: 1;
  min-width: 0;
}
.module-home-row b {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.module-home-row small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-home-row > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* public/src/features/tasks/tasks.css */
.tasks-page code {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.task-new {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  margin-bottom: 28px;
}
.task-new label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
}
.task-new textarea,
.task-continue textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.task-new-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.task-new-row label {
  flex: 1 1 180px;
}
.task-new-row label:first-child {
  flex: 3 1 260px;
}
.task-new-row input,
.task-new-row select {
  width: 100%;
}
.task-new-row .primary {
  flex-shrink: 0;
}
.task-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
}
.task-repos {
  margin: -16px 0 28px;
}
.task-repos-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.task-repos-line .text-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.task-repos-line svg {
  width: 14px;
  height: 14px;
}
.task-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 220px) 110px;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.task-row:last-child {
  border-bottom: 0;
}
.task-row:hover,
.task-row:focus-visible {
  background: var(--hover);
}
.task-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-row small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-empty,
.ide-empty {
  color: var(--muted);
  padding: 18px 16px;
  margin: 0;
}
.task-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 32px 0 4px;
}
.ide-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 200px) 110px 150px;
}
.ide-row:not(.ide-carried) {
  cursor: default;
}
.ide-row:not(.ide-carried):hover {
  background: none;
}
.ide-tags {
  display: flex;
  gap: 6px;
}
.ide-row code {
  font-size: 12px;
}
.ide-row [data-ide-open] {
  justify-self: end;
  white-space: nowrap;
}
.ide-continue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--hover);
}
.ide-continue label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.ide-continue .task-hint {
  margin: 0;
}
.ide-continue .form-error:empty {
  display: none;
}
.task-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid var(--border);
}
.task-busy {
  color: var(--accent);
}
.task-ask {
  color: #e6a23c;
  border-color: #e6a23c66;
}
.task-ok {
  color: #3fb950;
}
.task-bad {
  color: var(--danger);
}
.task-idle {
  color: var(--muted);
}
.task-prompt {
  white-space: pre-wrap;
}
.task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--muted);
  margin: -12px 0 16px;
}
.task-error {
  color: var(--danger);
  font-size: 13px;
  margin: 0 0 16px;
  white-space: pre-wrap;
}
.task-approval {
  border: 1px solid #e6a23c66;
  background: var(--panel);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.task-approval h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 10px;
}
.task-approval h3 svg {
  width: 17px;
  height: 17px;
  color: #e6a23c;
}
.task-approval pre,
.task-tool pre,
.task-output,
.task-diff,
.task-diffstat {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}
.task-approval pre {
  background: var(--input);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  max-height: 240px;
  overflow: auto;
}
.task-approval .page-tools {
  margin: 0;
}
.task-deliver {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.task-deliver a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.task-deliver a svg {
  width: 14px;
  height: 14px;
}
.task-deliver .text-button {
  margin-left: auto;
}
.task-merged {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.task-merged svg {
  width: 14px;
  height: 14px;
}
.task-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  margin-bottom: 14px;
}
.task-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.task-preview-label svg {
  width: 15px;
  height: 15px;
}
.task-preview input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.task-preview a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.task-preview a svg {
  width: 14px;
  height: 14px;
}
.task-preview .task-hint {
  flex-basis: 100%;
}
.task-preview-logs {
  flex-basis: 100%;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  background: var(--input);
  border-radius: 8px;
  padding: 10px 12px;
}
.task-continue {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 20px;
}
.task-continue .primary {
  flex-shrink: 0;
}
[data-task-actions] > .secondary {
  margin-bottom: 20px;
}
.task-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.task-tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.task-tabs button[aria-selected=true] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.task-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 62vh;
  overflow: auto;
  padding-right: 4px;
}
.task-text {
  line-height: 1.8;
  font-size: 14.5px;
}
.task-text > :first-child {
  margin-top: 0;
}
.task-text > :last-child {
  margin-bottom: 0;
}
.task-live {
  white-space: pre-wrap;
  color: var(--muted);
}
.task-said {
  align-self: flex-end;
  max-width: 80%;
  white-space: pre-wrap;
  background: var(--hover);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
}
.task-said b {
  font-weight: 600;
  margin-right: 4px;
}
.task-tool {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.task-tool > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  min-width: 0;
}
.task-tool > summary::-webkit-details-marker {
  display: none;
}
.task-tool > summary svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}
.task-tool > summary code {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.task-tool > pre,
.task-tool > .task-output {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  max-height: 320px;
  overflow: auto;
}
.task-tool-error > summary span {
  color: var(--danger);
}
.task-output-error {
  color: var(--danger);
}
.task-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.task-note svg {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 6px;
}
.task-log-line {
  font-family: var(--font-mono);
  font-size: 12px;
}
.task-finish {
  color: var(--text);
}
.task-diffstat {
  color: var(--muted);
  margin-bottom: 12px;
}
.task-diff {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  max-height: 70vh;
  overflow: auto;
}
.task-diff .d-add {
  color: #3fb950;
}
.task-diff .d-del {
  color: #f85149;
}
.task-diff .d-hunk {
  color: var(--accent);
}
.task-diff .d-file {
  color: var(--text);
  font-weight: 600;
}
:root[data-theme=light] .task-diff .d-add,
:root[data-theme=light] .task-ok {
  color: #1a7f37;
}
:root[data-theme=light] .task-diff .d-del {
  color: #cf222e;
}
@media (max-width: 760px) {
  .task-row,
  .ide-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .task-row small {
    display: none;
  }
  .ide-row [data-ide-open] {
    grid-column: 1/-1;
    justify-self: start;
  }
  .task-continue {
    flex-direction: column;
    align-items: stretch;
  }
}
.task-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  margin: 0 4px;
}
.task-side span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-advanced {
  font-size: 12px;
  color: var(--muted);
}
.task-advanced summary {
  cursor: pointer;
  padding: 4px 0;
}
.task-new .task-advanced label {
  margin-top: 10px;
}
.task-advanced input {
  width: 100%;
}
.task-project-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.task-project-filter select {
  max-width: 100%;
  font-size: 12px;
}
.task-new [data-task-folder-note]:empty {
  display: none;
}
.task-new [data-task-folder-note] small {
  display: block;
  overflow-wrap: anywhere;
}
.task-new select {
  min-width: 0;
  text-overflow: ellipsis;
}

/* public/src/features/companies/style.css */
.company-switcher {
  flex: none;
  max-width: 220px;
  min-width: 0;
}
.company-switcher label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  background: var(--panel);
}
.company-switcher select {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding-right: 18px;
  cursor: pointer;
}
.company-switcher svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.company-switcher svg:last-child {
  position: absolute;
  right: 8px;
  pointer-events: none;
  opacity: .6;
}
.company-new,
.company-edit,
.company-add,
.company-sites {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 12px 0;
}
.company-new label,
.company-edit label,
.company-add label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 220px;
  min-width: 140px;
}
.company-new .form-error,
.company-edit .form-error,
.company-add .form-error,
.company-sites .form-error,
.company-new small {
  flex-basis: 100%;
  margin: 0;
}
.company-layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 20px;
  align-items: start;
}
.company-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.company-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}
.company-list button.active {
  background: var(--selected);
  font-weight: 600;
}
.company-list button span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-detail {
  min-width: 0;
}
.company-detail h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.company-detail h3 {
  margin: 22px 0 6px;
}
.company-sites {
  flex-direction: column;
  align-items: stretch;
}
.company-site-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.company-site-list label,
.company-sites-all {
  display: flex;
  align-items: center;
  gap: 8px;
}
.company-site-list small {
  opacity: .6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-companies {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.member-company {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .company-layout {
    grid-template-columns: 1fr;
  }
  .company-list {
    flex-direction: row;
    overflow-x: auto;
  }
  .company-new label,
  .company-edit label,
  .company-add label {
    flex-basis: 100%;
  }
}
@media (max-width: 760px) {
  .company-switcher {
    max-width: 132px;
  }
  .company-switcher label {
    padding: 4px 6px;
  }
}
/*! Bundled license information:

@xterm/xterm/css/xterm.css:
  (**
   * Copyright (c) 2014 The xterm.js authors. All rights reserved.
   * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
   * https://github.com/chjj/term.js
   * @license MIT
   *
   * Permission is hereby granted, free of charge, to any person obtaining a copy
   * of this software and associated documentation files (the "Software"), to deal
   * in the Software without restriction, including without limitation the rights
   * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   * copies of the Software, and to permit persons to whom the Software is
   * furnished to do so, subject to the following conditions:
   *
   * The above copyright notice and this permission notice shall be included in
   * all copies or substantial portions of the Software.
   *
   * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
   * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
   * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
   * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
   * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   * THE SOFTWARE.
   *
   * Originally forked from (with the author's permission):
   *   Fabrice Bellard's javascript vt100 for jslinux:
   *   http://bellard.org/jslinux/
   *   Copyright (c) 2011 Fabrice Bellard
   *   The original design remains. The terminal itself
   *   has been extended to include xterm CSI codes, among
   *   other features.
   *)
*/