/* ═══════════════════════════════════════════════════════
   Claude Live — Shared Stylesheet v1.0
   Design system based on warm-coral + cream-canvas palette
   All classes prefixed with cl- for isolation
   ═══════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Colors */
  --cl-primary: #cc785c;
  --cl-primary-hover: #b8664d;
  --cl-primary-light: #f5e4dc;
  --cl-canvas: #faf9f5;
  --cl-canvas-strong: #f0ede5;
  --cl-ink: #141413;
  --cl-ink-muted: #6b6b68;
  --cl-ink-subtle: #9e9e9a;
  --cl-white: #ffffff;
  --cl-hairline: #e0ded8;
  --cl-hairline-soft: #eeebe4;
  --cl-success: #5db872;
  --cl-success-bg: #eaf7ed;
  --cl-warning: #d4a017;
  --cl-warning-bg: #fdf6e3;
  --cl-error: #c64545;
  --cl-error-bg: #fcecec;
  --cl-accent-teal: #5db8a6;
  --cl-accent-amber: #e8a55a;
  --cl-overlay: rgba(0, 0, 0, 0.30);

  /* Typography */
  --cl-font-display: Georgia, 'Times New Roman', serif;
  --cl-font-body: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --cl-font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Font sizes */
  --cl-text-xs: 0.75rem;
  --cl-text-sm: 0.875rem;
  --cl-text-base: 1rem;
  --cl-text-lg: 1.125rem;
  --cl-text-xl: 1.25rem;
  --cl-text-2xl: 1.5rem;
  --cl-text-3xl: 2rem;
  --cl-text-4xl: 2.5rem;

  /* Spacing */
  --cl-space-xs: 4px;
  --cl-space-sm: 8px;
  --cl-space-md: 16px;
  --cl-space-lg: 24px;
  --cl-space-xl: 32px;
  --cl-space-xxl: 48px;

  /* Border radius */
  --cl-radius-sm: 4px;
  --cl-radius-md: 8px;
  --cl-radius-lg: 12px;
  --cl-radius-xl: 16px;
  --cl-radius-pill: 9999px;

  /* Shadows */
  --cl-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --cl-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --cl-shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
  --cl-shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

  /* Transitions */
  --cl-transition-fast: 100ms ease-out;
  --cl-transition: 200ms ease-out;
  --cl-transition-slow: 350ms ease-out;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--cl-font-body);
  font-size: var(--cl-text-base);
  line-height: 1.6;
  color: var(--cl-ink);
  background: var(--cl-canvas);
}

a { color: var(--cl-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--cl-primary);
  outline-offset: 2px;
  border-radius: var(--cl-radius-sm);
}
.cl-btn:focus-visible { outline-offset: 2px; }
.cl-card:focus-visible { outline-offset: 4px; }
.cl-input:focus-visible { outline: none; }  /* inputs already have focus ring */

h1, h2, h3, h4 {
  font-family: var(--cl-font-display);
  font-weight: 400;
  line-height: 1.3;
  color: var(--cl-ink);
}
h1 { font-weight: 400; }  /* largest, lightest */
h3, h4 { font-weight: 600; }  /* smaller, slightly bolder for legibility */
h1 { font-size: var(--cl-text-4xl); }
h2 { font-size: var(--cl-text-3xl); }
h3 { font-size: var(--cl-text-2xl); }
h4 { font-size: var(--cl-text-xl); }

/* ── Layout ── */
.cl-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--cl-space-md);
}

.cl-container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--cl-space-md);
}

.cl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cl-space-md);
  background: rgba(250, 249, 245, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cl-hairline);
}

.cl-header-brand {
  font-family: var(--cl-font-display);
  font-size: var(--cl-text-lg);
  font-weight: 700;
  color: var(--cl-ink);
}

.cl-header-nav {
  display: flex;
  gap: var(--cl-space-md);
  align-items: center;
}

.cl-header-nav a {
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
  font-weight: 500;
}
.cl-header-nav a:hover { color: var(--cl-primary); text-decoration: none; }

