* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }

/* Shared visual primitives. Legacy names are compatibility aliases so existing
   HTML and new DOM components use exactly the same styles and states. */
button, input, textarea, select { font-family:var(--font-sans); }
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:var(--space-half);
}
.ui-button, .btn-plain, .btn-accent, .menu-btn, .copy-btn, .key-btn,
.account-btn, .dd-open, .user-row button, .drawer-tab button, .dd-item-close {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:var(--control-height);
  padding:var(--space-2) var(--space-3);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-surface-raised);
  color:var(--color-text);
  font-size:var(--text-md);
  line-height:var(--leading-normal);
  text-decoration:none;
  cursor:pointer;
  touch-action:manipulation;
}
.ui-button:hover, .btn-plain:hover, .menu-btn:hover, .copy-btn:hover, .key-btn:hover,
.user-row button:hover { border-color:var(--color-border-hover); background:var(--color-surface-hover); }
.ui-button--primary, .btn-accent {
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:var(--color-on-accent);
}
.ui-button--primary:hover, .btn-accent:hover {
  background:var(--color-accent-hover);
  border-color:var(--color-accent-hover);
}
.ui-button--ghost, .account-btn, .dd-open, .drawer-tab button, .dd-item-close {
  background:transparent; border-color:transparent;
}
.ui-button--ghost:hover, .account-btn:hover, .dd-open:hover, .drawer-tab button:hover, .dd-item-close:hover {
  background:var(--color-surface-hover); border-color:transparent;
}
.ui-button--surface {
  background:var(--color-surface); border-color:var(--color-border); color:var(--color-text);
  padding:var(--space-4); line-height:var(--leading-relaxed); border-radius:var(--radius-md);
}
.ui-button--surface:hover { background:var(--color-surface-raised); border-color:var(--color-border-hover); }
.ui-button--icon, .menu-btn, .copy-btn {
  min-width:var(--control-toolbar-width); min-height:var(--control-toolbar-height);
  height:var(--control-toolbar-height); padding:var(--space-1);
  background:transparent;
}
.ui-button--compact, .user-row button {
  min-height:var(--control-compact-height); padding:var(--space-1) var(--space-2); font-size:var(--text-sm);
}
.ui-button:disabled, .btn-plain:disabled, .btn-accent:disabled, .user-row button:disabled {
  opacity:.5; cursor:default;
}
.ui-button--primary:disabled:hover, .btn-accent:disabled:hover { background:var(--color-accent); border-color:var(--color-accent); }
.ui-button:not(.ui-button--primary):disabled:hover, .btn-plain:disabled:hover, .user-row button:disabled:hover {
  background:var(--color-surface-raised); border-color:var(--color-border); color:var(--color-text);
}
.key-btn:active { background:var(--color-accent-subtle); border-color:var(--color-accent); }
.dd-item-close:hover { color:var(--color-danger-text); }

.ui-card, .modal, .auth-card, .user-row {
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-md);
  min-width:0;
}
.ui-card--padded { padding:var(--space-4); }
.ui-card--interactive:hover { border-color:var(--color-border-hover); }
.ui-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.ui-title { color:var(--color-text-strong); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-normal); }
.ui-note { color:var(--color-text-muted); font-size:var(--text-sm); line-height:var(--leading-relaxed); }
.ui-note--danger { color:var(--color-danger-text); }
.ui-note--success { color:var(--color-success-text); }
.ui-icon { width:var(--icon-size); height:var(--icon-size); flex-shrink:0; }
.ui-dot {
  display:inline-block; width:var(--indicator-size); height:var(--indicator-size);
  flex-shrink:0; border-radius:var(--radius-round); background:var(--color-accent); vertical-align:middle;
}
.ui-dot--success { background:var(--color-success); }
.ui-dot--danger { background:var(--color-danger); }
.ui-dot--muted { background:var(--color-text-subtle); }
:where(.ui-field:not([type=checkbox]), .auth-card input, .users-form input:not([type=checkbox]), .core-appform input:not([type=checkbox]), .clip-text) {
  min-height:var(--control-height); padding:var(--space-2) var(--space-3);
  border:var(--border-width) solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-surface-inset); color:var(--color-text);
  font-family:var(--font-sans); font-size:var(--text-md); line-height:var(--leading-normal);
}
.ui-field:focus, :where(.auth-card input, .users-form input, .core-appform input, .clip-text):focus {
  outline:2px solid var(--color-accent); outline-offset:var(--space-half);
}
input[type=checkbox] { accent-color:var(--color-accent); }
.ui-tile-open {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
  width:100%; min-width:0; height:100%; min-height:var(--tile-height); padding:var(--space-4);
  background:transparent; border:0; border-radius:inherit; color:var(--color-text); text-align:left;
  font:inherit; cursor:pointer; touch-action:manipulation;
}
.ui-tile-open .ui-icon { color:var(--color-accent); }
.ui-tile-open strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:100%; overflow-wrap:anywhere; font-size:var(--text-base); font-weight:var(--weight-semibold); }
.ui-tile-open > span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; color:var(--color-text-muted); font-size:var(--text-sm); line-height:var(--leading-normal); overflow-wrap:anywhere; }
.ui-tile-open > *, .ui-button--icon > * { pointer-events:none; }
@media (pointer:coarse) {
  .ui-field, .auth-card input, .users-form input, .core-appform input, textarea, select { font-size:var(--text-input); }
}

