/* /access/access.css — Access University portal shell.
   Layers on top of the site's design tokens (shared/tokens.css) and hub chrome
   (shared/hub-chrome.css). Adds:
   - A slimmer topbar variant with the Access University wordmark
   - A left sidebar (collapses to a slide-out drawer at ≤1024px)
   - Portal-specific components (assignment cards, class list, roster, chat)
   - Community Hub 3-panel layout
   - Shared tab system, status badges, stats bar, card urgency variants */

:root{ --au-topbar: var(--topbar-h, 60px); }
@media (max-width:520px){ :root{ --au-topbar: calc(var(--topbar-h, 60px) + env(safe-area-inset-top, 0px)); } }

/* Prevent iOS font inflation when rotating the device */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- Portal-specific layout ---------- */
.au-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  min-height:calc(100vh - var(--au-topbar));
  min-height:calc(100dvh - var(--au-topbar));
}

.au-sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:var(--s-4) var(--s-3);
  display:flex;flex-direction:column;gap:var(--s-1);
  position:sticky;top:var(--au-topbar);align-self:start;
  height:calc(100vh - var(--au-topbar));
  height:calc(100dvh - var(--au-topbar));
  overflow-y:auto;
}

.au-wordmark{
  display:flex;align-items:center;gap:10px;
  padding:0 var(--s-2) var(--s-4);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--s-3);
}
.au-wordmark-badge{
  width:32px;height:32px;flex-shrink:0;
  border-radius:8px;
  background:var(--accent);color:var(--n0);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:600;font-size:15px;letter-spacing:.5px;
  overflow:hidden;
}
.au-wordmark-badge.au-wordmark-badge-img{background:var(--surface-2);padding:2px}
.au-wordmark-badge.au-wordmark-badge-img img{width:100%;height:100%;object-fit:contain;display:block}

/* Topbar glyph slot when it holds a university logo image */
.hub-brand-mark:has(.au-topbar-logo-slot),
.hub-brand-mark:has(.au-topbar-logo-slot):hover,
.hub-brand-mark:has(.au-topbar-logo-slot):focus,
.hub-brand-mark:has(.au-topbar-logo-slot):active{
  background:transparent !important;background-color:transparent !important;
  border-color:transparent !important;box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.hub-brand-mark .hub-brand-glyph.au-topbar-logo-slot{
  width:44px !important;height:44px !important;
  padding:0 !important;border:0 !important;border-radius:0 !important;
  background:transparent !important;background-color:transparent !important;
  color:transparent;
  overflow:visible;box-shadow:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.hub-brand-mark .hub-brand-glyph.au-topbar-logo-slot .au-topbar-logo-img{
  width:100%;height:100%;object-fit:contain;display:block;
  background:transparent !important;background-color:transparent !important;
}
@media (max-width:640px){
  .hub-brand-mark .hub-brand-glyph.au-topbar-logo-slot{
    width:56px !important;height:56px !important;
  }
}
@media (max-width:420px){
  .hub-brand-mark .hub-brand-glyph.au-topbar-logo-slot{
    width:52px !important;height:52px !important;
  }
}

.au-wordmark-text{
  display:flex;flex-direction:column;line-height:1.1;
}
.au-wordmark-name{
  font-family:var(--font-serif);font-weight:600;color:var(--ink);font-size:15px;
}
.au-wordmark-sub{
  font-size:11px;color:var(--ink-3);letter-spacing:.3px;text-transform:uppercase;margin-top:2px;
}

/* ---------- Sidebar navigation ---------- */
.au-nav-section{
  font-size:11px;color:var(--ink-3);letter-spacing:.6px;text-transform:uppercase;
  padding:var(--s-3) var(--s-2) var(--s-1);font-weight:600;
}

.au-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);text-decoration:none;font-size:14px;
  transition:background var(--dur-1),color var(--dur-1);
  border-left:2px solid transparent;
}
.au-nav-item:hover{background:var(--surface-2);color:var(--ink)}
.au-nav-item.active{
  background:var(--accent-tint);color:var(--accent);font-weight:500;
  border-left-color:var(--accent);
}
.au-nav-item-ic{
  width:20px;text-align:center;flex-shrink:0;
  font-size:14px;color:var(--ink-3);
}
.au-nav-item.active .au-nav-item-ic{color:var(--accent)}
.au-nav-item-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-nav-item-badge{
  background:var(--accent);color:var(--n0);
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--r-pill);
}
.au-nav-item-badge--red{
  background:#dc2626;color:#fff;
}

/* Tools accordion */
.au-nav-tools-toggle{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);text-decoration:none;font-size:14px;
  transition:background var(--dur-1),color var(--dur-1);
  border-left:2px solid transparent;
  background:none;border-top:none;border-right:none;border-bottom:none;
  width:100%;cursor:pointer;font-family:inherit;
}
.au-nav-tools-toggle:hover{background:var(--surface-2);color:var(--ink)}
.au-nav-tools-toggle-caret{
  margin-left:auto;font-size:10px;color:var(--ink-3);
  transition:transform var(--dur-2);
}
.au-nav-tools-toggle.open .au-nav-tools-toggle-caret{transform:rotate(180deg)}
.au-nav-tools-list{
  display:none;flex-direction:column;gap:2px;padding-left:12px;
}
.au-nav-tools-list.open{display:flex}

/* Sub-items (tools list, community sub-links) */
.au-nav-sub-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:var(--r-sm);
  color:var(--ink-3);text-decoration:none;font-size:12px;
  transition:background var(--dur-1),color var(--dur-1);
}
.au-nav-sub-item:hover{background:var(--surface-2);color:var(--ink-2)}

.au-nav-univ-picker{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:8px 10px;
  font-size:12px;color:var(--ink);
  width:100%;cursor:pointer;
  display:flex;align-items:center;gap:8px;justify-content:space-between;
  margin-bottom:var(--s-2);
}
.au-nav-univ-picker:hover{background:var(--surface-3)}
.au-nav-univ-picker-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* ---------- Portal main content area ---------- */
.au-main{
  padding:var(--s-6) var(--s-6);
  max-width:100%;overflow-x:hidden;
}
.au-main-header{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  margin-bottom:var(--s-5);flex-wrap:wrap;
}
.au-page-title{
  font-family:var(--font-serif);
  font-size:28px;font-weight:600;color:var(--ink);line-height:1.15;
  margin:0;
}
.au-page-sub{color:var(--ink-3);font-size:14px;margin-top:6px}
.au-page-actions{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* Breadcrumb */
.au-breadcrumb{
  font-size:13px;color:var(--ink-3);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
  margin-bottom:var(--s-2);
}
.au-breadcrumb:hover{color:var(--ink)}

/* Section label (university group headers, etc.) */
.au-section-label{
  font-size:11px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.5px;font-weight:600;
  padding:20px 0 8px;
}

/* ---------- Stats bar ---------- */
.au-stat-bar{
  display:flex;gap:var(--s-3);flex-wrap:wrap;
  margin-bottom:var(--s-5);
}
.au-stat-item{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px 16px;
  flex:1;min-width:100px;
}
.au-stat-item-val{
  font-family:var(--font-serif);font-size:24px;font-weight:600;
  color:var(--ink);line-height:1;
}
.au-stat-item-lbl{
  font-size:11px;color:var(--ink-3);margin-top:4px;
  text-transform:uppercase;letter-spacing:.3px;
}

/* ---------- Cards / list items ---------- */
.au-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s-4);
  transition:border-color var(--dur-1),box-shadow var(--dur-1);
  border-left:3px solid transparent;
}
.au-card:hover{border-color:var(--border-strong)}
.au-card-title{
  font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--ink);margin:0 0 4px;
  overflow-wrap:anywhere;
}
.au-card-sub{font-size:13px;color:var(--ink-3);margin:0}
.au-card-meta{font-size:12px;color:var(--ink-3);margin-top:var(--s-2);display:flex;gap:var(--s-3);flex-wrap:wrap}
.au-card-meta > span{display:inline-flex;align-items:center;gap:4px}
.au-card-arrow{color:var(--ink-3);font-size:14px;margin-left:auto;flex-shrink:0}