/* ── Dropdown Menu ── */
.cl-dropdown { position: relative; }
.cl-dropdown-toggle {
  font-size: var(--cl-text-sm);
  font-weight: 500;
  color: var(--cl-ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--cl-radius-sm);
}
.cl-dropdown-toggle:hover { color: var(--cl-primary); }
.cl-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-md);
  box-shadow: var(--cl-shadow-md);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}
.cl-dropdown-menu.cl-dropdown-open { display: block; }
.cl-dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: var(--cl-text-sm);
  color: var(--cl-ink);
  text-decoration: none;
  white-space: nowrap;
}
.cl-dropdown-menu a:hover { background: var(--cl-canvas); color: var(--cl-primary); text-decoration: none; }

.cl-main { padding: var(--cl-space-lg) 0 var(--cl-space-xxl); }

/* ── Tab Nav (shared) ── */
.cl-tab-nav,
.cl-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--cl-hairline);
}
.cl-tab-nav { gap: var(--cl-space-xs); margin-bottom: var(--cl-space-lg); }
.cl-tab-bar { margin-bottom: var(--cl-space-md); }

.cl-tab-nav a,
.cl-tab-btn {
  padding: var(--cl-space-sm) var(--cl-space-md);
  font-size: var(--cl-text-sm);
  font-weight: 500;
  color: var(--cl-ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--cl-transition);
}
.cl-tab-btn { background: none; border: none; cursor: pointer; }

.cl-tab-nav a:hover,
.cl-tab-nav a.active,
.cl-tab-btn:hover,
.cl-tab-btn.active {
  color: var(--cl-primary);
  border-bottom-color: var(--cl-primary);
}
.cl-tab-nav a:hover,
.cl-tab-nav a.active { text-decoration: none; }

/* ── Cards ── */
.cl-card {
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-lg);
  box-shadow: var(--cl-shadow-sm);
  transition: transform var(--cl-transition), box-shadow var(--cl-transition);
}
.cl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cl-shadow-md);
}

.cl-session-card {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-sm);
  cursor: pointer;
}
.cl-session-card .cl-session-cover {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--cl-radius-md);
  background: var(--cl-canvas-strong);
}
.cl-session-card .cl-session-topic {
  font-family: var(--cl-font-display);
  font-size: var(--cl-text-base);
  font-weight: 600;
  color: var(--cl-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--cl-space-xs);
}
.cl-session-card .cl-session-meta {
  display: flex;
  gap: var(--cl-space-md);
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
}
/* ── Card Edit Button ── */
.cl-card-edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: var(--cl-radius-pill);
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--cl-transition);
  color: var(--cl-ink-muted);
}
.cl-session-card:hover .cl-card-edit-btn { opacity: 1; }
.cl-card-edit-btn:hover { background: var(--cl-canvas); color: var(--cl-primary); border-color: var(--cl-primary); }

.cl-card-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: var(--cl-radius-pill);
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--cl-transition);
  color: var(--cl-error);
}
.cl-session-card:hover .cl-card-delete-btn { opacity: 1; }
.cl-card-delete-btn:hover { background: var(--cl-error); color: var(--cl-white); border-color: var(--cl-error); }

.cl-session-card .cl-session-stats {
  display: flex;
  gap: var(--cl-space-md);
  font-size: var(--cl-text-xs);
  color: var(--cl-ink-subtle);
}

/* ── Tags ── */
.cl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--cl-space-xs);
}
.cl-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: var(--cl-text-xs);
  font-weight: 500;
  background: var(--cl-primary-light);
  color: var(--cl-primary);
  border-radius: var(--cl-radius-pill);
  white-space: nowrap;
}
.cl-tag-edit {
  cursor: pointer;
  border: 1px dashed var(--cl-primary);
  background: transparent;
  color: var(--cl-ink-subtle);
}
.cl-tag-remove {
  cursor: pointer;
  margin-left: 2px;
  opacity: 0.6;
}
.cl-tag-remove:hover { opacity: 1; }

.cl-tutor-card {
  display: flex;
  gap: var(--cl-space-md);
  align-items: center;
}
.cl-tutor-card .cl-tutor-info {
  flex: 1;
}

/* ── Session Grid ── */
.cl-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--cl-space-lg);
}

