/* Shared customer experience layer. Keep account actions and keyboard states
   consistent across the Workspace, Coding, File Service and Dyno surfaces. */
:root {
  --ui-control-height:40px;
  --ui-radius-sm:7px;
  --ui-radius-md:10px;
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-card-border:var(--line,#d7deea);
  --ui-card-bg:var(--surface,#fff);
  --ui-card-muted-bg:var(--surface-soft,var(--soft,#f7f9fc));
  --ui-status-good:var(--good,var(--green,#087443));
  --ui-status-info:var(--blue,#2563eb);
  --ui-status-warning:var(--accent,var(--orange,#f97316));
  --ui-status-danger:var(--danger,var(--red,#b42318));
}

.button,
button.button {
  min-height:var(--ui-control-height);
  border-radius:var(--ui-radius-sm);
  transition:border-color .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;
}

:is(input,select,textarea) { border-radius:var(--ui-radius-sm); }
:is(.card,.panel,.dashboard-card,.order-panel,.empty-state) { border-radius:var(--ui-radius-md); }
:is(.empty-state,.access-admin-empty,.empty-operation-list) {
  padding:clamp(18px,3vw,28px);
  border:1px dashed var(--ui-card-border);
  color:var(--muted);
  background:var(--ui-card-muted-bg);
  text-align:center;
}
:is(.empty-state,.access-admin-empty,.empty-operation-list) strong { color:var(--ink); }
[aria-busy="true"] { cursor:progress; }
.list-pagination { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-width:0; padding:12px; border:1px dashed var(--ui-card-border,var(--line)); border-radius:var(--ui-radius-sm); background:var(--ui-card-muted-bg,var(--surface-soft)); }
.list-pagination small { color:var(--muted); font-size:11px; }
@media (max-width:560px) { .list-pagination { align-items:stretch; flex-direction:column; }.list-pagination .button { width:100%; } }
.status-pill.good { color:var(--ui-status-good); }
.status-pill.danger,.status-pill.error { color:var(--ui-status-danger); }

.workspace-header,
.coding-header,
.app-header {
  box-sizing:border-box;
  min-height:82px;
}
.workspace-header .brand strong,
.coding-brand strong,
.app-header .brand strong { font-weight:950; letter-spacing:-.02em; }
.workspace-header .brand small,
.coding-brand small,
.app-header .brand small { color:var(--muted); font-size:12px; }
.top-actions,
.coding-header-actions,
.header-tools { align-items:center; gap:9px; }
.ui-icon {
  display:block;
  width:18px;
  height:18px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:3px solid color-mix(in srgb,var(--accent,#f97316) 48%,transparent);
  outline-offset:2px;
}

.skip-link {
  position:fixed;
  z-index:200000;
  top:10px;
  left:10px;
  padding:10px 14px;
  border:2px solid var(--accent,#f97316);
  border-radius:7px;
  color:var(--ink,#111827);
  background:var(--surface,#fff);
  font-weight:900;
  text-decoration:none;
  transform:translateY(-160%);
  transition:transform .15s ease;
}
.skip-link:focus { transform:translateY(0); }

:is(input,select,textarea):focus {
  border-color:color-mix(in srgb,var(--accent,#f97316) 70%,var(--line-strong,#94a3b8));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#f97316) 14%,transparent);
}

.make-choice:has(input:focus-visible) {
  border-color:var(--ui-status-info);
  outline:3px solid color-mix(in srgb,var(--ui-status-info) 22%,transparent);
  outline-offset:2px;
}

.button-with-icon {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.balance-pill {
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  text-decoration:none;
}
.balance-pill .ui-icon { width:17px; height:17px; }

.account-header-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:7px 10px;
  border:1px solid var(--line-strong,var(--line));
  border-radius:8px;
  color:var(--ink);
  background:var(--surface-soft,var(--surface));
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
}
.account-header-link:hover { border-color:var(--accent); color:var(--accent-deep,var(--accent)); }
.account-header-link .ui-icon { width:17px; height:17px; }

.header-user-menu-trigger {
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:5px 10px 5px 6px;
  border:1px solid var(--line-strong,var(--line));
  border-radius:10px;
  color:var(--ink);
  background:var(--surface-soft,var(--surface));
  font:inherit;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.header-user-menu-trigger:hover,.header-user-menu-trigger[aria-expanded="true"] {
  border-color:var(--accent,#f97316);
  color:var(--accent-deep,var(--accent,#f97316));
  background:var(--accent-soft,var(--surface-soft,var(--surface)));
  box-shadow:0 8px 22px rgba(15,23,42,.1);
  transform:translateY(-1px);
}
.header-user-avatar {
  display:grid;
  flex:0 0 34px;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:8px;
  color:var(--accent-deep,var(--accent,#f97316));
  background:var(--accent-soft,var(--surface));
}
.header-user-avatar .ui-icon { width:18px; height:18px; }
.header-user-copy { display:grid; gap:1px; min-width:0; text-align:left; }
.header-user-copy small { color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.055em; line-height:1.1; text-transform:uppercase; }
.header-user-copy strong { max-width:150px; overflow:hidden; color:var(--ink); font-size:13px; font-weight:950; text-overflow:ellipsis; white-space:nowrap; }
.header-user-chevron { width:15px; height:15px; color:var(--muted); transition:transform .16s ease; }
.header-user-menu-trigger[aria-expanded="true"] .header-user-chevron { transform:rotate(180deg); }

.workspace-dialog {
  inset:0;
  width:min(920px,calc(100% - 28px));
  max-height:min(86vh,900px);
  margin:auto;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:12px;
  color:var(--ink);
  background:transparent;
}
.workspace-dialog::backdrop { background:rgba(3,8,13,.72); backdrop-filter:blur(5px); }
.workspace-dialog-card { max-height:86vh; padding:22px; overflow:auto; border:1px solid var(--line-strong,var(--line)); border-top:4px solid var(--accent,#f97316); border-radius:12px; background:var(--surface); box-shadow:0 28px 80px rgba(0,0,0,.36); }
.workspace-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.workspace-dialog-head h2 { margin:0; color:var(--ink); font-size:24px; }
.workspace-dialog-head p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.workspace-dialog .icon-button { display:grid; flex:0 0 38px; width:38px; height:38px; padding:9px; place-items:center; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface-soft,var(--surface)); cursor:pointer; }
.workspace-dialog .icon-button:hover { border-color:var(--accent,#f97316); color:var(--accent-deep,var(--accent,#f97316)); }
.user-menu-dialog {
  position:fixed;
  inset:auto;
  width:min(390px,calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  margin:0;
  z-index:1200;
}
.user-menu-dialog::backdrop { display:none; }
.user-menu-dialog .workspace-dialog-card {
  max-height:min(620px,calc(100vh - 90px));
  padding:16px;
  border-top-width:3px;
  box-shadow:0 18px 52px rgba(0,0,0,.38);
}
.user-menu-dialog .workspace-dialog-head { gap:12px; padding-bottom:12px; }
.user-menu-dialog .workspace-dialog-head h2 { font-size:20px; }
.user-menu-dialog .user-menu-list { margin-top:10px; }
.user-menu-dialog .user-menu-row { min-height:62px; padding:9px 10px; }
.user-menu-head { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; }
.user-menu-head > div { min-width:0; }
.user-menu-avatar { display:grid; width:44px; height:44px; place-items:center; border:1px solid color-mix(in srgb,var(--accent,#f97316) 36%,var(--line)); border-radius:12px; color:var(--accent-deep,var(--accent,#f97316)); background:var(--accent-soft,var(--surface)); }
.user-menu-avatar .ui-icon { width:22px; height:22px; }
.user-menu-list { display:grid; gap:8px; margin-top:14px; }
.user-menu-row { appearance:none; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:72px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--surface-soft,var(--surface)); font:inherit; text-align:left; text-decoration:none; cursor:pointer; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease; }
.user-menu-row:hover { border-color:color-mix(in srgb,var(--accent,#f97316) 55%,var(--line)); color:var(--accent-deep,var(--accent,#f97316)); background:var(--accent-soft,var(--surface)); box-shadow:0 7px 18px rgba(15,23,42,.07); transform:translateY(-1px); }
.user-menu-row:disabled { opacity:.64; cursor:wait; transform:none; }
.user-menu-icon { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); border-radius:9px; color:var(--blue,var(--accent,#f97316)); background:var(--surface); }
.user-menu-icon .ui-icon { width:19px; height:19px; }
.user-menu-copy { display:grid; gap:3px; min-width:0; }
.user-menu-copy strong { color:var(--ink); font-size:14px; font-weight:900; }
.user-menu-copy small { color:var(--muted); font-size:11px; line-height:1.35; }
.user-menu-chevron { width:18px; height:18px; color:var(--muted); }
.user-menu-row:hover :is(.user-menu-copy strong,.user-menu-chevron) { color:var(--accent-deep,var(--accent,#f97316)); }
.user-menu-row.danger .user-menu-icon,.user-menu-row.danger .user-menu-copy strong { color:var(--danger,var(--red,#b42318)); }
.user-menu-switch { position:relative; display:block; width:46px; height:26px; flex:0 0 46px; border:1px solid var(--line-strong,var(--line)); border-radius:999px; background:var(--surface); box-shadow:inset 0 1px 2px rgba(15,23,42,.09); transition:border-color .18s ease,background .18s ease; }
.user-menu-switch i { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--muted); box-shadow:0 2px 5px rgba(15,23,42,.25); transition:transform .18s ease,background .18s ease; }
.user-menu-row.is-active .user-menu-switch { border-color:var(--good,#087443); background:color-mix(in srgb,var(--good,#087443) 78%,#fff); }
.user-menu-row.is-active .user-menu-switch i { background:#fff; transform:translateX(20px); }

.header-preference-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.header-preference-toggle .header-toggle-label { font-size:12px; font-weight:850; }
.header-mini-switch {
  position:relative;
  display:block;
  width:34px;
  height:20px;
  flex:0 0 34px;
  border:1px solid var(--line-strong,var(--line));
  border-radius:999px;
  background:var(--surface-soft,var(--surface));
  transition:border-color .16s ease,background .16s ease;
}
.header-mini-switch i {
  position:absolute;
  top:3px;
  left:3px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--muted);
  transition:transform .16s ease,background .16s ease;
}
.header-preference-toggle.is-active .header-mini-switch { border-color:var(--good,#087443); background:var(--good,#087443); }
.header-preference-toggle.is-active .header-mini-switch i { background:#fff; transform:translateX(14px); }

:is(.module-card,.service-card,.dashboard-card,.customer-active-order-row,.activity-item) {
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}
:is(.module-card,.service-card,.dashboard-card):hover { transform:translateY(-2px); }

@media (max-width:760px) {
  .header-preference-toggle .header-toggle-label { display:none; }
  .account-header-link span { max-width:92px; overflow:hidden; text-overflow:ellipsis; }
  .header-user-copy small { display:none; }
  .header-user-copy strong { max-width:100px; }
  .user-menu-dialog { left:12px !important; width:calc(100vw - 24px) !important; }
}

@media (max-width:1320px) {
  .header-tools .button-with-icon,
  .coding-header-actions .button-with-icon {
    width:42px;
    min-width:42px;
    padding-inline:10px;
  }
  .header-tools .button-with-icon > span,
  .coding-header-actions .button-with-icon > span,
  .header-tools .header-toggle-label,
  .coding-header-actions .header-toggle-label { display:none; }
  .header-tools .account-header-link span,
  .coding-header-actions .account-header-link span {
    max-width:104px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}
/* Shared chat and order-message attachments */
.chat-attachment-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.chat-attachment-field > input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chat-attachment-picker {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px dashed color-mix(in srgb, var(--accent, #71d99b) 48%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel, #111824) 90%, transparent);
  color: var(--text, #f2f5f7);
  cursor: pointer;
}

.chat-attachment-picker:hover,
.chat-attachment-picker:focus-within {
  border-style: solid;
  border-color: var(--accent, #71d99b);
}

.chat-attachment-picker > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #71d99b) 18%, transparent);
  color: var(--accent, #71d99b);
  font-size: 20px;
}

.chat-attachment-picker strong { font-size: 13px; line-height: 1.2; }
.chat-attachment-picker small { color: var(--muted, #96a0ad); font-size: 10px; }

.chat-attachment-selection,
.chat-message-attachments {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.chat-attachment-selection:empty,
.chat-message-attachments:empty { display: none; }

.chat-attachment-selection > span,
.chat-message-attachment {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel, #111824) 82%, transparent);
}

.chat-attachment-selection > span { justify-content: space-between; }
.chat-attachment-selection b,
.chat-message-attachment strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-selection small,
.chat-message-attachment small { color: var(--muted, #96a0ad); white-space: nowrap; }

.chat-message-attachments { margin-top: 8px; }
.chat-message-attachment { color: inherit; text-decoration: none; }
.chat-message-attachment:hover { border-color: var(--accent, #71d99b); }
.chat-message-attachment > span:last-child { display: grid; min-width: 0; }
.chat-message-attachment-preview {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  inline-size: 46px;
  block-size: 42px;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent, #71d99b) 15%, transparent);
  color: var(--accent, #71d99b);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.chat-message-attachment-preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .chat-attachment-picker { width: 100%; }
  .chat-attachment-selection > span { align-items: flex-start; flex-direction: column; gap: 2px; }
}