/* Card urgency variants — left border color indicates due-date urgency */
.au-card--urgent,.au-card-urgent{border-left-color:#dc2626}  /* due within 24h */
.au-card--soon{border-left-color:#d97706}     /* due within 7 days */
.au-card--highlight{
  border-left-color:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.07);
}
/* Neutral: reset to default (no left indicator) */
.au-card--neutral{border-left-color:transparent}

.au-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.au-list{display:flex;flex-direction:column;gap:var(--s-2)}
.au-list .au-card{padding:var(--s-3) var(--s-4)}

/* ---------- Horizontal-scroll wrappers (wide tables, dense rows) ---------- */
.au-scroll-x,.au-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.au-table-wrap>.au-admin-table{min-width:560px}

/* ---------- Empty state ---------- */
.au-empty{
  text-align:center;padding:var(--s-8) var(--s-4);
  color:var(--ink-3);
  border:1px dashed var(--border);
  border-radius:var(--r-lg);
}
.au-empty-icon{font-size:48px;color:var(--ink-muted);margin-bottom:var(--s-3);opacity:.4}
.au-empty-title{font-family:var(--font-serif);font-size:20px;color:var(--ink);margin-bottom:4px;font-weight:500}
.au-empty-sub{font-size:14px;line-height:1.5;max-width:400px;margin:0 auto}

/* ---------- Tab system (shared — used by class.html, community hub, etc.) ---------- */
.au-tabs{
  display:flex;gap:4px;
  border-bottom:1px solid var(--border);
  margin-bottom:var(--s-5);
  overflow-x:auto;
  scrollbar-width:none;
}
.au-tabs::-webkit-scrollbar{display:none}
.au-tabs--flush{margin-bottom:0}

.au-tab{
  padding:10px 16px;
  font-size:14px;font-weight:500;
  color:var(--ink-3);
  border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;
  background:none;
  border-left:none;border-right:none;border-top:none;
  font-family:inherit;
  transition:color var(--dur-1),border-color var(--dur-1);
}
.au-tab:hover{color:var(--ink)}
.au-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.au-tab:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

.au-tabpanel{display:none}
.au-tabpanel.active{display:block}

/* ---------- Status badges ---------- */
.au-status-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);
}
.au-status-badge.graded{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.au-status-badge.submitted{background:#dcfce7;color:#166534;border-color:transparent}
.au-status-badge.missing{background:#fee2e2;color:#991b1b;border-color:transparent}
.au-status-badge.not-started{background:var(--surface-2);color:var(--ink-3);border-color:var(--border)}
.au-status-badge.returned{background:var(--accent-tint);color:var(--accent);border-color:transparent}

body.theme-dark .au-status-badge.submitted{background:#14532d;color:#86efac}
body.theme-dark .au-status-badge.missing{background:#7f1d1d;color:#fca5a5}

/* ---------- Chips / role pills ---------- */
.au-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--border);
}
.au-chip-accent{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.au-chip-teacher{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.au-chip-student{background:var(--surface-2);color:var(--ink-2)}
.au-chip-admin{background:#f0e7d6;color:#7a5920;border-color:transparent}
.au-chip-warn{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent}
.au-chip-success{background:#d1fae5;color:#065f46;border-color:transparent}

/* ---------- Buttons (extend site) ---------- */
.au-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;
  transition:background var(--dur-1),border-color var(--dur-1);
  text-decoration:none;
}
.au-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.au-btn-primary{background:var(--accent);color:var(--n0);border-color:var(--accent)}
.au-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--n0)}
.au-btn-sm{padding:5px 10px;font-size:12px}
.au-btn-ghost{background:transparent;border-color:transparent}
.au-btn-ghost:hover{background:var(--surface-2)}

/* Shared status colors — success / danger (theme-aware via tokens) */
.au-btn-danger{border-color:var(--danger);color:var(--danger-ink);background:var(--danger-soft)}
.au-btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.au-chip-info{background:var(--accent-tint);color:var(--accent)}
.au-chip-ok{background:var(--ok-soft);color:var(--ok-ink)}
.au-chip-bad{background:var(--danger-soft);color:var(--danger-ink)}

/* ---------- Forms ---------- */
.au-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-3)}
.au-field label{font-size:12px;color:var(--ink-2);font-weight:500}
.au-input,.au-textarea,.au-select{
  padding:9px 12px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink);font-size:14px;font-family:inherit;
  width:100%;
}
.au-input:focus,.au-textarea:focus,.au-select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.au-textarea{min-height:80px;resize:vertical;line-height:1.5}
.au-input-hint{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ---------- Accessibility — keyboard focus rings ---------- */
/* Accent outline for keyboard users on interactive AU elements.
   Existing :focus box-shadows on inputs are intentionally preserved. */
.au-btn:focus-visible,
.au-btn-danger:focus-visible,
.au-tab:focus-visible,
.au-nav-item:focus-visible,
.au-nav-sub-item:focus-visible,
.au-nav-tools-toggle:focus-visible,
.au-nav-univ-picker:focus-visible,
.au-community-nav-item:focus-visible,
.au-back-btn:focus-visible,
.au-breadcrumb:focus-visible,
.au-chat-item:focus-visible,
.au-reaction-btn:focus-visible,
.au-att-status:focus-visible,
.au-tool-btn:focus-visible,
.au-tool-open-btn:focus-visible,
.au-tool-collapse-btn:focus-visible,
.cm-msg-reply-btn:focus-visible,
.cm-msg-options-btn:focus-visible,
.cm-reaction-emoji:focus-visible,
.cm-reaction-pill:focus-visible,
.cm-conv-leave-btn:focus-visible,
.cm-reply-preview-close:focus-visible,
.cm-recipient-chip button:focus-visible,
.cm-opts-edit:focus-visible,
.cm-opts-delete:focus-visible,
.cm-mention-option:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- Modal ---------- */
.au-modal-backdrop{
  position:fixed;inset:0;background:rgba(20,19,16,.5);
  z-index:9995;display:none;align-items:center;justify-content:center;padding:var(--s-4);
  overscroll-behavior:contain;
}
.au-modal-backdrop.open{display:flex}
.au-modal{
  background:var(--surface);border-radius:var(--r-lg);
  width:100%;max-width:480px;
  padding:var(--s-5);
  box-shadow:var(--shadow-3);
  max-height:90vh;overflow-y:auto;
}
.au-modal-title{font-family:var(--font-serif);font-size:20px;margin:0 0 var(--s-2);color:var(--ink);font-weight:600}
.au-modal-actions{display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-4)}

/* ---------- Discussion / chat threads ---------- */
.au-thread{display:flex;flex-direction:column;gap:var(--s-3)}
.au-post{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
}
.au-post-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.au-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--accent-tint);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:600;color:var(--accent);font-size:13px;flex-shrink:0;
  overflow:hidden;
}
.au-avatar img{width:100%;height:100%;object-fit:cover}
.au-post-name{font-size:13px;font-weight:600;color:var(--ink)}
.au-post-meta{font-size:11px;color:var(--ink-3)}
.au-post-body{font-size:14px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.au-post-replies{margin-left:var(--s-5);border-left:2px solid var(--border);padding-left:var(--s-3);margin-top:var(--s-2);display:flex;flex-direction:column;gap:var(--s-2)}

/* Post reaction bar */
.au-reaction-bar{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s-2);
}
.au-reaction-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--ink-3);font-size:12px;cursor:pointer;
  transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1);
  font-family:inherit;
}
.au-reaction-btn:hover{background:var(--accent-tint);color:var(--accent);border-color:transparent}
.au-reaction-btn.active{background:var(--accent-tint);color:var(--accent);border-color:transparent;font-weight:600}
.au-reaction-count{font-size:11px}

/* ---------- Chat (Chambers) ---------- */
.au-chat{
  display:grid;grid-template-columns:280px 1fr;
  border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;height:calc(100vh - 200px);min-height:400px;
}
.au-chat-list{
  border-right:1px solid var(--border);overflow-y:auto;
  background:var(--surface);
}
.au-chat-item{
  display:flex;align-items:center;gap:10px;
  padding:12px var(--s-3);border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--dur-1);
}
.au-chat-item:hover{background:var(--surface-2)}
.au-chat-item.active{background:var(--accent-tint)}
.au-chat-item-body{flex:1;min-width:0}
.au-chat-item-name{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-chat-item-snippet{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.au-chat-main{display:flex;flex-direction:column;background:var(--surface-2)}
.au-chat-header{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;gap:10px}
.au-chat-messages{flex:1;overflow-y:auto;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.au-chat-message{
  max-width:70%;padding:10px 14px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  font-size:14px;line-height:1.5;
  align-self:flex-start;
}
.au-chat-message.mine{background:var(--accent);color:var(--n0);border-color:var(--accent);align-self:flex-end}
.au-chat-message-meta{font-size:10px;color:var(--ink-3);margin-top:3px}
.au-chat-message.mine .au-chat-message-meta{color:rgba(255,255,255,.75)}
.au-chat-input{padding:var(--s-3);border-top:1px solid var(--border);display:flex;gap:8px;background:var(--surface)}
.au-chat-input textarea{flex:1;min-height:40px;max-height:120px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-md);font-family:inherit;font-size:14px;resize:none;background:var(--surface);color:var(--ink)}

/* ---------- Community Hub layout ---------- */
.au-community-shell{
  display:grid;
  grid-template-columns:220px 1fr 440px;
  height:calc(100vh - var(--au-topbar));
  height:calc(100dvh - var(--au-topbar));
  overflow:hidden;
}
.au-community-panel{
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.au-community-panel:last-child{
  border-right:none;
  border-left:1px solid var(--border);
}
.au-community-feed{
  flex:1;overflow-y:auto;
  background:var(--surface-2);
}
.au-community-header{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.au-community-header-title{
  font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--ink);
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Left panel inner sections */
.au-community-nav{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s-3) var(--s-2);
  border-bottom:1px solid var(--border);
}
.au-community-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14px;cursor:pointer;
  transition:background var(--dur-1),color var(--dur-1);
  background:none;border:none;font-family:inherit;width:100%;text-align:left;
  border-left:2px solid transparent;
}
.au-community-nav-item:hover{background:var(--surface-2);color:var(--ink)}
.au-community-nav-item.active{
  background:var(--accent-tint);color:var(--accent);font-weight:500;
  border-left-color:var(--accent);
}

/* Online now section */
.au-community-online{
  padding:var(--s-3) var(--s-3);
  margin-top:auto;
  border-top:1px solid var(--border);
}
.au-community-online-title{
  font-size:10px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.5px;font-weight:600;margin-bottom:var(--s-2);
}
.au-community-online-avatars{
  display:flex;flex-wrap:wrap;gap:6px;
}
.au-community-online-avatar{
  position:relative;cursor:pointer;
}
.au-community-online-avatar .au-avatar{width:28px;height:28px;font-size:11px}
.au-presence-dot{
  position:absolute;bottom:0;right:0;
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;border:2px solid var(--surface);
}

/* Class picker in community left panel */
.au-community-class-picker{
  padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--border);
}
.au-community-class-picker select{
  width:100%;padding:7px 10px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--ink);font-size:13px;font-family:inherit;
}
.au-community-class-picker select:focus{outline:none;border-color:var(--accent)}

/* Right detail panel (drawer on tablet) */
.au-community-detail{
  display:flex;flex-direction:column;overflow:hidden;
}
.au-community-detail-body{
  flex:1;overflow-y:auto;padding:var(--s-4);
}
.au-community-detail-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;color:var(--ink-3);text-align:center;padding:var(--s-4);
  font-size:13px;
}

/* Detail panel header: allow title to wrap, top-align close button */
.au-community-detail .au-community-header{
  align-items:flex-start;
}
.au-community-detail .au-community-header-title{
  white-space:normal;
  font-size:13px;
  line-height:1.4;
}