/* ── Buttons ── */
.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cl-space-xs);
  padding: 8px 20px;
  font-family: var(--cl-font-body);
  font-size: var(--cl-text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--cl-radius-md);
  cursor: pointer;
  transition: all var(--cl-transition-fast);
  line-height: 1.4;
}
.cl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cl-btn-primary {
  background: var(--cl-primary);
  color: var(--cl-white);
  border-color: var(--cl-primary);
}
.cl-btn-primary:hover:not(:disabled) { background: var(--cl-primary-hover); }

.cl-btn-secondary {
  background: var(--cl-canvas);
  color: var(--cl-ink);
  border-color: var(--cl-hairline);
}
.cl-btn-secondary:hover:not(:disabled) { background: var(--cl-canvas-strong); }

.cl-btn-ghost {
  background: transparent;
  color: var(--cl-ink-muted);
  text-decoration: underline;
}
.cl-btn-ghost:hover { color: var(--cl-primary); }

.cl-btn-sm { padding: 4px 12px; font-size: var(--cl-text-xs); }
.cl-btn-lg { padding: 12px 28px; font-size: var(--cl-text-base); }

/* ── Forms ── */
.cl-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-xs);
  margin-bottom: var(--cl-space-md);
}
.cl-label {
  font-size: var(--cl-text-sm);
  font-weight: 600;
  color: var(--cl-ink);
}
.cl-input, .cl-textarea {
  padding: 10px 14px;
  font-family: var(--cl-font-body);
  font-size: var(--cl-text-base);
  color: var(--cl-ink);
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-md);
  transition: border-color var(--cl-transition);
  width: 100%;
}
.cl-input:focus, .cl-textarea:focus {
  outline: none;
  border-color: var(--cl-primary);
  box-shadow: 0 0 0 3px var(--cl-primary-light);
}
.cl-input::placeholder, .cl-textarea::placeholder { color: var(--cl-ink-subtle); }
.cl-textarea { resize: vertical; min-height: 80px; }

.cl-form-error {
  font-size: var(--cl-text-xs);
  color: var(--cl-error);
  margin-top: 2px;
}

/* ── Conversation / Live Chat ── */
.cl-conversation {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-md);
  padding: var(--cl-space-md);
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-lg);
}

.cl-msg {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--cl-radius-lg);
  font-size: var(--cl-text-sm);
  line-height: 1.55;
  word-break: break-word;
  animation: clFadeIn 300ms ease-out;
}

.cl-msg-user {
  align-self: flex-start;
  background: var(--cl-canvas-strong);
  color: var(--cl-ink);
  border-bottom-left-radius: var(--cl-radius-sm);
}

.cl-msg-ai {
  align-self: flex-end;
  background: var(--cl-primary-light);
  color: var(--cl-ink);
  border-bottom-right-radius: var(--cl-radius-sm);
}

.cl-msg-label {
  font-size: var(--cl-text-xs);
  font-weight: 600;
  color: var(--cl-ink-muted);
  margin-bottom: 4px;
}
.cl-msg-user .cl-msg-label { color: var(--cl-ink-muted); }
.cl-msg-ai .cl-msg-label { color: var(--cl-primary); }

.cl-conversation-empty {
  text-align: center;
  padding: var(--cl-space-xxl) var(--cl-space-md);
  color: var(--cl-ink-subtle);
}
.cl-conversation-empty p { margin-top: var(--cl-space-sm); }

@keyframes clFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Comments ── */
.cl-comments {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-sm);
}

.cl-comment-item {
  display: flex;
  gap: var(--cl-space-sm);
  padding: var(--cl-space-sm) 0;
  border-bottom: 1px solid var(--cl-hairline-soft);
}
.cl-comment-item:last-child { border-bottom: none; }

.cl-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--cl-radius-pill);
  background: var(--cl-canvas-strong);
  flex-shrink: 0;
}

.cl-comment-body { flex: 1; min-width: 0; }
.cl-comment-name {
  font-size: var(--cl-text-xs);
  font-weight: 600;
  color: var(--cl-ink);
}
.cl-comment-text {
  font-size: var(--cl-text-sm);
  color: var(--cl-ink);
  margin-top: 2px;
  word-break: break-word;
}
.cl-comment-time {
  font-size: var(--cl-text-xs);
  color: var(--cl-ink-subtle);
  margin-top: 2px;
}