.ui-title--large { font-size:var(--text-lg); }
.ui-page-title { color:var(--color-text-strong); font-size:var(--text-title); font-weight:var(--weight-semibold); }

:where(.core-appcheck, .user-admin-toggle) { min-height:var(--control-height); }

.ui-modal-body { flex:1; min-height:0; overflow:auto; padding:var(--space-3) var(--space-4); }
.modal-title, .modal-actions { flex-shrink:0; }

/* Project chat navigation uses the shell palette and shared controls. */
.drawer { background:var(--color-surface); border-right:var(--border-width) solid var(--color-border); box-shadow:var(--shadow-panel); }
.drawer-eyebrow { color:var(--color-text-muted); font-size:var(--text-xs); line-height:var(--leading-normal); margin-bottom:var(--space-1); }
.drawer-heading h2 { font-size:var(--text-title); font-weight:var(--weight-semibold); line-height:var(--leading-normal); }
.drawer-project { color:var(--color-text-muted); font-size:var(--text-sm); }
.drawer-search { color:var(--color-text-muted); }
.drawer-list-heading { color:var(--color-text-muted); font-size:var(--text-xs); font-weight:var(--weight-medium); }
#drawerCount { font-variant-numeric:tabular-nums; }
.drawer-tab { border:var(--border-width) solid transparent; border-radius:var(--radius-lg); }
.drawer-tab:hover { background:var(--color-surface-raised); }
.drawer-tab.active { background:var(--color-accent-subtle); border-color:var(--color-accent); }
.drawer-tab .drawer-tab-open, .drawer-tab .drawer-tab-open:hover { background:transparent; border-color:transparent; }
.drawer-tab-title { font-size:var(--text-base); font-weight:var(--weight-medium); color:var(--color-text-strong); line-height:var(--leading-normal); }
.drawer-tab-more { color:var(--color-text-muted); }
.drawer-tab-actions { background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-panel); }
.drawer-tab-actions .ui-button { font-size:var(--text-sm); }
.drawer-empty { color:var(--color-text-muted); font-size:var(--text-base); line-height:var(--leading-relaxed); }
@media (max-height:500px) {
  .drawer-heading h2 { font-size:var(--text-lg); }
}

.ui-button--danger { color:var(--color-danger-text); background:var(--color-danger-bg); border-color:var(--color-danger-border); }
.ui-button--danger:hover { border-color:var(--color-danger); background:var(--color-danger-bg); }
.project-apps-overlay { background:var(--color-overlay); }
.project-apps-drawer { background:var(--color-surface); border-left:var(--border-width) solid var(--color-border); box-shadow:var(--shadow-panel); }
.project-apps-bar { border-bottom:var(--border-width) solid var(--color-border); }
.project-apps-frame { background:var(--color-bg); }

/* Shared desktop-style tabs for terminal sessions and project applications. */
.ui-button--tab, .tab {
  min-height:var(--control-toolbar-height); padding:var(--space-1) var(--space-2);
  font-size:var(--text-sm); color:var(--color-text-muted);
  background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-sm);
}
.ui-button--tab:hover, .tab:hover { background:var(--color-surface-hover); color:var(--color-text); border-color:var(--color-border-hover); }
.ui-button--tab.active, .tab.active { background:var(--color-accent-subtle); border-color:var(--color-accent); color:var(--color-text-strong); }
.ui-tab-label { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (pointer:coarse) { .ui-button--tab { min-height:var(--control-height); } }