/* Question card shown at top of thread body */
.cm-thread-question-card{
  margin:var(--s-3) var(--s-3) var(--s-2);
  padding:var(--s-3) var(--s-4);
  border-left:3px solid var(--accent);
  background:var(--accent-tint);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.cm-thread-question-card-text{
  font-family:var(--font-serif);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  line-height:1.45;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:anywhere;
}
.cm-thread-question-card-meta{
  font-size:11px;
  color:var(--ink-3);
  margin-top:4px;
}

/* Reply composer pinned at bottom of thread panel */
.cm-reply-box{
  flex-shrink:0;
  padding:var(--s-3) var(--s-4);
  border-top:1px solid var(--border);
  background:var(--surface);
}
.cm-reply-box textarea{
  width:100%;
  min-height:72px;
  resize:vertical;
  font-family:inherit;
  font-size:14px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-2);
  color:var(--ink);
  box-sizing:border-box;
  display:block;
}
.cm-reply-box textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--focus);
}
.cm-reply-box-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}

/* Scrollable thread post list inside detail panel */
.cm-detail-thread{
  flex:1;
  overflow-y:auto;
  padding:var(--s-3);
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  -webkit-overflow-scrolling:touch;
}

/* Roster row (class.html, community hub) */
.au-roster-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.au-roster-row:last-child{border-bottom:none}

/* ---------- Attendance status buttons ---------- */
.au-att-status{
  padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--surface-2);color:var(--ink-3);
  font-family:inherit;font-size:12px;cursor:pointer;
  transition:all var(--dur-1);
}
.au-att-status.present{background:#dcfce7;color:#166534;border-color:transparent;font-weight:600}
.au-att-status.absent{background:#fee2e2;color:#991b1b;border-color:transparent;font-weight:600}
.au-att-status.excused{background:#fef9c3;color:#713f12;border-color:transparent;font-weight:600}

/* ---------- Portal-only topbar variant ---------- */
.au-topbar-brand{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--r-md);
  text-decoration:none;
}
.au-topbar-brand:hover{background:var(--surface-2)}
.au-topbar-brand-badge{
  width:24px;height:24px;border-radius:6px;
  background:var(--accent);color:var(--n0);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:600;font-size:12px;
}
.au-topbar-brand-text{
  font-family:var(--font-serif);font-weight:600;color:var(--ink);font-size:15px;
}
/* Center topbar brand when it holds a university logo image */
.au-topbar-brand-badge.au-topbar-logo-slot{
  background:transparent !important;background-color:transparent !important;
  padding:0 !important;border-radius:6px;
  overflow:hidden;box-shadow:none !important;
}
.au-topbar-brand-badge.au-topbar-logo-slot .au-topbar-logo-img{
  width:100%;height:100%;object-fit:contain;display:block;
  background:transparent !important;background-color:transparent !important;
}
.hub-tb-c .au-topbar-brand{min-width:0;max-width:100%}
.hub-tb-c .au-topbar-brand-text{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:42vw;min-width:0;
}

/* ---------- Unified institutional topbar (all signed-in roles) ----------
   Rendered by renderUnifiedTopbar() in access-shell.js. Higher specificity
   (an extra class on each selector) than the older logo rules above so it
   wins even though those rules use !important. */
.au-tb-brand.hub-brand-mark{
  display:inline-flex;align-items:center;gap:10px;
  min-width:0;max-width:min(52vw,420px);
  padding:4px 10px;
}
.au-tb-logo.hub-brand-glyph{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  border:0;border-radius:0;background:transparent;
  color:var(--accent);overflow:visible;
}
.au-tb-logo .au-topbar-logo-img{
  width:100%;height:100%;object-fit:contain;display:block;
  background:transparent;
}
/* 36px slot overrides the older 44/56/52px !important logo rules. */
.hub-brand-mark .hub-brand-glyph.au-tb-logo.au-topbar-logo-slot{
  width:36px !important;height:36px !important;
  padding:0 !important;border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;
  overflow:visible !important;
}
.au-tb-brand-text{
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;line-height:1.1;
}
.au-tb-univ.hub-brand-name{
  font-family:var(--font-serif);font-weight:600;color:var(--ink);
  font-size:15px;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:min(34vw,280px);min-width:0;
}
.au-tb-sub{
  font-family:var(--font-sans);font-weight:600;
  font-size:10px;line-height:1.2;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;
}
.hub-tb-c.au-tb-center{gap:10px}
.au-tb-divider{
  display:inline-block;width:1px;height:18px;flex-shrink:0;
  background:var(--border);
}
.au-tb-portal{
  font-family:var(--font-sans);font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
/* Quiet the center label on narrower viewports. */
@media (max-width:900px){
  .au-tb-center .au-tb-divider,
  .au-tb-center .au-tb-portal{display:none}
}
@media (max-width:640px){
  .au-tb-brand.hub-brand-mark{gap:8px;padding:2px 6px;min-height:44px}
  .au-tb-logo.hub-brand-glyph{width:34px;height:34px}
  .hub-brand-mark .hub-brand-glyph.au-tb-logo.au-topbar-logo-slot{
    width:34px !important;height:34px !important;
  }
  .au-tb-univ.hub-brand-name{font-size:14px;max-width:min(40vw,200px)}
  .au-tb-sub{display:none}
}

/* ---------- Mobile + Tablet: slide-out side drawer nav ---------- */

/* ── Menu toggle button (visible on ≤1024px, hidden on desktop) ── */
.au-menu-btn{display:none}
@media (max-width:1024px){
  .au-menu-btn{
    display:inline-flex;align-items:center;justify-content:center;
    /* Inherits hub-icon-btn sizing (40×40px) from hub-chrome.css */
    font-size:18px;
    flex-shrink:0;
  }
}

/* ── Nav backdrop (injected by access-shell.js) ── */
#auNavBackdrop{
  display:none;
  position:fixed;
  left:0;top:var(--au-topbar);right:0;bottom:0;
  background:rgba(0,0,0,.4);
  z-index:599;
}
body.au-sidebar-open #auNavBackdrop{display:block}

/* ── Tablet & mobile (≤1024px): slide-out drawer ── */
@media (max-width:1024px){
  .au-shell{grid-template-columns:1fr}
  .au-sidebar{
    position:fixed;
    left:0;top:var(--au-topbar);bottom:0;
    width:min(280px,85vw);
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:600;
    padding:var(--s-4) var(--s-3);
    gap:var(--s-1);
    flex-direction:column;
    overflow-y:auto;
    border-right:1px solid var(--border);
    box-shadow:4px 0 24px rgba(0,0,0,.18);
  }
  body.au-sidebar-open .au-sidebar{transform:translateX(0)}

  /* Restore all desktop nav elements inside the drawer */
  .au-wordmark,.au-nav-section,.au-nav-univ-picker,.au-nav-tools-list{display:revert}
  .au-nav-item{
    flex-direction:row;padding:8px 10px;
    font-size:14px;gap:10px;
    border-left:2px solid transparent;border-bottom:none;
    justify-content:flex-start;align-items:center;
  }
  .au-nav-item.active{border-left-color:var(--accent);border-bottom-color:transparent}
  .au-nav-item-ic{font-size:14px;width:20px}
  .au-nav-item-lbl{font-size:14px;letter-spacing:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .au-nav-item-badge{display:inline-flex}
  .au-nav-tools-toggle{
    flex-direction:row;padding:8px 10px;font-size:14px;gap:10px;
    border-left:2px solid transparent;justify-content:flex-start;align-items:center;
  }
  .au-nav-tools-toggle-caret{display:inline}

  /* Main content — full width, no bottom padding offset */
  .au-main{padding:var(--s-4) var(--s-4) var(--s-4)}

  /* Grid: two columns on tablet */
  .au-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

  /* Modals */
  .au-modal{max-width:calc(100vw - 48px);max-height:calc(100vh - 80px)}
  .au-page-title{font-size:22px}

  /* ── ≤768px refinements: tighter spacing, single-column chat,
        community detail overlay, modal bottom-sheet ── */
  @media (max-width:768px){
    /* Drawer a touch wider on small phones */
    .au-sidebar{width:min(280px,88vw)}
    .au-nav-item{min-width:unset;max-width:unset}

    /* Main content — standard padding (nav is a slide-out drawer, no bottom nav) */
    .au-main{
      padding:var(--s-3) var(--s-3);
    }

    /* Chat: account for topbar only */
    .au-chat{grid-template-columns:1fr;height:calc(100dvh - var(--au-topbar));min-height:300px}
    .au-chat-list{display:none}
    .au-chat.show-list .au-chat-list{display:block;grid-column:1/-1}
    .au-chat.show-list .au-chat-main{display:none}

    /* Community Hub: single column — height/overflow managed by community/index.html embedded style */
    .au-community-shell{
      grid-template-columns:1fr;
    }
    .au-community-panel:first-child{display:none}
    /* Detail panel: hidden off-screen right; slides in as full-width overlay when .open */
    .au-community-panel:last-child{
      display:flex;
      flex-direction:column;
      position:fixed;
      top:var(--au-topbar);left:0;right:0;bottom:0;
      z-index:500;
      transform:translateX(100%);
      transition:transform var(--dur-3,.25s) ease;
      background:var(--surface,#fff);
      overflow:hidden;
    }
    .au-community-panel:last-child.open{transform:translateX(0)}
    .au-community-feed{overflow-y:auto}

    /* Typography & layout */
    .au-modal{
      max-width:calc(100vw - 16px);
      max-height:calc(100dvh - var(--au-topbar));
      border-radius:var(--r-lg) var(--r-lg) 0 0;
      position:fixed;left:8px;right:8px;bottom:0;top:auto;
      margin:0;
      animation:au-modal-up .25s ease-out;
    }
    @keyframes au-modal-up{from{transform:translateY(20px);opacity:.8}to{transform:none;opacity:1}}
    .au-modal-backdrop{align-items:flex-end}
    .au-grid{grid-template-columns:1fr}

    /* Cards: tighter on mobile */
    .au-card{padding:var(--s-3)}
    .au-stat-bar{flex-wrap:wrap;gap:var(--s-2)}
    .au-stat-item{min-width:calc(50% - var(--s-2))}

    /* Tabs: scroll */
    .au-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
    .au-tabs::-webkit-scrollbar{display:none}

    /* Breadcrumb: compact */
    .au-breadcrumb{font-size:11px}

    /* Page actions: full width stack */
    .au-page-actions{flex-direction:column;align-items:stretch}
    .au-page-actions .au-btn{justify-content:center}

    /* Form fields — prevent zoom on focus (iOS) */
    .au-input,.au-textarea,.au-select{font-size:16px}
  }
}

/* Community Hub tablet: right panel collapses to drawer */
@media (max-width:1200px) and (min-width:901px){
  .au-community-shell{grid-template-columns:200px 1fr}
  .au-community-panel:last-child{
    position:fixed;top:var(--au-topbar);right:0;bottom:0;
    width:300px;z-index:200;
    box-shadow:var(--shadow-3);
    transform:translateX(100%);
    transition:transform var(--dur-3);
  }
  .au-community-panel:last-child.open{transform:translateX(0)}
}

@media (max-width:520px){
  .au-main{padding:var(--s-3) var(--s-2) calc(var(--s-4) + env(safe-area-inset-bottom,0))}
  .au-card{padding:var(--s-2) var(--s-3)}
  .au-modal-title{font-size:18px}
  .au-wordmark-name{font-size:14px}
  .au-chat-message{max-width:90%}
  .au-page-title{font-size:20px}
  .au-page-sub{font-size:13px}
}

@media (max-width:380px){
  .au-page-title{font-size:18px}
  .au-modal{padding:var(--s-3)}
  .au-section-label{font-size:10px}
}

/* Touch targets — all pointer:coarse devices */
@media (pointer:coarse){
  .au-btn{min-height:44px;padding-top:10px;padding-bottom:10px}
  .au-nav-item{min-height:44px}
  .au-chat-item{min-height:56px}
  .au-input,.au-textarea,.au-select{font-size:16px}
  .au-chat-input textarea{font-size:16px}
  /* Comment button — bump 36 → 44 to meet touch guidance */
  .au-reaction-btn{min-height:44px;min-width:44px}
  /* Back button */
  .au-back-btn{min-height:44px}
  /* Roster rows */
  .au-roster-row{min-height:44px}
  /* Tab items */
  .au-tab{min-height:44px;display:inline-flex;align-items:center}
  /* Gradebook cells (body prefix wins over page-embedded .gb-cell rules) */
  body .gb-cell{min-height:44px}
  /* Attendance status pills */
  .au-att-status{min-height:44px}
  /* Community left-panel nav */
  .au-community-nav-item{min-height:44px}

  /* --- Mobile hardening: extend the 16px iOS-zoom rule to missed fields --- */
  /* Defensive list: targets selectors defined in access pages / other sub-trees;
     harmless when a selector does not match. min-height:44px for comfortable touch. */
  .au-community-class-picker select,
  .cm-msgs-search-input,
  .cm-flag-textarea,
  .cm-edit-textarea,
  .cm-msgs-input-bar textarea,
  .cm-detail-chat-input textarea,
  .cm-mobile-classbar select,
  .gb-pr-comment,
  .au-modal input:not([type="checkbox"]):not([type="radio"]),
  .au-modal textarea,
  .au-modal select,
  .au-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="image"]),
  .au-shell textarea,
  .au-shell select{font-size:16px;min-height:44px}

  /* --- Mobile hardening: extend 44px tap targets to undersized controls --- */
  .cm-msg-reply-btn,
  .cm-msg-options-btn,
  .cm-reaction-emoji,
  .cm-conv-leave-btn,
  .cm-reply-preview-close,
  .cm-recipient-chip button,
  .au-flag-btn,
  .au-announce-strip-dismiss,
  .qc-modal-close,
  .cm-filter-btn,
  .cm-opts-edit,
  .cm-opts-delete,
  .cm-mention-option{min-height:44px}
  /* Icon-only controls also need a 44px horizontal hit area */
  .cm-msg-options-btn,
  .cm-reaction-emoji,
  .cm-reply-preview-close,
  .au-announce-strip-dismiss,
  .qc-modal-close{min-width:44px}
}

/* =========================================================
   Mobile hardening pass (≤768px phone)
   Additive to the ≤768 / pointer:coarse rules above.
   ========================================================= */
@media (max-width:768px){
  /* Extend the 16px iOS-zoom rule to the same defensive selector list */
  .au-community-class-picker select,
  .cm-msgs-search-input,
  .cm-flag-textarea,
  .cm-edit-textarea,
  .cm-msgs-input-bar textarea,
  .cm-detail-chat-input textarea,
  .cm-mobile-classbar select,
  .gb-pr-comment,
  .au-modal input:not([type="checkbox"]):not([type="radio"]),
  .au-modal textarea,
  .au-modal select,
  .au-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="image"]),
  .au-shell textarea,
  .au-shell select{font-size:16px}

  /* Keep drawer + bottom-sheet controls clear of the home indicator */
  .au-sidebar{padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom, 0px))}
  .au-modal{padding-bottom:calc(var(--s-5) + env(safe-area-inset-bottom, 0px))}
}