.cl-comment-input-area {
  display: flex;
  gap: var(--cl-space-sm);
  padding-top: var(--cl-space-md);
  border-top: 1px solid var(--cl-hairline);
}
.cl-comment-input-area .cl-input { flex: 1; }

/* ── Image Gallery ── */
.cl-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--cl-space-md);
}

.cl-image-item {
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-md);
  overflow: hidden;
}
.cl-image-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.cl-image-caption {
  padding: var(--cl-space-xs) var(--cl-space-sm);
  font-size: var(--cl-text-xs);
  color: var(--cl-ink-muted);
}

/* ── Badges ── */
.cl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: var(--cl-text-xs);
  font-weight: 600;
  border-radius: var(--cl-radius-pill);
}

.cl-badge-live {
  background: var(--cl-success-bg);
  color: var(--cl-success);
}
.cl-badge-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cl-success);
  animation: clPulse 2s ease-in-out infinite;
}

.cl-badge-ended {
  background: var(--cl-canvas-strong);
  color: var(--cl-ink-muted);
}

.cl-badge-tag {
  background: var(--cl-primary-light);
  color: var(--cl-primary);
}

@keyframes clPulse {
  0%   { opacity: 1; }
  40%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* ── Avatar ── */
.cl-avatar {
  border-radius: var(--cl-radius-pill);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cl-canvas-strong);
}
.cl-avatar-sm  { width: 24px; height: 24px; }
.cl-avatar-md  { width: 40px; height: 40px; }
.cl-avatar-lg  { width: 64px; height: 64px; }
.cl-avatar-xl  { width: 96px; height: 96px; }

/* ── Spinner ── */
.cl-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--cl-hairline);
  border-top-color: var(--cl-primary);
  border-radius: 50%;
  animation: clSpin 0.6s linear infinite;
  margin: var(--cl-space-lg) auto;
}
@keyframes clSpin { to { transform: rotate(360deg); } }

/* ── Toast ── */
.cl-toast-container {
  position: fixed;
  top: 72px;
  right: var(--cl-space-md);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-sm);
}
.cl-toast {
  padding: 12px 20px;
  border-radius: var(--cl-radius-md);
  font-size: var(--cl-text-sm);
  font-weight: 500;
  box-shadow: var(--cl-shadow-lg);
  animation: clSlideIn 200ms ease;
  max-width: 360px;
}
.cl-toast-success { background: var(--cl-success); color: white; }
.cl-toast-error   { background: var(--cl-error); color: white; }
.cl-toast-info    { background: var(--cl-ink); color: white; }

@keyframes clSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Modal ── */
.cl-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--cl-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: clFadeIn var(--cl-transition-slow) ease-out;
}
.cl-modal {
  background: var(--cl-white);
  border-radius: var(--cl-radius-xl);
  padding: var(--cl-space-xl);
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--cl-shadow-xl);
}
.cl-modal-title {
  font-family: var(--cl-font-display);
  font-size: var(--cl-text-xl);
  font-weight: 700;
  margin-bottom: var(--cl-space-md);
}
.cl-modal-actions {
  display: flex;
  gap: var(--cl-space-sm);
  justify-content: flex-end;
  margin-top: var(--cl-space-lg);
}

/* ── Empty State ── */
.cl-empty {
  text-align: center;
  padding: var(--cl-space-xxl) var(--cl-space-md);
  color: var(--cl-ink-subtle);
}
.cl-empty-icon { font-size: 2.5rem; margin-bottom: var(--cl-space-sm); }
.cl-empty p { margin-top: var(--cl-space-xs); font-size: var(--cl-text-sm); }

/* ── Dashboard ── */
.cl-dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--cl-space-lg);
  align-items: start;
}

.cl-dashboard-layout .cl-detail-left {
  min-width: 0;
}

.cl-dashboard-layout .cl-detail-right {
  position: sticky;
  top: 72px;
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-md);
}

/* ── Hero Row (topic left, upload right) ── */
.cl-hero-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--cl-space-lg);
  align-items: start;
  margin-bottom: var(--cl-space-lg);
}
.cl-hero-left { min-width: 0; }
.cl-hero-right .cl-sidebar-upload {
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-md);
}
.cl-hero-right .cl-sidebar-upload .cl-sidebar-upload-zone {
  background: var(--cl-canvas-strong);
}

.cl-detail-header {
  margin-bottom: var(--cl-space-lg);
}
.cl-detail-header .cl-badge { margin-bottom: var(--cl-space-sm); }
.cl-detail-header h2 { margin: var(--cl-space-xs) 0; }
.cl-detail-meta {
  display: flex;
  gap: var(--cl-space-md);
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
}

.cl-tab-btn .cl-tab-count {
  font-size: var(--cl-text-xs);
  background: var(--cl-canvas-strong);
  padding: 1px 6px;
  border-radius: var(--cl-radius-pill);
  margin-left: 4px;
}

.cl-viewer-list {
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-sm);
}
.cl-viewer-item {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  padding: var(--cl-space-xs) 0;
}
.cl-viewer-name {
  font-size: var(--cl-text-sm);
  font-weight: 500;
}

/* ── Tab Panel (shared by all pages) ── */
.cl-tab-panel { display: none; }
.cl-tab-panel.active { display: block; padding-top: var(--cl-space-md); }

/* ── Detail View (shared by live + dashboard) ── */
.cl-detail-back { margin-bottom: var(--cl-space-md); display: inline-block; }
.cl-detail-actions {
  margin-top: var(--cl-space-lg);
  padding-top: var(--cl-space-md);
  border-top: 1px solid var(--cl-hairline);
}
.cl-empty-compact { padding: var(--cl-space-lg); }

/* ── Conversation Min-Height (shared by watch + session) ── */
.cl-conversation { min-height: 200px; }

/* ── Comment Input (shared by watch + session) ── */
.cl-comment-input-area .cl-input { flex: 1; }

/* ── Session Hero Tweaks (shared by watch + session) ── */
.cl-session-hero .cl-badge { margin: var(--cl-space-sm) auto 0; display: inline-flex; }

/* ── Session Section Headers ── */
.cl-section {
  margin-bottom: var(--cl-space-xl);
}
.cl-section-title {
  font-family: var(--cl-font-display);
  font-size: var(--cl-text-lg);
  font-weight: 700;
  margin-bottom: var(--cl-space-md);
  padding-bottom: var(--cl-space-xs);
  border-bottom: 1px solid var(--cl-hairline);
}