/* Sticky table headers: fix the offset to clear the real topbar height.
   These table classes opt into position:sticky in their own pages; access.css
   loads on those pages, so this override corrects their top:0 offset.
   (No position is forced here, so non-sticky tables are unaffected.) */
@media (max-width:1024px){
  /* body prefix raises specificity above the equal page-embedded .X-table th
     rules, so the corrected offset wins regardless of stylesheet order. */
  body .au-admin-table th,
  body .pw-table th,
  body .lb-table th,
  body .it-table th{top:var(--au-topbar);z-index:5}
  /* overflow:clip avoids creating a scroll container that would break
     position:sticky for the headers above; overflow:hidden is the fallback
     for browsers without overflow:clip support. */
  .au-main{overflow-x:hidden;overflow-x:clip}
}

/* ---------- Dark mode ---------- */
body.theme-dark .au-avatar{background:rgba(122,31,43,.25);color:#e0a5ad}
body.theme-dark .au-chip-admin{background:#3a2f18;color:#d4b874}
body.theme-dark .au-att-status.present{background:#064e3b;color:#6ee7b7}
body.theme-dark .au-att-status.absent{background:#7f1d1d;color:#fca5a5}
body.theme-dark .au-att-status.excused{background:#451a03;color:#fde68a}
body.theme-dark .au-card--urgent,body.theme-dark .au-card-urgent{border-left-color:#ef4444}
body.theme-dark .au-card--soon{border-left-color:#f59e0b}
body.theme-dark .au-chip-success{background:#064e3b;color:#6ee7b7}
body.theme-dark .au-presence-dot{border-color:var(--surface)}
body.theme-dark .au-community-panel:last-child{box-shadow:none;border-left:1px solid var(--border)}
body.theme-dark .au-chip-accent,body.theme-dark .au-chip-teacher{background:rgba(122,31,43,.35);color:#e0a5ad;border-color:transparent}
body.theme-dark .au-empty{border-color:#3c3c3c}
body.theme-dark .au-breadcrumb:hover{color:#ededef}
body.theme-dark .au-stat-item{background:#1a1a1a;border-color:#2c2c2c}
body.theme-dark .au-section-label{color:#8a8a92}
body.theme-dark .au-community-header-title{color:#ededef}


/* ---- Messages immersive layout ---- */
/* When in messages mode: single-column, center panel fills all */
.au-community-shell.cm-msgs-mode{
  grid-template-columns:1fr;
}
.au-community-shell.cm-msgs-mode > .au-community-panel:first-child,
.au-community-shell.cm-msgs-mode > .au-community-detail{
  display:none;
}
/* The messages two-panel shell inside the center panel */
.cm-msgs-shell{
  display:flex;
  height:100%;
  overflow:hidden;
}
.cm-msgs-list{
  width:280px;min-width:280px;flex-shrink:0;
  border-right:1px solid var(--border);
  background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden;
}
.cm-msgs-list-header{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.cm-msgs-list-title{
  font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--ink);
}
.cm-msgs-conv-list{
  flex:1;overflow-y:auto;
  background:var(--surface-2);
}
.cm-msgs-chat{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-2);
}
.cm-msgs-chat-header{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.cm-msgs-header-avatar{width:36px;height:36px;font-size:14px}
.cm-conv-leave-btn{
  display:flex;align-items:center;gap:2px;
  background:none;border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--ink-3);cursor:pointer;padding:5px 8px;font-size:12px;
  flex-shrink:0;transition:color .15s,border-color .15s;
}
.cm-conv-leave-btn:hover{color:var(--accent-danger,#c0392b);border-color:var(--accent-danger,#c0392b);}
.cm-conv-leave-btn:disabled{opacity:.5;cursor:not-allowed;}
.cm-msgs-chat-title{
  font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--ink);
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cm-msgs-chat-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:13px;flex-direction:column;gap:8px;
}
.cm-msgs-messages{
  flex:1;overflow-y:auto;
  padding:var(--s-4);
  display:flex;flex-direction:column;gap:var(--s-2);
}
.cm-msgs-input-bar{
  padding:var(--s-3) var(--s-4);
  border-top:1px solid var(--border);
  background:var(--surface);
  display:flex;gap:10px;align-items:flex-end;
  flex-shrink:0;
}
.cm-msgs-input-bar textarea{
  flex:1;min-height:40px;max-height:140px;
  padding:10px 14px;
  border:1px solid var(--border);border-radius:var(--r-md);
  font-family:inherit;font-size:14px;resize:none;
  background:var(--surface);color:var(--ink);line-height:1.5;
}
.cm-msgs-input-bar textarea:focus{outline:none;border-color:var(--accent)}
/* Bubbles in the immersive shell */
.cm-msgs-messages .au-chat-message{max-width:65%}

/* Back button: always visible when a chat is open */
.cm-msgs-back-btn{display:flex}

/* Mobile/tablet (≤900px): wider bubbles; messages mode — propagate height through flex chain */
@media (max-width:900px){
  .cm-msgs-messages .au-chat-message{max-width:85%}
  /* Messages mode: shell fills remaining wrapper height (tab bar already takes its share) */
  .au-community-shell.cm-msgs-mode{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    height:auto;
    overflow:hidden;
  }
  /* Center panel stretches inside the shell */
  .au-community-shell.cm-msgs-mode > .au-community-panel:nth-child(2){
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  /* The messages shell fills the panel */
  .au-community-shell.cm-msgs-mode .cm-msgs-shell{
    flex:1;
    min-height:0;
    height:auto;
  }
}

/* ≤768px messages rules are merged with the split-workspace mobile block further below */

/* Quote reply preview in input bar */
.cm-reply-preview{
  padding:var(--s-2) var(--s-3);
  background:var(--surface-2);
  border-top:1px solid var(--border);
  border-left:3px solid var(--accent);
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-shrink:0;
}
.cm-reply-preview-body{flex:1;min-width:0}
.cm-reply-preview-name{
  font-size:11px;font-weight:600;color:var(--accent);margin-bottom:2px;
}
.cm-reply-preview-text{
  font-size:12px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cm-reply-preview-close{
  background:none;border:none;cursor:pointer;
  color:var(--ink-3);font-size:16px;padding:0 2px;line-height:1;flex-shrink:0;
}
.cm-reply-preview-close:hover{color:var(--ink)}

/* Quote block inside a message bubble (iMessage style) */
.cm-quote-block{
  background:rgba(0,0,0,.06);
  border-left:3px solid rgba(0,0,0,.2);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:6px 10px;
  margin-bottom:6px;
}
.au-chat-message.mine .cm-quote-block{
  background:rgba(255,255,255,.15);
  border-left-color:rgba(255,255,255,.4);
}
.cm-quote-name{font-size:11px;font-weight:600;margin-bottom:2px;opacity:.85}
.cm-quote-text{
  font-size:12px;opacity:.75;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Reply button — partially visible at rest, full on hover/touch */
.cm-msg-reply-btn{
  background:none;border:none;cursor:pointer;
  font-size:12px;color:var(--ink);
  padding:2px 6px;border-radius:var(--r-sm);
  opacity:0.75;transition:opacity .15s;
  font-family:inherit;margin-left:4px;flex-shrink:0;
}
.au-chat-message:hover .cm-msg-reply-btn{opacity:1}
@media (pointer:coarse){
  .cm-msg-reply-btn{opacity:1}
}

/* Recipient chips in New Message modal */
.cm-recipient-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-height:10px}
.cm-recipient-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--accent-tint);color:var(--accent);
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:4px 10px;font-size:13px;font-weight:500;
}
.cm-recipient-chip button{
  background:none;border:none;cursor:pointer;padding:0 2px;
  color:var(--accent);font-size:14px;line-height:1;
  font-family:inherit;opacity:.7;
}
.cm-recipient-chip button:hover{opacity:1}


/* Voice note recording UI */
.cm-voice-btn {
  background: none;
  border: none;
  border-radius: var(--r-md);
  padding: 7px;
  cursor: pointer;
  color: var(--ink-3);
  line-height: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.cm-voice-btn:hover {
  color: var(--accent);
  background: var(--accent-tint);
}
.cm-voice-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.cm-voice-btn.recording {
  color: #ef4444;
  background: rgba(239,68,68,.10);
  animation: cm-voice-pulse 1s ease-in-out infinite;
}
@keyframes cm-voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Voice recording preview bar */
.cm-voice-preview {
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cm-voice-preview-timer {
  font-size: 13px;
  font-weight: 600;
  color: #ef4444;
  min-width: 40px;
  font-variant-numeric: tabular-nums;
}
.cm-voice-preview-label {
  font-size: 12px;
  color: var(--ink-3);
  flex: 1;
}

/* Audio message bubble */
.cm-audio-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.cm-audio-msg audio {
  height: 36px;
  min-width: 180px;
  max-width: 260px;
  border-radius: var(--r-md);
}

/* Message search bar */
.cm-msgs-search-bar {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.cm-msgs-search-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.cm-msgs-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Search result items */
.cm-search-result-item {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-1);
}
.cm-search-result-item:hover { background: var(--surface-3); }
.cm-search-result-conv {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}
.cm-search-result-snippet {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-search-result-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  display: flex;
  gap: 8px;
}
.cm-search-highlight {
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 2px;
  font-weight: 500;
}

/* ---------- AU brand-mark in standard topbar (2-char glyph) ---------- */
.hub-brand-mark .hub-brand-glyph{font-size:.7rem;font-weight:700;letter-spacing:.02em}
@media (max-width:640px){.hub-brand-mark .hub-brand-glyph{font-size:.6rem}}

/* ---------- Per-university brand theming ---------- */

/* Thin colored bar under the topbar */
body.au-branded .hub-topbar{
  box-shadow: inset 0 -3px 0 0 var(--au-brand-strip, var(--accent));
}

/* Force primary buttons to use readable on-accent text color */
body.au-branded .au-btn-primary,
body.au-branded .hub-btn-primary{
  color: var(--au-brand-on, #fff) !important;
}
body.au-branded .au-btn-primary:hover,
body.au-branded .hub-btn-primary:hover{
  background: var(--accent-hover);
  color: var(--au-brand-on, #fff) !important;
}

/* Mobile sidebar drawer active state picks up brand */
body.au-branded .au-nav-item.active{
  background: var(--accent-tint);
  color: var(--accent);
}

/* Sidebar wordmark badge */
body.au-branded .au-wordmark-badge,
body.au-branded .au-topbar-brand-badge{
  background: var(--accent);
  color: var(--au-brand-on, #fff);
}

/* Left-side brand glyph */
body.au-branded .hub-brand-mark .hub-brand-glyph:not(.au-topbar-logo-slot){
  color: var(--accent);
}

/* Tools button */
body.au-branded .hub-tools-btn:hover,
body.au-branded .hub-tools-btn[aria-expanded="true"]{
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--au-brand-on, #fff) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.25) !important;
}
body.au-branded .hub-tools-btn{
  color: var(--au-brand-on, #fff) !important;
}
body.au-branded .hub-tools-btn-lbl,
body.au-branded .hub-tools-btn-caret{
  color: var(--au-brand-on, #fff) !important;
}

/* Account/profile avatar button */
body.au-branded .acct-fab .acct-btn,
body.au-branded .au-avatar{
  background: var(--accent) !important;
  color: var(--au-brand-on, #fff) !important;
}


/* ===================================================================
   BACK BUTTON — injected by access-shell.js into every .au-main
   =================================================================== */
.au-back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  color:var(--ink-3);
  text-decoration:none;
  padding:4px 0;
  margin-bottom:var(--s-4);
  border:none;
  background:none;
  cursor:pointer;
  transition:color var(--dur-1);
  line-height:1;
}
.au-back-btn:hover{
  color:var(--accent);
}
.au-back-btn-arrow{
  font-size:15px;
  line-height:1;
  display:inline-block;
  transition:transform var(--dur-1);
}
.au-back-btn:hover .au-back-btn-arrow{
  transform:translateX(-2px);
}
.au-back-btn-lbl{
  font-size:13px;
}
@media print{
  .au-back-btn{ display:none !important; }
  /* Print chrome: keep the sidebar drawer, topbar, menu toggle, and
     community panels off the page so transcripts/certificates print cleanly */
  .au-sidebar,
  .au-topbar,
  .hub-topbar,
  .au-menu-btn,
  #auNavBackdrop,
  .au-community-panel{ display:none !important; }
}

/* ===================================================================
   INTEGRATED TOOLS PANEL — shared by assignment page and Scribe
   =================================================================== */

/* Outer workspace grid: work-col | 6px divider | tool-col */
.au-split-workspace{
  display:grid;
  grid-template-columns:var(--split-left,1fr) 6px var(--split-right,1fr);
  gap:0;
  width:100%;
  align-items:start;
}

/* When tool panel is collapsed, work col expands to fill full width */
.au-split-workspace:has(.au-split-tool-col.collapsed){
  grid-template-columns:1fr 0 0;
}

/* Left: assignment/editor column */
.au-split-work-col{
  min-width:0;
  overflow-y:visible;
  padding-right:0;
}

/* Drag handle divider */
.au-split-divider{
  width:6px;
  cursor:col-resize;
  background:var(--border);
  border-radius:3px;
  position:relative;
  transition:background var(--dur-1);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  -webkit-user-select:none;
  align-self:stretch;
}
.au-split-divider:hover,
.au-split-divider.dragging{
  background:var(--accent);
}
/* Three-dot grip indicator */
.au-split-divider::before{
  content:'';
  display:block;
  width:4px;
  height:32px;
  background:repeating-linear-gradient(
    to bottom,
    var(--ink-3) 0,
    var(--ink-3) 3px,
    transparent 3px,
    transparent 7px
  );
  border-radius:2px;
  opacity:.4;
}
.au-split-divider.collapsed{ display:none; }

/* Right: tool panel column — sticky so it stays in view while the
   assignment scrolls, and uses a fixed viewport height so the iframe
   always has a real pixel height to fill. */
.au-split-tool-col{
  display:flex;
  flex-direction:column;
  min-width:280px;
  border-left:1px solid var(--border);
  background:var(--surface);
  overflow:hidden;
  position:sticky;
  top:var(--au-topbar);                        /* below the topbar */
  height:calc(100vh - var(--au-topbar));       /* full remaining viewport height */
  align-self:start;
}
.au-split-tool-col.collapsed{ display:none; }

/* Tool picker toolbar (sticky top of right col) */
.au-tool-toolbar{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
  padding:7px 10px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:10;
  flex-shrink:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.au-tool-toolbar::-webkit-scrollbar{ height:0; }

/* Individual tool pill buttons */
.au-tool-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 11px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--surface-2);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  color:var(--ink-2);
  white-space:nowrap;
  transition:border-color var(--dur-1), color var(--dur-1), background var(--dur-1);
  flex-shrink:0;
}
.au-tool-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.au-tool-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.au-tool-btn-ic{
  font-size:11px;
  opacity:.8;
}

/* Collapse/expand button — pushed to far right */
.au-tool-collapse-btn{
  margin-left:auto;
  padding:4px 8px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface-2);
  font-size:13px;
  cursor:pointer;
  color:var(--ink-3);
  flex-shrink:0;
  transition:color var(--dur-1), border-color var(--dur-1);
}
.au-tool-collapse-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* iframe wrapper fills remaining height of the sticky column */
.au-tool-frame-wrap{
  flex:1;
  overflow:hidden;
  position:relative;
  background:var(--surface-2);
  min-height:0;
  height:0; /* flex:1 overrides this; forces the browser to compute a real px height */
}

/* The actual tool iframe */
.au-tool-frame{
  width:100%;
  height:100%;
  border:none;
  display:block;
  background:var(--surface-2);
  position:absolute;
  inset:0;
}

/* Transparent cover over iframe during column resize drag */
.au-tool-frame-overlay{
  position:absolute;
  inset:0;
  z-index:100;
  background:transparent;
  cursor:col-resize;
}

/* Drop target highlight on answer fields */
.au-drop-target{
  outline:2px dashed var(--accent) !important;
  outline-offset:2px !important;
  border-radius:var(--r-sm);
}

/* Toast confirmation after text insert */
.au-copy-toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--surface);
  padding:8px 20px;
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:500;
  pointer-events:none;
  z-index:9999;
  opacity:0;
  transition:opacity .2s;
  white-space:nowrap;
}
.au-copy-toast.show{
  opacity:1;
}

/* Bridge connection indicator dot (shown in toolbar when bridge is active) */
.au-bridge-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#bbb;
  display:inline-block;
  margin-left:3px;
  vertical-align:middle;
  flex-shrink:0;
  transition:background .3s;
}
.au-bridge-dot.connected{
  background:#2ecc71;
}

/* Panel open indicator on the expand button */
.au-tool-open-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--surface-2);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  color:var(--ink-2);
  transition:border-color var(--dur-1), color var(--dur-1);
}
.au-tool-open-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.au-tool-open-btn.active{
  background:var(--accent-tint);
  border-color:var(--accent);
  color:var(--accent);
}

/* ---- Mobile (≤768px): split workspace stacks vertically; messages list goes full-width ---- */
@media (max-width:768px){
  /* Split workspace: stack columns vertically */
  .au-split-workspace{
    display:flex;
    flex-direction:column;
    height:auto;
  }
  .au-split-divider{
    display:none !important;
  }
  .au-split-work-col{
    overflow-y:visible;
    padding-right:0;
    max-height:none;
    min-height:0;
  }
  .au-split-tool-col{
    position:static;
    width:100% !important;
    min-width:unset !important;
    max-width:unset !important;
    height:50vh;
    max-height:50vh;
    border-left:none;
    border-top:1px solid var(--border);
    flex-shrink:0;
  }
  .au-tool-toolbar{
    position:static;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .au-tool-btn{min-height:44px}
  .au-tool-open-btn{min-height:40px}

  /* Messages: full-width list, slide-in chat */
  .cm-msgs-shell{position:relative}
  .cm-msgs-list{
    width:100%;min-width:0;
    position:absolute;inset:0;z-index:1;
    transition:transform .2s ease;
  }
  .cm-msgs-chat{
    position:absolute;inset:0;z-index:2;
    transform:translateX(100%);
    transition:transform .2s ease;
    background:var(--surface-2);
  }
  .cm-msgs-shell.chat-open .cm-msgs-list{transform:translateX(-100%)}
  .cm-msgs-shell.chat-open .cm-msgs-chat{transform:translateX(0)}
  /* Input bar textarea: prevent iOS zoom */
  .cm-msgs-input-bar textarea{font-size:16px}
}

/* ---- Group chat: sender name above bubble ---- */
.cm-msg-sender-name{
  font-size:11px;
  font-weight:600;
  color:var(--ink-3);
  margin-bottom:3px;
}

/* =========================================================
   Toast notifications (Sub-Task 1)
   ========================================================= */
.cm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 10000;
  padding: 10px 20px;
  border-radius: var(--r-pill, 999px);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  background: var(--surface-3, #2a2a2a);
  color: var(--ink, #fff);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.cm-toast.cm-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cm-toast.cm-toast-error {
  background: #dc2626;
  color: #fff;
}

/* =========================================================
   Inline flag/report form inside a message bubble (Sub-Task 1)
   ========================================================= */
.cm-flag-form {
  margin-top: 8px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cm-flag-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 52px;
}
.cm-flag-textarea:focus { outline: none; border-color: var(--accent); }
.cm-flag-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* =========================================================
   Emoji Reactions (Sub-Task 3)
   ========================================================= */

/* Reaction picker — shown on hover above/beside the message */
.cm-reaction-picker {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  position: absolute;
  /* Positioned below the bubble so it stays inside the scroll container's
     clipping box (overflow-y:auto on .cm-msgs-messages would clip top:-38px) */
  top: 100%;
  margin-top: 2px;
  left: 0;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  white-space: nowrap;
}
/* Transparent bridge above the picker fills the gap between the bubble bottom
   and the picker top so the hover state doesn't drop before a click lands */
.cm-reaction-picker::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.au-chat-message { position: relative; }
.au-chat-message:hover .cm-reaction-picker,
.au-chat-message.picker-open .cm-reaction-picker {
  opacity: 1;
  pointer-events: auto;
}
/* Right-aligned bubbles (.mine) — pin picker to the right edge */
.au-chat-message.mine .cm-reaction-picker {
  left: auto;
  right: 0;
}
@media (pointer: coarse) {
  .cm-reaction-picker { opacity: 1; pointer-events: auto; position: static; margin-top: 0; margin-bottom: 4px; box-shadow: none; border: none; background: transparent; padding: 0; }
}
.cm-reaction-emoji {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: var(--r-sm);
  transition: transform .1s;
  font-family: inherit;
}
.cm-reaction-emoji:hover { transform: scale(1.3); background: var(--surface-2); }

/* Reaction pills shown below the bubble */
.cm-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  min-height: 0;
}
.cm-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
  line-height: 1.4;
}
.cm-reaction-pill span { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.cm-reaction-pill:hover { background: var(--surface-3); }
.cm-reaction-pill.mine {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.cm-reaction-pill.mine span { color: var(--accent); }

/* =========================================================
   Typing Indicator (Sub-Task 4)
   ========================================================= */
.cm-typing-indicator {
  padding: 4px var(--s-3) 2px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-3);
  min-height: 20px;
  flex-shrink: 0;
}

/* =========================================================
   Read Receipts (Sub-Task 5)
   ========================================================= */
.cm-read-receipt {
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  margin-top: 2px;
  padding-right: 2px;
}
.cm-read-receipt.read {
  color: var(--accent);
  font-weight: 500;
}

/* =========================================================
   Message Edit + Delete (Sub-Task 6)
   ========================================================= */
.cm-msg-options-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-3);
  padding: 0 4px;
  border-radius: var(--r-sm);
  line-height: 1;
  font-family: inherit;
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.au-chat-message:hover .cm-msg-options-btn { opacity: 1; }
@media (pointer: coarse) { .cm-msg-options-btn { opacity: 1; } }

.cm-msg-options-popover {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  overflow: hidden;
  min-width: 100px;
  z-index: 30;
  margin-top: 4px;
}
.cm-opts-edit,
.cm-opts-delete {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  transition: background .1s;
}
.cm-opts-edit:hover { background: var(--surface-2); }
.cm-opts-delete { color: #dc2626; }
.cm-opts-delete:hover { background: rgba(220,38,38,.06); }

.cm-edit-area {
  margin-top: 6px;
}
.cm-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 48px;
}
.cm-edit-textarea:focus { outline: none; }
.cm-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.cm-edited-label {
  font-size: 10px;
  color: var(--ink-3);
  font-style: italic;
  margin-right: 2px;
}

/* =========================================================
   @Mention Picker + Highlight (Sub-Task 7)
   ========================================================= */
.cm-mention-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  overflow: hidden;
  max-height: 160px;
  overflow-y: auto;
}
.cm-mention-option {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  transition: background .1s;
}
.cm-mention-option:hover { background: var(--accent-tint); color: var(--accent); }

/* @mention highlight inside message bubbles */
.cm-mention {
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 500;
}

/* ===== Access University — Video Meetings dock ===== */
/* Styles the full .au-meet-* contract emitted by /access/au-meet.js.
   Two modes share one component:
   - .au-meet-dock  fixed, non-blocking bottom-right dock (full-width sheet ≤768px)
   - .au-meet-room  standalone room inside /access/meet/ (fills .au-main)
   z-index 550 keeps the dock above page content but below the mobile sidebar
   drawer (600), its backdrop (599), the topbar (9000), and modals (9995). */

/* ---- Topbar Meet action + menu ---- */
.au-meet-tb{position:relative;display:inline-flex;align-items:center}
.au-meet-tb-btn{
  width:auto;min-width:38px;height:38px;gap:6px;padding:0 10px;
  font-size:13px;font-weight:500;color:var(--ink-2);
  border:1px solid transparent;border-radius:var(--r-md);
}
.au-meet-tb-btn:hover{background:var(--surface-2);color:var(--ink)}
.au-meet-tb-btn.is-active{
  background:var(--accent-tint);color:var(--accent);
  border-color:var(--accent);
}
.au-meet-tb-glyph{
  font-size:16px;line-height:1;color:currentColor;
}
.au-meet-tb-label{line-height:1}
.au-meet-tb-btn .au-meet-badge{
  margin-left:2px;padding:1px 6px;font-size:9px;letter-spacing:.3px;
  text-transform:uppercase;background:var(--accent);color:var(--n0);border:0;
}
.au-meet-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;
  min-width:230px;max-width:calc(100vw - 16px);
  padding:var(--s-1);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-3);
}
.au-meet-menu[hidden]{display:none}
.au-meet-menu-item{
  display:block;width:100%;padding:9px 12px;
  background:none;border:0;border-radius:var(--r-sm);
  color:var(--ink);font-size:13px;font-family:inherit;text-align:left;
  cursor:pointer;transition:background var(--dur-1),color var(--dur-1);
}
.au-meet-menu-item:hover,
.au-meet-menu-item:focus-visible{background:var(--accent-tint);color:var(--accent)}
.au-meet-menu-sep{height:1px;margin:var(--s-1) 6px;background:var(--border)}

/* ---- Badges ---- */
.au-meet-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--n0);
  font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  line-height:1.4;white-space:nowrap;
}
.au-meet-badge[hidden]{display:none}

/* ---- Dock shell ---- */
.au-meet-dock{
  position:fixed;right:max(var(--s-4),env(safe-area-inset-right,0px));
  bottom:max(var(--s-4),env(safe-area-inset-bottom,0px));
  z-index:550;
  display:flex;flex-direction:column;gap:var(--s-2);
  width:min(420px,calc(100vw - var(--s-8)));
  max-height:min(720px,calc(100dvh - var(--au-topbar) - var(--s-4)));
  padding:var(--s-3);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
}

/* ---- Standalone room (/access/meet/) ---- */
.au-meet-room{
  position:relative;
  display:flex;flex-direction:column;gap:var(--s-3);
  min-height:calc(100dvh - var(--au-topbar));
  margin:calc(0px - var(--s-6));
  padding:var(--s-4);
  background:var(--bg);color:var(--ink);
}
.au-meet-room .au-meet-head{padding-bottom:var(--s-2);border-bottom:1px solid var(--border)}
.au-meet-room .au-meet-stage{flex:1 1 auto;min-height:340px}
.au-meet-room .au-meet-tiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3)}
.au-meet-room .au-meet-filmstrip{padding:var(--s-2) 0}
.au-meet-room .au-meet-chat.open{display:flex;max-height:220px}

/* ---- Head ---- */
.au-meet-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  min-height:32px;
}
.au-meet-head-actions{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap}
.au-meet-head-actions .au-btn{white-space:nowrap}

/* ---- Notices / errors ---- */
.au-meet-notice{
  display:none;padding:7px 10px;border-radius:var(--r-sm);
  background:var(--accent-tint);color:var(--accent);
  font-size:12px;line-height:1.4;
}
.au-meet-notice.active{display:block}
.au-meet-error:empty{display:none}
.au-meet-error{
  padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
  background:var(--danger-soft);border:1px solid var(--danger);
  color:var(--danger-ink);font-size:13px;
}
.au-meet-error-msg{line-height:1.45}

/* ---- Stage + share ---- */
.au-meet-stage{
  position:relative;display:none;overflow:hidden;
  background:#0a0a0c;border:1px solid var(--border);border-radius:var(--r-md);
}
.au-meet-stage.active{display:flex;align-items:center;justify-content:center}
.au-meet-stage-media{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.au-meet-stage-media video,
.au-meet-stage-media canvas,
.au-meet-stage-media iframe{
  width:100%;height:100%;object-fit:contain;display:block;background:#0a0a0c;
}
.au-meet-stage-chrome{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-2) var(--s-3);
  background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,0));
  color:#fff;pointer-events:none;
}
.au-meet-stage-label{
  display:inline-block;font-size:12px;font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.au-meet-share:empty{display:none}
.au-meet-share{
  padding:var(--s-2) var(--s-3);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);
}
.au-meet-share-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  margin-bottom:var(--s-1);
}
.au-meet-share-title{
  font-family:var(--font-serif);font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.au-meet-share-page{font-size:11px;color:var(--ink-3);white-space:nowrap}
.au-meet-share-actions{display:flex;gap:var(--s-1);flex-wrap:wrap;margin-top:var(--s-1)}
.au-meet-share-list{display:flex;flex-direction:column;gap:4px;margin-top:var(--s-1)}
.au-meet-share-src{
  display:block;width:100%;text-align:left;
  padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:12px;font-family:inherit;
  cursor:pointer;
}
.au-meet-share-src:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.au-meet-share-empty{font-size:12px;color:var(--ink-3);line-height:1.45}

/* ---- Tiles + filmstrip ---- */
.au-meet-tiles:empty{display:none}
.au-meet-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s-2);
}
.au-meet-tile{
  position:relative;overflow:hidden;aspect-ratio:16/9;
  background:#101013;border:1px solid var(--border);border-radius:var(--r-md);
  transition:border-color var(--dur-2),box-shadow var(--dur-2);
}
.au-meet-tile-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.au-meet-tile-media video,
.au-meet-tile-media canvas{
  width:100%;height:100%;object-fit:cover;display:block;background:#101013;
}
.au-meet-tile.speaking{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-tint),var(--shadow-1);
}
.au-meet-tile.muted .au-meet-tile-media::after{
  content:'Camera off';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#a1a1aa;font-size:11px;letter-spacing:.3px;text-transform:uppercase;
}
.au-meet-tile-name{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 8px 6px;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  color:#fff;font-size:11px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  pointer-events:none;
}
.au-meet-tile-hand{
  position:absolute;top:6px;right:6px;display:none;
  padding:2px 5px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--n0);font-size:11px;line-height:1.3;
}
.au-meet-tile.raised .au-meet-tile-hand{display:inline-flex}
.au-meet-filmstrip:empty{display:none}
.au-meet-filmstrip{
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:2px;
}
.au-meet-chip{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:4px 9px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--ink-2);font-size:11px;line-height:1.4;
}
.au-meet-chip.raised{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
.au-meet-chip.waiting{border-style:dashed;color:var(--ink-3)}

/* ---- Waiting room + participants ---- */
.au-meet-waiting{display:none}
.au-meet-waiting.active{display:block}
.au-meet-waiting-card,
.au-meet-waiting{
  padding:var(--s-3);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
}
.au-meet-waiting-card{padding:0;background:none;border:0}
.au-meet-waiting-title{
  font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--ink);
  margin-bottom:4px;
}
.au-meet-waiting-sub{font-size:12px;color:var(--ink-3);line-height:1.45}
.au-meet-waiting-actions{display:flex;gap:var(--s-1);flex-wrap:wrap;margin-top:var(--s-2)}
.au-meet-waiting-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:7px 0;border-top:1px solid var(--border);
}
.au-meet-waiting-row:first-of-type{border-top:0}
.au-meet-waiting-name{
  flex:1;min-width:0;font-size:13px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.au-meet-waiting-row-actions{display:flex;gap:var(--s-1);flex-shrink:0}
.au-meet-participants:empty{display:none}
.au-meet-participants{
  padding:var(--s-3);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
}
.au-meet-participants-title{
  font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--ink);
  margin-bottom:4px;
}
.au-meet-participant-row{
  display:flex;align-items:center;gap:var(--s-2);
  padding:6px 0;border-top:1px solid var(--border);
}
.au-meet-participant-name{
  flex:1;min-width:0;font-size:13px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.au-meet-participant-role{
  padding:2px 7px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink-3);font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  white-space:nowrap;
}
.au-meet-participant-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}