/* ── Session Detail (viewer page) ── */
.cl-session-hero {
  text-align: center;
  padding: var(--cl-space-xl) 0;
}
.cl-session-hero .cl-avatar {
  margin: 0 auto var(--cl-space-md);
}
.cl-session-hero h1 {
  font-size: var(--cl-text-3xl);
  margin-bottom: var(--cl-space-xs);
}
.cl-session-hero .cl-tutor-name {
  font-size: var(--cl-text-lg);
  color: var(--cl-ink-muted);
  margin-bottom: var(--cl-space-xs);
}
.cl-session-hero .cl-tutor-title {
  color: var(--cl-primary);
  font-weight: 500;
  font-size: var(--cl-text-sm);
  margin-bottom: var(--cl-space-md);
}
.cl-session-hero .cl-tutor-bio {
  max-width: 600px;
  margin: 0 auto;
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
  line-height: 1.7;
}
.cl-session-hero .cl-problem-statement {
  margin-top: var(--cl-space-lg);
  padding: var(--cl-space-md) var(--cl-space-lg);
  background: var(--cl-white);
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-lg);
  display: inline-block;
  font-size: var(--cl-text-sm);
  color: var(--cl-ink);
}
.cl-problem-label {
  font-size: var(--cl-text-xs);
  font-weight: 600;
  color: var(--cl-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* ── Access Code Input ── */
.cl-access-form {
  max-width: 360px;
  margin: var(--cl-space-xxl) auto;
  text-align: center;
}
.cl-access-form h2 {
  margin-bottom: var(--cl-space-sm);
}
.cl-access-form p {
  color: var(--cl-ink-muted);
  font-size: var(--cl-text-sm);
  margin-bottom: var(--cl-space-lg);
}
.cl-access-input {
  text-align: center;
  font-size: var(--cl-text-2xl) !important;
  font-family: var(--cl-font-mono) !important;
  letter-spacing: 8px;
  font-weight: 700;
}
.cl-access-error {
  color: var(--cl-error);
  font-size: var(--cl-text-sm);
  margin-top: var(--cl-space-sm);
}

/* ── Create Session Form ── */
.cl-create-form {
  max-width: 600px;
  margin: 0 auto;
}

/* ── Tutor Profile Page ── */
.cl-profile-header {
  display: flex;
  gap: var(--cl-space-lg);
  align-items: flex-start;
  margin-bottom: var(--cl-space-xl);
}
.cl-profile-body { flex: 1; }

/* ── Upload Zones (shared base) ── */
.cl-sidebar-upload-zone,
.cl-modal-upload,
.cl-upload-zone {
  border: 2px dashed var(--cl-hairline);
  border-radius: var(--cl-radius-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--cl-transition);
}
.cl-sidebar-upload-zone:hover,
.cl-modal-upload:hover,
.cl-upload-zone:hover,
.cl-sidebar-upload.drag-over .cl-sidebar-upload-zone,
.cl-modal-upload.drag-over,
.cl-upload-zone.drag-over {
  border-color: var(--cl-primary);
  background: var(--cl-primary-light);
}

/* Sidebar variant */
.cl-sidebar-upload { margin-bottom: var(--cl-space-md); }
.cl-sidebar-upload-zone {
  padding: var(--cl-space-lg) var(--cl-space-md);
  background: var(--cl-canvas-strong);
}
.cl-sidebar-upload-plus {
  display: block;
  font-size: 2rem;
  font-weight: 300;
  color: var(--cl-ink-subtle);
  line-height: 1;
  margin-bottom: var(--cl-space-xs);
}
.cl-sidebar-upload-zone p { font-size: var(--cl-text-xs); color: var(--cl-ink-muted); margin: 0; }

/* Modal variant */
.cl-modal-upload {
  padding: 28px var(--cl-space-lg);
  background: var(--cl-canvas-strong);
  min-height: 100px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.cl-modal-upload:hover,
.cl-modal-upload.drag-over { border-style: solid; }
.cl-modal-upload-icon {
  display: block;
  font-size: 2.2rem;
  font-weight: 200;
  color: var(--cl-ink-subtle);
  line-height: 1;
  margin-bottom: 6px;
}
.cl-modal-upload p { font-size: var(--cl-text-sm); color: var(--cl-ink-muted); margin: 0; }
.cl-modal-upload p strong { color: var(--cl-ink); }

/* Legacy variant */
.cl-upload-zone {
  padding: var(--cl-space-lg);
  background: var(--cl-canvas);
  margin-bottom: var(--cl-space-md);
}

/* ── Upload Previews (shared base) ── */
.cl-sidebar-upload-preview,
.cl-modal-upload-preview,
.cl-upload-preview {
  display: flex;
  align-items: center;
  gap: var(--cl-space-sm);
  padding: var(--cl-space-sm);
}
.cl-sidebar-upload-preview img,
.cl-modal-upload-preview img,
.cl-upload-preview img {
  object-fit: cover;
  border-radius: var(--cl-radius-sm);
}

.cl-sidebar-upload-preview { font-size: var(--cl-text-xs); }
.cl-sidebar-upload-preview img { width: 28px; height: 28px; }

.cl-modal-upload-preview {
  background: var(--cl-canvas);
  border-radius: var(--cl-radius-md);
}
.cl-modal-upload-preview img { width: 60px; height: 40px; }

.cl-upload-preview {
  background: var(--cl-canvas);
  border-radius: var(--cl-radius-md);
  margin-bottom: var(--cl-space-sm);
}
.cl-upload-preview img { width: 48px; height: 48px; }
.cl-upload-preview .cl-upload-name {
  flex: 1; font-size: var(--cl-text-xs); color: var(--cl-ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-upload-progress {
  width: 100%; height: 4px;
  background: var(--cl-hairline-soft);
  border-radius: 2px;
  margin-bottom: var(--cl-space-sm);
  overflow: hidden;
}
.cl-upload-progress-bar {
  height: 100%; background: var(--cl-primary);
  border-radius: 2px;
  transition: width 200ms ease;
}

/* ── Auth Container ── */
.cl-auth-container {
  max-width: 420px;
  margin: 10vh auto;
  padding: var(--cl-space-xl);
  background: var(--cl-white);
  border-radius: var(--cl-radius-lg);
  border: 1px solid var(--cl-hairline);
}
.cl-auth-container h2 {
  font-family: var(--cl-font-display);
  font-size: var(--cl-text-2xl);
  text-align: center;
  margin-bottom: var(--cl-space-lg);
  color: var(--cl-ink);
}
.cl-auth-error {
  color: var(--cl-error);
  font-size: var(--cl-text-sm);
  margin-top: var(--cl-space-sm);
  padding: var(--cl-space-sm);
  background: var(--cl-error-bg);
  border-radius: var(--cl-radius-sm);
}
.cl-auth-error.cl-hidden { display: none; }
.cl-auth-divider {
  display: flex;
  align-items: center;
  margin: var(--cl-space-md) 0;
  color: var(--cl-ink-subtle);
  font-size: var(--cl-text-sm);
}
.cl-auth-divider::before,
.cl-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cl-hairline);
}
.cl-auth-divider span {
  padding: 0 var(--cl-space-sm);
}
.cl-auth-footer {
  text-align: center;
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
  margin-top: var(--cl-space-md);
}
.cl-auth-footer a {
  color: var(--cl-primary);
  text-decoration: none;
}
.cl-auth-hint {
  text-align: center;
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
  margin-bottom: var(--cl-space-md);
}

/* ── Page Title ── */
.cl-page-title {
  font-family: var(--cl-font-display);
  font-size: var(--cl-text-3xl);
  margin-bottom: var(--cl-space-lg);
}
.cl-page-subtitle {
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
  margin-bottom: var(--cl-space-lg);
  margin-top: calc(-1 * var(--cl-space-sm));
}

/* ── Utility ── */
.cl-text-muted { color: var(--cl-ink-muted); }
.cl-text-subtle { color: var(--cl-ink-subtle); }
.cl-text-sm { font-size: var(--cl-text-sm); }
.cl-text-xs { font-size: var(--cl-text-xs); }
.cl-text-center { text-align: center; }
.cl-mt-md { margin-top: var(--cl-space-md); }
.cl-mt-lg { margin-top: var(--cl-space-lg); }
.cl-mb-md { margin-bottom: var(--cl-space-md); }
.cl-mb-lg { margin-bottom: var(--cl-space-lg); }
.cl-flex { display: flex; }
.cl-flex-between { display: flex; justify-content: space-between; align-items: center; }
.cl-gap-sm { gap: var(--cl-space-sm); }
.cl-gap-md { gap: var(--cl-space-md); }
.cl-hidden { display: none !important; }
.cl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Session Time Badge ── */
.cl-session-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--cl-text-xs);
  color: var(--cl-ink-muted);
  margin-top: 2px;
}
.cl-session-time-icon { font-size: 0.9rem; }

/* ── AI Assist Button ── */
.cl-ai-wrapper { position: relative; }
.cl-ai-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 8px;
  font-size: var(--cl-text-xs);
  font-weight: 500;
  color: var(--cl-primary);
  background: var(--cl-white);
  border: 1px solid var(--cl-primary-light);
  border-radius: var(--cl-radius-sm);
  cursor: pointer;
  z-index: 2;
  transition: all var(--cl-transition);
}
.cl-ai-btn:hover { background: var(--cl-primary-light); }
.cl-ai-btn:disabled { opacity: 0.5; cursor: wait; }

/* ── Bookmark Button ── */
.cl-bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--cl-text-xs);
  color: var(--cl-ink-subtle);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  transition: all var(--cl-transition);
}
.cl-bookmark-btn:hover { color: var(--cl-accent-amber); }
.cl-bookmark-btn.bookmarked { color: var(--cl-accent-amber); }

/* ── Action Bar ── */
.cl-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cl-space-md);
  padding-bottom: var(--cl-space-sm);
  border-bottom: 1px solid var(--cl-hairline);
}

/* ── Copy Conversation Button ── */
.cl-copy-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--cl-space-sm);
}
.cl-copy-btn {
  font-size: var(--cl-text-xs);
  color: var(--cl-ink-subtle);
  background: none;
  border: 1px solid var(--cl-hairline);
  border-radius: var(--cl-radius-sm);
  padding: 2px 8px;
  cursor: pointer;
  transition: all var(--cl-transition);
}
.cl-copy-btn:hover { color: var(--cl-primary); border-color: var(--cl-primary); }

/* ── Session Ended Banner ── */
.cl-ended-banner {
  text-align: center;
  padding: var(--cl-space-sm) var(--cl-space-md);
  background: var(--cl-canvas-strong);
  border-radius: var(--cl-radius-md);
  font-size: var(--cl-text-sm);
  color: var(--cl-ink-muted);
  margin-bottom: var(--cl-space-md);
}