/* ---- Chat ---- */
.au-meet-chat{display:none;flex-direction:column;gap:var(--s-2)}
.au-meet-chat.open{display:flex}
.au-meet-chat-list{
  display:flex;flex-direction:column;gap:var(--s-1);
  max-height:190px;overflow-y:auto;
  padding:var(--s-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
}
.au-meet-chat-empty{font-size:12px;color:var(--ink-3);text-align:center;padding:var(--s-2)}
.au-meet-chat-msg{
  display:flex;flex-direction:column;gap:2px;
  padding:6px 9px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);
  font-size:12px;line-height:1.45;
}
.au-meet-chat-msg.self{
  background:var(--accent-tint);border-color:transparent;
  margin-left:var(--s-4);
}
.au-meet-chat-from{font-size:10px;font-weight:600;color:var(--ink-3);letter-spacing:.2px}
.au-meet-chat-body{color:var(--ink);overflow-wrap:anywhere}
.au-meet-chat-input{
  width:100%;padding:8px 10px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  color:var(--ink);font-size:13px;font-family:inherit;
}
.au-meet-chat-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}

/* ---- Recordings ---- */
.au-meet-recordings:empty{display:none}
.au-meet-recordings{
  padding:var(--s-2) var(--s-3);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
}
.au-meet-recordings-title{
  font-size:11px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;
}
.au-meet-recording{
  padding:5px 0;border-top:1px solid var(--border);
  font-size:12px;color:var(--ink-2);
}
.au-meet-recording:first-of-type{border-top:0}