/* ── Two Column Layout for Index ── */
.cl-index-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--cl-space-lg);
  align-items: start;
}
.cl-index-left { min-width: 0; }
.cl-index-right {
  position: sticky;
  top: 72px;
}
.cl-index-right .cl-card {
  margin-bottom: var(--cl-space-md);
}
.cl-index-section-title {
  font-family: var(--cl-font-display);
  font-size: var(--cl-text-lg);
  font-weight: 700;
  margin-bottom: var(--cl-space-md);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  :root {
    --cl-text-4xl: 2rem;
    --cl-text-3xl: 1.5rem;
    --cl-text-2xl: 1.25rem;
  }

  .cl-container { padding: 0 var(--cl-space-sm); }

  .cl-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .cl-session-grid {
    grid-template-columns: 1fr;
  }

  .cl-profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cl-msg { max-width: 90%; }

  .cl-session-hero h1 { font-size: var(--cl-text-2xl); }
}

@media (max-width: 480px) {
  .cl-header { padding: 0 var(--cl-space-sm); }
  .cl-header-brand { font-size: var(--cl-text-base); }
  .cl-header-nav { gap: var(--cl-space-sm); }
  .cl-header-nav a { font-size: var(--cl-text-xs); }

  .cl-modal { padding: var(--cl-space-md); }
  .cl-image-gallery { grid-template-columns: 1fr 1fr; }

  .cl-msg { max-width: 95%; font-size: var(--cl-text-xs); }
}

/* ── Clickable Tutor Name ── */
.cl-tutor-name-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cl-tutor-name-link:hover .cl-tutor-name {
  color: var(--cl-primary);
  text-decoration: underline;
}

/* ── Portfolio Works Grid ── */
.cl-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--cl-space-sm);
}
.cl-work-item {
  position: relative;
  border-radius: var(--cl-radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--cl-canvas-strong);
}
.cl-work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cl-work-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-work-card {
  cursor: pointer;
  border-radius: var(--cl-radius-md);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--cl-canvas-strong);
  transition: transform var(--cl-transition);
}
.cl-work-card:hover { transform: scale(1.03); }
.cl-work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Lightbox ── */
.cl-lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--cl-radius-md);
}
.cl-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 36px;
  color: white;
  cursor: pointer;
  z-index: 1;
}

/* ── Repo Links ── */
.cl-repo-item {
  display: flex;
  gap: var(--cl-space-sm);
  align-items: center;
  margin-bottom: var(--cl-space-xs);
}
.cl-repo-link {
  display: block;
  padding: var(--cl-space-sm) var(--cl-space-md);
  background: var(--cl-canvas-strong);
  border-radius: var(--cl-radius-sm);
  font-size: var(--cl-text-sm);
  font-family: var(--cl-font-mono);
  color: var(--cl-ink-muted);
  text-decoration: none;
  word-break: break-all;
  margin-bottom: 6px;
}
.cl-repo-link:hover {
  color: var(--cl-primary);
  background: var(--cl-primary-light);
  text-decoration: none;
}