/* ---- Toolbar ---- */
.au-meet-toolbar{
  position:sticky;bottom:0;z-index:2;
  display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;
  padding:var(--s-2) 0 0;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.au-meet-tbtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 11px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink-2);font-size:12px;font-weight:500;font-family:inherit;
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1);
}
.au-meet-tbtn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--ink)}
.au-meet-tbtn.on{
  background:var(--accent-tint);border-color:var(--accent);color:var(--accent);
}
.au-meet-tbtn[data-act="mic"][aria-pressed="false"],
.au-meet-tbtn[data-act="cam"][aria-pressed="false"]{
  background:var(--danger-soft);border-color:var(--danger);color:var(--danger-ink);
}
.au-meet-toolbar .au-btn{white-space:nowrap}

/* ---- Audio + reactions ---- */
.au-meet-audio{display:none}
.au-meet-reactions{
  position:absolute;left:0;right:0;bottom:76px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:6px;
  pointer-events:none;
}
.au-meet-reaction{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 9px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  color:var(--accent);font-size:16px;line-height:1;
  box-shadow:var(--shadow-1);
  animation:au-meet-float 2400ms var(--ease-out) forwards;
}
@keyframes au-meet-float{
  0%{opacity:0;transform:translateY(10px) scale(.9)}
  15%{opacity:1}
  100%{opacity:0;transform:translateY(-46px) scale(1.12)}
}

/* ---- Empty room ---- */
.au-meet-empty{
  margin:auto;padding:var(--s-8) var(--s-4);text-align:center;
  color:var(--ink-3);max-width:440px;
}
.au-meet-empty-title{
  font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--ink);
  margin-bottom:4px;
}
.au-meet-empty-sub{font-size:14px;line-height:1.5}
.au-meet-empty-actions{display:flex;gap:var(--s-2);justify-content:center;margin-top:var(--s-4)}

/* ---- Dark theme ---- */
body.theme-dark .au-meet-tb-btn.is-active{
  background:rgba(168,50,67,.18);color:#e0a5ad;border-color:var(--accent);
}
body.theme-dark .au-meet-tb-btn .au-meet-badge{background:var(--accent);color:var(--n0)}
body.theme-dark .au-meet-menu-item:hover,
body.theme-dark .au-meet-menu-item:focus-visible{color:#e0a5ad}
body.theme-dark .au-meet-stage,
body.theme-dark .au-meet-stage-media video,
body.theme-dark .au-meet-stage-media canvas,
body.theme-dark .au-meet-stage-media iframe{background:#050505}
body.theme-dark .au-meet-tile,
body.theme-dark .au-meet-tile-media video,
body.theme-dark .au-meet-tile-media canvas{background:#0b0b0d}
body.theme-dark .au-meet-tile.muted .au-meet-tile-media::after{color:#71717a}
body.theme-dark .au-meet-waiting-card,
body.theme-dark .au-meet-waiting,
body.theme-dark .au-meet-participants,
body.theme-dark .au-meet-share,
body.theme-dark .au-meet-chat-list,
body.theme-dark .au-meet-recordings{background:var(--surface-2);border-color:var(--border)}
body.theme-dark .au-meet-chat-msg{background:var(--surface);border-color:var(--border)}
body.theme-dark .au-meet-reaction{background:var(--surface-2);border-color:var(--border-strong);color:#e0a5ad}

/* ---- Mobile: full-width bottom sheet ---- */
@media (max-width:768px){
  .au-meet-dock{
    left:0;right:0;bottom:0;
    width:100%;max-height:82dvh;
    padding:var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom,0px));
    border-left:0;border-right:0;border-bottom:0;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  .au-meet-tiles{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .au-meet-room{
    margin:calc(0px - var(--s-3));
    padding:var(--s-2);
    min-height:calc(100dvh - var(--au-topbar));
    gap:var(--s-2);
  }
  .au-meet-room .au-meet-stage{min-height:220px}
  .au-meet-room .au-meet-tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .au-meet-reactions{bottom:86px}
}

@media (max-width:520px){
  .au-meet-tb-btn{width:38px;min-width:38px;padding:0;gap:4px}
  .au-meet-tb-label{display:none}
  .au-meet-tb-btn .au-meet-badge{
    position:absolute;top:-2px;right:-2px;padding:0 4px;font-size:8px;
  }
  .au-meet-tb .au-meet-menu{right:-6px}
  .au-meet-head{flex-wrap:wrap}
}

/* ---- Tablet: align standalone negative margin with .au-main padding ---- */
@media (min-width:769px) and (max-width:1024px){
  .au-meet-room{margin:calc(0px - var(--s-4));min-height:calc(100dvh - var(--au-topbar))}
}

/* ---- Picture-in-Picture window ---- */
body.au-meet-pip .au-meet-dock{
  position:static;display:flex;
  width:100%;max-height:none;height:100dvh;
  padding:var(--s-2);border:0;border-radius:0;box-shadow:none;
  background:var(--surface);
}
body.au-meet-pip .au-meet-head-actions{flex-wrap:nowrap}
body.au-meet-pip .au-meet-stage{min-height:200px}

/* ---- Keyboard focus ---- */
.au-meet-tb-btn:focus-visible,
.au-meet-menu-item:focus-visible,
.au-meet-tbtn:focus-visible,
.au-meet-share-src:focus-visible,
.au-meet-chat-input:focus-visible,
.au-meet-dock .au-btn:focus-visible,
.au-meet-room .au-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .au-meet-dock,
  .au-meet-dock *,
  .au-meet-room,
  .au-meet-room *,
  .au-meet-tb,
  .au-meet-tb *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .au-meet-reaction{animation:none !important}
}

/* ---------- Teaching Assistant workspace ---------- */
.au-ta-banner{
  display:flex;flex-direction:column;gap:3px;
  background:var(--accent-tint);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-4);
}
.au-ta-banner-title{
  font-family:var(--font-serif);
  font-size:16px;font-weight:600;color:var(--ink);
  line-height:1.25;
}
.au-ta-banner-sub{font-size:13px;color:var(--ink-2);line-height:1.45}

.au-ta-perm-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-2)}
.au-ta-perm{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink-2);font-size:12px;line-height:1.3;
}
.au-ta-perm::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
}

.au-ta-overview-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-3);margin-bottom:var(--s-4);
}
.au-ta-stat{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
  display:flex;flex-direction:column;gap:4px;min-width:0;
}
.au-ta-stat-value,
.au-ta-stat strong{
  font-family:var(--font-serif);font-size:26px;line-height:1.1;
  font-weight:600;color:var(--ink);
}
.au-ta-stat-label,
.au-ta-stat span{font-size:12px;color:var(--ink-3);line-height:1.35}

.au-ta-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s-4);
  margin-bottom:var(--s-4);min-width:0;
}
.au-ta-panel > h2,
.au-ta-panel > h3{
  font-family:var(--font-serif);color:var(--ink);
  font-size:18px;font-weight:600;margin:0 0 var(--s-3);
}

.au-team-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s-3);
}
.au-team-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
}
.au-team-card-head{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.au-team-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-tint);color:var(--accent);
  font-family:var(--font-serif);font-size:15px;font-weight:600;
  border:1px solid var(--border);
}
.au-team-body{
  padding:var(--s-3) var(--s-4);
  display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;
}
.au-team-name{
  font-family:var(--font-serif);font-size:16px;font-weight:600;
  color:var(--ink);line-height:1.25;overflow-wrap:anywhere;
}
.au-team-meta{
  font-size:12px;color:var(--ink-3);line-height:1.4;
  overflow-wrap:anywhere;
}
.au-team-perms{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.au-team-actions{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  border-top:1px solid var(--border);
  background:var(--surface);
}
.au-pending-invite{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);
  background:var(--surface-2);
  border:1px dashed var(--border-strong);
  border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);
}
.au-pending-invite .au-team-meta{flex:1 1 220px;min-width:0}
.au-pending-invite .au-team-actions{
  padding:0;border:0;background:transparent;margin-left:auto;
}

.au-perm-editor{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;
}
.au-perm-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--border);
  min-height:44px;
}
.au-perm-row:last-child{border-bottom:0}
.au-perm-row-label{
  font-size:14px;font-weight:500;color:var(--ink);
  line-height:1.35;min-width:0;flex:1 1 180px;
}
.au-perm-row-hint{
  display:block;font-size:12px;font-weight:400;
  color:var(--ink-3);margin-top:2px;line-height:1.4;
}
.au-perm-switch{
  position:relative;display:inline-flex;flex-shrink:0;
  width:44px;height:26px;margin:0 0 0 auto;
  border-radius:var(--r-pill);
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  cursor:pointer;
  transition:background var(--dur-1),border-color var(--dur-1);
}
/* The switch is rendered as a label wrapping a checkbox plus a knob span. */
.au-perm-switch input{
  position:absolute;inset:0;
  width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;z-index:1;
}
.au-perm-switch span{
  position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:var(--n0);
  box-shadow:var(--shadow-1);
  pointer-events:none;
  transition:transform var(--dur-1) var(--ease-out);
}
.au-perm-switch input:checked + span{transform:translateX(18px)}
.au-perm-switch:has(input:checked){background:var(--accent);border-color:var(--accent)}
.au-perm-switch:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.au-perm-switch:has(input:disabled){opacity:.55;cursor:not-allowed}
.au-perm-switch:has(input:disabled) input{cursor:not-allowed}
/* No static knob: the span provides the only visible knob. */
label.au-perm-switch::after{content:none;display:none}

.au-role-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--accent-tint);color:var(--accent);
  border:1px solid transparent;
  font-size:11px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;line-height:1.4;white-space:nowrap;
}

/* Tablet: two-column stat bar and calmer team grid */
@media (min-width:769px) and (max-width:1024px){
  .au-ta-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .au-team-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* Mobile: stack team cards, wrap permission rows, preserve 44px targets */
@media (max-width:768px){
  .au-ta-overview-grid{grid-template-columns:1fr}
  .au-team-grid{grid-template-columns:1fr}
  .au-ta-panel{padding:var(--s-3)}
  .au-ta-banner{padding:var(--s-3)}
  .au-team-card-head,
  .au-team-body,
  .au-team-actions{padding:var(--s-3)}
  .au-perm-row{padding:var(--s-3);align-items:flex-start}
  .au-perm-row-label{flex:1 1 100%}
  .au-perm-switch{
    width:48px;height:28px;
    align-self:flex-end;
  }
  .au-perm-switch span{top:3px;left:3px;width:22px;height:22px}
  .au-perm-switch input:checked + span{transform:translateX(20px)}
  .au-perm-switch::before{
    content:"";position:absolute;inset:-8px -4px;
    min-height:44px;border-radius:var(--r-pill);
  }
  .au-team-actions .au-btn,
  .au-pending-invite .au-btn{min-height:44px}
  .au-pending-invite{padding:var(--s-3)}
  .au-pending-invite .au-team-actions{width:100%;margin-left:0}
  .au-pending-invite .au-team-actions .au-btn{flex:1 1 auto}
  .au-team-actions{gap:6px}
}