/* ============================================================
   Intelligence Platform — platform-style.css
   Refactored from ColdCAIs v12 coldcase-style.css
   All cc- prefixes → ip-
   Scoped under .ip-wrap with all: initial reset
   ============================================================ */

/* Handwriting-style font for the Scratchpad (alpha12.1) + serif for Story (alpha13) */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Patrick+Hand&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ==========================================================
   1. VARIABLES & RESET
   ========================================================== */

:root {
  --ip-primary: #6366f1;
  --ip-primary-hover: #4f46e5;
  --ip-primary-light: #eef2ff;
  --ip-success: #22c55e;
  --ip-success-light: #f0fdf4;
  --ip-error: #ef4444;
  --ip-error-light: #fef2f2;
  --ip-warning: #f59e0b;
  --ip-warning-light: #fffbeb;
  --ip-info: #3b82f6;
  --ip-info-light: #eff6ff;

  --ip-bg: #f8fafc;
  --ip-surface: #ffffff;
  --ip-surface-raised: #ffffff;
  --ip-surface-sunken: #f7f8fa;

  --ip-text: #1e293b;
  --ip-text-secondary: #475569;
  --ip-text-muted: #94a3b8;

  --ip-border: #eef0f3;
  --ip-border-light: #f1f5f9;

  --ip-shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
  --ip-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.02);
  --ip-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --ip-shadow-lg: 0 4px 12px rgba(0,0,0,0.04), 0 12px 36px rgba(0,0,0,0.03);

  --ip-radius-sm: 12px;
  --ip-radius: 16px;
  --ip-radius-lg: 20px;
  --ip-radius-xl: 28px;
  --ip-radius-full: 9999px;

  --ip-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  --ip-transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ip-transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ip-glow-primary: 0 0 0 3px rgba(99, 102, 241, 0.1);
  --ip-hover-lift: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);

  --ip-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

/* Platform pages use their own HTML shell — no theme chrome loads.
   body.ip-page class added by platform-header.php for scoping. */
body.ip-page {
  margin: 0;
  padding: 0;
  background: var(--ip-bg, #f8f9fb);
}

/* Full scope reset */
.ip-wrap {
  all: initial;
  display: block;
  font-family: var(--ip-font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ip-text);
  background: var(--ip-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

.ip-wrap *,
.ip-wrap *::before,
.ip-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.ip-wrap a {
  color: var(--ip-primary);
  text-decoration: none;
  transition: color var(--ip-transition);
}

.ip-wrap a:hover {
  color: var(--ip-primary-hover);
  text-decoration: underline;
}

.ip-wrap button {
  font-family: var(--ip-font);
  cursor: pointer;
  border: none;
  background: none;
  font-size: inherit;
  color: inherit;
}

.ip-wrap input,
.ip-wrap textarea,
.ip-wrap select {
  font-family: var(--ip-font);
  font-size: inherit;
  color: inherit;
}


/* ==========================================================
   2. LAYOUT
   ========================================================== */

.ip-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 40px 56px;
  min-height: 100vh;
}


/* ==========================================================
   3. LOCK SCREEN
   ========================================================== */

.ip-lock-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--ip-bg);
}

.ip-lock-card {
  background: var(--ip-surface);
  border-radius: var(--ip-radius-lg);
  box-shadow: var(--ip-shadow-lg);
  padding: 48px 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: ipFadeIn 0.4s ease;
}

.ip-lock-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 8px;
}

.ip-lock-card p {
  font-size: 14px;
  color: var(--ip-text-secondary);
  margin-bottom: 28px;
  line-height: 1.5;
}

.ip-lock-card .ip-lock-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: var(--ip-primary-light);
  border-radius: var(--ip-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.ip-lock-card .ip-text-input {
  margin-bottom: 16px;
}

.ip-lock-card .ip-btn-primary {
  width: 100%;
}

.ip-lock-error {
  color: var(--ip-error);
  font-size: 13px;
  margin-top: 12px;
  font-weight: 500;
}


/* ==========================================================
   4. HEADER
   ========================================================== */

.ip-header {
  margin-bottom: 24px;
}

.ip-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ip-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ip-text);
  flex-shrink: 0;
}

.ip-brand:hover {
  text-decoration: none;
}

.ip-brand-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--ip-primary), var(--ip-secondary, #8b5cf6));
  border-radius: var(--ip-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.ip-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ip-brand-name,
.ip-brand-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ip-text);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.ip-brand-sub {
  font-size: 12px;
  color: var(--ip-text-muted);
  font-weight: 500;
  line-height: 1.2;
}

.ip-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ip-case-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ip-surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--ip-radius-sm);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ip-text);
  cursor: pointer;
  transition: all var(--ip-transition);
  box-shadow: var(--ip-shadow-sm);
}

.ip-case-picker:hover {
  border-color: var(--ip-border);
  box-shadow: var(--ip-shadow);
}

.ip-case-picker select {
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ip-text);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4px;
}

.ip-model-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ip-primary-light);
  color: var(--ip-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--ip-radius-full);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ip-model-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--ip-primary);
  border-radius: var(--ip-radius-full);
  flex-shrink: 0;
}


/* ==========================================================
   5. TABS / NAV
   ========================================================== */

.ip-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ip-border);
  border-radius: 0;
  padding: 0;
  margin-bottom: 24px;
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ip-tabs-bar::-webkit-scrollbar {
  display: none;
}

.ip-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ip-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  position: relative;
  user-select: none;
  margin-bottom: -1px;
}

.ip-tab:hover {
  color: var(--ip-text);
  background: transparent;
}

.ip-tab.active {
  color: var(--ip-primary);
  background: transparent;
  border-bottom: 2px solid var(--ip-primary);
  font-weight: 600;
}

.ip-tab .ip-tab-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.ip-tab .ip-tab-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--ip-border);
  color: var(--ip-text-secondary);
  border-radius: var(--ip-radius-full);
  padding: 1px 7px;
  line-height: 1.5;
  min-width: 20px;
  text-align: center;
}

.ip-tab.active .ip-tab-count {
  background: var(--ip-primary);
  color: #fff;
}


/* ==========================================================
   6. MAIN CARD
   ========================================================== */

.ip-main-card {
  background: var(--ip-surface);
  border: none;
  border-radius: var(--ip-radius-lg);
  box-shadow: var(--ip-shadow), 0 0 0 1px rgba(0,0,0,0.03);
  overflow: hidden;
  animation: ipFadeIn 0.35s ease;
}

.ip-tab-body {
  padding: 32px;
}

.ip-tab-body.hidden {
  display: none;
}


/* ==========================================================
   7. SECTIONS & GRID
   ========================================================== */

.ip-section {
  margin-bottom: 32px;
}

.ip-section:last-child {
  margin-bottom: 0;
}

.ip-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ip-section-title .ip-section-icon {
  font-size: 18px;
  color: var(--ip-primary);
}

.ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.ip-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ip-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ip-info-card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  padding: 24px;
  transition: all var(--ip-transition);
}

.ip-info-card:hover {
  box-shadow: var(--ip-hover-lift);
  transform: translateY(-1px);
  border-color: var(--ip-primary);
}

.ip-info-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ip-text-muted);
  margin-bottom: 6px;
}

.ip-info-card-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ip-text);
  line-height: 1.4;
  word-break: break-word;
}

.ip-info-card-meta {
  font-size: 13px;
  color: var(--ip-text-secondary);
  margin-top: 4px;
}

.ip-info-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--ip-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
  background: var(--ip-primary-light);
  color: var(--ip-primary);
}


/* ==========================================================
   8. BADGES
   ========================================================== */

.ip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--ip-radius-full);
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

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

.ip-badge.success {
  background: var(--ip-success-light);
  color: var(--ip-success);
}

.ip-badge.error {
  background: var(--ip-error-light);
  color: var(--ip-error);
}

.ip-badge.warning {
  background: var(--ip-warning-light);
  color: var(--ip-warning);
}

.ip-badge.info {
  background: var(--ip-info-light);
  color: var(--ip-info);
}

.ip-badge.neutral {
  background: var(--ip-surface-sunken);
  color: var(--ip-text-secondary);
}

.ip-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--ip-radius-full);
  background: currentColor;
  flex-shrink: 0;
}


/* ==========================================================
   9. EMPTY STATES
   ========================================================== */

.ip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.ip-empty-icon {
  width: 72px;
  height: 72px;
  background: var(--ip-surface-sunken);
  border-radius: var(--ip-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--ip-text-muted);
  margin-bottom: 20px;
}

.ip-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 6px;
}

.ip-empty-desc {
  font-size: 14px;
  color: var(--ip-text-secondary);
  max-width: 340px;
  line-height: 1.5;
}

.ip-empty .ip-btn-primary {
  margin-top: 20px;
}


/* ==========================================================
   10. INVESTIGATOR / CHAT
   ========================================================== */

.ip-investigator {
  display: flex;
  height: 680px;
  border-radius: var(--ip-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ip-border);
  background: var(--ip-surface);
}

/* Sidebar */
.ip-sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--ip-surface-sunken);
  border-right: 1px solid var(--ip-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Unified sidebar header — used across chat, research, evidence, board */
.ip-sidebar-header,
.ip-sidebar-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ip-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ip-surface);
  flex-shrink: 0;
}

.ip-sidebar-title,
.ip-sidebar-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--ip-text);
  letter-spacing: 0.01em;
}

/* Sidebar section headers (h3 inside form columns) */
.ip-research-form-col h3,
.ip-evidence-upload-col h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ip-text);
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Research list header */
.ip-research-list-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--ip-text);
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ip-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Chat Area */
.ip-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.ip-chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ip-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ip-surface);
}

.ip-chat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ip-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.ip-messages::-webkit-scrollbar {
  width: 6px;
}

.ip-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ip-messages::-webkit-scrollbar-thumb {
  background: var(--ip-border);
  border-radius: var(--ip-radius-full);
}

.ip-messages::-webkit-scrollbar-thumb:hover {
  background: var(--ip-text-muted);
}

/* Message */
.ip-msg {
  display: flex;
  gap: 12px;
  animation: ipMsgIn 0.3s ease;
  max-width: 85%;
}

.ip-msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ip-msg.assistant {
  align-self: flex-start;
}

.ip-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--ip-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.ip-msg.user .ip-msg-avatar {
  background: var(--ip-primary);
  color: #fff;
}

.ip-msg.assistant .ip-msg-avatar {
  background: var(--ip-surface-sunken);
  color: var(--ip-text-secondary);
  border: 1px solid var(--ip-border);
}

.ip-msg-content {
  padding: 12px 16px;
  border-radius: var(--ip-radius);
  font-size: 14px;
  line-height: 1.65;
  word-break: break-word;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ip-msg.user .ip-msg-content {
  background: var(--ip-primary);
  color: #fff;
  border-radius: var(--ip-radius) var(--ip-radius) 6px var(--ip-radius);
}

.ip-msg.assistant .ip-msg-content {
  background: #fafbfc;
  color: var(--ip-text);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius) var(--ip-radius) var(--ip-radius) 6px;
}

/* Save as Research — floating icon in bottom-right of AI message */
.ip-save-research-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ip-msg-content:hover .ip-save-research-btn {
  opacity: 1;
}
.ip-save-research-btn:hover {
  background: var(--ip-primary);
  border-color: var(--ip-primary);
  transform: scale(1.1);
}
.ip-save-research-btn:disabled {
  opacity: 1;
  cursor: default;
  background: var(--ip-success);
  border-color: var(--ip-success);
  color: #fff;
  font-size: 12px;
  pointer-events: none;
}

/* Images and links in AI chat responses */
.ip-msg.assistant .ip-msg-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
  border: 1px solid var(--ip-border);
  background: var(--ip-surface-sunken);
  min-height: 40px;
}
.ip-msg.assistant .ip-msg-content img.ip-img-error {
  display: none;
}
.ip-msg.assistant .ip-msg-content iframe {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  border: 1px solid var(--ip-border);
  display: block;
}
.ip-msg.assistant .ip-msg-content a {
  color: var(--ip-primary);
  text-decoration: underline;
  text-decoration-color: rgba(99, 102, 241, 0.3);
  transition: text-decoration-color 0.15s;
}
.ip-msg.assistant .ip-msg-content a:hover {
  text-decoration-color: var(--ip-primary);
}

.ip-msg-time {
  font-size: 11px;
  color: var(--ip-text-muted);
  margin-top: 4px;
  display: block;
}

.ip-msg.user .ip-msg-time {
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
}

/* Input Bar */
.ip-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--ip-border);
  background: var(--ip-surface);
}

.ip-input {
  flex: 1;
  border: 1px solid transparent;
  border-radius: var(--ip-radius);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ip-text);
  background: var(--ip-surface-sunken);
  resize: none;
  min-height: 46px;
  max-height: 160px;
  overflow-y: auto;
  transition: border-color var(--ip-transition), box-shadow var(--ip-transition);
  outline: none;
  font-family: var(--ip-font);
}

.ip-input:focus {
  border-color: var(--ip-primary);
  box-shadow: var(--ip-glow-primary);
  background: var(--ip-surface);
}

.ip-input::placeholder {
  color: var(--ip-text-muted);
}

.ip-send-btn {
  width: 46px;
  height: 46px;
  background: var(--ip-primary);
  color: #fff;
  border: none;
  border-radius: var(--ip-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--ip-transition);
  flex-shrink: 0;
}

.ip-send-btn:hover {
  background: var(--ip-primary-hover);
  transform: scale(1.04);
}

.ip-send-btn:active {
  transform: scale(0.96);
}

.ip-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


/* ==========================================================
   11. QUICK ACTIONS
   ========================================================== */

.ip-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--ip-border-light);
  background: var(--ip-surface);
}

.ip-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ip-text-secondary);
  background: var(--ip-surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--ip-radius-full);
  cursor: pointer;
  transition: all var(--ip-transition);
  white-space: nowrap;
}

.ip-quick-btn:hover {
  color: var(--ip-primary);
  border-color: var(--ip-border);
  background: var(--ip-surface);
  box-shadow: var(--ip-shadow-sm);
}

.ip-quick-btn .ip-quick-icon {
  font-size: 14px;
  line-height: 1;
}


/* ==========================================================
   12. THREAD LIST
   ========================================================== */

.ip-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.ip-thread-list::-webkit-scrollbar {
  width: 4px;
}

.ip-thread-list::-webkit-scrollbar-track {
  background: transparent;
}

.ip-thread-list::-webkit-scrollbar-thumb {
  background: var(--ip-border);
  border-radius: var(--ip-radius-full);
}

.ip-thread {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ip-radius-sm);
  cursor: pointer;
  transition: all var(--ip-transition);
  margin-bottom: 4px;
}

.ip-thread:hover {
  background: rgba(99, 102, 241, 0.04);
}

.ip-thread.active {
  background: rgba(99, 102, 241, 0.06);
  color: var(--ip-primary);
}

.ip-thread-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ip-radius-sm);
  background: var(--ip-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--ip-text-muted);
  border: 1px solid var(--ip-border-light);
}

.ip-thread.active .ip-thread-icon {
  background: var(--ip-primary);
  color: #fff;
  border-color: var(--ip-primary);
}

.ip-thread-info {
  flex: 1;
  min-width: 0;
}

.ip-thread-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ip-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-thread.active .ip-thread-name {
  color: var(--ip-primary);
}

.ip-thread-preview {
  font-size: 12px;
  color: var(--ip-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-thread-time {
  font-size: 11px;
  color: var(--ip-text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.ip-new-thread {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ip-primary);
  background: var(--ip-surface);
  border: 1px dashed var(--ip-primary);
  border-radius: var(--ip-radius-sm);
  cursor: pointer;
  transition: all var(--ip-transition);
  opacity: 0.8;
}

.ip-new-thread:hover {
  opacity: 1;
  background: var(--ip-primary-light);
}


/* ==========================================================
   13. TOOL TAGS
   ========================================================== */

.ip-tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--ip-radius-full);
  background: var(--ip-info-light);
  color: var(--ip-info);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.ip-tool-tag.searching {
  background: var(--ip-warning-light);
  color: var(--ip-warning);
}

.ip-tool-tag.complete {
  background: var(--ip-success-light);
  color: var(--ip-success);
}

.ip-tool-tag.error {
  background: var(--ip-error-light);
  color: var(--ip-error);
}


/* ==========================================================
   14. MARKDOWN CONTENT (inside assistant messages)
   ========================================================== */

.ip-msg.assistant .ip-msg-content h1,
.ip-msg.assistant .ip-msg-content h2,
.ip-msg.assistant .ip-msg-content h3,
.ip-msg.assistant .ip-msg-content h4 {
  font-weight: 700;
  color: var(--ip-text);
  margin-top: 16px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.ip-msg.assistant .ip-msg-content h1 {
  font-size: 18px;
}

.ip-msg.assistant .ip-msg-content h2 {
  font-size: 16px;
}

.ip-msg.assistant .ip-msg-content h3 {
  font-size: 15px;
}

.ip-msg.assistant .ip-msg-content h4 {
  font-size: 14px;
}

.ip-msg.assistant .ip-msg-content p {
  margin-bottom: 10px;
}

.ip-msg.assistant .ip-msg-content p:last-child {
  margin-bottom: 0;
}

.ip-msg.assistant .ip-msg-content ul,
.ip-msg.assistant .ip-msg-content ol {
  margin-bottom: 10px;
  padding-left: 22px;
}

.ip-msg.assistant .ip-msg-content li {
  margin-bottom: 4px;
  line-height: 1.6;
}

.ip-msg.assistant .ip-msg-content li::marker {
  color: var(--ip-text-muted);
}

.ip-msg.assistant .ip-msg-content strong {
  font-weight: 700;
  color: var(--ip-text);
}

.ip-msg.assistant .ip-msg-content em {
  font-style: italic;
}

.ip-msg.assistant .ip-msg-content code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 12.5px;
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: 6px;
  padding: 2px 6px;
}

.ip-msg.assistant .ip-msg-content pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--ip-radius-sm);
  padding: 20px;
  margin: 10px 0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}

.ip-msg.assistant .ip-msg-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
}

.ip-msg.assistant .ip-msg-content blockquote {
  border-left: 3px solid var(--ip-primary);
  padding: 8px 14px;
  margin: 10px 0;
  background: var(--ip-primary-light);
  border-radius: 0 var(--ip-radius-sm) var(--ip-radius-sm) 0;
  color: var(--ip-text-secondary);
  font-size: 13.5px;
}

.ip-msg.assistant .ip-msg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}

.ip-msg.assistant .ip-msg-content th,
.ip-msg.assistant .ip-msg-content td {
  border: 1px solid var(--ip-border);
  padding: 8px 12px;
  text-align: left;
}

.ip-msg.assistant .ip-msg-content th {
  background: var(--ip-surface);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ip-text-secondary);
}

.ip-msg.assistant .ip-msg-content hr {
  border: none;
  border-top: 1px solid var(--ip-border);
  margin: 14px 0;
}

.ip-msg.assistant .ip-msg-content a {
  color: var(--ip-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ip-msg.assistant .ip-msg-content a:hover {
  color: var(--ip-primary-hover);
}

.ip-msg.assistant .ip-msg-content img {
  border-radius: var(--ip-radius-sm);
  margin: 8px 0;
}


/* ==========================================================
   15. RESEARCH TAB
   ========================================================== */

.ip-research-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.ip-research-form-col {
  width: 320px;
  min-width: 320px;
  position: sticky;
  top: 24px;
}

.ip-research-list-col {
  flex: 1;
  min-width: 0;
}


/* ==========================================================
   16. FORM ELEMENTS
   ========================================================== */

.ip-form-card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  padding: 24px;
  box-shadow: var(--ip-shadow-sm);
}

.ip-form-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ip-text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ip-field {
  margin-bottom: 18px;
}

.ip-field:last-child {
  margin-bottom: 0;
}

.ip-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ip-text);
  margin-bottom: 6px;
}

.ip-field-label .ip-required {
  color: var(--ip-error);
  margin-left: 2px;
}

.ip-field-hint {
  font-size: 12px;
  color: var(--ip-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

.ip-text-input {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--ip-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ip-text);
  background: var(--ip-surface-sunken);
  transition: border-color var(--ip-transition), box-shadow var(--ip-transition), background var(--ip-transition);
  outline: none;
  font-family: var(--ip-font);
}

.ip-text-input:hover {
  border-color: var(--ip-border);
  background-color: #f3f4f8;
}

.ip-text-input:focus {
  border-color: var(--ip-primary);
  background: var(--ip-surface);
  box-shadow: var(--ip-glow-primary);
}

.ip-text-input::placeholder {
  color: var(--ip-text-muted);
}

.ip-text-input.error {
  border-color: var(--ip-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.ip-textarea {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--ip-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ip-text);
  background: var(--ip-surface-sunken);
  transition: border-color var(--ip-transition), box-shadow var(--ip-transition), background var(--ip-transition);
  outline: none;
  font-family: var(--ip-font);
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.ip-textarea:hover {
  border-color: var(--ip-border);
  background-color: #f3f4f8;
}

.ip-textarea:focus {
  border-color: var(--ip-primary);
  background: var(--ip-surface);
  box-shadow: var(--ip-glow-primary);
}

.ip-textarea::placeholder {
  color: var(--ip-text-muted);
}

.ip-select {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--ip-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ip-text);
  background: var(--ip-surface-sunken);
  transition: border-color var(--ip-transition), box-shadow var(--ip-transition), background var(--ip-transition);
  outline: none;
  font-family: var(--ip-font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  min-height: 44px;
  line-height: 1.4;
}

.ip-select:hover {
  border-color: var(--ip-border);
  background-color: #f3f4f8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.ip-select:focus {
  border-color: var(--ip-primary);
  background-color: var(--ip-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236366f1' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  box-shadow: var(--ip-glow-primary);
}

.ip-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ip-checkbox-wrap input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ip-primary);
  cursor: pointer;
}

.ip-checkbox-wrap label {
  font-size: 14px;
  color: var(--ip-text);
  cursor: pointer;
  user-select: none;
}


/* ==========================================================
   17. UPLOAD
   ========================================================== */

.ip-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ip-primary);
  background: var(--ip-primary-light);
  border: 2px dotted var(--ip-border);
  border-radius: var(--ip-radius);
  cursor: pointer;
  transition: all var(--ip-transition);
  width: 100%;
  text-align: center;
}

.ip-upload-btn:hover {
  border-style: dashed;
  border-color: var(--ip-primary);
  background: var(--ip-primary-light);
}

.ip-upload-btn .ip-upload-icon {
  font-size: 18px;
}

.ip-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.ip-upload-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--ip-radius-sm);
  overflow: hidden;
  border: 1px solid var(--ip-border);
}

.ip-upload-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ip-upload-preview-item .ip-upload-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: var(--ip-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--ip-transition);
}

.ip-upload-preview-item .ip-upload-remove:hover {
  background: var(--ip-error);
}

.ip-upload-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ip-surface-sunken);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm);
  margin-top: 8px;
}

.ip-upload-file-icon {
  font-size: 20px;
  color: var(--ip-primary);
  flex-shrink: 0;
}

.ip-upload-file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ip-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-upload-file-size {
  font-size: 12px;
  color: var(--ip-text-muted);
  flex-shrink: 0;
}


/* ==========================================================
   18. BUTTONS
   ========================================================== */

.ip-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ip-primary);
  border: none;
  border-radius: var(--ip-radius-sm);
  cursor: pointer;
  transition: all var(--ip-transition);
  box-shadow: var(--ip-shadow-sm);
  white-space: nowrap;
  font-family: var(--ip-font);
}

.ip-btn-primary:hover {
  background: var(--ip-primary-hover);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25), 0 0 0 3px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}

.ip-btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--ip-shadow-sm);
  transition-timing-function: var(--ip-transition-spring);
}

.ip-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ip-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ip-error);
  border: none;
  border-radius: var(--ip-radius-sm);
  cursor: pointer;
  transition: all var(--ip-transition);
  box-shadow: var(--ip-shadow-sm);
  white-space: nowrap;
  font-family: var(--ip-font);
}

.ip-btn-danger:hover {
  background: #dc2626;
  box-shadow: var(--ip-shadow);
  transform: translateY(-1px);
}

.ip-btn-danger:active {
  transform: translateY(0);
}

.ip-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.ip-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ip-text-secondary);
  background: transparent;
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm);
  cursor: pointer;
  transition: all var(--ip-transition);
  white-space: nowrap;
  font-family: var(--ip-font);
}

.ip-btn-ghost:hover {
  color: var(--ip-text);
  border-color: var(--ip-text-muted);
  background: var(--ip-surface-sunken);
}

.ip-btn-ghost:active {
  background: var(--ip-border-light);
}

.ip-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ip-btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

.ip-btn-lg {
  padding: 14px 32px;
  font-size: 15px;
}

.ip-btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ip-radius-sm);
  font-size: 16px;
  color: var(--ip-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--ip-transition);
}

.ip-btn-icon:hover {
  color: var(--ip-text);
  background: var(--ip-surface-sunken);
  border-color: var(--ip-border);
}


/* ==========================================================
   19. RESEARCH LIST
   ========================================================== */

.ip-research-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ip-research-item {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  padding: 20px 24px;
  cursor: pointer;
  transition: all var(--ip-transition);
  position: relative;
}

.ip-research-item:hover {
  box-shadow: var(--ip-hover-lift);
  transform: translateY(-1px);
  border-color: var(--ip-primary);
}

.ip-research-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ip-research-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ip-text);
  line-height: 1.3;
}

.ip-research-item-date {
  font-size: 12px;
  color: var(--ip-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.ip-research-item-excerpt {
  font-size: 14px;
  color: var(--ip-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ip-research-item-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ip-research-item-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--ip-radius-full);
  background: var(--ip-surface-sunken);
  color: var(--ip-text-secondary);
}

/* Expanded research */
.ip-research-expanded {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  padding: 28px;
  animation: ipSlideIn 0.3s ease;
}

.ip-research-expanded-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ip-research-expanded-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ip-text);
  line-height: 1.3;
}

.ip-research-expanded-body {
  font-size: 14px;
  color: var(--ip-text);
  line-height: 1.7;
}

.ip-research-expanded-body p {
  margin-bottom: 12px;
}

.ip-research-expanded-body p:last-child {
  margin-bottom: 0;
}

.ip-research-expanded-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ip-border);
  font-size: 13px;
  color: var(--ip-text-muted);
  flex-wrap: wrap;
}


/* ==========================================================
   20. TOAST NOTIFICATIONS
   ========================================================== */

.ip-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.ip-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow-lg);
  font-size: 14px;
  color: var(--ip-text);
  min-width: 300px;
  max-width: 440px;
  animation: ipSlideIn 0.35s ease;
  border-left: 3px solid var(--ip-border);
}

.ip-toast.success {
  border-left-color: var(--ip-success);
}

.ip-toast.error {
  border-left-color: var(--ip-error);
}

.ip-toast.warning {
  border-left-color: var(--ip-warning);
}

.ip-toast.info {
  border-left-color: var(--ip-info);
}

.ip-toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.ip-toast.success .ip-toast-icon {
  color: var(--ip-success);
}

.ip-toast.error .ip-toast-icon {
  color: var(--ip-error);
}

.ip-toast.warning .ip-toast-icon {
  color: var(--ip-warning);
}

.ip-toast.info .ip-toast-icon {
  color: var(--ip-info);
}

.ip-toast-body {
  flex: 1;
  min-width: 0;
}

.ip-toast-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}

.ip-toast-message {
  font-size: 13px;
  color: var(--ip-text-secondary);
  line-height: 1.4;
}

.ip-toast-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ip-radius-sm);
  font-size: 16px;
  color: var(--ip-text-muted);
  cursor: pointer;
  transition: all var(--ip-transition);
  flex-shrink: 0;
}

.ip-toast-close:hover {
  background: var(--ip-surface-sunken);
  color: var(--ip-text);
}


/* ==========================================================
   21. SPINNER
   ========================================================== */

.ip-spinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.ip-spinner-dot {
  width: 10px;
  height: 10px;
  background: var(--ip-primary);
  border-radius: var(--ip-radius-full);
  animation: ipBounce 1.4s infinite ease-in-out both;
}

.ip-spinner-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.ip-spinner-dot:nth-child(2) {
  animation-delay: -0.16s;
}

.ip-spinner-dot:nth-child(3) {
  animation-delay: 0s;
}

.ip-spinner-text {
  font-size: 13px;
  color: var(--ip-text-muted);
  margin-left: 6px;
  font-weight: 500;
}

/* Circle spinner variant */
.ip-spinner-circle {
  width: 24px;
  height: 24px;
  border: 3px solid var(--ip-border);
  border-top-color: var(--ip-primary);
  border-radius: var(--ip-radius-full);
  animation: ipSpin 0.7s linear infinite;
}

.ip-spinner-circle.sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.ip-spinner-circle.lg {
  width: 36px;
  height: 36px;
  border-width: 4px;
}

/* AI Processing Spinner — 3 nested Cs */
.ip-ai-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 48px;
  height: 48px;
}
.ip-ai-spinner .ip-c {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--ip-primary);
  border-right-color: var(--ip-primary);
}
.ip-ai-spinner .ip-c:nth-child(1) {
  width: 44px;
  height: 44px;
  animation: ipSpin 1.2s linear infinite;
}
.ip-ai-spinner .ip-c:nth-child(2) {
  width: 32px;
  height: 32px;
  border-top-color: #8b5cf6;
  border-right-color: #8b5cf6;
  animation: ipSpin 0.9s linear infinite reverse;
}
.ip-ai-spinner .ip-c:nth-child(3) {
  width: 20px;
  height: 20px;
  border-top-color: #06b6d4;
  border-right-color: #06b6d4;
  animation: ipSpin 0.6s linear infinite;
}
.ip-ai-spinner.sm .ip-c:nth-child(1) { width: 28px; height: 28px; border-width: 2px; }
.ip-ai-spinner.sm .ip-c:nth-child(2) { width: 20px; height: 20px; border-width: 2px; }
.ip-ai-spinner.sm .ip-c:nth-child(3) { width: 12px; height: 12px; border-width: 2px; }
.ip-ai-spinner.sm { width: 32px; height: 32px; }

.ip-ai-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}
.ip-ai-spinner-wrap .ip-ai-spinner-text {
  font-size: 13px;
  color: var(--ip-text-muted);
  font-weight: 500;
}


/* ==========================================================
   22. PDF VIEWER
   ========================================================== */

.ip-pdf-wrap {
  background: var(--ip-surface-sunken);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  overflow: hidden;
  position: relative;
}

.ip-pdf-wrap iframe {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
}

.ip-pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ip-surface);
  border-bottom: 1px solid var(--ip-border);
}

.ip-pdf-toolbar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ip-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-pdf-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}


/* ==========================================================
   23. ANIMATIONS
   ========================================================== */

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

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

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

@keyframes ipSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ipBounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

@keyframes ipPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes ipShakeX {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

.ip-animate-fade-in {
  animation: ipFadeIn 0.35s ease;
}

.ip-animate-slide-in {
  animation: ipSlideIn 0.35s ease;
}

.ip-animate-pulse {
  animation: ipPulse 2s ease-in-out infinite;
}

.ip-animate-shake {
  animation: ipShakeX 0.6s ease;
}


/* ==========================================================
   24. ACCESSIBILITY
   ========================================================== */

/* Focus-visible outlines */
.ip-wrap *:focus-visible {
  outline: 1.5px solid var(--ip-primary);
  outline-offset: 3px;
}

.ip-wrap button:focus-visible,
.ip-wrap a:focus-visible,
.ip-wrap input:focus-visible,
.ip-wrap textarea:focus-visible,
.ip-wrap select:focus-visible {
  outline: 1.5px solid var(--ip-primary);
  outline-offset: 3px;
}

/* Hide outline for mouse clicks */
.ip-wrap *:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link */
.ip-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--ip-primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--ip-radius-sm);
  font-size: 14px;
  font-weight: 600;
  z-index: 10001;
  transition: top 0.2s ease;
}

.ip-skip-link:focus {
  top: 16px;
}

/* Screen reader only */
.ip-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ip-wrap *,
  .ip-wrap *::before,
  .ip-wrap *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast */
@media (forced-colors: active) {
  .ip-wrap {
    forced-color-adjust: none;
  }

  .ip-btn-primary,
  .ip-btn-danger,
  .ip-send-btn {
    border: 2px solid ButtonText;
  }

  .ip-text-input,
  .ip-textarea,
  .ip-select,
  .ip-input {
    border: 2px solid ButtonText;
  }
}


/* ==========================================================
   25. RESPONSIVE — 1024px
   ========================================================== */

@media (max-width: 1024px) {
  .ip-wrap {
    padding: 20px 24px 40px;
  }

  .ip-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ip-research-layout {
    flex-direction: column;
  }

  .ip-research-form-col {
    width: 100%;
    min-width: 0;
    position: static;
  }

  .ip-research-list-col {
    width: 100%;
  }

  .ip-investigator {
    height: 620px;
  }

  .ip-sidebar {
    width: 240px;
    min-width: 240px;
  }
}


/* ==========================================================
   25. RESPONSIVE — 768px
   ========================================================== */

@media (max-width: 768px) {
  .ip-wrap {
    padding: 16px 16px 32px;
  }

  .ip-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ip-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .ip-case-picker {
    width: 100%;
  }

  .ip-tabs-bar {
    gap: 0;
    padding: 0;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ip-tab {
    padding: 10px 12px;
    font-size: 13px;
    min-width: 0;
    gap: 5px;
  }

  /* Hide text labels on small screens — show icons only */
  .ip-tab-label {
    display: none;
  }

  .ip-tab svg {
    width: 20px;
    height: 20px;
  }

  .ip-tab-body {
    padding: 20px 16px;
  }

  .ip-grid {
    grid-template-columns: 1fr;
  }

  .ip-grid-2 {
    grid-template-columns: 1fr;
  }

  .ip-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Investigator stacks vertically */
  .ip-investigator {
    flex-direction: column;
    height: auto;
    min-height: 600px;
  }

  .ip-sidebar {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--ip-border);
    max-height: 240px;
  }

  .ip-chat {
    min-height: 400px;
  }

  .ip-messages {
    padding: 16px;
  }

  .ip-msg {
    max-width: 92%;
  }

  .ip-input-bar {
    padding: 12px 16px;
  }

  .ip-input {
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 44px;
  }

  .ip-send-btn {
    width: 44px;
    height: 44px;
  }

  .ip-quick-actions {
    padding: 10px 16px;
  }

  .ip-lock-card {
    padding: 36px 24px;
    margin: 0 16px;
  }

  .ip-form-card {
    padding: 20px 16px;
  }

  .ip-research-expanded {
    padding: 20px 16px;
  }

  .ip-research-expanded-title {
    font-size: 18px;
  }

  /* Toast mobile */
  .ip-toast-wrap {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }

  .ip-toast {
    min-width: 0;
    max-width: 100%;
  }

  /* Touch targets */
  .ip-btn-primary,
  .ip-btn-danger,
  .ip-btn-ghost {
    min-height: 44px;
  }

  .ip-thread {
    padding: 12px;
    min-height: 44px;
  }

  .ip-quick-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .ip-case-picker {
    min-height: 44px;
  }

  .ip-pdf-wrap iframe {
    height: 400px;
  }
}


/* ==========================================================
   25. RESPONSIVE — 380px (small phones)
   ========================================================== */

@media (max-width: 380px) {
  .ip-wrap {
    padding: 12px 12px 24px;
  }

  .ip-brand-name {
    font-size: 16px;
  }

  .ip-brand-icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  .ip-tab {
    padding: 7px 10px;
    font-size: 12px;
    gap: 4px;
  }

  .ip-tab .ip-tab-icon {
    font-size: 14px;
  }

  .ip-tab-body {
    padding: 16px 12px;
  }

  .ip-msg-content {
    padding: 10px 12px;
    font-size: 13.5px;
  }

  .ip-msg-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .ip-messages {
    padding: 12px;
    gap: 12px;
  }

  .ip-input-bar {
    padding: 10px 12px;
  }

  .ip-section-title {
    font-size: 15px;
  }

  .ip-info-card {
    padding: 16px;
  }

  .ip-lock-card {
    padding: 28px 18px;
  }

  .ip-lock-card h2 {
    font-size: 19px;
  }

  .ip-form-card {
    padding: 16px 12px;
  }

  .ip-research-item {
    padding: 14px 16px;
  }

  .ip-research-expanded {
    padding: 16px 12px;
  }

  .ip-research-expanded-title {
    font-size: 16px;
  }

  .ip-pdf-wrap iframe {
    height: 320px;
  }

  /* Safe area padding for notched devices */
  .ip-wrap {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .ip-toast-wrap {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }

  .ip-input-bar {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}


/* ==========================================================
   UTILITY CLASSES
   ========================================================== */

.ip-text-center {
  text-align: center;
}

.ip-text-right {
  text-align: right;
}

.ip-text-muted {
  color: var(--ip-text-muted);
}

.ip-text-secondary {
  color: var(--ip-text-secondary);
}

.ip-text-primary {
  color: var(--ip-primary);
}

.ip-text-success {
  color: var(--ip-success);
}

.ip-text-error {
  color: var(--ip-error);
}

.ip-text-warning {
  color: var(--ip-warning);
}

.ip-text-sm {
  font-size: 13px;
}

.ip-text-xs {
  font-size: 12px;
}

.ip-text-lg {
  font-size: 17px;
}

.ip-font-bold {
  font-weight: 700;
}

.ip-font-medium {
  font-weight: 500;
}

.ip-mt-0 { margin-top: 0; }
.ip-mt-1 { margin-top: 4px; }
.ip-mt-2 { margin-top: 8px; }
.ip-mt-3 { margin-top: 12px; }
.ip-mt-4 { margin-top: 16px; }
.ip-mt-6 { margin-top: 24px; }
.ip-mt-8 { margin-top: 32px; }

.ip-mb-0 { margin-bottom: 0; }
.ip-mb-1 { margin-bottom: 4px; }
.ip-mb-2 { margin-bottom: 8px; }
.ip-mb-3 { margin-bottom: 12px; }
.ip-mb-4 { margin-bottom: 16px; }
.ip-mb-6 { margin-bottom: 24px; }
.ip-mb-8 { margin-bottom: 32px; }

.ip-gap-1 { gap: 4px; }
.ip-gap-2 { gap: 8px; }
.ip-gap-3 { gap: 12px; }
.ip-gap-4 { gap: 16px; }

.ip-flex {
  display: flex;
}

.ip-flex-col {
  display: flex;
  flex-direction: column;
}

.ip-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ip-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ip-flex-wrap {
  flex-wrap: wrap;
}

.ip-flex-1 {
  flex: 1;
  min-width: 0;
}

.ip-hidden {
  display: none !important;
}

.ip-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ip-w-full {
  width: 100%;
}

.ip-relative {
  position: relative;
}

.ip-overflow-hidden {
  overflow: hidden;
}

.ip-divider {
  border: none;
  border-top: 1px solid var(--ip-border);
  margin: 20px 0;
}

.ip-divider-light {
  border: none;
  border-top: 1px solid var(--ip-border-light);
  margin: 16px 0;
}

/* ─── 26. CASE FILE LAYOUT ──────────────────── */
.ip-casefile-selectable { user-select: text; -webkit-user-select: text; }
.ip-casefile-hero { position: relative; margin-bottom: 24px; border-radius: var(--ip-radius-lg); overflow: hidden; }
.ip-casefile-hero img { width: 100%; max-height: 360px; object-fit: cover; display: block; }
.ip-casefile-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; }
.ip-casefile-hero-title { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.ip-casefile-hero-desc { font-size: 14px; opacity: 0.9; line-height: 1.5; }

/* ─── 27. CASE FILE NARRATIVE ──────────────────── */
.ip-casefile-narrative { background: var(--ip-surface); border: 1px solid var(--ip-border); border-radius: var(--ip-radius); padding: 28px; margin-bottom: 24px; line-height: 1.8; font-size: 15px; color: var(--ip-text); }
.ip-casefile-narrative h2, .ip-casefile-narrative h3, .ip-casefile-narrative h4 { margin: 20px 0 10px; color: var(--ip-text); }
.ip-casefile-narrative p { margin: 0 0 14px; }
.ip-casefile-narrative ul, .ip-casefile-narrative ol { margin: 0 0 14px; padding-left: 24px; }
.ip-casefile-narrative li { margin-bottom: 6px; }
.ip-casefile-narrative blockquote { border-left: 3px solid var(--ip-primary); padding: 8px 16px; margin: 12px 0; background: var(--ip-primary-light); border-radius: 0 var(--ip-radius-sm) var(--ip-radius-sm) 0; }
.ip-casefile-narrative strong { color: var(--ip-primary); }
/* Highlight selection with primary color */
.ip-casefile-selectable ::selection { background: rgba(99, 102, 241, 0.25); }
.ip-casefile-selectable ::-moz-selection { background: rgba(99, 102, 241, 0.25); }

/* ─── 28. ENTITY CARDS ──────────────────── */
.ip-entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ip-entity-card { background: var(--ip-surface); border: 1px solid var(--ip-border); border-radius: var(--ip-radius); padding: 18px; transition: all 0.2s ease; cursor: default; }
.ip-entity-card:hover { box-shadow: var(--ip-shadow-md); border-color: var(--ip-primary); transform: translateY(-2px); }
.ip-entity-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ip-entity-card-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--ip-primary-light); flex-shrink: 0; }
.ip-entity-card-title { font-size: 15px; font-weight: 600; color: var(--ip-text); }
.ip-entity-card-meta { font-size: 12px; color: var(--ip-text-muted); margin-bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.ip-entity-card-notes { font-size: 13px; color: var(--ip-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── 29. FLOATING INVESTIGATE TOOLBAR ──────────────────── */
.ip-investigate-toolbar { position: fixed; z-index: 9000; animation: ipFadeIn 0.15s ease; pointer-events: auto; }
.ip-investigate-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--ip-primary); color: #fff; border: none; border-radius: 9999px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); white-space: nowrap; transition: all 0.15s ease; font-family: inherit; }
.ip-investigate-btn:hover { background: var(--ip-primary-hover); transform: scale(1.05); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5); }
.ip-investigate-btn:active { transform: scale(0.97); }

/* ─── 30. CONTEXT PANEL (SLIDE-OUT) ──────────────────── */
.ip-context-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 9400; opacity: 0; transition: opacity 0.3s ease; }
.ip-context-overlay[style*="block"] { opacity: 1; }

.ip-context-panel { position: fixed; top: 0; right: 0; width: 420px; height: 100vh; z-index: 9500; background: var(--ip-surface); border-left: 1px solid var(--ip-border); box-shadow: -8px 0 24px rgba(0,0,0,0.1); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
body.admin-bar .ip-context-panel { top: 32px; height: calc(100vh - 32px); }
.ip-context-panel.ip-context-panel-open { transform: translateX(0); }

.ip-context-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ip-border); background: var(--ip-surface-sunken); gap: 12px; min-height: 56px; }
.ip-context-panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ip-context-icon { font-size: 18px; flex-shrink: 0; }
#ip-context-selected-text { font-size: 14px; font-weight: 600; color: var(--ip-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }

.ip-context-panel-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.ip-context-panel-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ip-border); background: var(--ip-surface); }
.ip-context-panel-input .ip-text-input { flex: 1; resize: none; min-height: 40px; max-height: 100px; font-size: 14px; }

/* Context messages */
.ip-ctx-msg { max-width: 100%; }
.ip-ctx-msg-user { align-self: flex-end; }
.ip-ctx-msg-user .ip-ctx-msg-content { background: var(--ip-primary); color: #fff; border-radius: var(--ip-radius) var(--ip-radius) 4px var(--ip-radius); padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.ip-ctx-msg-ai { align-self: flex-start; }
.ip-ctx-msg-ai .ip-ctx-msg-content { background: var(--ip-surface-sunken); color: var(--ip-text); border-radius: var(--ip-radius) var(--ip-radius) var(--ip-radius) 4px; padding: 14px 16px; font-size: 14px; line-height: 1.6; border: 1px solid var(--ip-border); }
/* Markdown inside AI messages */
.ip-ctx-msg-ai .ip-ctx-msg-content h2, .ip-ctx-msg-ai .ip-ctx-msg-content h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; }
.ip-ctx-msg-ai .ip-ctx-msg-content p { margin: 0 0 10px; }
.ip-ctx-msg-ai .ip-ctx-msg-content ul, .ip-ctx-msg-ai .ip-ctx-msg-content ol { margin: 0 0 10px; padding-left: 20px; }
.ip-ctx-msg-ai .ip-ctx-msg-content li { margin-bottom: 4px; }
.ip-ctx-msg-ai .ip-ctx-msg-content a { color: var(--ip-primary); text-decoration: underline; }
.ip-ctx-msg-ai .ip-ctx-msg-content code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.ip-ctx-save-btn { margin-top: 8px; font-size: 12px; padding: 4px 10px; }
.ip-ctx-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── 31. RESPONSIVE OVERRIDES FOR CASE FILE ──────────────────── */
@media (max-width: 768px) {
    .ip-context-panel { width: 100vw; border-left: none; }
    .ip-casefile-hero img { max-height: 220px; }
    .ip-casefile-narrative { padding: 18px; font-size: 14px; }
    .ip-entity-grid { grid-template-columns: 1fr; }
    .ip-investigate-btn { min-height: 44px; min-width: 44px; padding: 10px 18px; font-size: 14px; }
    .ip-context-panel-input .ip-text-input { font-size: 16px; /* prevent iOS zoom */ }
    #ip-context-selected-text { max-width: 200px; }
}

/* ─── 32. DASHBOARD USAGE BAR ──────────────────── */
.ip-dash-usage-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 24px;
  background: var(--ip-surface);
  border-radius: var(--ip-radius);
  margin-bottom: 24px;
}
.ip-dash-tier-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: var(--ip-primary);
  color: #fff;
}
.ip-dash-meters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  flex: 1;
}
.ip-dash-meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ip-dash-meter-label {
  font-size: 12px;
  color: var(--ip-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ip-dash-meter-bar {
  height: 6px;
  background: var(--ip-border);
  border-radius: 3px;
  overflow: hidden;
}
.ip-dash-meter-fill {
  height: 100%;
  background: var(--ip-primary);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.ip-dash-meter-text {
  font-size: 12px;
  color: var(--ip-text-muted);
}
.ip-meter-warning .ip-dash-meter-fill {
  background: #f59e0b;
}
.ip-meter-full .ip-dash-meter-fill {
  background: var(--ip-error, #ef4444);
}
.ip-dash-upgrade-btn {
  margin-left: auto;
  align-self: center;
}

/* ─── 33. DASHBOARD INVESTIGATION GRID ──────────────────── */
.ip-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.ip-dash-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.ip-dash-header .ip-dash-count {
  font-size: 14px;
  color: var(--ip-text-muted);
  font-weight: 400;
}
.ip-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.ip-dash-card {
  background: var(--ip-surface, #fff);
  border-radius: var(--ip-radius);
  border: 1px solid var(--ip-border);
  overflow: hidden;
  transition: transform 0.2s;
  box-shadow: var(--ip-shadow-sm);
}
.ip-dash-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ip-shadow-md);
}
.ip-dash-card-img {
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--ip-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ip-dash-card-img .ip-dash-placeholder {
  font-size: 48px;
  opacity: 0.3;
}
.ip-dash-card-body {
  padding: 16px 20px;
}
.ip-dash-card-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ip-text);
}
.ip-dash-card-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.ip-dash-card-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--ip-text-muted);
  margin-top: 10px;
  flex-wrap: wrap;
}
.ip-dash-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ip-dash-card-time {
  font-size: 11px;
  color: var(--ip-text-muted);
  margin-top: 8px;
}
.ip-dash-card-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--ip-border);
  background: var(--ip-surface);
}

/* ─── v2.8 alpha15 — Dashboard trailer cards ──────────
   Each investigation becomes a "trailer": plate hero on top (with
   hover cross-fade through supporting entities), SOL summary hook,
   Play button wired to OpenAI TTS. Gives the dashboard the same
   cinematic framing as the home plate, so the user can scan cases
   and pick which to work on next just by hovering and listening. */
.ip-dash-card-trailer {
  display: flex;
  flex-direction: column;
}
.ip-dash-card-hero {
  position: relative;
  width: 100%;
  height: 180px;
  background: #0f172a;
  overflow: hidden;
}
.ip-dash-card-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ip-dash-card-slide.is-active { opacity: 1; }
.ip-dash-card-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ip-dash-card-slide.ip-dash-card-placeholder {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: rgba(255,255,255,0.65);
  flex-direction: column;
  gap: 8px;
}
.ip-dash-card-slide.ip-dash-card-placeholder .ip-dash-empty-icon {
  font-size: 40px;
  opacity: 0.55;
  margin: 0;
}
.ip-dash-card-nophoto {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.ip-dash-card-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  pointer-events: none;
}
.ip-dash-card-caption-hero {
  transition: opacity 0.3s ease;
}
.ip-dash-card-statuschip {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  background: rgba(15,23,42,0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Dashboard-scoped status pill (home plate's pill lives under .ip-wrap;
   dashboard doesn't use that reset, so replicate the colors here). */
.ip-dash-card-caption .ip-plate-status-pill {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  line-height: 1.4;
}
.ip-dash-card-caption .ip-plate-status-victim,
.ip-dash-card-caption .ip-plate-status-missing   { background: rgba(220, 38, 38, 0.7); }
.ip-dash-card-caption .ip-plate-status-suspect,
.ip-dash-card-caption .ip-plate-status-charged,
.ip-dash-card-caption .ip-plate-status-convicted { background: rgba(180, 83, 9, 0.75); }
.ip-dash-card-caption .ip-plate-status-person-of-interest,
.ip-dash-card-caption .ip-plate-status-subject   { background: rgba(217, 119, 6, 0.75); }
.ip-dash-card-caption .ip-plate-status-cleared   { background: rgba(34, 197, 94, 0.7); }
.ip-dash-card-caption .ip-plate-status-witness,
.ip-dash-card-caption .ip-plate-status-family    { background: rgba(59, 130, 246, 0.7); }
.ip-dash-card-caption .ip-plate-status-scene,
.ip-dash-card-caption .ip-plate-status-home,
.ip-dash-card-caption .ip-plate-status-location  { background: rgba(99, 102, 241, 0.7); }

/* Summary hook + play-row. */
.ip-dash-card-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ip-text-secondary, #475569);
  margin: 8px 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ip-dash-card-summary-empty { color: var(--ip-text-muted, #94a3b8); }
.ip-dash-card-hookrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.ip-dash-card-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ip-border, #e2e8f0);
  background: var(--ip-surface, #fff);
  color: var(--ip-text, #0f172a);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ip-dash-card-play:hover {
  background: var(--ip-primary, #6366f1);
  color: #fff;
  border-color: var(--ip-primary, #6366f1);
}
.ip-dash-card-play.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.ip-dash-card-play[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ip-dash-card-play-icon { font-size: 13px; line-height: 1; }
.ip-dash-card-activity {
  color: var(--ip-text-muted, #94a3b8);
  font-size: 11px;
  margin-top: 4px;
}

/* ─── v2.8 alpha16 — "Draft summary now" per-card + bulk ──────
   When a card has no summary yet, the empty-state slot offers a
   Draft button that kicks off a story_draft job (size=summary).
   While the job runs, the slot flips to a spinner + drafting note.
   Bulk version lives above the grid when ≥2 cards are empty. */
.ip-dash-card-draftbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid var(--ip-primary, #6366f1);
  background: transparent;
  color: var(--ip-primary, #6366f1);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.08s;
}
.ip-dash-card-draftbtn:hover {
  background: var(--ip-primary, #6366f1);
  color: #fff;
}
.ip-dash-card-draftbtn:active { transform: scale(0.97); }
.ip-dash-card-draftbtn-icon { font-size: 11px; line-height: 1; }

.ip-dash-card-summary-empty.is-drafting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ip-text-secondary, #475569);
  font-style: normal;
}
.ip-dash-card-drafting {
  font-style: italic;
  color: var(--ip-text-secondary, #475569);
}
.ip-dash-card-draft-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ip-border, #e2e8f0);
  border-top-color: var(--ip-primary, #6366f1);
  border-radius: 50%;
  animation: ip-dash-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes ip-dash-spin { to { transform: rotate(360deg); } }

.ip-dash-card-draft-error {
  color: #dc2626;
  font-style: italic;
}

/* Bulk "Draft all missing (N)" pill above the grid. */
.ip-dash-draft-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--ip-primary, #6366f1);
  background: var(--ip-primary, #6366f1);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.25);
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.ip-dash-draft-all-btn:hover {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}
.ip-dash-draft-all-btn:active { transform: translateY(0); }
.ip-dash-draft-all-icon { font-size: 13px; line-height: 1; }

/* ─── 34. DASHBOARD EMPTY STATE ──────────────────── */
.ip-dash-empty {
  text-align: center;
  padding: 60px 20px;
}
.ip-dash-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.3;
}
.ip-dash-empty h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ip-text);
}
.ip-dash-empty p {
  font-size: 14px;
  color: var(--ip-text-muted);
  margin: 0 0 20px;
}

/* ─── 35. UPGRADE MODAL ──────────────────── */
.ip-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ip-modal-hidden {
  display: none;
}
.ip-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.ip-modal-content {
  position: relative;
  background: #fff;
  border-radius: var(--ip-radius-lg, 20px);
  padding: 32px;
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--ip-shadow-lg);
  animation: ipFadeIn 0.25s ease;
}
.ip-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--ip-text-muted);
  padding: 4px 8px;
}
.ip-modal-close:hover {
  color: var(--ip-text);
}
.ip-tier-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.ip-tier-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ip-text-muted);
  border-bottom: 2px solid var(--ip-border);
}
.ip-tier-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--ip-border);
}
.ip-tier-table .ip-tier-current {
  background: rgba(99, 102, 241, 0.05);
}
.ip-tier-table .ip-tier-recommended {
  background: rgba(99, 102, 241, 0.1);
  font-weight: 600;
}

/* ─── 36. START INVESTIGATING BUTTON ──────────────────── */
.ip-start-investigating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--ip-primary);
  color: #fff;
  border: none;
  border-radius: var(--ip-radius-sm, 12px);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.ip-start-investigating:hover {
  background: var(--ip-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.ip-start-investigating:active {
  transform: translateY(0);
}
.ip-start-investigating.ip-continue {
  background: transparent;
  color: var(--ip-primary);
  border: 2px solid var(--ip-primary);
}
.ip-start-investigating.ip-continue:hover {
  background: rgba(99, 102, 241, 0.05);
}

/* ─── 37. DASHBOARD RESPONSIVE ──────────────────── */
@media (max-width: 768px) {
  .ip-dash-usage-bar {
    flex-direction: column;
    padding: 16px;
  }
  .ip-dash-meters {
    grid-template-columns: 1fr 1fr;
  }
  .ip-dash-grid {
    grid-template-columns: 1fr;
  }
  .ip-dash-card-img {
    height: 100px;
  }
  .ip-modal-content {
    padding: 24px;
    width: 95%;
  }
  .ip-dash-upgrade-btn {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
  }
}
@media (max-width: 380px) {
  .ip-dash-meters {
    grid-template-columns: 1fr;
  }
}

/* ─── 38. EVIDENCE LAYOUT ──────────────────── */
.ip-evidence-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

.ip-evidence-upload-col {
  position: sticky;
  top: 20px;
}

.ip-evidence-upload-col .ip-form-card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  padding: 24px;
}

/* h3 sizing handled by unified rule above */

.ip-evi-upload-options {
  display: flex;
  gap: 8px;
}

.ip-evi-upload-options .ip-upload-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ip-surface-sunken);
  border: 1px dashed var(--ip-border);
  border-radius: var(--ip-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ip-text-secondary);
  transition: all var(--ip-transition);
  min-height: 44px;
}

.ip-evi-upload-options .ip-upload-btn:hover {
  border-color: var(--ip-primary);
  color: var(--ip-primary);
  background: rgba(99, 102, 241, 0.04);
}

.ip-evi-preview {
  background: var(--ip-surface-sunken);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm);
  padding: 12px;
  margin-top: 12px;
}

.ip-evi-preview img {
  border-radius: 6px;
}

.ip-evi-preview-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ip-text-muted);
}

.ip-evi-preview-info span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── 39. EVIDENCE FILTER BAR ──────────────────── */
.ip-evidence-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ip-filter-btn {
  padding: 7px 14px;
  border-radius: var(--ip-radius-full, 9999px);
  border: 1px solid var(--ip-border);
  background: var(--ip-surface);
  color: var(--ip-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ip-transition);
  min-height: 36px;
  white-space: nowrap;
}

.ip-filter-btn:hover {
  border-color: var(--ip-primary);
  color: var(--ip-primary);
}

.ip-filter-btn.ip-filter-active {
  background: var(--ip-primary);
  color: #fff;
  border-color: var(--ip-primary);
}

.ip-evidence-header {
  font-size: 13px;
  color: var(--ip-text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

/* ─── 40. EVIDENCE GALLERY GRID ──────────────────── */
.ip-evi-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.ip-evi-card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ip-evi-card:hover {
  box-shadow: var(--ip-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
  border-color: var(--ip-primary);
  transform: translateY(-2px);
}

.ip-evi-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ip-surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ip-evi-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ip-evi-type-icon {
  font-size: 36px;
  opacity: 0.6;
}

.ip-evi-card-body {
  padding: 12px;
}

.ip-evi-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ip-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.ip-evi-card-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.ip-evi-card-date {
  font-size: 11px;
  color: var(--ip-text-muted);
  margin-top: 6px;
}

.ip-evi-ai-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--ip-radius-full, 9999px);
  font-weight: 500;
}

.ip-evi-ai-status.none {
  background: var(--ip-surface-sunken);
  color: var(--ip-text-muted);
}

.ip-evi-ai-status.pending {
  background: #fef3c7;
  color: #92400e;
}

.ip-evi-ai-status.completed {
  background: #d1fae5;
  color: #065f46;
}

.ip-evi-ai-status.failed {
  background: #fee2e2;
  color: #991b1b;
}

/* ─── 41. EVIDENCE DETAIL PANEL ──────────────────── */
.ip-evi-detail-media {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--ip-radius-sm);
  background: var(--ip-surface-sunken);
  display: block;
  margin-bottom: 16px;
}

.ip-evi-detail-media video,
.ip-evi-detail-media audio {
  width: 100%;
}

.ip-evi-detail-meta {
  padding: 16px;
  background: var(--ip-surface-sunken);
  border-radius: var(--ip-radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ip-text-secondary);
}

.ip-evi-detail-meta strong {
  color: var(--ip-text);
  font-weight: 600;
}

.ip-evi-analysis-section {
  margin-top: 16px;
}

.ip-evi-analyzing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--ip-surface-sunken);
  border-radius: var(--ip-radius-sm);
  font-size: 14px;
  color: var(--ip-text-secondary);
}

.ip-evi-analysis-card {
  background: var(--ip-surface-sunken);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm);
  padding: 14px;
  margin-bottom: 10px;
}

.ip-evi-analysis-card h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ip-primary);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ip-evi-analysis-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ip-text);
}

.ip-evi-analysis-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ip-text);
}

.ip-evi-analysis-card li {
  margin-bottom: 4px;
}

/* ─── 42. UPLOAD PROGRESS ──────────────────── */
.ip-upload-progress {
  height: 4px;
  background: var(--ip-border);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

.ip-upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ip-primary), var(--ip-secondary, #8b5cf6));
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0;
}

/* ─── 43. EVIDENCE RESPONSIVE ──────────────────── */
@media (max-width: 768px) {
  .ip-evidence-layout {
    grid-template-columns: 1fr;
  }

  .ip-evidence-upload-col {
    position: static;
    order: -1;
  }

  .ip-evi-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .ip-evi-upload-options {
    flex-direction: column;
  }

  .ip-evidence-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ip-evidence-filters::-webkit-scrollbar {
    display: none;
  }

  .ip-filter-btn {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .ip-evi-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ip-evi-card-body {
    padding: 8px;
  }

  .ip-evi-card-title {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MURDER BOARD
   ═══════════════════════════════════════════════════════════ */

/* ═══ 44. Board Layout ═══ */

.ip-board-wrap {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

.ip-board-canvas-wrap {
  flex: 1;
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--ip-border);
}

#ip-board-stage {
  width: 100%;
  height: 100%;
  min-height: 600px;
}

.ip-board-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  text-align: center;
}

.ip-board-empty .ip-board-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.ip-board-empty h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ip-text);
  margin: 0 0 8px;
}

.ip-board-empty p {
  font-size: 14px;
  color: var(--ip-text-muted);
  margin: 0 0 20px;
  max-width: 360px;
}

/* ═══ 45. Board Toolbar ═══ */

.ip-board-toolbar {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 8px 12px;
  background: var(--ip-surface);
  border-radius: 10px;
  border: 1px solid var(--ip-border);
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.ip-board-tool-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ip-text);
}

.ip-board-tool-btn:hover {
  background: var(--ip-bg);
  border-color: var(--ip-border);
}

.ip-board-tool-btn.active {
  background: var(--ip-primary);
  color: #fff;
  border-color: var(--ip-primary);
}

.ip-board-tool-sep {
  width: 1px;
  height: 24px;
  background: var(--ip-border);
  margin: 0 4px;
}

/* ═══ 46. Board Modals ═══ */

.ip-board-pin-modal .ip-modal-content,
.ip-board-conn-modal .ip-modal-content {
  max-width: 480px;
  border-radius: 14px;
}

.ip-board-pin-modal,
.ip-board-conn-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  animation: ipFadeIn 0.2s ease;
}

.ip-board-pin-modal .ip-modal-content,
.ip-board-conn-modal .ip-modal-content {
  background: var(--ip-surface);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  width: 90%;
  max-width: 480px;
  overflow: visible;
}

.ip-board-pin-modal .ip-modal-header,
.ip-board-conn-modal .ip-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ip-border);
}

.ip-board-pin-modal .ip-modal-header h3,
.ip-board-conn-modal .ip-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.ip-board-pin-modal .ip-modal-header button,
.ip-board-conn-modal .ip-modal-header button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ip-text-muted);
  padding: 0;
  line-height: 1;
}

.ip-board-pin-modal .ip-modal-body,
.ip-board-conn-modal .ip-modal-body {
  padding: 20px;
}

.ip-board-pin-modal .ip-modal-footer,
.ip-board-conn-modal .ip-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--ip-border);
  background: var(--ip-bg);
}

/* ═══ 47. Board Analysis Panel ═══ */

.ip-board-analysis {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  background: var(--ip-surface);
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: ipSlideIn 0.25s ease;
}

.ip-board-analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ip-border);
}

.ip-board-analysis-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.ip-board-analysis-header button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--ip-text-muted);
  padding: 0;
  line-height: 1;
}

.ip-board-analysis-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.65;
  font-size: 14px;
}

.ip-board-analysis-body h1 {
  font-size: 18px;
  margin: 20px 0 10px;
  font-weight: 700;
  color: var(--ip-text);
}
.ip-board-analysis-body h2 {
  font-size: 15px;
  margin: 18px 0 8px;
  font-weight: 700;
  color: var(--ip-text);
}
.ip-board-analysis-body h3 {
  font-size: 14px;
  margin: 14px 0 6px;
  font-weight: 600;
  color: var(--ip-text-secondary);
}
.ip-board-analysis-body h4 {
  font-size: 13px;
  margin: 12px 0 4px;
  font-weight: 600;
}
.ip-board-analysis-body p {
  margin: 8px 0;
}
.ip-board-analysis-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 10px 0;
}
.ip-board-analysis-body th,
.ip-board-analysis-body td {
  padding: 6px 8px;
  border: 1px solid var(--ip-border);
  text-align: left;
}
.ip-board-analysis-body th {
  background: var(--ip-surface-sunken);
  font-weight: 600;
}

.ip-board-analysis-body ul,
.ip-board-analysis-body ol {
  padding-left: 20px;
  margin: 8px 0;
}

.ip-board-analysis-body li {
  margin-bottom: 6px;
}

.ip-board-analysis-body strong {
  color: var(--ip-text);
  font-weight: 600;
}

.ip-board-analysis-body code {
  background: var(--ip-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* WP Admin Bar offset for fixed panels */
body.admin-bar .ip-board-analysis {
  top: 32px;
  height: calc(100vh - 32px);
}

/* ═══ 48. Mobile Card View ═══ */

.ip-board-mobile {
  display: none;
}

.ip-board-mobile-card {
  background: var(--ip-surface);
  border: 1px solid var(--ip-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ip-board-mobile-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ip-board-mobile-info {
  flex: 1;
  min-width: 0;
}

.ip-board-mobile-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.ip-board-mobile-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ip-text-muted);
}

.ip-board-mobile-desc {
  font-size: 13px;
  color: var(--ip-text-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ip-board-mobile-connections {
  margin-top: 16px;
}

.ip-board-mobile-conn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ip-bg);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.ip-board-mobile-conn-line {
  flex-shrink: 0;
  width: 20px;
  height: 2px;
}

/* ═══ 49. Board Responsive ═══ */

@media (max-width: 768px) {
  .ip-board-toolbar {
    gap: 2px;
    padding: 6px 8px;
  }

  .ip-board-tool-btn {
    padding: 6px 8px;
    font-size: 12px;
  }

  .ip-board-tool-btn span.ip-tool-label {
    display: none;
  }

  .ip-board-canvas-wrap {
    display: none;
  }

  .ip-board-mobile {
    display: block !important;
  }

  .ip-board-analysis {
    width: 100%;
    left: 0;
  }

  .ip-board-pin-modal .ip-modal-content,
  .ip-board-conn-modal .ip-modal-content {
    width: 95%;
  }
}

@media (max-width: 380px) {
  .ip-board-toolbar {
    justify-content: center;
  }

  .ip-board-tool-sep {
    display: none;
  }
}

/* ═══════════════════════════════════════
   50. Collaborator Avatars
   ═══════════════════════════════════════ */
.ip-collab-avatars {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
}
.ip-collab-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ip-surface);
    object-fit: cover;
    margin-left: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--ip-primary);
    cursor: default;
}
.ip-collab-avatar:first-child { margin-left: 0; }
.ip-collab-avatar-placeholder {
    background: var(--ip-primary);
}
.ip-collab-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
    margin-left: 0;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   51. Activity Feed
   ═══════════════════════════════════════ */
.ip-activity-feed {
    max-height: 400px;
    overflow-y: auto;
    padding: 0;
}
.ip-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ip-border);
}
.ip-activity-item:last-child { border-bottom: none; }
.ip-activity-detail {
    flex: 1;
    font-size: 13px;
    color: var(--ip-text);
    line-height: 1.4;
}
.ip-activity-time {
    font-size: 11px;
    color: var(--ip-text-muted);
    margin-top: 2px;
}

/* ═══════════════════════════════════════
   52. Invite Modal
   ═══════════════════════════════════════ */
#ip-invite-modal .ip-modal-content,
#ip-invite-accept-modal .ip-modal-content {
    animation: ipFadeIn 0.2s ease;
}
#ip-invite-accept-modal .ip-modal-content {
    padding: 40px;
}

/* ═══════════════════════════════════════
   53. Role Badges
   ═══════════════════════════════════════ */
.ip-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.ip-role-badge-owner {
    background: rgba(99, 102, 241, 0.1);
    color: var(--ip-primary);
}
.ip-role-badge-editor {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ip-success);
}
.ip-role-badge-viewer {
    background: rgba(107, 114, 128, 0.1);
    color: var(--ip-text-muted);
}

/* ═══════════════════════════════════════
   54. Referral Section
   ═══════════════════════════════════════ */
#ip-referral-section .ip-text-input[readonly] {
    background: var(--ip-bg);
    cursor: text;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ═══════════════════════════════════════
   55. Collaboration Responsive
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    #ip-invite-modal .ip-modal-content,
    #ip-invite-accept-modal .ip-modal-content {
        width: 95vw;
        max-width: none;
        margin: 16px;
    }
    .ip-collab-avatar { width: 24px; height: 24px; font-size: 10px; }
}

/* ═══════════════════════════════════════
   56. Publish Page Layout
   ═══════════════════════════════════════ */
.ip-publish-section {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--ip-shadow-sm);
}
.ip-publish-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ip-text);
    margin-bottom: 20px;
}
.ip-publish-header svg {
    flex-shrink: 0;
    color: var(--ip-primary);
}
.ip-subreddit-picker {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-sm);
    background: var(--ip-surface);
    color: var(--ip-text);
    font-size: 14px;
    font-family: var(--ip-font);
    cursor: pointer;
    transition: border-color var(--ip-transition), box-shadow var(--ip-transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.ip-subreddit-picker:focus {
    outline: none;
    border-color: var(--ip-primary);
    box-shadow: var(--ip-glow-primary);
}
.ip-draft-preview {
    background: var(--ip-surface-sunken);
    border: 1px solid var(--ip-border-light);
    border-left: 3px solid var(--ip-primary);
    border-radius: var(--ip-radius-sm);
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ip-text);
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
}
.ip-draft-preview code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background: rgba(99, 102, 241, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}
.ip-draft-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.ip-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-sm);
    background: var(--ip-surface);
    color: var(--ip-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ip-transition);
}
.ip-copy-btn:hover {
    border-color: var(--ip-primary);
    color: var(--ip-primary);
}
.ip-copy-btn.ip-copy-success {
    border-color: var(--ip-success);
    color: var(--ip-success);
    background: var(--ip-success-light);
}

/* ═══════════════════════════════════════
   57. Share Link UI
   ═══════════════════════════════════════ */
.ip-share-link-area {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-share-link-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-sm);
    background: var(--ip-surface-sunken);
    color: var(--ip-text);
    font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    cursor: text;
    outline: none;
}
.ip-share-link-input:focus {
    border-color: var(--ip-primary);
    box-shadow: var(--ip-glow-primary);
}
.ip-share-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ip-text-muted);
    margin-top: 12px;
}
.ip-share-stats svg {
    flex-shrink: 0;
}
.ip-share-revoke {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--ip-error);
    border-radius: var(--ip-radius-sm);
    background: transparent;
    color: var(--ip-error);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ip-transition);
}
.ip-share-revoke:hover {
    background: var(--ip-error);
    color: #fff;
}

/* ═══════════════════════════════════════
   58. Settings Page
   ═══════════════════════════════════════ */
.ip-settings-section {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--ip-shadow-sm);
}
.ip-provider-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.ip-provider-card {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-sm);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color var(--ip-transition), box-shadow var(--ip-transition);
}
.ip-provider-card:hover {
    border-color: var(--ip-primary);
    box-shadow: var(--ip-hover-lift);
}
.ip-provider-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ip-provider-card-icon {
    font-size: 24px;
    line-height: 1;
}
.ip-key-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ip-radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ip-key-status-active {
    background: var(--ip-success-light);
    color: var(--ip-success);
}
.ip-key-status-not-set {
    background: var(--ip-surface-sunken);
    color: var(--ip-text-muted);
}
.ip-key-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-sm);
    background: var(--ip-surface-sunken);
    color: var(--ip-text);
    font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    transition: border-color var(--ip-transition), box-shadow var(--ip-transition);
}
.ip-key-input:focus {
    outline: none;
    border-color: var(--ip-primary);
    box-shadow: var(--ip-glow-primary);
}
.ip-key-input::placeholder {
    color: var(--ip-text-muted);
    font-family: var(--ip-font);
}
.ip-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--ip-border-light);
}
.ip-pref-row:last-child {
    border-bottom: none;
}
.ip-pref-label {
    font-size: 14px;
    color: var(--ip-text);
}
.ip-pref-label small {
    display: block;
    font-size: 12px;
    color: var(--ip-text-muted);
    font-weight: 400;
    margin-top: 2px;
}
.ip-pref-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.ip-pref-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.ip-pref-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--ip-border);
    border-radius: var(--ip-radius-full);
    cursor: pointer;
    transition: background var(--ip-transition);
}
.ip-pref-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--ip-shadow-sm);
    transition: transform var(--ip-transition);
}
.ip-pref-toggle input:checked + .ip-pref-toggle-track {
    background: var(--ip-primary);
}
.ip-pref-toggle input:checked + .ip-pref-toggle-track::after {
    transform: translateX(20px);
}

/* ═══════════════════════════════════════
   59. Public Page
   ═══════════════════════════════════════ */
.ip-public-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px 64px;
    font-family: var(--ip-font);
    color: var(--ip-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Hero */
.ip-public-hero {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ip-border);
}
.ip-public-hero h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ip-text);
    margin: 0 0 12px;
}
.ip-public-hero .ip-badge {
    margin-bottom: 12px;
}
.ip-public-hero-desc {
    font-size: 16px;
    color: var(--ip-text-secondary);
    line-height: 1.7;
    margin-top: 12px;
    white-space: pre-line;
}
.ip-investigator-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 6px 14px;
    background: var(--ip-primary-light);
    color: var(--ip-primary);
    border-radius: var(--ip-radius-full);
    font-size: 13px;
    font-weight: 600;
}
.ip-investigator-count svg {
    flex-shrink: 0;
}

/* Analysis */
.ip-public-analysis {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius);
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: var(--ip-shadow-sm);
}
.ip-public-analysis .ip-section-title {
    margin-bottom: 16px;
}
.ip-public-analysis-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ip-text-secondary);
}

/* Entity Grids */
.ip-public-grid-section {
    margin-bottom: 32px;
}
.ip-public-grid-section .ip-section-title {
    margin-bottom: 16px;
}
.ip-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.ip-public-grid .ip-entity-card {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius-sm);
    padding: 20px;
    transition: box-shadow var(--ip-transition);
}
.ip-public-grid .ip-entity-card:hover {
    box-shadow: var(--ip-hover-lift);
}

/* CTA */
.ip-public-cta {
    text-align: center;
    padding: 48px 24px;
    margin: 40px 0 32px;
    background: var(--ip-primary-light);
    border-radius: var(--ip-radius);
}
.ip-public-cta h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ip-text);
    margin: 0 0 8px;
}
.ip-public-cta p {
    font-size: 15px;
    color: var(--ip-text-secondary);
    margin: 0 0 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer */
.ip-public-footer {
    text-align: center;
    font-size: 13px;
    color: var(--ip-text-muted);
    padding: 24px 0;
}
.ip-public-footer a {
    color: var(--ip-primary);
    text-decoration: none;
    font-weight: 500;
}
.ip-public-footer a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════
   60. Publish Progress / Spinner
   ═══════════════════════════════════════ */
.ip-draft-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
}
.ip-draft-progress-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ip-border);
    border-top-color: var(--ip-primary);
    border-radius: 50%;
    animation: ipSpin 0.7s linear infinite;
}
.ip-draft-progress-text {
    font-size: 14px;
    color: var(--ip-text-muted);
    min-height: 20px;
}
.ip-draft-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}
.ip-draft-complete-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ip-success-light);
    color: var(--ip-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.ip-draft-complete-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--ip-text);
}

/* ═══════════════════════════════════════
   61. Phase 6 Responsive
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Publish sections */
    .ip-publish-section,
    .ip-settings-section {
        padding: 20px 16px;
        border-radius: var(--ip-radius-sm);
    }

    /* Provider cards stack */
    .ip-provider-cards {
        grid-template-columns: 1fr;
    }

    /* Share link full width */
    .ip-share-link-area {
        flex-direction: column;
    }
    .ip-share-link-input {
        width: 100%;
    }

    /* Draft actions wrap */
    .ip-draft-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .ip-draft-actions .ip-btn-primary,
    .ip-draft-actions .ip-copy-btn {
        width: 100%;
        justify-content: center;
    }

    /* Public page */
    .ip-public-page {
        padding: 32px 16px 48px;
    }
    .ip-public-hero h1 {
        font-size: 24px;
    }
    .ip-public-grid {
        grid-template-columns: 1fr;
    }
    .ip-public-cta {
        padding: 32px 16px;
    }

    /* Pref rows */
    .ip-pref-row {
        gap: 12px;
    }
}

@media (max-width: 380px) {
    .ip-publish-section,
    .ip-settings-section {
        padding: 16px 12px;
    }
    .ip-publish-header {
        font-size: 15px;
    }
    .ip-provider-card {
        padding: 16px;
    }
    .ip-public-page {
        padding: 24px 12px 40px;
    }
    .ip-public-hero h1 {
        font-size: 20px;
    }
    .ip-public-cta h3 {
        font-size: 18px;
    }
    .ip-public-analysis {
        padding: 20px 16px;
    }
    .ip-draft-preview {
        padding: 14px 16px;
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   64. PRICING PAGE
   ═══════════════════════════════════════════════════════════════════ */

.ip-pricing-header { text-align: center; margin-bottom: 32px; }
.ip-pricing-header h2 { font-size: 28px; font-weight: 700; margin: 0 0 8px; }
.ip-pricing-header p { font-size: 15px; color: var(--ip-text-muted); margin: 0 0 20px; }

/* Toggle */
.ip-pricing-toggle { display: inline-flex; align-items: center; gap: 12px; background: var(--ip-bg); border-radius: 24px; padding: 4px; }
.ip-pricing-toggle-btn { padding: 8px 20px; border-radius: 20px; border: none; background: none; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ip-text-muted); transition: all 0.2s; }
.ip-pricing-toggle-btn.active { background: var(--ip-primary); color: #fff; }
.ip-pricing-save-badge { font-size: 11px; color: var(--ip-success); font-weight: 700; }

/* Grid */
.ip-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; }

/* Card */
.ip-pricing-card { background: var(--ip-surface); border: 1px solid var(--ip-border); border-radius: var(--ip-radius); padding: 28px 24px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.ip-pricing-card:hover { transform: translateY(-2px); box-shadow: var(--ip-shadow-lg); }
.ip-pricing-card.ip-pricing-popular { border-color: var(--ip-primary); box-shadow: 0 0 0 1px var(--ip-primary); }
.ip-pricing-popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ip-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.ip-pricing-card.ip-pricing-current { border-color: var(--ip-success); }

/* Price */
.ip-pricing-tier-name { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.ip-pricing-desc { font-size: 13px; color: var(--ip-text-muted); margin: 0 0 16px; }
.ip-pricing-price { font-size: 36px; font-weight: 800; margin: 0 0 4px; }
.ip-pricing-price span { font-size: 14px; font-weight: 400; color: var(--ip-text-muted); }
.ip-pricing-period { font-size: 12px; color: var(--ip-text-muted); margin: 0 0 20px; }

/* Features */
.ip-pricing-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.ip-pricing-features li { padding: 6px 0; font-size: 13px; color: var(--ip-text); display: flex; align-items: center; gap: 8px; }
.ip-pricing-features li::before { content: '\2713'; color: var(--ip-success); font-weight: 700; font-size: 14px; }
.ip-pricing-features li.disabled { color: var(--ip-text-muted); }
.ip-pricing-features li.disabled::before { content: '\2014'; color: var(--ip-text-muted); }

/* CTA */
.ip-pricing-cta { margin-top: auto; }
.ip-pricing-cta .ip-btn { width: 100%; text-align: center; }
.ip-pricing-current-badge { display: inline-block; padding: 10px 20px; border-radius: 8px; background: var(--ip-bg); color: var(--ip-text-muted); font-weight: 600; font-size: 14px; text-align: center; width: 100%; }

/* FAQ */
.ip-pricing-faq { margin-top: 48px; max-width: 680px; margin-left: auto; margin-right: auto; }
.ip-pricing-faq h3 { font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 24px; }
.ip-pricing-faq-item { border-bottom: 1px solid var(--ip-border); padding: 16px 0; }
.ip-pricing-faq-item dt { font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.ip-pricing-faq-item dd { margin: 0; font-size: 13px; color: var(--ip-text-muted); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════
   65. PRICING RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ip-pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .ip-pricing-header h2 { font-size: 22px; }
    .ip-pricing-price { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   62. ONBOARDING MODAL
   ═══════════════════════════════════════════════════════════════════ */

.ip-onboarding-overlay {
    position: fixed; inset: 0; z-index: 10002;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: ipFadeIn 0.3s ease;
}
.ip-onboarding-card {
    background: var(--ip-surface); border-radius: 16px;
    max-width: 520px; width: 90%; padding: 40px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.2);
    text-align: center; position: relative;
}
.ip-onboarding-icon { font-size: 48px; margin-bottom: 16px; }
.ip-onboarding-card h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--ip-text); }
.ip-onboarding-card p { font-size: 15px; color: var(--ip-text-muted); line-height: 1.6; margin: 0 0 24px; }
.ip-onboarding-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.ip-onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ip-border); transition: all 0.3s; }
.ip-onboarding-dot.active { background: var(--ip-primary); width: 24px; border-radius: 4px; }
.ip-onboarding-actions { display: flex; justify-content: space-between; align-items: center; }
.ip-onboarding-skip { font-size: 13px; color: var(--ip-text-muted); cursor: pointer; border: none; background: none; }
.ip-onboarding-skip:hover { color: var(--ip-text); }
.ip-onboarding-next {
    padding: 10px 28px; border-radius: 8px; border: none;
    background: var(--ip-primary); color: #fff; font-weight: 600; font-size: 14px;
    cursor: pointer; transition: background 0.2s;
}
.ip-onboarding-next:hover { background: var(--ip-primary-hover); }

/* ═══════════════════════════════════════════════════════════════════
   63. ONBOARDING RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .ip-onboarding-card { padding: 24px 20px; }
    .ip-onboarding-card h2 { font-size: 20px; }
    .ip-onboarding-icon { font-size: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════
   64. BOARD SIDEBAR LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.ip-board-layout {
    display: flex;
    gap: 0;
    height: calc(100vh - 260px);  /* accounts for header + tabs + WP admin bar */
    min-height: 500px;
}
/* When WP admin bar is present, add extra offset */
body.admin-bar .ip-board-layout {
    height: calc(100vh - 292px);
}
.ip-board-sidebar {
    width: 320px;
    min-width: 320px;
    background: var(--ip-surface);
    border-right: 1px solid var(--ip-border);
    border-radius: var(--ip-radius) 0 0 var(--ip-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ip-board-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Update canvas wrap to remove left border-radius since sidebar provides it */
.ip-board-layout .ip-board-canvas-wrap {
    border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   65. BOARD SIDEBAR INTERNALS
   ═══════════════════════════════════════════════════════════════════ */

.ip-board-sidebar-search {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ip-border);
}
.ip-board-sidebar-search input {
    width: 100%;
    font-size: 13px;
}
.ip-board-sidebar-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ip-border);
}
.ip-sidebar-tab {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--ip-border);
    background: var(--ip-surface);
    cursor: pointer;
    color: var(--ip-text-secondary);
    transition: all var(--ip-transition);
    white-space: nowrap;
}
.ip-sidebar-tab:hover {
    border-color: var(--ip-primary);
    color: var(--ip-primary);
}
.ip-sidebar-tab-active {
    background: var(--ip-primary);
    color: #fff;
    border-color: var(--ip-primary);
}
.ip-board-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
}

/* ═══════════════════════════════════════════════════════════════════
   66. BOARD SIDEBAR ENTITY ITEMS
   ═══════════════════════════════════════════════════════════════════ */

.ip-sidebar-entity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--ip-border);
    margin-bottom: 0;
    cursor: grab;
    transition: all 0.15s ease;
    background: var(--ip-surface);
    user-select: none;
}
.ip-sidebar-entity + .ip-sidebar-entity {
    margin-top: 8px;
    position: relative;
}
.ip-sidebar-entity + .ip-sidebar-entity::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: var(--ip-border);
}
.ip-sidebar-entity:hover {
    border-color: var(--ip-primary);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ip-sidebar-entity:active {
    cursor: grabbing;
    opacity: 0.7;
}
.ip-sidebar-entity-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.ip-sidebar-entity-info {
    flex: 1;
    min-width: 0;
}
.ip-sidebar-entity-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-sidebar-entity-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: var(--ip-text-muted);
    background: var(--ip-surface-sunken);
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
}
.ip-sidebar-entity-desc {
    font-size: 11px;
    color: var(--ip-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
}
.ip-sidebar-entity-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.ip-sidebar-on-board {
    color: var(--ip-success);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.ip-sidebar-add-btn {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--ip-primary);
    background: transparent;
    color: var(--ip-primary);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.ip-sidebar-add-btn:hover {
    background: var(--ip-primary);
    color: #fff;
}
.ip-sidebar-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--ip-text-muted);
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   67. EVIDENCE SOURCE BADGES
   ═══════════════════════════════════════════════════════════════════ */

.ip-badge-casefile {
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.ip-badge-uploaded {
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.ip-evi-card[data-source="casefile"] {
    border-left: 3px solid #3b82f6;
}
.ip-evi-card[data-source="casefile"] .ip-evi-card-delete,
.ip-evi-card[data-source="casefile"] .ip-evi-card-analyze {
    display: none;
}
.ip-evi-readonly-notice {
    padding: 12px 16px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   68. BOARD + EVIDENCE REDESIGN RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ip-board-sidebar {
        display: none;
    }
    .ip-board-layout {
        flex-direction: column;
        height: auto;
    }
    .ip-board-layout .ip-board-canvas-wrap {
        border-radius: var(--ip-radius);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   69. CASE CARD GALLERY
   ═══════════════════════════════════════════════════════════════════ */
.ip-case-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.ip-case-card {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: var(--ip-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ip-case-card:hover {
    border-color: var(--ip-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.ip-case-card-active {
    border-color: var(--ip-primary);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
}
.ip-case-card-img {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: var(--ip-surface-sunken);
}
.ip-case-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ip-case-card-placeholder span {
    font-size: 48px;
    opacity: 0.3;
}
.ip-case-card-body {
    padding: 14px 16px 16px;
}
.ip-case-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ip-text);
    margin: 0 0 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-case-card-desc {
    font-size: 12px;
    color: var(--ip-text-muted);
    line-height: 1.4;
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-case-card-investigators {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ip-text-secondary);
    margin-top: 8px;
}
.ip-case-card-investigators svg {
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════
   70. CASE CARD GALLERY RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ip-case-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .ip-case-card-img {
        height: 110px;
    }
}
@media (max-width: 380px) {
    .ip-case-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   71. ENTITY IMAGE UTILITIES
   ═══════════════════════════════════════════════════════════════════ */
/* Card-level square image — used in entity cards on casefile and library */
.ip-entity-img-card {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    display: block;
    background: var(--ip-surface-sunken);
}
/* Small square thumbnail — sidebar, inline lists */
.ip-entity-img-sm {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--ip-surface-sunken);
}
/* Tiny square thumbnail — admin row items */
.ip-entity-img-xs {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--ip-surface-sunken);
}

/* ═══════════════════════════════════════════════════════════════════
   72. BOARD SIDEBAR MINI-CARDS
   ═══════════════════════════════════════════════════════════════════ */
.ip-board-sidebar-card {
    display: flex;
    border: 1px solid var(--ip-border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.15s ease;
    background: var(--ip-surface);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    user-select: none;
}
.ip-board-sidebar-card:hover {
    border-color: var(--ip-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.ip-board-sidebar-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}
.ip-board-sidebar-card.on-board {
    opacity: 0.6;
    border-style: dashed;
}
.ip-board-sidebar-card-strip {
    width: 4px;
    flex-shrink: 0;
}
.ip-board-sidebar-card-body {
    flex: 1;
    padding: 8px 10px;
    min-width: 0;
}
.ip-board-sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.ip-board-sidebar-card-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.ip-board-sidebar-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ip-board-sidebar-card-desc {
    font-size: 11px;
    color: var(--ip-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.ip-board-sidebar-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.ip-board-sidebar-card-status {
    flex-shrink: 0;
}
.ip-board-on-board-badge {
    color: var(--ip-success);
    font-size: 11px;
    font-weight: 600;
}
.ip-board-add-btn {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid var(--ip-primary);
    background: transparent;
    color: var(--ip-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.ip-board-add-btn:hover {
    background: var(--ip-primary);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   73. ADMIN ENTITY CARD GRID
   ═══════════════════════════════════════════════════════════════════ */
.ip-admin-entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ip-admin-entity-card {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.15s ease;
}
.ip-admin-entity-card:hover {
    border-color: var(--ip-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ip-admin-entity-img {
    width: 100%;
    aspect-ratio: 1;
    background: var(--ip-surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ip-admin-entity-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ip-admin-entity-placeholder {
    font-size: 36px;
    opacity: 0.25;
}
.ip-admin-entity-body {
    padding: 10px 12px;
}
.ip-admin-entity-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-admin-entity-notes {
    font-size: 11px;
    color: var(--ip-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
}
.ip-admin-entity-actions {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--ip-border);
    justify-content: flex-end;
}
.ip-admin-entity-actions button {
    font-size: 12px;
    padding: 3px 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   74. ADMIN + BOARD RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ip-admin-entity-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}
@media (max-width: 380px) {
    .ip-admin-entity-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   75. TIMELINE PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* Header bar */
.ip-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Timeline layout — alternating left/right */
.ip-timeline-wrap {
    position: relative;
    padding: 0 20px;
    max-width: 900px;
    margin: 0 auto;
}
.ip-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ip-border);
    transform: translateX(-50%);
}
.ip-timeline-event {
    position: relative;
    display: flex;
    margin-bottom: 24px;
    width: 50%;
}
/* Left side events */
.ip-timeline-left {
    justify-content: flex-end;
    padding-right: 30px;
    margin-left: 0;
}
/* Right side events */
.ip-timeline-right {
    justify-content: flex-start;
    padding-left: 30px;
    margin-left: 50%;
}
/* Dot on the center line */
.ip-timeline-dot {
    position: absolute;
    top: 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--ip-border);
    z-index: 1;
}
.ip-timeline-left .ip-timeline-dot {
    right: -8px;
}
.ip-timeline-right .ip-timeline-dot {
    left: -8px;
}
/* Cards */
.ip-timeline-card {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: 10px;
    padding: 14px 16px;
    width: 100%;
    max-width: 400px;
    transition: all 0.15s;
    border-left: 3px solid transparent;
}
.ip-timeline-card:hover {
    border-color: var(--ip-primary);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
/* Date group headers span full width centered */
.ip-timeline-date-group {
    text-align: center;
    margin: 32px 0 16px;
    position: relative;
    clear: both;
    width: 100%;
}
.ip-timeline-date-group span {
    background: var(--ip-surface);
    padding: 4px 16px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ip-primary);
    border: 1px solid var(--ip-border);
    border-radius: 20px;
    position: relative;
    z-index: 2;
}
.ip-timeline-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--ip-text);
}
.ip-timeline-time {
    font-size: 12px;
    color: var(--ip-text-muted);
    margin-left: 8px;
    font-weight: 600;
}
.ip-timeline-title {
    font-size: 15px;
    font-weight: 700;
    margin: 6px 0 4px;
    color: var(--ip-text);
}
.ip-timeline-desc {
    font-size: 13px;
    color: var(--ip-text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-timeline-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
/* Entity thumbnail in timeline cards */
.ip-timeline-thumb {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--ip-border);
}
.ip-timeline-entity-img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}
.ip-timeline-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.ip-timeline-card:hover .ip-timeline-actions {
    opacity: 1;
}

/* alpha21 — drag-to-reorder visuals (only standalone events get these states) */
.ip-timeline-drag {
    color: var(--ip-text-muted, #94a3b8);
    cursor: grab;
    font-size: 11px;
    letter-spacing: -2px;
    user-select: none;
    padding: 2px 1px;
    border-radius: 3px;
    transition: color 0.12s ease, background 0.12s ease;
}
.ip-timeline-event-draggable .ip-timeline-card:hover .ip-timeline-drag {
    color: var(--ip-primary, #6366f1);
    background: rgba(99,102,241,0.08);
}
.ip-timeline-event-dragging {
    opacity: 0.45;
}
.ip-timeline-event-dragging .ip-timeline-drag {
    cursor: grabbing;
}
.ip-timeline-event-dropzone .ip-timeline-card {
    box-shadow: 0 -2px 0 var(--ip-primary, #6366f1) inset, 0 0 0 1px rgba(99,102,241,0.4);
}

/* Add/Edit event form */
.ip-timeline-add-form {
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   76. TIMELINE RESPONSIVE — mobile: stack all on right
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ip-timeline-line { left: 20px; transform: none; }
    .ip-timeline-event { width: 100%; margin-left: 0; padding-left: 40px; padding-right: 0; justify-content: flex-start; }
    .ip-timeline-left, .ip-timeline-right { padding-left: 40px; padding-right: 0; margin-left: 0; }
    .ip-timeline-left .ip-timeline-dot, .ip-timeline-right .ip-timeline-dot { left: 12px; right: auto; }
    .ip-timeline-card { max-width: none; }
    .ip-timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ip-timeline-add-form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .ip-timeline-thumb {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   v2.8 CASE HOME VIEW — 8-tile asymmetric grid (alpha2)
   Layout:
     RESEARCH   | FEED      | BREAKS
     RESEARCH   | COMPANION | ASSETS
     SCRATCHPAD | SYNOPSIS  | STORY
   All selectors scoped to body.ip-home-page so nothing leaks to other surfaces.
   ═══════════════════════════════════════════════════════════════════ */

body.ip-home-page { background: var(--ip-bg); }

.ip-home-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 20px 40px;
    color: var(--ip-text);
}

/* ─── Empty state ─────────────────────────────────────────────────── */
.ip-home-empty {
    text-align: center; padding: 80px 24px;
    background: var(--ip-surface); border: 1px solid var(--ip-border); border-radius: 14px;
}
.ip-home-empty-icon { font-size: 48px; margin-bottom: 14px; }
.ip-home-empty h2 { margin: 0 0 6px; font-size: 22px; color: var(--ip-text); }
.ip-home-empty p { margin: 0 0 18px; color: var(--ip-text-secondary); }

/* ─── Top bar (two rows) ──────────────────────────────────────────── */
/* alpha8.7 — assertion caught: .ip-home-topbar was rendering height:0 (same
   theme pattern that collapsed h2s in alpha8.5 — this one's a <header>
   element). Force explicit block display, min-heights, and defeat any
   `header { display: contents }` / `header { height: 0 }` overrides. */
.ip-home-wrap > .ip-home-topbar,
header.ip-home-topbar,
.ip-home-topbar {
    display: block !important;
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    margin-bottom: 14px !important;
    overflow: visible !important;   /* was hidden — caused 0-height clipping */
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 80px !important;    /* two rows × ~40px each */
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    position: static !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.ip-home-topbar .ip-home-topbar-row1,
.ip-home-topbar-row1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    gap: 12px;
    min-height: 44px !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.ip-home-topbar .ip-home-topbar-row2,
.ip-home-topbar-row2 {
    display: flex !important;
    align-items: center !important;
    gap: 14px;
    padding: 8px 14px !important;
    min-height: 34px !important;
    height: auto !important;
    border-top: 1px solid var(--ip-border-light);
    background: var(--ip-surface-sunken);
    visibility: visible !important;
    opacity: 1 !important;
}

/* Breadcrumb */
.ip-home-breadcrumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.ip-home-breadcrumb-root {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ip-text-secondary); text-decoration: none;
    font-size: 13px; font-weight: 500;
    padding: 4px 6px; border-radius: 6px;
}
.ip-home-breadcrumb-root:hover { background: var(--ip-surface-sunken); color: var(--ip-text); }
.ip-home-brand-icon { font-size: 16px; line-height: 1; }
.ip-home-brand-name { white-space: nowrap; }
.ip-home-breadcrumb-sep { color: var(--ip-text-muted); margin: 0 2px; font-size: 14px; }

/* Case switcher */
.ip-home-case-switcher-wrap { position: relative; min-width: 0; }
.ip-home-case-name-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    font-size: 17px; font-weight: 600; color: var(--ip-text);
    cursor: pointer; max-width: 420px;
}
.ip-home-case-name-btn:hover { background: var(--ip-surface-sunken); border-color: var(--ip-border); }
.ip-home-case-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ip-home-case-switcher-menu {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 280px; max-width: 380px;
    background: var(--ip-surface);
    border: 1px solid var(--ip-border); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, .12);
    padding: 6px;
    z-index: 100;
    max-height: 420px; overflow-y: auto;
}
.ip-home-case-switcher-menu[hidden] { display: none; }
.ip-home-case-group-label {
    font-size: 11px; font-weight: 600; color: var(--ip-text-muted);
    text-transform: uppercase; letter-spacing: .04em;
    padding: 8px 10px 4px;
}
.ip-home-case-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 7px;
    color: var(--ip-text); text-decoration: none;
    font-size: 14px;
}
.ip-home-case-option:hover { background: var(--ip-surface-sunken); }
.ip-home-case-option-active { background: var(--ip-primary-light); color: var(--ip-primary); font-weight: 500; }
.ip-home-case-option-role { font-size: 11px; color: var(--ip-text-muted); margin-left: 8px; }
.ip-home-case-option-all {
    border-top: 1px solid var(--ip-border-light);
    margin-top: 6px; padding-top: 10px;
    color: var(--ip-primary); font-size: 12.5px;
}

/* Top-bar actions (right of row 1) */
.ip-home-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ip-home-presence { display: flex; align-items: center; padding-right: 6px; }
.ip-home-presence-avatar {
    position: relative;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ip-primary-light); color: var(--ip-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    border: 2px solid var(--ip-surface);
    margin-left: -6px;
}
.ip-home-presence-avatar:first-child { margin-left: 0; }
.ip-home-presence-avatar-me { background: var(--ip-primary); color: #fff; }
.ip-home-presence-more { background: var(--ip-surface-sunken); color: var(--ip-text-secondary); font-size: 11px; }
.ip-home-presence-dot {
    position: absolute; right: -2px; bottom: -2px;
    width: 9px; height: 9px; border-radius: 50%;
    background: transparent;
    border: 2px solid var(--ip-surface);
    transition: background .2s ease;
}
.ip-home-presence-avatar-online .ip-home-presence-dot { background: var(--ip-success, #10b981); }
.ip-home-presence-dot-live { background: var(--ip-success); }

.ip-home-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--ip-border);
    background: var(--ip-surface);
    color: var(--ip-text);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
    text-decoration: none;
}
.ip-home-btn:hover:not(:disabled) { background: var(--ip-surface-sunken); }
.ip-home-btn:disabled { opacity: .55; cursor: not-allowed; }
.ip-home-btn-primary { background: var(--ip-primary); color: #fff; border-color: var(--ip-primary); }
.ip-home-btn-primary:hover:not(:disabled) { background: var(--ip-primary-hover); border-color: var(--ip-primary-hover); }
.ip-home-btn-ghost { background: transparent; }
.ip-home-btn-icon { padding: 7px; border: 1px solid var(--ip-border); border-radius: 8px; background: var(--ip-surface); cursor: pointer; color: var(--ip-text); }
.ip-home-btn-icon:disabled { opacity: .55; cursor: not-allowed; }
.ip-home-btn-full { width: 100%; justify-content: center; }

/* Row 2: search + progress line */
.ip-home-search {
    display: flex; align-items: center; gap: 8px;
    width: 320px; max-width: 100%;
    padding: 6px 10px;
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: 8px;
    color: var(--ip-text-secondary);
}
.ip-home-search input {
    flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--ip-text);
    min-width: 0;
}
.ip-home-search kbd {
    font-family: inherit; font-size: 11px;
    padding: 2px 5px; border-radius: 4px;
    background: var(--ip-surface-sunken); border: 1px solid var(--ip-border);
    color: var(--ip-text-muted);
}
/* alpha23.3 — Case-wide search dropdown. The wrapper is position:relative
   so the absolutely-positioned results panel anchors to it. Results panel
   is hidden by default; toggled via [hidden] from JS. */
.ip-home-search { position: relative; }
.ip-home-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    padding: 6px 0;
    color: var(--ip-text, #0f172a);
}
.ip-home-search-results[hidden] { display: none; }
.ip-home-search-summary {
    padding: 6px 14px 8px;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    margin-bottom: 4px;
}
.ip-home-search-hint {
    padding: 14px 16px;
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
    text-align: center;
}
.ip-home-search-group + .ip-home-search-group {
    border-top: 1px solid var(--ip-border, #e5e7eb);
    margin-top: 4px;
    padding-top: 4px;
}
.ip-home-search-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ip-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ip-home-search-group-icon { font-size: 13px; }
.ip-home-search-group-label { flex: 1; }
.ip-home-search-group-count {
    font-size: 10px;
    background: var(--ip-surface-sunken, #f1f5f9);
    padding: 1px 6px;
    border-radius: 999px;
    color: var(--ip-text-secondary, #475569);
    letter-spacing: 0.02em;
}
.ip-home-search-item {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
    transition: background 100ms ease, border-color 100ms ease;
}
.ip-home-search-item:hover,
.ip-home-search-item.is-active,
.ip-home-search-item:focus {
    background: rgba(99, 102, 241, 0.08);
    border-left-color: var(--ip-primary, #6366f1);
    text-decoration: none;
    color: inherit;
    outline: none;
}
.ip-home-search-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-home-search-item-snippet {
    font-size: 12px;
    color: var(--ip-text-secondary, #64748b);
    line-height: 1.4;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ip-home-search-item-snippet mark {
    background: rgba(250, 204, 21, 0.5);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 600;
}
.ip-home-progress {
    flex: 1;
    font-size: 12.5px; color: var(--ip-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── alpha banner ────────────────────────────────────────────────── */
.ip-home-alpha-banner {
    padding: 8px 14px;
    background: var(--ip-warning-light);
    border: 1px dashed var(--ip-warning);
    border-radius: 10px;
    color: #7a5107;
    font-size: 12.5px;
    margin-bottom: 14px;
}
.ip-home-alpha-banner strong { color: #5a3c04; }

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha14 — Case Identity Plate
   ═══════════════════════════════════════════════════════════════════
   Sits between the topbar and the alpha banner/tile grid. Two-column
   layout: static hero on the left (victim, always put), cross-fading
   supporting panel on the right with summary text + Play + Open-story.
   Thumb strip below. Plate is collapsible; remembered via localStorage.
*/
.ip-wrap .ip-plate {
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.05)) !important;
    border: 1px solid var(--ip-border-light, #e2e8f0) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: max-height 0.25s ease, margin 0.25s ease !important;
    max-height: 520px !important;
}
.ip-wrap .ip-plate.is-collapsed {
    max-height: 56px !important; /* just the title row */
}
.ip-wrap .ip-plate-inner {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 0 !important;
    min-height: 260px !important;
}
@media (max-width: 900px) {
    .ip-wrap .ip-plate-inner { grid-template-columns: 1fr !important; }
}

/* ─── Hero (left column) ─────────────────────────────────────── */
.ip-wrap .ip-plate-hero {
    position: relative !important;
    background: #0f172a !important;   /* dark backdrop — victim photo pops */
    overflow: hidden !important;
    min-height: 260px !important;
}
.ip-wrap .ip-plate-hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}
.ip-wrap .ip-plate-hero-placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px !important;
}
.ip-wrap .ip-plate-hero-placeholder-icon { font-size: 36px !important; opacity: 0.6; }

/* Captions sit at the bottom of any image with a gradient scrim. */
.ip-wrap .ip-plate-caption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 24px 12px 10px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    pointer-events: none !important;
}
.ip-wrap .ip-plate-caption-hero { font-size: 13px !important; }
.ip-wrap .ip-plate-status-pill {
    display: inline-block !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    line-height: 1.4 !important;
}
/* Status pill color hints — role-based. All still white text, tinted BG. */
.ip-wrap .ip-plate-status-victim,
.ip-wrap .ip-plate-status-missing   { background: rgba(220, 38, 38, 0.55) !important; }
.ip-wrap .ip-plate-status-suspect,
.ip-wrap .ip-plate-status-charged,
.ip-wrap .ip-plate-status-convicted { background: rgba(180, 83, 9, 0.55)  !important; }
.ip-wrap .ip-plate-status-person-of-interest,
.ip-wrap .ip-plate-status-subject   { background: rgba(217, 119, 6, 0.55) !important; }
.ip-wrap .ip-plate-status-cleared   { background: rgba(34, 197, 94, 0.55) !important; }
.ip-wrap .ip-plate-status-witness,
.ip-wrap .ip-plate-status-family    { background: rgba(59, 130, 246, 0.55) !important; }
.ip-wrap .ip-plate-status-scene,
.ip-wrap .ip-plate-status-home,
.ip-wrap .ip-plate-status-location  { background: rgba(99, 102, 241, 0.55) !important; }

/* ─── Right column: title + grid (supporting + summary) ───── */
.ip-wrap .ip-plate-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px 12px !important;
    min-width: 0 !important;
}
.ip-wrap .ip-plate-body-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
.ip-wrap .ip-plate-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ip-text, #0f172a) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.ip-wrap .ip-plate-collapse-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border: 1px solid var(--ip-border-light, #e2e8f0) !important;
    border-radius: 999px !important;
    color: var(--ip-text-secondary, #475569) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: transform 0.2s ease, background 0.12s ease !important;
}
.ip-wrap .ip-plate-collapse-btn:hover { background: var(--ip-primary-light, #eef2ff) !important; }
.ip-wrap .ip-plate.is-collapsed .ip-plate-collapse-icon { transform: rotate(-90deg); display: inline-block; }

.ip-wrap .ip-plate-body-grid {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
@media (max-width: 1100px) {
    .ip-wrap .ip-plate-body-grid { grid-template-columns: 1fr !important; }
}

/* ─── Supporting cross-fade panel ─────────────────────────── */
.ip-wrap .ip-plate-supporting {
    position: relative !important;
    background: #0f172a !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 160px !important;
}
.ip-wrap .ip-plate-supp-slide {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
}
.ip-wrap .ip-plate-supp-slide.is-active { opacity: 1 !important; }
.ip-wrap .ip-plate-supp-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.ip-wrap .ip-plate-supp-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 16px !important;
    color: rgba(255,255,255,0.65) !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 1.5 !important;
}
.ip-wrap .ip-plate-supp-empty p { margin: 0 !important; }

/* ─── Summary hook + actions ──────────────────────────────── */
.ip-wrap .ip-plate-summary {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    min-width: 0 !important;
}
.ip-wrap .ip-plate-summary-text,
.ip-wrap .ip-plate-summary-empty {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--ip-text, #0f172a) !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    max-height: 160px !important;
}
.ip-wrap .ip-plate-summary-text p,
.ip-wrap .ip-plate-summary-empty p { margin: 0 0 8px 0 !important; }
.ip-wrap .ip-plate-summary-text p:last-child,
.ip-wrap .ip-plate-summary-empty p:last-child { margin-bottom: 0 !important; }
.ip-wrap .ip-plate-summary-meta {
    font-size: 11px !important;
    color: var(--ip-text-muted, #64748b) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}
.ip-wrap .ip-plate-byline {
    font-weight: 600 !important;
    color: var(--ip-primary, #6366f1) !important;
}
.ip-wrap .ip-plate-sep { opacity: 0.5; }
.ip-wrap .ip-plate-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: auto !important;
    padding-top: 4px !important;
}
.ip-wrap .ip-plate-play-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: var(--ip-primary, #6366f1) !important;
    color: #fff !important;
    border: 1px solid var(--ip-primary, #6366f1) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background 0.12s ease, transform 0.1s ease !important;
    box-shadow: 0 1px 2px rgba(99,102,241,0.2) !important;
}
.ip-wrap .ip-plate-play-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ip-wrap .ip-plate-play-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
.ip-wrap .ip-plate-play-btn.is-active {
    background: var(--ip-text, #0f172a) !important;
    border-color: var(--ip-text, #0f172a) !important;
}
.ip-wrap .ip-plate-play-icon { font-size: 11px !important; }
.ip-wrap .ip-plate-edit-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ip-primary, #6366f1) !important;
    text-decoration: none !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    letter-spacing: 0 !important;
}
.ip-wrap .ip-plate-edit-link:hover { background: var(--ip-primary-light, #eef2ff) !important; }

/* ─── Thumb strip ─────────────────────────────────────────── */
.ip-wrap .ip-plate-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--ip-border-light, #e2e8f0) !important;
}
.ip-wrap .ip-plate-thumb {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #0f172a !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color 0.12s ease, transform 0.1s ease !important;
}
.ip-wrap .ip-plate-thumb:hover { transform: translateY(-1px); border-color: var(--ip-primary, #6366f1) !important; }
.ip-wrap .ip-plate-thumb.is-active { border-color: var(--ip-primary, #6366f1) !important; box-shadow: 0 0 0 2px rgba(99,102,241,0.2) !important; }
.ip-wrap .ip-plate-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.ip-wrap .ip-plate-thumb-kind {
    position: absolute !important;
    bottom: 2px !important;
    right: 2px !important;
    font-size: 10px !important;
    background: rgba(0,0,0,0.65) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 1px 3px !important;
    line-height: 1 !important;
}

/* Collapse state — hide inner body content, keep title visible */
.ip-wrap .ip-plate.is-collapsed .ip-plate-inner { grid-template-columns: 1fr !important; }
.ip-wrap .ip-plate.is-collapsed .ip-plate-hero { display: none !important; }
.ip-wrap .ip-plate.is-collapsed .ip-plate-body-grid,
.ip-wrap .ip-plate.is-collapsed .ip-plate-thumbs { display: none !important; }
.ip-wrap .ip-plate.is-collapsed .ip-plate-body { padding: 10px 14px !important; min-height: 40px !important; }
.ip-wrap .ip-plate.is-collapsed .ip-plate-body-head { margin-bottom: 0 !important; }

/* ─── Tile grid (desktop) ─────────────────────────────────────────── */
.ip-home-grid {
    display: grid;
    grid-template-columns: 1.33fr 1fr 1fr;   /* ~40% / ~30% / ~30% */
    /* v2.8 alpha8.1 — cap row heights so tiles with lots of content scroll
       internally (via .ip-home-tile-body overflow:auto) instead of growing
       the whole row and forcing page scroll on adjacent tiles. */
    grid-template-rows: minmax(260px, 440px) minmax(260px, 420px) minmax(260px, 420px);
    grid-template-areas:
        "research   feed       breaks"
        "research   companion  assets"
        "scratchpad synopsis   story";
    gap: 14px;
    align-items: stretch;
}
.ip-home-tile-research   { grid-area: research; }
.ip-home-tile-feed       { grid-area: feed; }
.ip-home-tile-breaks     { grid-area: breaks; }
.ip-home-tile-companion  { grid-area: companion; }
.ip-home-tile-assets     { grid-area: assets; }
.ip-home-tile-scratchpad { grid-area: scratchpad; }
.ip-home-tile-synopsis   { grid-area: synopsis; }
.ip-home-tile-story      { grid-area: story; }

/* ─── Tile baseline ───────────────────────────────────────────────── */
.ip-home-tile {
    display: flex; flex-direction: column;
    min-height: 0;          /* alpha8.1 — allow the tile to shrink inside the row so body overflow works */
    background: var(--ip-surface);
    border: 1px solid var(--ip-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
    outline: none;
}
.ip-home-tile-head[data-tile-modal-url],
.ip-home-tile-head.ip-home-tile-head-clickable {
    cursor: pointer;
}
.ip-home-tile-head[data-tile-modal-url]:hover,
.ip-home-tile-head.ip-home-tile-head-clickable:hover {
    background: var(--ip-surface-sunken);
}
/* alpha8.8 — explicit "this is not clickable" affordance for BREAKS /
   SYNOPSIS / STORY. They render as read-only panes; kill pointer cursor
   and any hover paint so users don't chase them. */
.ip-home-tile-head.ip-home-tile-head-static,
.ip-home-tile-head.ip-home-tile-head-static:hover,
.ip-home-tile-head.ip-home-tile-head-static:focus {
    cursor: default !important;
    background: transparent !important;
}
.ip-home-tile-head.ip-home-tile-head-static .ip-home-tile-title {
    color: var(--ip-text-muted, #64748b) !important;
}
.ip-home-tile:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); border-color: #dfe3eb; }
.ip-home-tile:focus-visible { border-color: var(--ip-primary); box-shadow: 0 0 0 3px var(--ip-primary-light); }

/* alpha8.5 — theme was collapsing <header> and <h2> inside our grid to
   height:0 (confirmed via IP_DEBUG diagnostic: rect_h=0.0 on every title).
   We force explicit min-heights AND line-heights with ultra-specific
   selectors that beat any theme rule, plus wildcard-safe resets on the
   tile-title h2 itself. */
.ip-home-grid .ip-home-tile .ip-home-tile-head,
.ip-home-tile > .ip-home-tile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px 4px !important;
    margin: 0 !important;
    min-height: 34px !important;   /* hard floor: title always has room */
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    background: transparent;
    border: 0;
    box-sizing: border-box !important;
}
.ip-home-grid .ip-home-tile .ip-home-tile-head .ip-home-tile-title,
.ip-home-tile .ip-home-tile-head h2.ip-home-tile-title,
h2.ip-home-tile-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;   /* explicit px — defeats line-height:0 resets */
    min-height: 20px !important;
    height: auto !important;
    max-height: none !important;
    color: var(--ip-text, #0f172a) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: .08em;
    visibility: visible !important;
    opacity: 1 !important;
    text-transform: none !important;
    text-indent: 0 !important;
    background: none !important;
    border: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
    position: static !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: content-box !important;
}
.ip-home-tile-sub {
    padding: 0 14px 10px;
    font-size: 12px; color: var(--ip-text-muted);
    border-bottom: 1px solid var(--ip-border-light);
    margin-bottom: 0;
}
.ip-home-tile-count {
    font-size: 12px; font-weight: 600;
    background: var(--ip-warning-light); color: #7a5107;
    padding: 2px 8px; border-radius: 999px;
    letter-spacing: 0;
}
.ip-home-tile-link {
    font-size: 12px; color: var(--ip-primary); text-decoration: none; font-weight: 500;
    padding: 4px 6px; border-radius: 6px;
    background: none; border: 0; cursor: pointer;
    letter-spacing: 0;
}
.ip-home-tile-link:hover { background: var(--ip-primary-light); }
.ip-home-tile-link-disabled { color: var(--ip-text-muted); pointer-events: none; }

/* ─── v2.8 alpha13.4 — STORY tile: Read-aloud button + head action row ── */
.ip-home-tile-head-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
}
.ip-wrap .ip-home-tile-tts-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: var(--ip-text-secondary, #475569) !important;
    background: transparent !important;
    border: 1px solid var(--ip-border-light, #e2e8f0) !important;
    border-radius: 999px !important;
    padding: 4px 9px !important;
    cursor: pointer !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ip-wrap .ip-home-tile-tts-btn:hover {
    background: var(--ip-primary-light, #eef2ff) !important;
    border-color: var(--ip-primary, #6366f1) !important;
    color: var(--ip-primary, #6366f1) !important;
}
.ip-wrap .ip-home-tile-tts-btn.is-active {
    background: var(--ip-primary, #6366f1) !important;
    border-color: var(--ip-primary, #6366f1) !important;
    color: #fff !important;
}
.ip-wrap .ip-home-tile-tts-btn .ip-home-tile-tts-icon { font-size: 13px; line-height: 1; }
.ip-wrap .ip-home-tile-tts-btn .ip-home-tile-tts-label { line-height: 1; }
.ip-wrap .ip-home-tile-tts-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ip-home-tile-body { flex: 1 1 auto; min-height: 0; padding: 12px 14px; overflow: auto; }
.ip-home-tile-foot { padding: 10px 14px; border-top: 1px solid var(--ip-border-light); background: var(--ip-surface-sunken); }

/* ─── Tile: RESEARCH ─────────────────────────────────────────────── */
.ip-home-chat-preview { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.ip-home-chat-empty {
    padding: 16px; border-radius: 10px;
    background: var(--ip-surface-sunken); color: var(--ip-text-secondary);
    font-size: 13px; line-height: 1.55; text-align: center;
}
.ip-home-chat-compose { display: flex; align-items: center; gap: 8px; }
.ip-home-chat-compose input {
    flex: 1; padding: 8px 11px; border-radius: 8px;
    border: 1px solid var(--ip-border); background: var(--ip-surface);
    font-size: 13px; color: var(--ip-text); outline: none;
}

/* alpha11 — recent-thread preview bubbles inside the Research tile.
   Tile is summary; modal is detail. Scrolling past the top threshold
   promotes to the modal (see platform-home.js promoteChatPreviewToModal). */
.ip-home-chat-promote-hint {
    text-align: center; padding: 6px 10px; margin: -2px 0 4px;
    font-size: 11px; color: var(--ip-text-muted);
    border-radius: 6px; background: var(--ip-surface-sunken);
    cursor: pointer;
}
.ip-home-chat-msg {
    display: flex; flex-direction: column; gap: 3px;
    max-width: 88%; padding: 8px 11px; border-radius: 12px;
    font-size: 13px; line-height: 1.45; word-break: break-word;
}
.ip-home-chat-msg-body { color: var(--ip-text); }
.ip-home-chat-msg-meta { font-size: 10px; color: var(--ip-text-muted); }
.ip-home-chat-msg-user {
    align-self: flex-end;
    background: var(--ip-primary-light);
    color: var(--ip-primary);
    border-bottom-right-radius: 4px;
}
.ip-home-chat-msg-user .ip-home-chat-msg-body { color: inherit; }
.ip-home-chat-msg-user .ip-home-chat-msg-meta { color: var(--ip-primary); opacity: .7; text-align: right; }
.ip-home-chat-msg-sol {
    align-self: flex-start;
    background: var(--ip-surface-sunken);
    color: var(--ip-text);
    border-bottom-left-radius: 4px;
}

/* ─── Tile: FEED ─────────────────────────────────────────────────── */
.ip-home-feed-compose {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ip-border-light);
    background: var(--ip-surface-sunken);
}
.ip-home-feed-compose textarea {
    width: 100%; resize: none; box-sizing: border-box;
    padding: 7px 10px; border-radius: 7px;
    border: 1px solid var(--ip-border); background: var(--ip-surface);
    font: inherit; font-size: 13px; color: var(--ip-text); outline: none;
    margin-bottom: 7px;
}
.ip-home-feed-compose-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ip-home-chip {
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--ip-border); background: var(--ip-surface);
    font-size: 12px; color: var(--ip-text-secondary); cursor: pointer;
}
.ip-home-chip-primary { background: var(--ip-primary-light); color: var(--ip-primary); border-color: transparent; font-weight: 500; }
.ip-home-chip:disabled { cursor: not-allowed; opacity: .7; }

.ip-home-feed-list { display: flex; flex-direction: column; gap: 8px; }
.ip-home-feed-loading,
.ip-home-feed-empty,
.ip-home-breaks-loading,
.ip-home-breaks-empty {
    padding: 20px 14px; text-align: center;
    color: var(--ip-text-muted); font-size: 13px;
}
.ip-home-feed-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; background: var(--ip-surface-sunken); }
.ip-home-feed-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ip-primary-light); color: var(--ip-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ip-home-feed-avatar-ai { background: var(--ip-info-light); color: var(--ip-info); }
.ip-home-feed-content { flex: 1; min-width: 0; }
.ip-home-feed-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ip-text-secondary); margin-bottom: 3px; flex-wrap: wrap; }
.ip-home-feed-meta time { color: var(--ip-text-muted); }
.ip-home-feed-meta strong { color: var(--ip-text); font-weight: 600; }
.ip-home-feed-body { font-size: 13px; color: var(--ip-text); line-height: 1.45; word-break: break-word; }
.ip-home-star {
    margin-left: auto;
    border: 0; background: transparent;
    font-size: 16px; line-height: 1;
    color: var(--ip-text-muted); cursor: pointer;
    padding: 2px 6px; border-radius: 6px;
}
.ip-home-star:hover { background: var(--ip-surface); color: var(--ip-warning); }
.ip-home-star-filled { color: var(--ip-warning); }
.ip-home-feed-load-more {
    margin: 8px auto 0; display: block;
    font-size: 12px; color: var(--ip-primary);
    background: transparent; border: 1px solid var(--ip-border); border-radius: 8px;
    padding: 6px 14px; cursor: pointer;
}
.ip-home-feed-load-more:hover { background: var(--ip-primary-light); }

/* ─── Tile: BREAKS ───────────────────────────────────────────────── */
.ip-home-breaks-list { display: flex; flex-direction: column; gap: 8px; }
.ip-home-break {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px; border-radius: 10px;
    background: var(--ip-warning-light);
    border-left: 3px solid var(--ip-warning);
}
.ip-home-break-star { color: var(--ip-warning); font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.ip-home-break-body { flex: 1; min-width: 0; }
.ip-home-break-desc { font-size: 13px; color: var(--ip-text); line-height: 1.4; margin-bottom: 3px; word-break: break-word; }
.ip-home-break-meta { font-size: 11px; color: var(--ip-text-muted); }

/* ─── Tile: COMPANION ────────────────────────────────────────────── */
.ip-home-companion-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ip-info); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 0;
}
.ip-home-obs-empty {
    font-size: 13px; color: var(--ip-text-secondary);
    padding: 14px; border-radius: 10px;
    background: var(--ip-info-light);
    line-height: 1.55;
}
.ip-home-obs-empty strong { color: var(--ip-info); display: block; margin-bottom: 4px; font-size: 13px; }
.ip-home-obs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ip-home-companion-foot { display: flex; flex-direction: column; gap: 6px; }
.ip-home-cost-hint { margin-left: auto; font-size: 11px; color: var(--ip-text-muted); }
.ip-home-companion-note { font-size: 11px; color: var(--ip-text-muted); text-align: center; }

/* v2.8 alpha6 — Token/cost usage strip (this month, this case) */
.ip-home-usage-strip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 10px; margin-top: 4px;
    background: var(--ip-surface-sunken);
    border-radius: 6px;
    font-size: 11px; color: var(--ip-text-muted);
    cursor: help;
    transition: background .15s ease;
}
.ip-home-usage-strip:hover { background: var(--ip-surface-hover, var(--ip-surface-sunken)); }
.ip-home-usage-period {
    text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
    font-size: 10px; color: var(--ip-text-secondary);
    padding: 1px 5px; border-radius: 3px;
    background: var(--ip-surface); margin-right: 2px;
}
.ip-home-usage-metric strong { color: var(--ip-text); font-weight: 600; }
.ip-home-usage-dot { color: var(--ip-border); font-size: 10px; }
.ip-home-usage-strip-flash {
    background: var(--ip-info-soft, rgba(99, 102, 241, .12)) !important;
    transition: background .4s ease;
}

/* ─── Tile: ASSETS ───────────────────────────────────────────────── */
.ip-home-assets-tabs {
    /* alpha8.1 — wrap tabs onto a second row instead of horizontal scroll.
       6 tabs (People/Places/Evidence/Research/Theories/Breaks) don't fit
       comfortably in narrow ASSETS tile width. */
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 2px;
    padding: 6px 14px 0;
    border-bottom: 1px solid var(--ip-border-light);
}
.ip-home-assets-tab {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 8px;
    background: transparent;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 12px; color: var(--ip-text-secondary); font-weight: 500;
    white-space: nowrap; cursor: pointer;
    margin-bottom: -1px;
}
.ip-home-assets-tab:hover { color: var(--ip-text); }
.ip-home-assets-tab-active {
    color: var(--ip-primary);
    border-bottom-color: var(--ip-primary);
}
.ip-home-assets-tab-count {
    font-size: 11px; font-weight: 600;
    background: var(--ip-surface-sunken); color: var(--ip-text-secondary);
    padding: 1px 6px; border-radius: 999px;
}
.ip-home-assets-tab-active .ip-home-assets-tab-count { background: var(--ip-primary-light); color: var(--ip-primary); }
.ip-home-assets-body { padding-top: 10px; }
.ip-home-assets-panel { display: block; }
.ip-home-assets-panel[hidden] { display: none; }
.ip-home-assets-hint { font-size: 13px; color: var(--ip-text-secondary); margin: 0 0 10px; }

/* ─── Tile: SCRATCHPAD ───────────────────────────────────────────── */
.ip-home-board-thumb {
    width: 100%; aspect-ratio: 16 / 9;
    background: var(--ip-surface-sunken);
    border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--ip-text-muted);
    overflow: hidden;
    position: relative;
}
.ip-home-board-thumb svg { width: 100%; height: 100%; }
.ip-home-board-thumb-note {
    position: absolute; bottom: 6px; right: 10px;
    font-size: 10px; color: var(--ip-text-muted);
    background: var(--ip-surface, rgba(255,255,255,.7));
    padding: 2px 6px; border-radius: 4px;
    backdrop-filter: blur(4px);
}

/* ─── Tile: SYNOPSIS / STORY ─────────────────────────────────────── */
.ip-home-state-summary {
    font-size: 14px; line-height: 1.55; color: var(--ip-text); margin: 0 0 10px;
}
.ip-home-state-meta { font-size: 11px; color: var(--ip-text-muted); margin: 0; }
.ip-home-story-empty {
    font-size: 13px; color: var(--ip-text-secondary); line-height: 1.55;
    padding: 14px; background: var(--ip-surface-sunken); border-radius: 10px;
}
.ip-home-story-empty p { margin: 0 0 8px; }
.ip-home-story-empty p:last-child { margin-bottom: 0; color: var(--ip-text-muted); font-size: 12px; }

/* ─── Tablet ≤ 1100px: collapse to 2 columns ──────────────────────── */
@media (max-width: 1100px) {
    .ip-home-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "research   feed"
            "research   breaks"
            "companion  assets"
            "scratchpad synopsis";
    }
    .ip-home-tile-story { grid-column: 1 / -1; }
    .ip-home-search { width: 220px; }
}

/* ─── Mobile ≤ 720px: single column, spec'd stack order ───────────── */
@media (max-width: 720px) {
    .ip-home-wrap { padding: 10px 12px 28px; }
    .ip-home-grid {
        display: flex; flex-direction: column; gap: 12px;
        grid-template-areas: none;
    }
    .ip-home-tile { min-height: 0; }
    /* Mobile stack: research → feed → breaks → companion → synopsis → scratchpad → assets → story */
    .ip-home-tile-research   { order: 1; }
    .ip-home-tile-feed       { order: 2; }
    .ip-home-tile-breaks     { order: 3; }
    .ip-home-tile-companion  { order: 4; }
    .ip-home-tile-synopsis   { order: 5; }
    .ip-home-tile-scratchpad { order: 6; }
    .ip-home-tile-assets     { order: 7; }
    .ip-home-tile-story      { order: 8; }

    .ip-home-topbar-row1 { flex-direction: row; flex-wrap: wrap; }
    .ip-home-topbar-row2 { flex-direction: column; align-items: flex-start; gap: 6px; }
    .ip-home-search { width: 100%; }
    .ip-home-brand-name { display: none; }
    .ip-home-case-name-btn { max-width: 200px; font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha2.5 — Quick-add modal (compose chip forms)
   ═══════════════════════════════════════════════════════════════════ */
.ip-home-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ip-home-modal[hidden] { display: none !important; }
.ip-home-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.ip-home-modal-card {
    position: relative; z-index: 1;
    background: var(--ip-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 100%; max-width: 460px;
    max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ip-home-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ip-border-light, #e5e7eb);
}
.ip-home-modal-title { margin: 0; font-size: 16px; font-weight: 600; }
.ip-home-modal-close {
    background: none; border: none; font-size: 24px;
    line-height: 1; cursor: pointer;
    color: var(--ip-text-muted, #6b7280);
    padding: 0 4px;
}
.ip-home-modal-close:hover { color: var(--ip-text, #111827); }
.ip-home-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
}
.ip-home-modal-field { display: flex; flex-direction: column; gap: 4px; }
.ip-home-modal-field label {
    font-size: 12px; font-weight: 500;
    color: var(--ip-text-secondary, #4b5563);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ip-home-modal-field input[type="text"],
.ip-home-modal-field select,
.ip-home-modal-field textarea {
    box-sizing: border-box; width: 100%;
    padding: 8px 10px; border-radius: 7px;
    border: 1px solid var(--ip-border, #d1d5db);
    background: var(--ip-surface, #fff);
    font: inherit; font-size: 14px; color: var(--ip-text, #111827);
    outline: none;
}
.ip-home-modal-field input[type="text"]:focus,
.ip-home-modal-field select:focus,
.ip-home-modal-field textarea:focus {
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.ip-home-modal-field textarea { min-height: 70px; resize: vertical; }
.ip-home-modal-error {
    padding: 8px 10px; border-radius: 6px;
    background: #fef2f2; color: #991b1b;
    font-size: 13px;
}
.ip-home-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ip-border-light, #e5e7eb);
    background: var(--ip-surface-sunken, #f9fafb);
}
.ip-home-modal-foot .ip-home-btn { font-size: 13px; padding: 7px 14px; }
.ip-home-modal-submit-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%;
    animation: ip-home-spin .8s linear infinite;
    margin-right: 6px; vertical-align: -1px;
}
@keyframes ip-home-spin { to { transform: rotate(360deg); } }

/* Flash new feed item */
.ip-home-feed-item-new {
    animation: ip-home-flash 1.6s ease-out;
}
/* alpha8.1 — generic flash class used on ASSETS count pills when updated
   after a tile-modal closes (e.g. person added inside Casefile) */
.ip-home-flash {
    animation: ip-home-flash 1.2s ease-out;
}
@keyframes ip-home-flash {
    0%   { background: rgba(99, 102, 241, 0.18); }
    100% { background: transparent; }
}
/* alpha8.1 — small footnote inside an ASSETS panel for usage hints */
.ip-home-assets-hint-footnote {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--ip-border-light, #e5e7eb);
    font-size: 11px;
    color: var(--ip-text-muted, #6b7280);
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha2.5 — Focused feed view (/cold-case-feed/)
   ═══════════════════════════════════════════════════════════════════ */
.ip-feed-page {
    max-width: 720px; margin: 0 auto;
    padding: 24px 20px 60px;
}
.ip-feed-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.ip-feed-page-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--ip-primary, #6366f1);
    text-decoration: none;
    /* alpha22: render as a small pill so it sits inside the design-system page-header */
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(99,102,241,0.25);
    background: rgba(99,102,241,0.06);
    transition: background 0.12s ease, border-color 0.12s ease;
}
.ip-feed-page-back:hover {
    text-decoration: none;
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.45);
}
.ip-feed-page-title {
    margin: 0; font-size: 22px; font-weight: 600;
    flex: 1 1 auto;
}
/* alpha22 — design-system page-header on the Feed page (replaces the
   bare title strip). The label + back link share the left cluster, the
   count pill sits right. */
.ip-feed-page-header { margin-bottom: 16px; }

/* alpha22 — design-system page-header above the Research two-column layout. */
.ip-research-page-header { margin: 0 auto 18px; max-width: 1280px; }
.ip-feed-page-filter {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.ip-feed-page-filter-btn {
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--ip-border, #d1d5db);
    background: var(--ip-surface, #fff);
    font-size: 12px; color: var(--ip-text-secondary, #4b5563);
    cursor: pointer;
}
.ip-feed-page-filter-btn-active {
    background: var(--ip-primary-light, #eef2ff);
    color: var(--ip-primary, #6366f1);
    border-color: transparent; font-weight: 500;
}
.ip-feed-page-list {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border-light, #e5e7eb);
    border-radius: 10px;
    padding: 10px 12px;
}
.ip-feed-page-load-more {
    display: block; width: 100%;
    margin-top: 14px; padding: 10px;
    border: 1px dashed var(--ip-border, #d1d5db);
    background: transparent; border-radius: 8px;
    font-size: 13px; color: var(--ip-text-secondary, #4b5563);
    cursor: pointer;
}
.ip-feed-page-load-more:hover { background: var(--ip-surface-sunken, #f9fafb); }
.ip-feed-page-load-more[disabled] { opacity: .5; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha4 — SOL Observations cards + Reassess spinner state
   ═══════════════════════════════════════════════════════════════════ */

.ip-home-obs {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    gap: 8px;
    align-items: start;
    padding: 10px 10px 10px 12px;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border-light, #e5e7eb);
    border-left: 3px solid var(--ip-info, #6366f1);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ip-text, #111827);
    transition: background .15s ease, border-color .15s ease;
}
.ip-home-obs:hover { background: var(--ip-surface-sunken, #f9fafb); }

.ip-home-obs-marker {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; line-height: 1;
    background: var(--ip-info-light, #eef2ff);
    color: var(--ip-info, #6366f1);
    flex-shrink: 0;
}

.ip-home-obs-text {
    font-size: 13px; line-height: 1.5;
    color: var(--ip-text, #111827);
    word-break: break-word;
}

.ip-home-obs-dismiss {
    width: 22px; height: 22px;
    border: 0; background: transparent;
    color: var(--ip-text-muted, #9ca3af);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    opacity: .6;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.ip-home-obs-dismiss:hover {
    opacity: 1;
    color: var(--ip-danger, #ef4444);
    background: var(--ip-danger-light, #fee2e2);
}

/* Type-specific left border accents */
.ip-home-obs-type-gap           { border-left-color: #f59e0b; }
.ip-home-obs-type-gap           .ip-home-obs-marker { background: #fef3c7; color: #b45309; }
.ip-home-obs-type-pattern       { border-left-color: #6366f1; }
.ip-home-obs-type-pattern       .ip-home-obs-marker { background: #eef2ff; color: #4f46e5; }
.ip-home-obs-type-contradiction { border-left-color: #ef4444; }
.ip-home-obs-type-contradiction .ip-home-obs-marker { background: #fee2e2; color: #b91c1c; }
.ip-home-obs-type-question      { border-left-color: #10b981; }
.ip-home-obs-type-question      .ip-home-obs-marker { background: #d1fae5; color: #047857; }
.ip-home-obs-type-general       { border-left-color: #9ca3af; }
.ip-home-obs-type-general       .ip-home-obs-marker { background: #f3f4f6; color: #4b5563; }

/* Reassess button running state */
.ip-home-btn.ip-home-reassess-running {
    opacity: .85;
    cursor: wait;
    background: var(--ip-info-light, #eef2ff);
    color: var(--ip-info, #6366f1);
    border-color: var(--ip-info, #6366f1);
}
.ip-home-btn.ip-home-reassess-running svg { display: none; }

/* Small inline spinner reused by modal submit + reassess button */
.ip-home-modal-submit-spinner,
.ip-home-reassess-running .ip-home-modal-submit-spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: -2px;
    animation: ip-home-spin .7s linear infinite;
}
@keyframes ip-home-spin { to { transform: rotate(360deg); } }

/* Board mini-render polish (alpha3) */
.ip-home-board-thumb-empty {
    font-size: 12px; color: var(--ip-text-muted, #9ca3af);
    padding: 20px; text-align: center; font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha5.1 — Inline ASSETS lists + tile-click affordance
   ═══════════════════════════════════════════════════════════════════ */

.ip-home-assets-list {
    list-style: none; padding: 0; margin: 0 0 10px;
    display: flex; flex-direction: column; gap: 2px;
}
.ip-home-assets-list-item { margin: 0; }
.ip-home-assets-list-link {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--ip-text, #111827);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    transition: background .12s ease;
}
.ip-home-assets-list-link:hover,
.ip-home-assets-list-link:focus-visible {
    background: var(--ip-surface-sunken, #f9fafb);
    text-decoration: none;
}
.ip-home-assets-list-label {
    flex: 1 1 auto;
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ip-home-assets-list-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--ip-text-muted, #9ca3af);
    background: var(--ip-surface-sunken, #f3f4f6);
    padding: 1px 7px;
    border-radius: 999px;
}
.ip-home-assets-more {
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--ip-text-muted, #9ca3af);
    padding-left: 10px;
}

/* Clickable tile body — subtle hover */
[data-tile-navigate]:hover .ip-home-board-thumb {
    outline: 2px solid var(--ip-primary-light, #dbeafe);
    outline-offset: 2px;
    transition: outline .15s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha8 — Tile Modal framework
   Centered iframe modal at 80vw × 85vh (desktop) / full-screen (mobile).
   Used when user clicks a tile to open the full feature surface
   (Investigator, Board, Casefile, Feed) without leaving Home.
   ═══════════════════════════════════════════════════════════════════ */
.ip-tile-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.ip-tile-modal[hidden] { display: none !important; }
.ip-tile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: ipTileModalFadeIn .15s ease-out;
}
.ip-tile-modal-card {
    position: relative;
    width: 80vw;
    height: 85vh;
    max-width: 1600px;
    background: var(--ip-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ipTileModalZoomIn .18s cubic-bezier(.2,.8,.2,1);
}
.ip-tile-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--ip-surface-alt, #f9fafb);
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    flex: 0 0 auto;
}
.ip-tile-modal-titlewrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ip-tile-modal-icon {
    font-size: 18px;
    line-height: 1;
}
.ip-tile-modal-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ip-text, #111827);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.ip-tile-modal-sub {
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}
.ip-tile-modal-actions { display: flex; align-items: center; gap: 6px; }
.ip-tile-modal-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ip-text-muted, #6b7280);
    font-size: 16px;
    line-height: 1;
    padding: 0;
}
.ip-tile-modal-btn:hover {
    background: var(--ip-surface-hover, #f3f4f6);
    color: var(--ip-text, #111827);
    border-color: var(--ip-border, #e5e7eb);
}
.ip-tile-modal-close {
    font-size: 20px;
    font-weight: 600;
}
.ip-tile-modal-body {
    flex: 1 1 auto;
    background: var(--ip-bg, #f3f4f6);
    position: relative;
    overflow: hidden;
}
.ip-tile-modal-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}
.ip-tile-modal-loader {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ip-text-muted, #6b7280);
    font-size: 13px;
    background: var(--ip-surface, #fff);
    pointer-events: none;
    opacity: 1;
    transition: opacity .25s ease;
}
.ip-tile-modal-loader.is-loaded { opacity: 0; }
.ip-tile-modal-loader::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-right: 8px;
    animation: ipTileModalSpin .8s linear infinite;
}
@keyframes ipTileModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ipTileModalZoomIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ipTileModalSpin {
    to { transform: rotate(360deg); }
}
/* Mobile: full-screen (no 80% cramping) */
@media (max-width: 767px) {
    .ip-tile-modal-card {
        width: 100vw;
        height: 100vh;
        max-width: none;
        border-radius: 0;
    }
    .ip-tile-modal-sub { display: none; }
}
/* When a tile modal is open, lock body scroll */
body.ip-tile-modal-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   chrome=modal mode — suppresses platform-header + nav tabs when a
   page is loaded inside the tile modal iframe. Body class added by
   platform-header.php / page-feed.php when ?chrome=modal is set.
   ═══════════════════════════════════════════════════════════════════ */
/* alpha10.3 — DON'T hide .ip-header: the template nests .ip-main-card
   (which carries the entire page content) INSIDE .ip-header, so hiding
   the header collapses every descendant to 0×0. Hide only the chrome
   children: the brand/case-picker row (.ip-header-inner) and the tabs
   nav. Reset .ip-header's margin-bottom to reclaim 24px of vertical. */
body.ip-chrome-modal .ip-header-inner,
body.ip-chrome-modal .ip-tabs-bar,
body.ip-chrome-modal .ip-feed-page-head,
body.ip-chrome-modal .ip-home-topbar,
body.ip-chrome-modal .ip-home-alpha-banner {
    display: none !important;
}
body.ip-chrome-modal .ip-header { margin-bottom: 0 !important; }
body.ip-chrome-modal .ip-wrap,
body.ip-chrome-modal .ip-main-card,
body.ip-chrome-modal .ip-tab-body,
body.ip-chrome-modal .ip-home-wrap,
body.ip-chrome-modal .ip-feed-page {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
body.ip-chrome-modal .ip-tab-body {
    padding: 16px !important;
}
body.ip-chrome-modal { background: var(--ip-bg, #f3f4f6); }

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha10 — Modal-mode variants of tile-loaded pages

   In chrome=modal mode, some surfaces want a different layout than
   their full-page counterpart. The modal is task-focused; the page
   is discovery-focused. Rules below only apply inside the iframe.
   ═══════════════════════════════════════════════════════════════════ */

/* Investigator in modal: fill the iframe, don't use the 680px desktop
   height (which clipped the input bar + quick actions off-screen inside
   the shorter modal viewport). Sidebar collapses behind a floating
   "Threads" button and slides in as an overlay when tapped. Full-page
   mode is unchanged.
   alpha10.2 — use viewport units instead of % chain; the height:100%
   chain broke at .ip-wrap / .ip-main-card (which don't have heights in
   modal mode) so .ip-investigator was computing to auto and collapsing
   to near-zero. 100vh bypasses the chain. The 32px deduction matches
   .ip-tab-body { padding: 16px } top+bottom. */
body.ip-chrome-modal .ip-investigator {
    position: relative; /* anchor for absolute-positioned sidebar */
    height: calc(100vh - 32px);
    min-height: 360px;
    border-radius: 0;
    border: 0;
}
body.ip-chrome-modal .ip-investigator .ip-sidebar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: 5;
    width: 320px;
    min-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.15);
}
body.ip-chrome-modal .ip-investigator .ip-sidebar.ip-sidebar-open {
    transform: translateX(0);
}
/* Leave room on the right of the Threads button so chat doesn't start
   directly under it — only visual padding on the messages area. */
body.ip-chrome-modal .ip-messages { padding-top: 48px; }
/* Threads reveal button — rendered by page-investigator.php only in
   modal mode. Floats over the chat area; clicking calls ipToggleSidebar. */
.ip-modal-threads-toggle { display: none; }
body.ip-chrome-modal .ip-modal-threads-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    padding: 6px 12px;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
body.ip-chrome-modal .ip-modal-threads-toggle:hover {
    background: var(--ip-surface-sunken, #f3f4f6);
}

/* Board fullscreen — works in both modal and page mode. The button lives
   in the toolbar (page-board.php). When fullscreen, the canvas goes
   edge-to-edge and the sidebar collapses out of the way. */
.ip-board-canvas-wrap:fullscreen,
.ip-board-canvas-wrap:-webkit-full-screen {
    background: var(--ip-bg, #f3f4f6);
    padding: 0;
}
.ip-board-canvas-wrap:fullscreen #ip-board-stage,
.ip-board-canvas-wrap:-webkit-full-screen #ip-board-stage {
    width: 100vw !important;
    height: 100vh !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v2.8 alpha8 — Tier + usage status chip in home topbar
   ═══════════════════════════════════════════════════════════════════ */
.ip-home-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--ip-surface-alt, #f3f4f6);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ip-text, #111827);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ip-home-status-chip:hover {
    background: var(--ip-surface-hover, #e5e7eb);
    border-color: var(--ip-primary, #6366f1);
}
.ip-home-status-chip-tier {
    font-weight: 600;
    color: var(--ip-primary, #6366f1);
    text-transform: capitalize;
}
.ip-home-status-chip-sep {
    color: var(--ip-text-muted, #9ca3af);
}
.ip-home-status-chip-usage {
    color: var(--ip-text-muted, #6b7280);
}

/* ═══════════════════════════════════════════════════════════
   v2.8 alpha12 — Board "thinking surface" tabs
   Graph / Timeline / Scratchpad all live on the Board page now.
   ═══════════════════════════════════════════════════════════ */
.ip-board-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface, #fff);
    flex-wrap: wrap;
}
.ip-board-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text-muted, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.ip-board-tab:hover {
    color: var(--ip-text, #111827);
}
.ip-board-tab-active {
    color: var(--ip-primary, #6366f1);
    border-bottom-color: var(--ip-primary, #6366f1);
}
.ip-board-tab-spacer { flex: 1 1 auto; }
.ip-board-tab-hint {
    font-size: 12px;
    color: var(--ip-text-muted, #9ca3af);
    font-style: italic;
    padding-right: 4px;
}
.ip-board-pane {
    display: none;
}
.ip-board-pane-active {
    display: block;
}
/* Scratchpad pane expands to fill modal height so the editor can grow */
#ip-board-pane-scratchpad.ip-board-pane-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
/* Give the board content area a flex column so the active pane can stretch */
#ip-board-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
/* Timeline pane inside Board */
.ip-board-tl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    gap: 12px;
    flex-wrap: wrap;
}
#ip-board-pane-timeline .ip-timeline-add-form {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface-sunken, #f9fafb);
}
#ip-board-pane-timeline .ip-timeline-wrap {
    padding: 20px;
}
/* Scratchpad pane — alpha12.1 rich-text editor */
/* Handwritten-feel font loaded via @import at top of file if present,
   otherwise fall back to system cursive families. */
.ip-scratchpad-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface-sunken, #f9fafb);
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.ip-scratchpad-tool {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ip-text, #374151);
    cursor: pointer;
    min-width: 30px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ip-scratchpad-tool:hover {
    background: var(--ip-surface, #fff);
    border-color: var(--ip-border, #e5e7eb);
}
.ip-scratchpad-tool:active,
.ip-scratchpad-tool.is-active {
    background: var(--ip-primary-light, #eef2ff);
    border-color: var(--ip-primary, #6366f1);
    color: var(--ip-primary, #6366f1);
}
.ip-scratchpad-tool strong,
.ip-scratchpad-tool em { font-style: inherit; font-weight: inherit; pointer-events: none; }
.ip-scratchpad-tool strong { font-weight: 700; }
.ip-scratchpad-tool em { font-style: italic; }
.ip-scratchpad-tool-sep {
    width: 1px;
    height: 18px;
    background: var(--ip-border, #e5e7eb);
    margin: 0 4px;
    display: inline-block;
}
.ip-scratchpad-tool-spacer { flex: 1 1 auto; }
.ip-scratchpad-status {
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
    padding: 0 6px;
}
/* Contenteditable editor — fills remaining height */
.ip-scratchpad-editor {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 420px;
    padding: 22px 26px;
    border: 0;
    outline: 0;
    font-family: "Caveat", "Patrick Hand", "Kalam", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
    font-size: 24px;
    line-height: 1.55;
    color: var(--ip-text, #111827);
    background: var(--ip-surface, #fff);
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    /* alpha23.1 — multi-column flow so the handwriting font fills wide
       screens instead of leaving the right side blank. column-width is
       a TARGET — the browser uses as many columns as fit, capped at
       column-count. Falls back to single-column on narrow viewports
       automatically (no media query needed). */
    column-width: 480px;
    column-count: 3;
    column-gap: 36px;
    column-rule: 1px dashed rgba(99, 102, 241, 0.18);
}
.ip-scratchpad-editor:focus {
    background: var(--ip-surface, #fff);
    outline: 0;
}
/* In chrome=modal (tile iframe), stretch the board to fill the iframe so
   the scratchpad editor can consume all remaining vertical space. */
body.ip-chrome-modal #ip-board-content {
    height: calc(100vh - 32px);
    min-height: 360px;
}
body.ip-chrome-modal #ip-board-pane-scratchpad.ip-board-pane-active {
    min-height: 0;
}
/* Full-page (non-modal) — give the board a reasonable tall editor */
body:not(.ip-chrome-modal) .ip-scratchpad-editor {
    min-height: 60vh;
}
/* Placeholder via data-attribute when empty */
.ip-scratchpad-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ip-text-muted, #9ca3af);
    font-style: italic;
    pointer-events: none;
}
.ip-scratchpad-editor p { margin: 0 0 0.5em; }
.ip-scratchpad-editor ul,
.ip-scratchpad-editor ol { margin: 0.3em 0 0.5em; padding-left: 1.6em; }
.ip-scratchpad-editor li { margin: 0.1em 0; }
.ip-scratchpad-editor strong { font-weight: 700; }
.ip-scratchpad-editor em { font-style: italic; }
.ip-scratchpad-editor u { text-decoration: underline; }
/* Legacy textarea selector kept for compatibility */
.ip-scratchpad-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 420px;
    padding: 20px 22px;
    border: 0;
    outline: 0;
    font-family: "Caveat", "Patrick Hand", cursive;
    font-size: 22px;
    line-height: 1.55;
    color: var(--ip-text, #111827);
    background: var(--ip-surface, #fff);
    resize: vertical;
}

/* ═══════════════════════════════════════════════════════════
   v2.8 alpha13 — STORY page (user-voice draft narrative)
   Rich-text editor + title + publish flow. Reads like a draft
   manuscript, not a form. Stretches to fill modal height.
   ═══════════════════════════════════════════════════════════ */
.ip-story-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--ip-surface, #fff);
    border-radius: var(--ip-radius, 16px);
    overflow: hidden;
    box-shadow: var(--ip-shadow-sm);
}
body.ip-chrome-modal .ip-story-wrap {
    height: calc(100vh - 32px);
    min-height: 360px;
    border-radius: 0;
    box-shadow: none;
}
/* alpha13.2 — header hardened. No sticky (the flex column + overflow:hidden
   ancestor was collapsing it). Explicit !important so the .ip-wrap reset
   and any ancestor styles can't strip it. High min-height so empty children
   still show the bar. */
.ip-wrap .ip-story-header,
.ip-story-wrap > .ip-story-header {
    display: flex !important;
    align-items: flex-end !important;
    gap: 16px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--ip-border, #e5e7eb) !important;
    background: var(--ip-surface, #fff) !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.ip-wrap .ip-story-header-left  {
    flex: 1 1 360px !important;
    min-width: 260px !important;
    display: block !important;
}
.ip-wrap .ip-story-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
}
/* Standalone Publish button — does NOT rely on .ip-btn classes (which the
   chrome=modal iframe strips via .ip-wrap reset in some cases). Loud, obvious. */
.ip-wrap #ip-story-publish-btn.ip-story-publish-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--ip-primary, #6366f1) !important;
    background: var(--ip-primary, #6366f1) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    transition: background 120ms ease, transform 80ms ease !important;
}
.ip-wrap #ip-story-publish-btn.ip-story-publish-btn:hover {
    background: #4f46e5 !important;
}
.ip-wrap #ip-story-publish-btn.ip-story-publish-btn:active {
    transform: translateY(1px) !important;
}
.ip-wrap #ip-story-publish-btn.ip-story-publish-btn.is-unpublish {
    background: #fff !important;
    color: var(--ip-primary, #6366f1) !important;
}
.ip-story-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ip-text-muted, #6b7280);
    text-transform: uppercase;
    margin: 0 0 6px;
}
.ip-story-label-hint {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ip-text-muted, #9ca3af);
    font-style: italic;
}
/* Title input — explicit block + bottom border so users can SEE it's a field.
   alpha13.2: !important throughout because .ip-wrap{all:initial} + .ip-wrap *
   reset were winning over our rules on <input>s inside the chrome=modal iframe. */
.ip-wrap input.ip-story-title-input,
#ip-story-title.ip-story-title-input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 2px dashed var(--ip-border, #d1d5db) !important;
    outline: 0 !important;
    background: #fff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--ip-text, #111827) !important;
    padding: 10px 4px !important;
    min-height: 52px !important;
    font-family: "Lora", "Merriweather", Georgia, "Times New Roman", serif !important;
    transition: border-color 120ms ease, background 120ms ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.ip-story-title-input:hover {
    border-bottom-color: var(--ip-primary-light, #c7d2fe);
    background: var(--ip-surface-sunken, #fafafa);
}
.ip-story-title-input:focus {
    border-bottom-color: var(--ip-primary, #6366f1);
    border-bottom-style: solid;
    background: var(--ip-surface, #fff);
}
.ip-story-title-input::placeholder {
    color: var(--ip-text-muted, #9ca3af);
    font-weight: 600;
    font-style: italic;
}
/* alpha13.3 — "Ask SOL:" grouped size selector (Summary / Short / Detailed).
   A pill-shaped button bank: prefix label + three size buttons that share a
   rounded border. Each is independently clickable; the whole group reads as
   "Ask SOL: Summary | Short | Detailed". */
.ip-wrap .ip-story-sol-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid var(--ip-primary, #6366f1) !important;
    background: var(--ip-primary-light, #eef2ff) !important;
    border-radius: 999px !important;
    padding: 2px 2px 2px 10px !important;
    color: var(--ip-primary, #6366f1) !important;
    white-space: nowrap !important;
}
.ip-wrap .ip-story-sol-prefix {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--ip-primary, #6366f1) !important;
    padding-right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
/* Individual size buttons. Hardened with !important for the same
   .ip-wrap{all:initial} reason as the rest of the header. */
.ip-wrap .ip-story-sol-btn,
.ip-story-sol-group .ip-story-sol-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ip-primary, #6366f1) !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 120ms ease, color 120ms ease !important;
    white-space: nowrap !important;
}
.ip-wrap .ip-story-sol-btn:hover {
    background: var(--ip-primary, #6366f1) !important;
    color: #fff !important;
}
.ip-wrap .ip-story-sol-btn[disabled] {
    opacity: 0.9 !important;
    cursor: wait !important;
    background: var(--ip-primary, #6366f1) !important;
    color: #fff !important;
}
/* alpha13.3 — Text-to-speech button */
.ip-wrap .ip-story-tts-btn,
#ip-story-tts-btn.ip-story-tts-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid var(--ip-border, #e5e7eb) !important;
    background: #fff !important;
    color: var(--ip-text, #374151) !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
    white-space: nowrap !important;
}
.ip-wrap .ip-story-tts-btn:hover {
    border-color: var(--ip-primary, #6366f1) !important;
    color: var(--ip-primary, #6366f1) !important;
}
.ip-wrap .ip-story-tts-btn.is-active {
    background: var(--ip-primary, #6366f1) !important;
    border-color: var(--ip-primary, #6366f1) !important;
    color: #fff !important;
}
.ip-story-sol-btn:hover {
    background: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-story-sol-btn[disabled] {
    opacity: 0.75;
    cursor: wait;
    background: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-story-sol-spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ip-story-sol-spin 700ms linear infinite;
}
@keyframes ip-story-sol-spin {
    to { transform: rotate(360deg); }
}
/* (Publish button styling moved up next to .ip-story-publish-btn — the HTML
   no longer uses .ip-btn-primary so styling hangs off the dedicated class.) */
.ip-wrap .ip-story-status-pill,
#ip-story-status-pill.ip-story-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--ip-surface-sunken, #f3f4f6) !important;
    color: var(--ip-text-secondary, #475569) !important;
    border: 1px solid var(--ip-border, #e5e7eb) !important;
    white-space: nowrap !important;
}
.ip-wrap .ip-story-status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--ip-text-muted, #9ca3af) !important;
    display: inline-block !important;
}
.ip-story-status-published {
    background: var(--ip-success-light, #f0fdf4);
    color: #166534;
    border-color: rgba(34, 197, 94, 0.35);
}
.ip-story-status-published .ip-story-status-dot {
    background: var(--ip-success, #22c55e);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.ip-story-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface-sunken, #f9fafb);
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.ip-story-tool {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ip-text, #374151);
    cursor: pointer;
    min-width: 30px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ip-story-tool:hover {
    background: var(--ip-surface, #fff);
    border-color: var(--ip-border, #e5e7eb);
}
.ip-story-tool:active {
    background: var(--ip-primary-light, #eef2ff);
    border-color: var(--ip-primary, #6366f1);
    color: var(--ip-primary, #6366f1);
}
.ip-story-tool-sep {
    width: 1px;
    height: 18px;
    background: var(--ip-border, #e5e7eb);
    margin: 0 4px;
    display: inline-block;
}
.ip-story-tool-spacer { flex: 1 1 auto; }
.ip-story-status {
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
    padding: 0 6px;
}
/* ─── alpha18: Three-tab story architecture ─────────────────────────────
   Summary | Short | Detailed. Each tab is an independent draft of the same
   case story at a different size. The Summary tab becomes the trailer hook
   that powers the home plate + dashboard cards; the other two are long-form
   drafts. One tab is visible at a time (via `.is-active` / `hidden` attr).

   Replaces the alpha14–alpha17.6 collapsible-hook strip (`.ip-story-hook*`),
   which is gone. History-dropdown styling was generalized from
   `.ip-story-hook-history-*` into `.ip-story-history-*` so all three tabs
   share one menu style.
──────────────────────────────────────────────────────────────────────── */

/* --- Tab strip ------------------------------------------------------- */
.ip-story-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 clamp(12px, 4vw, 36px);
    margin: 4px 0 0;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface, #fff);
    flex: 0 0 auto;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ip-story-tab {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 9px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* overlap the strip's border so active tab "connects" */
    color: var(--ip-text-muted, #6b7280);
    font: 600 13px/1.2 inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ip-story-tab:hover {
    color: var(--ip-text, #1f2937);
    background: rgba(99,102,241,0.04);
}
.ip-story-tab:focus-visible {
    outline: 2px solid var(--ip-primary, #6366f1);
    outline-offset: -3px;
    border-radius: 4px;
}
.ip-story-tab.is-active {
    color: var(--ip-primary, #4f46e5);
    border-bottom-color: var(--ip-primary, #6366f1);
    background: linear-gradient(180deg, rgba(99,102,241,0.05), transparent);
}
.ip-story-tab.is-busy { cursor: wait; opacity: 0.75; }
.ip-story-tab-label {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
}
.ip-story-tab-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ip-story-tab-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Empty — grey ring. Shown when the tab has no draft yet. */
.ip-story-tab-dot-empty {
    background: transparent;
    border: 1.5px dashed var(--ip-border, #cbd5e1);
}
/* SOL — violet pill. Last write was from the companion. */
.ip-story-tab-dot-sol {
    padding: 1px 6px;
    min-width: 0;
    height: auto;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
/* YOU — warm amber pill. User has hand-edited this tab. */
.ip-story-tab-dot-you {
    padding: 1px 6px;
    min-width: 0;
    height: auto;
    color: #1f2937;
    background: #fde68a;
}
/* NEW — pulsing gradient. Just drafted — shown for ~6s. */
.ip-story-tab-dot-fresh {
    padding: 1px 6px;
    min-width: 0;
    height: auto;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #10b981);
    animation: ip-tab-fresh-pulse 1.4s ease-in-out infinite;
}
@keyframes ip-tab-fresh-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(0.94); }
}
.ip-story-tabs-spacer { flex: 1 1 auto; }
.ip-story-tabs-status {
    align-self: center;
    padding: 0 10px;
    font-size: 12px;
    font-style: italic;
    color: var(--ip-text-muted, #6b7280);
    font-family: "Inter", system-ui, sans-serif;
}

/* --- Tab panes ------------------------------------------------------- */
.ip-story-panes {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ip-story-pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ip-story-pane[hidden] { display: none !important; }
.ip-story-pane-tagline {
    padding: 10px clamp(20px, 6vw, 48px) 4px;
    font-size: 12px;
    font-style: italic;
    color: var(--ip-text-muted, #6b7280);
    font-family: "Inter", system-ui, sans-serif;
    flex: 0 0 auto;
}

/* --- Minimal toolbar (Summary tab only) ----------------------------- */
.ip-story-toolbar-minimal .ip-story-toolbar-hint {
    margin-left: auto;
    padding-right: 4px;
    font-size: 11px;
    font-style: italic;
    color: var(--ip-text-muted, #9ca3af);
    font-family: "Inter", system-ui, sans-serif;
}

/* --- Prose editor override (Summary tab body) ----------------------- */
/* The Summary is a trailer hook — prose only. Tighter layout, no h2/h3
   styling needed (the server strips them anyway). */
.ip-story-editor-prose {
    min-height: 260px;
    font-size: 17px;
    line-height: 1.65;
    padding: 22px clamp(22px, 7vw, 56px);
}
.ip-story-editor-prose h2,
.ip-story-editor-prose h3 {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 0.6em;
    line-height: inherit;
}

/* --- Per-pane footer (save status + wordcount + history + draft) ---- */
.ip-story-pane-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px clamp(16px, 5vw, 40px);
    border-top: 1px dashed var(--ip-border-light, #e5e7eb);
    background: var(--ip-surface-sunken, #f9fafb);
    flex-wrap: wrap;
    font-family: "Inter", system-ui, sans-serif;
}
.ip-story-pane-foot-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
}
.ip-story-pane-foot-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ip-story-pane-savestatus em { font-style: italic; }
.ip-story-pane-wordcount {
    color: var(--ip-text-muted, #9ca3af);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ip-story-pane-when {
    color: var(--ip-text-muted, #9ca3af);
    font-style: italic;
}

/* --- Draft buttons (per-tab + "Draft all three") -------------------- */
.ip-story-draft-btn,
.ip-story-draft-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(79,70,229,0.25);
    transition: transform 0.1s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.ip-story-draft-btn:hover,
.ip-story-draft-all-btn:hover {
    box-shadow: 0 3px 8px rgba(79,70,229,0.3);
    transform: translateY(-1px);
}
.ip-story-draft-btn:active,
.ip-story-draft-all-btn:active { transform: translateY(0); }
.ip-story-draft-btn:disabled,
.ip-story-draft-all-btn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
    box-shadow: none;
}
.ip-story-draft-all-btn {
    padding: 7px 16px;
    font-size: 13px;
}
.ip-story-draft-spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    animation: ip-story-draft-spin 0.75s linear infinite;
}
@keyframes ip-story-draft-spin {
    to { transform: rotate(360deg); }
}

/* --- History dropdown (shared by all three tabs) -------------------- */
.ip-story-history-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ip-story-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    color: var(--ip-text, #334155);
    border: 1px solid rgba(148,163,184,0.4);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ip-story-history-btn:hover {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.45);
    color: var(--ip-primary, #6366f1);
}
.ip-story-history-btn[disabled],
.ip-story-history-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ip-story-history-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.ip-story-history-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px); /* open UPWARD from the footer */
    z-index: 50;
    width: min(360px, 90vw);
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(148,163,184,0.35);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15,23,42,0.14), 0 4px 10px rgba(15,23,42,0.08);
    padding: 8px;
    display: none;
}
.ip-story-history-menu.is-open { display: block; }
.ip-story-history-head {
    padding: 8px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
    border-bottom: 1px solid rgba(148,163,184,0.18);
    margin-bottom: 6px;
}
.ip-story-history-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
    font-family: inherit;
}
.ip-story-history-item + .ip-story-history-item { margin-top: 2px; }
.ip-story-history-item:hover {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.2);
}
.ip-story-history-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.ip-story-history-author {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}
.ip-story-history-author.is-sol {
    background: rgba(99,102,241,0.12);
    color: #4f46e5;
}
.ip-story-history-author.is-user {
    background: rgba(245,158,11,0.14);
    color: #b45309;
}
.ip-story-history-when {
    font-size: 11px;
    color: var(--ip-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ip-story-history-item-body {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ip-text, #475569);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-story-history-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
}

.ip-story-editor {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 420px;
    padding: 28px clamp(24px, 8vw, 60px);
    border: 0;
    outline: 0;
    font-family: "Lora", "Merriweather", Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ip-text, #1f2937);
    background: var(--ip-surface, #fff);
    overflow-y: auto;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}
.ip-story-editor:focus { outline: 0; }
.ip-story-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ip-text-muted, #9ca3af);
    font-style: italic;
    pointer-events: none;
    white-space: pre-wrap;
}
.ip-story-editor p  { margin: 0 0 1em; }
.ip-story-editor h2 { font-size: 1.5em; font-weight: 700; margin: 1.2em 0 0.4em; line-height: 1.25; }
.ip-story-editor h3 { font-size: 1.2em; font-weight: 700; margin: 1em 0 0.3em; line-height: 1.3; }
.ip-story-editor ul,
.ip-story-editor ol { margin: 0.4em 0 1em; padding-left: 1.6em; }
.ip-story-editor li { margin: 0.2em 0; }
.ip-story-editor blockquote {
    margin: 1em 0;
    padding: 0.2em 1em;
    border-left: 3px solid var(--ip-primary, #6366f1);
    color: var(--ip-text-secondary, #475569);
    font-style: italic;
}
.ip-story-editor strong { font-weight: 700; }
.ip-story-editor em     { font-style: italic; }
.ip-story-foot {
    flex: 0 0 auto;
    padding: 10px 20px 14px;
    border-top: 1px solid var(--ip-border-light, #f1f5f9);
    background: var(--ip-surface, #fff);
}
.ip-story-foot-hint {
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
    line-height: 1.5;
    max-width: 820px;
    margin: 0 auto;
}
/* STORY home tile preview (alpha13) */
.ip-home-story-title {
    font-family: "Lora", "Merriweather", Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ip-text, #111827);
    padding: 10px 14px 4px;
    line-height: 1.25;
}
.ip-home-story-title-empty {
    color: var(--ip-text-muted, #9ca3af);
    font-style: italic;
    font-weight: 500;
}
.ip-home-story-preview {
    padding: 4px 14px 0;
    font-family: "Lora", "Merriweather", Georgia, serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ip-text-secondary, #374151);
    white-space: pre-wrap;
    overflow: hidden;
    max-height: 170px;
    position: relative;
}
.ip-home-story-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--ip-surface, #fff));
    pointer-events: none;
}
.ip-home-story-meta {
    font-size: 11px;
    color: var(--ip-text-muted, #9ca3af);
    padding: 6px 14px 10px;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ip-home-story-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
    font-style: normal;
    background: var(--ip-surface-sunken, #f3f4f6);
    color: var(--ip-text-secondary, #475569);
    font-size: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ip-home-story-meta-pill.is-published {
    background: var(--ip-success-light, #f0fdf4);
    color: #166534;
}

/* SCRATCHPAD home tile — alpha12 text preview (alpha12.1: handwritten) */
.ip-home-scratchpad-preview {
    padding: 12px 14px;
    font-size: 20px;
    line-height: 1.4;
    color: var(--ip-text, #374151);
    white-space: pre-wrap;
    overflow: hidden;
    max-height: 210px;
    position: relative;
    font-family: "Caveat", "Patrick Hand", "Kalam", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
}
.ip-home-scratchpad-preview-empty {
    color: var(--ip-text-muted, #6b7280);
    font-style: italic;
    /* Keep the empty-state copy in the regular UI font so it reads as
       instruction, not handwriting. */
    font-family: var(--ip-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 13px;
    line-height: 1.5;
}
.ip-home-scratchpad-meta {
    font-size: 11px;
    color: var(--ip-text-muted, #9ca3af);
    padding: 0 14px 10px;
    font-style: italic;
}
.ip-home-scratchpad-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--ip-surface, #fff));
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   alpha19 — DESIGN SYSTEM v1
   ════════════════════════════════════════════════════════════════════════
   Generic, page-agnostic UI primitives extracted from the alpha18 Story
   page. Every page added in Phase B onward (Board/Timeline finish, tile
   polish, public catalog, admin suite) builds from these so the look-and-
   feel stays unified.

   Namespace map:
     .ip-card / .ip-card-head / .ip-card-foot     — panel container
     .ip-page-header                               — title + actions strip
     .ip-status-pill                               — Draft/Published/etc
     .ip-author-badge                              — YOU / SOL / NEW
     .ip-pane-tabs / .ip-pane-tab / .ip-pane-...   — internal tab strip
     .ip-pane-section / .ip-pane-foot              — body + footer of a tab
     .ip-history-* (already generic from alpha18)  — version dropdown
     .ip-draft-* (already generic from alpha18)    — "Draft with SOL" button

   The Story page keeps its `.ip-story-*` classes for now (zero-risk
   alpha19); subsequent alphas use the generic names directly. A later
   refactor pass will collapse the Story-specific selectors into these.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Card container ─────────────────────────────────────────────────── */
.ip-card {
    display: flex;
    flex-direction: column;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    overflow: hidden;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ip-card.is-elevated {
    box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
}
.ip-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px clamp(14px, 4vw, 24px);
    border-bottom: 1px solid var(--ip-border-light, #f1f5f9);
    background: var(--ip-surface, #fff);
    flex-wrap: wrap;
}
.ip-card-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.ip-card-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ip-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ip-text, #1f2937);
    line-height: 1.3;
}
.ip-card-sub {
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
    font-style: italic;
}
.ip-card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ip-card-foot {
    flex: 0 0 auto;
    padding: 10px clamp(14px, 4vw, 24px);
    border-top: 1px solid var(--ip-border-light, #f1f5f9);
    background: var(--ip-surface-sunken, #f9fafb);
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
}

/* ── Page-level header (title input + actions row) ────────────────── */
/* Same pattern as the Story page header. Use on Board/Timeline/Casefile/
   etc. when the page is "edit one thing" with autosave. */
.ip-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(16px, 5vw, 40px);
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface, #fff);
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.ip-page-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 320px;
    min-width: 0;
}
.ip-page-header-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.ip-page-title-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #6b7280);
}
.ip-page-title-label-hint {
    margin-left: 6px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-style: italic;
    color: var(--ip-text-muted, #9ca3af);
}
/* alpha20 — static (non-editable) title variant for surfaces where the
   page title isn't user-editable (e.g. the Board page, which inherits
   the case name). Mirrors .ip-page-title-input typography. */
.ip-page-title-static {
    font-family: "Lora", "Merriweather", Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ip-text, #111827);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ip-page-title-input {
    font-family: "Lora", "Merriweather", Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ip-text, #111827);
    background: transparent;
    border: 0;
    border-bottom: 1px dashed transparent;
    padding: 2px 0;
    outline: 0;
    transition: border-color 120ms ease;
    width: 100%;
}
.ip-page-title-input:hover  { border-bottom-color: var(--ip-border, #cbd5e1); }
.ip-page-title-input:focus  { border-bottom-color: var(--ip-primary, #6366f1); }
.ip-page-title-input::placeholder { color: var(--ip-text-muted, #9ca3af); font-style: italic; font-weight: 500; }

/* ── Status pill (Draft / Published / Archived / In Review) ───────── */
.ip-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    font-family: "Inter", system-ui, sans-serif;
    border: 1px solid transparent;
}
.ip-status-pill-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.ip-status-pill.is-draft {
    background: rgba(245,158,11,0.12);
    color: #b45309;
    border-color: rgba(245,158,11,0.28);
}
.ip-status-pill.is-published {
    background: rgba(34,197,94,0.12);
    color: #166534;
    border-color: rgba(34,197,94,0.28);
}
.ip-status-pill.is-archived {
    background: rgba(148,163,184,0.16);
    color: #475569;
    border-color: rgba(148,163,184,0.32);
}
.ip-status-pill.is-review {
    background: rgba(99,102,241,0.12);
    color: #4f46e5;
    border-color: rgba(99,102,241,0.28);
}
.ip-status-pill.is-shared {
    background: rgba(14,165,233,0.12);
    color: #0369a1;
    border-color: rgba(14,165,233,0.28);
}

/* ── Author badge (YOU / SOL / NEW) ────────────────────────────────── */
/* Standalone version of the alpha18 tab-dot pills, usable anywhere we
   need to show "who wrote this": history items, comments, version chips,
   asset cards. */
.ip-author-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
    font-family: "Inter", system-ui, sans-serif;
}
.ip-author-badge.is-sol {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.ip-author-badge.is-you {
    color: #1f2937;
    background: #fde68a;
}
.ip-author-badge.is-new {
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #10b981);
    animation: ip-author-badge-pulse 1.4s ease-in-out infinite;
}
.ip-author-badge.is-system {
    color: #475569;
    background: rgba(148,163,184,0.18);
}
@keyframes ip-author-badge-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(0.94); }
}

/* ── Pane tabs (internal-card tab strip) ──────────────────────────── */
/* Distinct from the legacy .ip-tabs-bar / .ip-tab top-of-page nav.
   This one lives INSIDE a card and switches between sub-views of the
   same surface (e.g. Board | Timeline | Map inside Scratchpad). */
.ip-pane-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 clamp(12px, 4vw, 36px);
    margin: 0;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface, #fff);
    flex: 0 0 auto;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ip-pane-tab {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 9px;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--ip-text-muted, #6b7280);
    font: 600 13px/1.2 inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ip-pane-tab:hover {
    color: var(--ip-text, #1f2937);
    background: rgba(99,102,241,0.04);
}
.ip-pane-tab:focus-visible {
    outline: 2px solid var(--ip-primary, #6366f1);
    outline-offset: -3px;
    border-radius: 4px;
}
.ip-pane-tab.is-active {
    color: var(--ip-primary, #4f46e5);
    border-bottom-color: var(--ip-primary, #6366f1);
    background: linear-gradient(180deg, rgba(99,102,241,0.05), transparent);
}
.ip-pane-tab.is-busy { cursor: wait; opacity: 0.75; }
.ip-pane-tab-label {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
}
.ip-pane-tab-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ip-pane-tabs-spacer { flex: 1 1 auto; }
.ip-pane-tabs-status {
    align-self: center;
    padding: 0 10px;
    font-size: 12px;
    font-style: italic;
    color: var(--ip-text-muted, #6b7280);
}

/* ── Pane sections (the content revealed by a tab) ─────────────────── */
.ip-pane-sections {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ip-pane-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ip-pane-section[hidden] { display: none !important; }
.ip-pane-tagline {
    padding: 10px clamp(20px, 6vw, 48px) 4px;
    font-size: 12px;
    font-style: italic;
    color: var(--ip-text-muted, #6b7280);
    flex: 0 0 auto;
}

/* ── Pane footer (autosave status + actions) ───────────────────────── */
.ip-pane-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px clamp(16px, 5vw, 40px);
    border-top: 1px dashed var(--ip-border-light, #e5e7eb);
    background: var(--ip-surface-sunken, #f9fafb);
    flex-wrap: wrap;
    font-family: "Inter", system-ui, sans-serif;
}
.ip-pane-foot-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--ip-text-muted, #6b7280);
}
.ip-pane-foot-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ip-pane-savestatus em { font-style: italic; }
.ip-pane-savestatus .is-error { color: var(--ip-error, #b91c1c); }
.ip-pane-wordcount {
    color: var(--ip-text-muted, #9ca3af);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ip-pane-when {
    color: var(--ip-text-muted, #9ca3af);
    font-style: italic;
}

/* ── Generic Draft button + spinner (copy of .ip-story-draft-*) ────── */
/* Same gradient pill as Story's drafting buttons; usable on any pane
   where SOL writes (Synopsis, Theory expansion, Evidence summary…). */
.ip-draft-btn,
.ip-draft-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(79,70,229,0.25);
    transition: transform 0.1s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.ip-draft-btn:hover,
.ip-draft-all-btn:hover {
    box-shadow: 0 3px 8px rgba(79,70,229,0.3);
    transform: translateY(-1px);
}
.ip-draft-btn:active,
.ip-draft-all-btn:active { transform: translateY(0); }
.ip-draft-btn:disabled,
.ip-draft-all-btn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
    box-shadow: none;
}
.ip-draft-all-btn { padding: 7px 16px; font-size: 13px; }
.ip-draft-btn-spin {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    animation: ip-draft-btn-spin 0.75s linear infinite;
}
@keyframes ip-draft-btn-spin { to { transform: rotate(360deg); } }

/* alpha20.1 — Undo / Redo button pair (Board page header). Reuses the
   .ip-history-btn pill look so the cluster reads as a single control row. */
.ip-undo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}
.ip-undo-btn,
.ip-redo-btn {
    padding: 5px 9px;
}
.ip-undo-btn[disabled],
.ip-redo-btn[disabled] {
    opacity: 0.35;
}

/* ── Generic History dropdown (copy of .ip-story-history-*) ────────── */
/* Open-upward menu; anchor on the right of its parent. Shared by Story,
   Synopsis, Theories — anywhere with a versioned text doc. */
.ip-history-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ip-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #fff;
    color: var(--ip-text, #334155);
    border: 1px solid rgba(148,163,184,0.4);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ip-history-btn:hover {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.45);
    color: var(--ip-primary, #6366f1);
}
.ip-history-btn[disabled],
.ip-history-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ip-history-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.ip-history-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 50;
    width: min(360px, 90vw);
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(148,163,184,0.35);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15,23,42,0.14), 0 4px 10px rgba(15,23,42,0.08);
    padding: 8px;
    display: none;
}
.ip-history-menu.is-open { display: block; }
.ip-history-menu.is-open-down {
    bottom: auto;
    top: calc(100% + 6px);
}
.ip-history-head {
    padding: 8px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
    border-bottom: 1px solid rgba(148,163,184,0.18);
    margin-bottom: 6px;
}
.ip-history-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
    font-family: inherit;
}
.ip-history-item + .ip-history-item { margin-top: 2px; }
.ip-history-item:hover {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.2);
}
.ip-history-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.ip-history-item-body {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ip-text, #475569);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-history-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
}

/* ── Tab dots (generic, used inside .ip-pane-tab-badges) ─────────── */
.ip-pane-tab-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ip-pane-tab-dot.is-empty {
    background: transparent;
    border: 1.5px dashed var(--ip-border, #cbd5e1);
}
.ip-pane-tab-dot.is-sol {
    padding: 1px 6px; min-width: 0; height: auto;
    color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.ip-pane-tab-dot.is-you {
    padding: 1px 6px; min-width: 0; height: auto;
    color: #1f2937; background: #fde68a;
}
.ip-pane-tab-dot.is-fresh {
    padding: 1px 6px; min-width: 0; height: auto;
    color: #fff; background: linear-gradient(135deg, #22c55e, #10b981);
    animation: ip-author-badge-pulse 1.4s ease-in-out infinite;
}

/* ── Toolbar (generic, alias of .ip-story-toolbar) ─────────────────── */
.ip-pane-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface-sunken, #f9fafb);
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.ip-pane-toolbar.is-minimal .ip-pane-toolbar-hint {
    margin-left: auto;
    padding-right: 4px;
    font-size: 11px;
    font-style: italic;
    color: var(--ip-text-muted, #9ca3af);
}
.ip-pane-tool {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ip-text, #374151);
    cursor: pointer;
    min-width: 30px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ip-pane-tool:hover {
    background: var(--ip-surface, #fff);
    border-color: var(--ip-border, #e5e7eb);
}
.ip-pane-tool:active {
    background: var(--ip-primary-light, #eef2ff);
    border-color: var(--ip-primary, #6366f1);
    color: var(--ip-primary, #6366f1);
}
.ip-pane-tool-sep {
    width: 1px;
    height: 18px;
    background: var(--ip-border, #e5e7eb);
    margin: 0 4px;
    display: inline-block;
}

/* ── Flash highlight (used after restore / save / refresh) ─────────── */
.ip-flash {
    animation: ip-flash 700ms ease-out;
}
@keyframes ip-flash {
    0%   { background-color: rgba(99,102,241,0.18); }
    100% { background-color: transparent; }
}

/* ── alpha22.1 — Editable SYNOPSIS tile (home grid, bottom middle) ──────
   Was a static <p> read-out; now a textarea + author badge + history
   dropdown, wired via ipDS.autosave + ipDS.historyMenu. The tile lives
   inside the .ip-home-tile asymmetric grid so we keep the chrome compact
   and inherit existing tile padding. */
.ip-home-tile-synopsis .ip-home-tile-head-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ip-home-tile-synopsis .ip-home-tile-head-right .ip-author-badge {
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1.2;
}
.ip-home-tile-synopsis .ip-home-tile-head-right .ip-history-btn {
    /* Compact variant for inside-tile chrome (default ip-history-btn is
       sized for page-headers). Keep the visual language identical to the
       Story / Board page-header History button, just smaller. */
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
    height: auto;
}
.ip-home-tile-synopsis .ip-home-synopsis-editor {
    width: 100%;
    min-height: 84px;
    padding: 8px 10px;
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 6px;
    background: var(--ip-surface, #fff);
    color: var(--ip-text, #0f172a);
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ip-home-tile-synopsis .ip-home-synopsis-editor:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.ip-home-tile-synopsis .ip-home-synopsis-foot {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ip-text-secondary, #64748b);
    min-height: 16px;
}
.ip-home-tile-synopsis .ip-pane-savestatus em {
    font-style: italic;
}
/* The history menu pops down from the tile head; let it float over the
   neighbouring tiles instead of getting clipped by the tile's own
   overflow. */
.ip-home-tile-synopsis .ip-history-wrap { position: relative; }
.ip-home-tile-synopsis .ip-history-menu {
    right: 0;
    left: auto;
    z-index: 50;
    min-width: 280px;
    max-width: 360px;
}

/* ── alpha23 — Public Story Reader (/case/{slug}) ──────────────────────
   Phase C public surface. Read-only view of a published instance's three
   story sizes (Summary / Short / Detailed) with the case identity plate
   above. Reuses the .ip-pane-tabs / .ip-pane-section primitives so the
   tab pattern matches the editor on page-story.php (consistency for users
   who go from editor → public preview).

   No editor chrome (no toolbars, no draft pills, no autosave). Designed
   to read like a longform article. Maxes at ~720px reading width. */
.ip-public-reader {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px 80px;
    color: var(--ip-text, #0f172a);
}
.ip-public-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
}
.ip-public-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ip-text, #0f172a);
    font-weight: 700;
    font-size: 15px;
}
.ip-public-brand:hover { color: var(--ip-primary, #6366f1); }
.ip-public-brand-icon { font-size: 18px; }
.ip-public-signin {
    text-decoration: none;
    color: var(--ip-primary, #6366f1);
    font-size: 13px;
    font-weight: 600;
}
.ip-public-signin:hover { text-decoration: underline; }

/* Hero plate ─────────────────────────────────────────────────────── */
.ip-public-plate { margin: 24px 0 28px; }
.ip-public-plate-hero {
    width: 100%;
    aspect-ratio: 16 / 7;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    background-color: #f1f5f9;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
.ip-public-plate-caption {
    position: absolute;
    left: 14px;
    bottom: 12px;
    background: rgba(15, 23, 42, .72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.ip-public-plate-meta {
    margin-bottom: 12px;
}
.ip-public-title {
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.ip-public-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
}
.ip-public-plate-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ip-public-plate-thumb {
    display: inline-block;
    width: 56px;
    height: 56px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    border: 2px solid var(--ip-border, #e5e7eb);
    cursor: default;
}

/* Tabs (reuses .ip-pane-tabs base from design system) ──────────────── */
.ip-public-tabs {
    margin-top: 24px;
    border-top: 1px solid var(--ip-border, #e5e7eb);
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    padding: 4px 0;
}
.ip-public-tabs .ip-pane-tab[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
.ip-public-tabs .ip-pane-tab-meta {
    margin-left: 6px;
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    font-weight: 500;
}

/* Body (longform) ─────────────────────────────────────────────────── */
.ip-public-sections { margin-top: 28px; }
.ip-public-section { display: none; }
.ip-public-section.is-active { display: block; }
.ip-public-body {
    max-width: 720px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.7;
    color: #1f2937;
}
.ip-public-body p { margin: 0 0 1.1em; }
.ip-public-body h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 1.6em 0 0.5em;
    font-weight: 700;
}
.ip-public-body h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 1.4em 0 0.4em;
    font-weight: 700;
}
.ip-public-body blockquote {
    border-left: 3px solid var(--ip-primary, #6366f1);
    padding: 4px 0 4px 18px;
    margin: 1.2em 0;
    color: #334155;
    font-style: italic;
}
.ip-public-body ul, .ip-public-body ol { margin: 0 0 1.1em 1.4em; padding: 0; }
.ip-public-body li { margin: 0.3em 0; }
.ip-public-body em { font-style: italic; }
.ip-public-body strong { font-weight: 700; }
.ip-public-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1.2em 0;
}
.ip-public-empty {
    max-width: 720px;
    margin: 40px auto;
    text-align: center;
    color: var(--ip-text-muted, #64748b);
}

.ip-public-foot {
    max-width: 720px;
    margin: 60px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--ip-border, #e5e7eb);
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
    text-align: center;
}
.ip-public-foot a { color: var(--ip-primary, #6366f1); text-decoration: none; }
.ip-public-foot a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .ip-public-reader { padding: 0 12px 60px; }
    .ip-public-plate-hero { aspect-ratio: 4 / 3; border-radius: 10px; }
    .ip-public-body { font-size: 16px; }
}

/* alpha23 — Public reader URL cluster on the Story page header.
   Sits next to the Publish button, only visible while published. */
.ip-story-public-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
}
.ip-story-public-link[hidden] { display: none; }
.ip-story-public-link-anchor {
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
    font-weight: 600;
}
.ip-story-public-link-anchor:hover { text-decoration: underline; }
.ip-story-public-link-copy {
    background: transparent;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
    line-height: 1;
    border-radius: 4px;
    transition: background 120ms ease;
}
.ip-story-public-link-copy:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--ip-primary, #6366f1);
}

/* ── alpha23.4 — Dashboard library redesign ─────────────────────────────
   Brings page-dashboard.php from alpha8-era inline styles up to the
   design-system vocabulary. Page header strip + filter/sort toolbar
   above the trailer-card grid; per-card publish-status pill and
   View public link. The trailer-card structure itself (alpha15) is
   unchanged — these styles just layer on top. */
.ip-dash-library .ip-page-header {
    margin-bottom: 12px;
}
.ip-dash-page-header .ip-page-title-static { color: var(--ip-text, #0f172a); }

/* Filter / sort toolbar — sits between page-header and the grid */
.ip-dash-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 0 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
}
.ip-dash-toolbar-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.ip-dash-toolbar-label {
    color: var(--ip-text-muted, #64748b);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}
.ip-dash-select {
    padding: 4px 26px 4px 10px;
    font-size: 12.5px;
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 6px;
    background: var(--ip-surface, #fff);
    color: var(--ip-text, #0f172a);
    appearance: auto;
    line-height: 1.3;
}
.ip-dash-select:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ip-dash-toolbar-spacer { flex: 1; }
.ip-dash-toolbar-result {
    color: var(--ip-text-muted, #64748b);
    font-size: 12px;
    font-style: italic;
}

/* Per-card publish-status pill in the TOP-LEFT of the hero
   (the alpha15 case.status chip stays in top-right). */
.ip-dash-card-pubpill {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    backdrop-filter: blur(6px);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.ip-dash-card-pubpill .ip-status-pill-dot {
    background: currentColor;
}
/* Tonal variants — match the design-system .ip-status-pill semantics. */
.ip-dash-card-pubpill.is-draft     { color: #fde68a; border-color: rgba(253, 230, 138, 0.3); }
.ip-dash-card-pubpill.is-published { color: #86efac; border-color: rgba(134, 239, 172, 0.3); }
.ip-dash-card-pubpill.is-shared    { color: #c7d2fe; border-color: rgba(199, 210, 254, 0.3); }

/* "View public ↗" anchor in the hookrow next to Open. */
.ip-dash-card-publink {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ip-primary, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.2;
    transition: background 120ms ease, border-color 120ms ease;
}
.ip-dash-card-publink:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.4);
    text-decoration: none;
}

/* The hero needs position:relative for the absolute-positioned pill. The
   alpha15 stylesheet already sets it but we re-assert here to be safe. */
.ip-dash-card-hero { position: relative; }

/* ── alpha24.0 — Admin chrome polish (Phase D kickoff) ─────────────────
   Phase D — admin suite. The existing platform-admin.php still ships
   its alpha8-era inline <style> block; alpha24.0 adds DESIGN-SYSTEM
   chrome on top via these selectors, scoped to .ip-admin-page so they
   never leak. JS-targeted classes (.ip-admin-nav-btn, .ip-panel,
   .ip-img-suggestion) are left intact — only the visuals change.
   alpha24.1 will migrate the rest of the inline block here. */

/* Top-level nav — design-system pane-tabs lookalike */
.ip-admin-page .ip-admin-nav-v2 {
    display: flex;
    gap: 2px;
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    width: 100%;
}
.ip-admin-page .ip-admin-nav-v2 .ip-admin-nav-btn {
    padding: 10px 18px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text-muted, #64748b);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
    margin-bottom: -1px;
}
.ip-admin-page .ip-admin-nav-v2 .ip-admin-nav-btn:hover {
    color: var(--ip-text, #0f172a);
}
.ip-admin-page .ip-admin-nav-v2 .ip-admin-nav-btn.active {
    color: var(--ip-primary, #6366f1);
    border-bottom-color: var(--ip-primary, #6366f1);
    background: transparent;
    box-shadow: none;
}

/* Page header strip on the list panel + edit panel */
.ip-admin-page .ip-admin-page-header {
    margin-bottom: 8px;
}

/* Filter / sort toolbar (mirrors dashboard alpha23.4) */
.ip-admin-page .ip-admin-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 6px 0 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
}
.ip-admin-page .ip-admin-toolbar-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ip-admin-page .ip-admin-toolbar-label {
    color: var(--ip-text-muted, #64748b);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}
.ip-admin-page .ip-admin-select {
    padding: 4px 26px 4px 10px;
    font-size: 12.5px;
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 6px;
    background: var(--ip-surface, #fff);
    color: var(--ip-text, #0f172a);
    line-height: 1.3;
    min-height: 0;
}
.ip-admin-page .ip-admin-select:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ip-admin-page .ip-admin-toolbar-spacer { flex: 1; }
.ip-admin-page .ip-admin-toolbar-result {
    color: var(--ip-text-muted, #64748b);
    font-size: 12px;
    font-style: italic;
}

/* AI Import card — replaces the old inline-styled .ip-form border */
.ip-admin-page .ip-admin-aicard {
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.ip-admin-page .ip-admin-aicard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.04));
}
.ip-admin-page .ip-admin-aicard-head-left {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}
.ip-admin-page .ip-admin-aicard-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.ip-admin-page .ip-admin-aicard-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
}
.ip-admin-page .ip-admin-aicard-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ip-text-secondary, #475569);
}
.ip-admin-page .ip-admin-aicard-body {
    padding: 24px 18px 22px;
    text-align: center;
}
.ip-admin-page .ip-admin-aicard-dropzone {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 20px;
}
.ip-admin-page .ip-admin-aicard-dropzone-cta {
    margin: 6px 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ip-primary, #6366f1);
}
.ip-admin-page .ip-admin-aicard-dropzone-hint {
    margin: 0;
    font-size: 12px;
    color: var(--ip-text-muted, #64748b);
}
.ip-admin-page .ip-admin-aicard-progress-title {
    margin: 8px 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
}
.ip-admin-page .ip-admin-aicard-progress-sub {
    margin: 0;
    font-size: 13px;
    color: var(--ip-text-secondary, #475569);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.ip-admin-page .ip-admin-aicard-done-icon {
    font-size: 36px;
    color: var(--ip-success, #22c55e);
    margin-bottom: 8px;
    line-height: 1;
}
.ip-admin-page .ip-admin-aicard-done-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
}
.ip-admin-page .ip-admin-aicard-done-sub {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--ip-text-secondary, #475569);
}
.ip-admin-page .ip-admin-aicard-done-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Case grid — new card style, replaces the old .ip-case-card */
.ip-admin-page .ip-admin-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.ip-admin-page .ip-admin-case-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    color: inherit;
    font-family: inherit;
    width: 100%;
}
.ip-admin-page .ip-admin-case-card:hover {
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}
.ip-admin-page .ip-admin-case-card-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--ip-surface-sunken, #f1f5f9);
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
}
.ip-admin-page .ip-admin-case-card-hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    opacity: 0.55;
}
.ip-admin-page .ip-admin-case-card-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    backdrop-filter: blur(6px);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.ip-admin-page .ip-admin-case-card-pill .ip-status-pill-dot { background: currentColor; }
.ip-admin-page .ip-admin-case-card-pill.is-published { color: #86efac; border-color: rgba(134, 239, 172, 0.3); }
.ip-admin-page .ip-admin-case-card-pill.is-archived  { color: #fde68a; border-color: rgba(253, 230, 138, 0.3); }
.ip-admin-page .ip-admin-case-card-body {
    padding: 14px 16px 16px;
}
.ip-admin-page .ip-admin-case-card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
    line-height: 1.3;
}
.ip-admin-page .ip-admin-case-card-desc {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ip-text-secondary, #475569);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-admin-page .ip-admin-case-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11.5px;
}
.ip-admin-page .ip-admin-case-card-status {
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10.5px;
}
.ip-admin-page .ip-admin-case-card-chip {
    background: rgba(6, 182, 212, 0.12);
    color: #0e7490;
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ip-admin-page .ip-admin-case-card-date {
    color: var(--ip-text-muted, #94a3b8);
    margin-left: auto;
}

/* Empty state inside the case grid — center across the full row. */
.ip-admin-page .ip-admin-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
}

/* ── alpha24.1 — Case Editor as overlay modal ───────────────────────────
   Replaces the panel-swap UX with a centered overlay that opens from
   the case tile (or +New Case). Backdrop blurs the list behind so the
   focus is clearly on the editor, but the list stays mounted in the DOM
   so closing returns the user to where they were without a re-render
   jolt. JS-targeted IDs inside (#ip-edit-panel, #ip-case-id, the
   per-entity form IDs, etc.) are unchanged so all existing handlers
   keep working. */
.ip-admin-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.ip-admin-edit-modal[hidden] { display: none; }

.ip-admin-edit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ip-admin-edit-modal-card {
    position: relative;
    z-index: 1;
    background: var(--ip-surface, #fff);
    width: min(1100px, calc(100vw - 32px));
    margin: 24px auto;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.30);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    outline: none;
}
@media (max-width: 720px) {
    .ip-admin-edit-modal-card {
        width: 100vw;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
}

.ip-admin-edit-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    flex-shrink: 0;
}
.ip-admin-edit-modal-head-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ip-admin-edit-modal-head-left .ip-page-title-label {
    /* Existing design-system label style picks up here automatically.
       Make it small + uppercase even at this size. */
    font-size: 10.5px;
    letter-spacing: 0.06em;
}
.ip-admin-edit-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-admin-edit-modal-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ip-admin-edit-modal-close {
    background: transparent;
    border: 1px solid var(--ip-border, #e5e7eb);
    color: var(--ip-text-muted, #64748b);
    font-size: 22px;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    padding: 0;
}
.ip-admin-edit-modal-close:hover {
    background: var(--ip-surface-sunken, #f1f5f9);
    color: var(--ip-text, #0f172a);
    border-color: var(--ip-text-muted, #94a3b8);
}

.ip-admin-edit-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px 24px;
    /* White background so the existing .ip-form gray panels read as
       cards on a clean surface — not blending into the modal. */
    background: var(--ip-surface, #fff);
}

/* Lock body scroll under the modal — set inline by the JS open helper. */

/* ── alpha24.2 — Unified platform topbar ───────────────────────────────
   Shared partial (templates/partial-platform-topbar.php) renders the
   same topbar on every logged-in platform page: brand left, primary
   nav middle, case picker + signout right. Replaces three different
   topbars that existed before:
     - .ip-header (used by platform-header.php — board, feed, research,
       casefile, story, admin, dashboard)
     - .ip-home-topbar-row1 (used by page-home.php)
   page-public-reader.php keeps its own minimal logged-out topbar. */

.ip-topbar {
    width: 100%;
    background: var(--ip-surface, #fff);
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}
.ip-topbar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    max-width: 1480px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* Brand */
.ip-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--ip-text, #0f172a);
    font-weight: 700;
    flex-shrink: 0;
}
.ip-topbar-brand:hover { color: var(--ip-primary, #6366f1); }
.ip-topbar-brand-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ip-primary, #6366f1), var(--ip-secondary, #8b5cf6));
    color: #fff;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ip-topbar-brand-name {
    font-size: 15px;
    letter-spacing: -0.01em;
}
@media (max-width: 720px) {
    .ip-topbar-brand-name { display: none; }
}

/* Primary nav */
.ip-topbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}
.ip-topbar-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--ip-text-secondary, #475569);
    font-size: 13px;
    font-weight: 600;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}
.ip-topbar-nav-link:hover {
    background: var(--ip-surface-sunken, #f1f5f9);
    color: var(--ip-text, #0f172a);
    text-decoration: none;
}
.ip-topbar-nav-link.is-active {
    color: var(--ip-primary, #6366f1);
    background: rgba(99, 102, 241, 0.10);
}
.ip-topbar-nav-icon {
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .ip-topbar-nav-label { display: none; }
    .ip-topbar-nav-link { padding: 7px 9px; }
    .ip-topbar-nav-icon { font-size: 16px; }
}

/* Right cluster */
.ip-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ip-topbar-case-picker { display: inline-flex; align-items: center; gap: 6px; }
/* Standard WP visually-hidden helper, in case the active theme doesn't
   provide it. Used by the case-picker label in the topbar partial. */
.ip-topbar .screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%); clip-path: inset(50%);
    height: 1px; width: 1px;
    margin: -1px; overflow: hidden; padding: 0; position: absolute;
    word-wrap: normal !important;
}
.ip-topbar-case-select {
    padding: 6px 28px 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 8px;
    background: var(--ip-surface, #fff);
    color: var(--ip-text, #0f172a);
    max-width: 240px;
    cursor: pointer;
    line-height: 1.3;
}
.ip-topbar-case-select:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ip-topbar-signout,
.ip-topbar-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface, #fff);
    color: var(--ip-text-secondary, #475569);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ip-topbar-signout:hover,
.ip-topbar-signin:hover {
    background: var(--ip-surface-sunken, #f1f5f9);
    color: var(--ip-text, #0f172a);
    border-color: var(--ip-text-muted, #94a3b8);
    text-decoration: none;
}
.ip-topbar-signin {
    width: auto;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
}

/* When inside a chrome=modal iframe (tile-modals on home), the partial
   skips emitting itself — but the outer page may still want to suppress
   any topbar. Keep this hook for safety. */
body.ip-chrome-modal .ip-topbar { display: none !important; }

/* alpha24.2 — page-home.php's old .ip-home-topbar-row1 is gone (the
   shared topbar replaces it). Row 2 still carries case-context actions
   that don't belong in the global nav: search, progress, presence,
   tier chip, Share button. Adjust the row2 layout to fit the moved
   contents — flex with sensible wrap so nothing collides on narrow. */
.ip-home-topbar { padding-top: 8px; }
.ip-home-topbar-row2 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ip-home-topbar-row2 .ip-home-progress { flex: 1 1 220px; min-width: 0; }
.ip-home-topbar-row2 .ip-home-status-chip,
.ip-home-topbar-row2 .ip-home-presence,
.ip-home-topbar-row2 #ip-home-share-btn {
    flex-shrink: 0;
}

/* ── alpha24.1.1 — Handwriting font on prose-writing surfaces ──────────
   Every `<textarea>` and explicit `.ip-prose-editor` surface adopts the
   scratchpad's casual handwriting stack at 20px. Applies to: synopsis
   editor, feed compose, research notes, theory hunch input, person /
   location / forensic notes textareas, admin description, invite
   personal-message, etc. Does NOT touch:
     - Short `<input type="text|email|search">` (labels, titles, queries)
     - Headings, button labels, the rest of the chrome
     - .ip-story-editor (contenteditable div with Lora serif — long-form
       narrative, different intent)
     - .ip-scratchpad-editor (24px override at the class level wins via
       higher specificity)
   If a specific textarea needs to opt back out, use a more specific
   selector to override (e.g. `.ip-admin-page .ip-some-config-area`). */
textarea,
.ip-prose-editor,
.ip-handwriting,
.ip-msg-body,
.ip-msg-content,
.ip-home-tile-body p,
.ip-home-state-summary,
.ip-research-note-text,
.ip-feed-item-body,
.ip-feed-item-text {
    font-family: "Caveat", "Patrick Hand", "Kalam", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
    font-size: 20px;
    line-height: 1.5;
}
/* Placeholders return to sans-serif so they don't read as the user's
   own handwriting before they type anything. */
textarea::placeholder,
.ip-prose-editor:empty::before {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-style: italic;
}

/* ── alpha24.4 → alpha24.5 — Handwriting font on user-prose surfaces ─────
   The home tiles, observations, feed entries, research notes, and chat
   messages all hold user-facing content but most use <div>+<strong>
   rather than <p> — so a plain `p { ... }` rule misses them. We target
   the actual rendered wrappers instead, and let inheritance carry the
   font down to descendants (children of these wrappers will be all-
   handwriting unless they have their own explicit font set, which
   buttons / pills / badges already do). Marked !important so legacy
   per-class rules (.ip-msg-content { font-size:14px }) don't win on
   source-order ties. */
textarea,
.ip-prose-editor,
.ip-handwriting,
/* Chat messages (any surface — Investigator / Casefile chat) */
.ip-msg-content,
.ip-msg-content p,
.ip-msg-content li,
.ip-msg-content blockquote,
.ip-msg-content strong,
.ip-msg-content em,
.ip-msg-content span,
/* Home tile bodies + their direct prose children */
.ip-home-tile-body,
.ip-home-tile-body > div,
.ip-home-tile-body > p,
.ip-home-tile-body strong,
.ip-home-tile-body em,
/* Synopsis tile prose */
.ip-home-state-summary,
.ip-home-state-meta,
/* Companion (SOL) observations on the home grid */
.ip-home-obs,
.ip-home-obs-empty,
.ip-home-obs-text,
/* Case Identity Plate summary text + meta */
.ip-plate-summary-text,
.ip-plate-summary-text p,
.ip-plate-summary-meta,
/* Dashboard trailer card description + SOL hook */
.ip-dash-card-desc,
.ip-dash-card-summary,
/* Admin case card description (when admin browses cases) */
.ip-admin-case-card-desc,
/* Feed entries on home + feed page */
.ip-home-feed-item,
.ip-home-feed-text,
.ip-feed-item,
.ip-feed-item-body,
.ip-feed-item-text,
/* Research items (home preview + research page) */
.ip-home-research-item,
.ip-research-note,
.ip-research-note-text,
.ip-research-item,
/* Scratchpad preview on home grid */
.ip-home-scratchpad-preview {
    font-family: "Caveat", "Patrick Hand", "Kalam", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
}

/* Placeholders return to sans-serif so they don't read as the user's
   own handwriting before they type anything. (Repeated here because
   the !important above might cascade into ::placeholder otherwise.) */
textarea::placeholder,
.ip-prose-editor:empty::before {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    font-style: italic !important;
}

/* Buttons / pills / badges / labels inside content surfaces stay
   sans-serif (otherwise inheritance through the rules above would
   make a "Dismiss" button on an observation render as handwriting). */
.ip-msg-content button,
.ip-msg-content .ip-btn,
.ip-msg-content .ip-status-pill,
.ip-msg-content .ip-author-badge,
.ip-home-obs button,
.ip-home-obs .ip-btn,
.ip-home-obs-dismiss,
.ip-home-tile-body button,
.ip-home-tile-body .ip-btn,
.ip-home-tile-body .ip-status-pill,
.ip-home-tile-body .ip-author-badge,
.ip-home-tile-body .ip-history-btn,
.ip-home-tile-body .ip-pane-savestatus,
.ip-home-tile-body kbd,
.ip-plate-summary-text button,
.ip-plate-summary-text .ip-btn,
.ip-dash-card-desc + *,
.ip-dash-card-summary + *,
.ip-feed-item button,
.ip-feed-item .ip-btn,
.ip-feed-item time,
.ip-research-item button,
.ip-research-item .ip-btn,
.ip-research-item time {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* UI helper <p> stays sans-serif. These are short guidance/status
   strings, not user prose, so handwriting would feel wrong. */
.ip-empty p,
.ip-topbar p,
.ip-page-header p,
.ip-pane-savestatus p,
.ip-pane-foot p,
.ip-toast-wrap p,
.ip-admin-page p,
.ip-admin-aicard-sub,
.ip-admin-aicard-dropzone-cta,
.ip-admin-aicard-dropzone-hint,
.ip-admin-aicard-progress-title,
.ip-admin-aicard-progress-sub,
.ip-admin-aicard-done-sub,
.ip-public-foot p,
.ip-status-pill p,
.ip-author-badge p,
.ip-home-modal-body p,
.ip-modal p,
.ip-card-foot p {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* ── alpha24.1.1 — Case-editor sub-section polish (inside the modal) ───
   Reskin the alpha8-era `.ip-form` panels and `.ip-sub-section` headers
   inside the case-edit modal to match the rest of the platform. Pure
   CSS — no markup change. Five sub-sections affected: Details / People
   / Places / Evidence / Access. Each becomes a clean white card with
   a subtle border, a properly aligned section header (icon + title +
   right-aligned "+ Add"), and a body that breathes. */
.ip-admin-page .ip-admin-edit-modal-body .ip-form {
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.ip-admin-page .ip-admin-edit-modal-body .ip-form > h3,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.04));
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ip-text, #0f172a);
    text-transform: none;
}
.ip-admin-page .ip-admin-edit-modal-body .ip-form > h3 + *,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > h4 + *,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > input[type="hidden"] + .ip-form-2col {
    padding-top: 16px;
}
/* Body content gets internal padding. The header doesn't (it's its own row). */
.ip-admin-page .ip-admin-edit-modal-body .ip-form > .ip-form-2col,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > .ip-row,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > .ip-field,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > [id$="-form"],
.ip-admin-page .ip-admin-edit-modal-body .ip-form > [id$="-list"],
.ip-admin-page .ip-admin-edit-modal-body .ip-form > #ip-access-grid,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > #ip-img-suggestions-panel,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > p {
    padding-left: 18px;
    padding-right: 18px;
}
/* The Save button at the bottom of each .ip-form. The legacy markup
   places it as a direct child of the form panel — give it breathing
   room and a card-foot feel. */
.ip-admin-page .ip-admin-edit-modal-body .ip-form > button:last-child,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > div:last-child:not(.ip-form-2col):not(.ip-row):not([id$="-list"]):not([id$="-form"]) {
    margin: 12px 18px 18px;
}
/* The "+ Add" button inside section headers — currently relies on
   inline `style="margin-left:auto"`. The flex header above already
   distributes it correctly; this just smooths sizing. */
.ip-admin-page .ip-admin-edit-modal-body .ip-form > h3 > .ip-btn,
.ip-admin-page .ip-admin-edit-modal-body .ip-form > h4 > .ip-btn {
    margin-left: auto;
    font-size: 12px;
    padding: 5px 12px;
}
/* The .ip-sub-section margin from the legacy CSS was margin-top:28px —
   now the card-shadow + border-bottom of the previous card creates the
   visual break. Tighten the gap. */
.ip-admin-page .ip-admin-edit-modal-body .ip-sub-section {
    margin-top: 0;
}
/* Field labels inside the editor — slightly more polished than the
   legacy 14px/700 weight. */
.ip-admin-page .ip-admin-edit-modal-body .ip-field label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ip-text-muted, #64748b);
    margin-bottom: 6px;
}
/* Inputs: tighter borders, match design-system focus ring. */
.ip-admin-page .ip-admin-edit-modal-body .ip-field input[type="text"],
.ip-admin-page .ip-admin-edit-modal-body .ip-field input[type="email"],
.ip-admin-page .ip-admin-edit-modal-body .ip-field input[type="number"],
.ip-admin-page .ip-admin-edit-modal-body .ip-field select,
.ip-admin-page .ip-admin-edit-modal-body .ip-field textarea {
    border-width: 1px;
    border-color: var(--ip-border, #e5e7eb);
    padding: 8px 12px;
    min-height: 38px;
}
.ip-admin-page .ip-admin-edit-modal-body .ip-field input:focus,
.ip-admin-page .ip-admin-edit-modal-body .ip-field select:focus,
.ip-admin-page .ip-admin-edit-modal-body .ip-field textarea:focus {
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
/* Drop the heavy gray-blue body background on the modal — let the
   white .ip-form cards float on it. */
.ip-admin-page .ip-admin-edit-modal-body {
    background: var(--ip-surface-sunken, #f8fafc);
}

/* Lift the per-entity inline forms (Add Person, Add Location,
   Add Evidence) — they currently render as a slightly-darker inset
   panel via inline styles. Tighten them. */
.ip-admin-page .ip-admin-edit-modal-body [id$="-form"] {
    background: var(--ip-surface-sunken, #f8fafc) !important;
    border: 1px solid var(--ip-border, #e5e7eb) !important;
    border-radius: 8px !important;
    margin: 0 18px 14px !important;
    padding: 14px !important;
}

/* ── alpha24.4 — Featured Case ★ pill ──────────────────────────────────
   Renders in the top-RIGHT of the hero on both surfaces:
     - Dashboard library trailer cards (.ip-dash-card-featuredpill)
     - Admin case grid (.ip-admin-case-card-pill-featured)
   The existing publish-status pill (Draft/Published/Shared) stays in
   the top-LEFT. */
.ip-dash-card-featuredpill {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    backdrop-filter: blur(6px);
    background: rgba(15, 23, 42, 0.55);
    color: #fde68a;
    border: 1px solid rgba(253, 224, 71, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ip-dash-card-featuredpill-star {
    color: #fbbf24;
    font-size: 12px;
    line-height: 1;
}
.ip-admin-page .ip-admin-case-card-pill-featured {
    /* Same look on the admin grid — position top-RIGHT, override left default. */
    left: auto;
    right: 10px;
    color: #fde68a;
    border-color: rgba(253, 224, 71, 0.45);
    background: rgba(15, 23, 42, 0.55);
}
.ip-admin-page .ip-admin-case-card-pill-featured .ip-status-pill-dot {
    color: #fbbf24;
    background: transparent;
}
/* Featured cards get a subtle gold-tinted hover lift. */
.ip-admin-page .ip-admin-case-card.is-featured:hover {
    border-color: #fbbf24;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.18);
}

/* ── alpha23.5 — Featured cases public landing ──────────────────────────
   Renders at /cold-case-public/ when no ?share=TOKEN query is present.
   Logged-out friendly. Lists admin-curated featured cases that have a
   published instance with a public_slug; each card links to
   /case/{slug}/ (the alpha23 reader). */
.ip-featured-landing {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 80px;
    color: var(--ip-text, #0f172a);
}

.ip-featured-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 22px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
}
.ip-featured-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--ip-text, #0f172a);
    font-weight: 700;
    font-size: 16px;
}
.ip-featured-brand:hover { color: var(--ip-primary, #6366f1); }
.ip-featured-brand-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ip-primary, #6366f1), var(--ip-secondary, #8b5cf6));
    color: #fff;
    font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ip-featured-cta-link {
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
    text-decoration: none;
    font-size: 13.5px;
}
.ip-featured-cta-link:hover { text-decoration: underline; }

.ip-featured-hero {
    text-align: center;
    padding: 48px 0 60px;
    max-width: 760px;
    margin: 0 auto;
}
.ip-featured-hero-title {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 18px;
    color: var(--ip-text, #0f172a);
}
.ip-featured-hero-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ip-text-secondary, #475569);
    margin: 0 0 28px;
}
.ip-featured-hero-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.ip-featured-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    background: linear-gradient(135deg, var(--ip-primary, #6366f1), var(--ip-secondary, #8b5cf6));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.28);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.ip-featured-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.34);
    color: #fff;
    text-decoration: none;
}
.ip-featured-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    background: transparent;
    color: var(--ip-text-secondary, #475569);
    font-weight: 600;
    font-size: 15px;
    border: 1px solid var(--ip-border, #e5e7eb);
}
.ip-featured-cta-secondary:hover {
    background: var(--ip-surface-sunken, #f1f5f9);
    color: var(--ip-text, #0f172a);
    text-decoration: none;
}

.ip-featured-section-head {
    margin: 0 0 24px;
}
.ip-featured-section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ip-primary, #6366f1);
    margin-bottom: 8px;
}
.ip-featured-section-title {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    color: var(--ip-text, #0f172a);
}

.ip-featured-grid-section {
    margin-top: 24px;
    margin-bottom: 60px;
}
.ip-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.ip-featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ip-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    border-color: var(--ip-primary, #6366f1);
    text-decoration: none;
}
.ip-featured-card-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--ip-surface-sunken, #f1f5f9);
}
.ip-featured-card-hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    opacity: 0.5;
}
.ip-featured-card-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    color: #fde68a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border: 1px solid rgba(253, 224, 71, 0.45);
}
.ip-featured-card-pill-star {
    color: #fbbf24;
    font-size: 12px;
    line-height: 1;
}
.ip-featured-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.ip-featured-card-title {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
    letter-spacing: -0.005em;
}
.ip-featured-card-summary {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ip-text-secondary, #475569);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-featured-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 6px;
    font-size: 12px;
    color: var(--ip-text-muted, #64748b);
}
.ip-featured-card-read {
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
}

.ip-featured-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--ip-surface, #fff);
    border: 1px dashed var(--ip-border, #e5e7eb);
    border-radius: 14px;
    margin: 24px 0;
}
.ip-featured-empty-icon { font-size: 56px; margin-bottom: 12px; opacity: 0.55; }
.ip-featured-empty h2 { margin: 0 0 8px; font-size: 22px; }
.ip-featured-empty p {
    margin: 0; color: var(--ip-text-secondary, #475569); max-width: 480px;
    margin-left: auto; margin-right: auto;
}

.ip-featured-cta {
    margin-top: 40px;
    padding: 48px 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.06));
    border-radius: 18px;
    border: 1px solid var(--ip-border, #e5e7eb);
}
.ip-featured-cta h2 {
    margin: 0 0 10px;
    font-size: 26px;
    color: var(--ip-text, #0f172a);
}
.ip-featured-cta p {
    margin: 0 auto 22px;
    max-width: 520px;
    color: var(--ip-text-secondary, #475569);
    font-size: 15px;
    line-height: 1.55;
}

.ip-featured-foot {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--ip-border, #e5e7eb);
    text-align: center;
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
}
.ip-featured-foot a { color: var(--ip-primary, #6366f1); text-decoration: none; }
.ip-featured-foot a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .ip-featured-landing { padding: 0 14px 60px; }
    .ip-featured-hero { padding: 32px 0 44px; }
    .ip-featured-cta { padding: 36px 18px; }
}

/* ── alpha24.5.2 — Handwriting font on the Story editor body ────────────
   The Story page editor (.ip-story-editor / .ip-story-editor-prose) was
   originally set to Lora serif for a "published article" feel. User
   wants it consistent with the rest of the platform — handwriting font
   on body prose. Headings (h2/h3) inside the editor keep their own
   sans-serif styling because the legacy `.ip-story-editor-prose h2,h3`
   rule has higher specificity and isn't overridden here. */
.ip-story-editor,
.ip-story-editor-prose {
    font-family: "Caveat", "Patrick Hand", "Kalam", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
}
/* Paragraphs / lists inside the editor inherit by default, but the
   legacy `.ip-story-editor p` may have its own font-size — pin them. */
.ip-story-editor p,
.ip-story-editor li,
.ip-story-editor blockquote,
.ip-story-editor-prose p,
.ip-story-editor-prose li {
    font-family: inherit !important;
    font-size: 22px !important;
    line-height: 1.55 !important;
}

/* ── alpha24.6 — Tile polish: standalone-page chrome for Companion /
   Assets / Breaks ──────────────────────────────────────────────────────
   The three remaining alpha22-deferred surfaces. The home grid tiles
   already wear design-system chrome; this alpha brings their fullscreen
   modal targets up to match Feed + Research + Story. */

/* Investigator (Ask SOL) page-header */
.ip-investigator-page-header {
    margin-bottom: 12px;
}
.ip-investigator-page-header .ip-page-title-label {
    color: var(--ip-primary, #6366f1);
}

/* Casefile page-header — sits ABOVE the .ip-casefile-selectable
   container so the selection-toolbar logic isn't disturbed. */
.ip-casefile-page-header {
    margin-bottom: 16px;
}

/* The legacy .ip-start-investigating styling was tied to a custom
   class; the alpha24.6 header moves the button into the right cluster
   using design-system .ip-btn classes, so no custom selector needed. */

/* Feed page — when the page is in Breaks (starred) mode, accent the
   page-title-label with a gold tint so users see they're in a
   different mode. The JS swaps the label text to "⭐ BREAKS"; this
   color cue makes the mode-switch unambiguous. */
.ip-feed-page-header .ip-page-title-label[data-mode="breaks"],
.ip-feed-page .ip-feed-page-filter-btn-active[data-filter="starred"] ~ .ip-page-header .ip-page-title-label {
    color: #d97706;
}
/* Active "Starred" chip in the filter row gets the same gold tint
   so the page reads as a coordinated mode change. */
.ip-feed-page .ip-feed-page-filter-btn-active[data-filter="starred"] {
    background: rgba(217, 119, 6, 0.10);
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.30);
}

/* ── alpha24.7 — Archive UX cues on admin case cards ─────────────────── */
/* When the pill reads "Archived" (kind=is-archived AND label="Archived"),
   slightly desaturate the card so the archived view reads as muted/cold. */
.ip-admin-page .ip-admin-case-card .ip-admin-case-card-pill.is-archived {
    /* Existing amber gold is the "Hidden" treatment. For Archived, swap
       to a cooler gray so the two states aren't visually confused. We
       can't easily distinguish in CSS (both share the .is-archived
       modifier), so we render via the pill-label content. */
}
/* Make Archive button feel less dangerous than Delete — pill-shaped,
   muted. The Delete Permanently button keeps its red urgency. */
.ip-admin-page #ip-archive-btn {
    background: var(--ip-surface, #fff);
    color: var(--ip-text-secondary, #475569);
    border: 1px solid var(--ip-border, #e5e7eb);
}
.ip-admin-page #ip-archive-btn:hover {
    background: var(--ip-surface-sunken, #f1f5f9);
    color: var(--ip-text, #0f172a);
    border-color: var(--ip-text-muted, #94a3b8);
}

/* ── alpha25.0 — Admin "Offer case to user" modal ──────────────────────
   Sits above the .ip-admin-edit-modal (case editor) so it stacks
   cleanly. Same visual language as the design-system modals (white
   card, gradient header, design-system buttons). */
.ip-admin-offer-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;  /* above edit-modal (9000), below cropper (10002) */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ip-admin-offer-modal[hidden] { display: none; }
.ip-admin-offer-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ip-admin-offer-modal-card {
    position: relative;
    z-index: 1;
    background: var(--ip-surface, #fff);
    width: min(520px, calc(100vw - 32px));
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.30);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}
.ip-admin-offer-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
}
.ip-admin-offer-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
}
.ip-admin-offer-modal-close {
    background: transparent;
    border: 1px solid var(--ip-border, #e5e7eb);
    color: var(--ip-text-muted, #64748b);
    font-size: 20px;
    line-height: 1;
    width: 30px; height: 30px;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.ip-admin-offer-modal-close:hover { background: var(--ip-surface-sunken, #f1f5f9); color: var(--ip-text, #0f172a); }
.ip-admin-offer-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
}
.ip-admin-offer-modal-intro {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--ip-text-secondary, #475569);
    line-height: 1.55;
}
.ip-admin-offer-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--ip-border, #e5e7eb);
    background: var(--ip-surface-sunken, #f8fafc);
}
.ip-admin-offer-status {
    margin: 12px 0 0;
    font-size: 13px;
    min-height: 18px;
}
.ip-admin-offer-result {
    margin-top: 14px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.30);
    border-radius: 8px;
}
.ip-admin-offer-result-head {
    font-size: 13px;
    font-weight: 700;
    color: #166534;
    margin-bottom: 8px;
}
.ip-admin-offer-result-link-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.ip-admin-offer-result-link-label {
    flex-basis: 100%;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    margin-bottom: 2px;
}
.ip-admin-offer-result-link-wrap .ip-text-input {
    flex: 1;
    min-width: 200px;
    font-size: 12px;
    padding: 6px 10px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── alpha25.1 — Branded sign-up landing (/cold-case-signup/) ──────────
   Replaces default WP `/wp-login.php?action=register` for new users.
   Self-contained shell. Honors ?invite_token= so a magic-link recipient
   can land here and sign up; the dashboard's existing invite-accept
   flow takes over after redirect. */
.ip-signup-landing {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 80px;
    color: var(--ip-text, #0f172a);
}
.ip-signup-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0 24px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
}
.ip-signup-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--ip-text, #0f172a);
    font-weight: 700;
    font-size: 16px;
}
.ip-signup-brand:hover { color: var(--ip-primary, #6366f1); text-decoration: none; }
.ip-signup-brand-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ip-primary, #6366f1), var(--ip-secondary, #8b5cf6));
    color: #fff;
    font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ip-signup-link-signin {
    color: var(--ip-text-secondary, #475569);
    font-size: 13.5px;
    text-decoration: none;
}
.ip-signup-link-signin:hover { color: var(--ip-text, #0f172a); text-decoration: none; }
.ip-signup-link-signin strong { color: var(--ip-primary, #6366f1); }

.ip-signup-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: start;
    margin: 36px 0 0;
}
@media (max-width: 880px) {
    .ip-signup-grid { grid-template-columns: 1fr; gap: 36px; }
}

.ip-signup-pitch-title {
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.018em;
    font-weight: 800;
    margin: 0 0 18px;
}
.ip-signup-pitch-lede {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ip-text-secondary, #475569);
    margin: 0 0 24px;
}
.ip-signup-pitch-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.ip-signup-pitch-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-top: 1px solid var(--ip-border, #e5e7eb);
    font-size: 14px;
    color: var(--ip-text, #0f172a);
    line-height: 1.55;
}
.ip-signup-pitch-list li:last-child { border-bottom: 1px solid var(--ip-border, #e5e7eb); }
.ip-signup-pitch-list li span {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1.2;
}
.ip-signup-pitch-foot {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--ip-text-muted, #64748b);
}

.ip-signup-form-wrap {
    position: sticky;
    top: 24px;
}
.ip-signup-form-card {
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
}
.ip-signup-form-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ip-text, #0f172a);
}
.ip-signup-form-sub {
    margin: 0 0 22px;
    color: var(--ip-text-secondary, #475569);
    font-size: 13.5px;
}
.ip-signup-form-card .ip-field { margin-bottom: 14px; }
.ip-signup-form-card .ip-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ip-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}
.ip-signup-form-card .ip-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 8px;
    background: var(--ip-surface, #fff);
    color: var(--ip-text, #0f172a);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ip-signup-form-card .ip-field input:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ip-signup-field-hint {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
}
.ip-signup-invite-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ip-text, #0f172a);
}
.ip-signup-status {
    min-height: 18px;
    margin: 8px 0 12px;
    font-size: 13px;
}
.ip-signup-submit {
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ip-primary, #6366f1), var(--ip-secondary, #8b5cf6));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
}
.ip-signup-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(99, 102, 241, 0.30);
}
.ip-signup-submit:disabled { opacity: 0.6; cursor: wait; }
.ip-signup-legal {
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    text-align: center;
}
.ip-signup-legal a { color: var(--ip-primary, #6366f1); text-decoration: none; }
.ip-signup-legal a:hover { text-decoration: underline; }

.ip-signup-disabled-notice {
    padding: 16px;
    border: 1px solid rgba(234, 179, 8, 0.35);
    background: rgba(254, 249, 195, 0.5);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #713f12;
}
.ip-signup-disabled-notice a { color: var(--ip-primary, #6366f1); }

.ip-signup-foot {
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--ip-border, #e5e7eb);
    text-align: center;
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
}
.ip-signup-foot a { color: var(--ip-primary, #6366f1); text-decoration: none; }

/* Featured-landing extras (alpha25.1 added Sign up button alongside Sign in) */
.ip-featured-cta-link-primary {
    background: var(--ip-primary, #6366f1);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 999px;
    margin-left: 8px;
    transition: background 120ms ease, transform 120ms ease;
}
.ip-featured-cta-link-primary:hover {
    background: var(--ip-secondary, #8b5cf6);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Public reader topbar — same primary-style Sign up button. */
.ip-public-signup {
    background: var(--ip-primary, #6366f1);
    color: #fff !important;
    padding: 5px 13px;
    border-radius: 999px;
    margin-left: 6px;
}
.ip-public-signup:hover { background: var(--ip-secondary, #8b5cf6); text-decoration: none; }

/* ── alpha25.2 — Manage Collaborators panel inside the invite modal ────
   Adds a "Current collaborators" list above the invite form so the
   owner can see, remove, and re-role anyone on their case in one
   modal. Lives inside the existing .ip-invite-modal partial. */
.ip-collab-manage-section {
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ip-border, #e5e7eb);
}
.ip-collab-manage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ip-collab-manage-head-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ip-text-muted, #64748b);
}
.ip-collab-manage-head-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ip-text-muted, #64748b);
    background: var(--ip-surface-sunken, #f1f5f9);
    border-radius: 999px;
    padding: 2px 9px;
}
.ip-collab-manage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ip-collab-manage-loading,
.ip-collab-manage-empty {
    padding: 10px 4px;
    font-size: 13px;
    color: var(--ip-text-muted, #64748b);
    text-align: center;
}
.ip-collab-manage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 8px;
}
.ip-collab-manage-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.ip-collab-manage-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ip-primary, #6366f1), var(--ip-secondary, #8b5cf6));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.ip-collab-manage-info {
    flex: 1;
    min-width: 0;
}
.ip-collab-manage-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-collab-manage-you {
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.12);
    color: var(--ip-primary, #6366f1);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}
.ip-collab-manage-meta {
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    margin-top: 1px;
}
.ip-collab-manage-role {
    font-size: 11px;
    color: var(--ip-text-muted, #64748b);
    text-transform: capitalize;
}
.ip-collab-manage-role-owner {
    color: var(--ip-primary, #6366f1);
    font-weight: 700;
    background: rgba(99, 102, 241, 0.10);
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: none;
}
.ip-collab-manage-role-select {
    padding: 4px 24px 4px 10px;
    font-size: 12px;
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 6px;
    background: var(--ip-surface, #fff);
    color: var(--ip-text, #0f172a);
    cursor: pointer;
    line-height: 1.3;
}
.ip-collab-manage-role-select:focus {
    outline: none;
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ip-collab-manage-remove {
    background: transparent;
    border: 1px solid var(--ip-border, #e5e7eb);
    color: var(--ip-text-muted, #64748b);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ip-collab-manage-remove:hover {
    color: var(--ip-error, #ef4444);
    border-color: var(--ip-error, #ef4444);
    background: rgba(239, 68, 68, 0.05);
}

/* Invite-form heading mirrors the "On this case" heading above. */
.ip-collab-invite-head {
    margin-bottom: 10px;
}
.ip-collab-invite-head-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ip-text-muted, #64748b);
}

/* ── alpha24.8 — Bulk import progress (admin AI Import card) ───────────
   Per-file rows queued serially; each row shows filename + status pill
   + detail line. Lives inside #ip-ai-import-bulk in the admin card. */
.ip-admin-page .ip-admin-bulk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ip-admin-page .ip-admin-bulk-head-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #64748b);
}
.ip-admin-page .ip-admin-bulk-head-progress {
    font-size: 12px;
    font-weight: 600;
    color: var(--ip-primary, #6366f1);
    background: rgba(99, 102, 241, 0.10);
    padding: 3px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.ip-admin-page .ip-admin-bulk-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 2px;  /* room for the focus ring on pills */
}
.ip-admin-page .ip-admin-bulk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--ip-surface, #fff);
    border: 1px solid var(--ip-border, #e5e7eb);
    border-radius: 8px;
    text-align: left;
}
.ip-admin-page .ip-admin-bulk-row[data-state="analyzing"] {
    border-color: rgba(168, 85, 247, 0.40);
    background: rgba(168, 85, 247, 0.04);
}
.ip-admin-page .ip-admin-bulk-row[data-state="done"] {
    border-color: rgba(34, 197, 94, 0.40);
    background: rgba(34, 197, 94, 0.04);
}
.ip-admin-page .ip-admin-bulk-row[data-state="failed"] {
    border-color: rgba(239, 68, 68, 0.40);
    background: rgba(239, 68, 68, 0.04);
}
.ip-admin-page .ip-admin-bulk-row[data-state="skipped"] {
    opacity: 0.65;
}
.ip-admin-page .ip-admin-bulk-row-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.ip-admin-page .ip-admin-bulk-row-info {
    flex: 1;
    min-width: 0;
}
.ip-admin-page .ip-admin-bulk-row-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-admin-page .ip-admin-bulk-row-detail {
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-admin-page .ip-admin-bulk-row .ip-status-pill {
    flex-shrink: 0;
    text-transform: capitalize;
}
/* Animated spinner on the analyzing dot. */
.ip-admin-page .ip-admin-bulk-row[data-state="analyzing"] .ip-status-pill-dot {
    display: inline-block;
    animation: ip-bulk-spin 1s linear infinite;
}
@keyframes ip-bulk-spin { to { transform: rotate(360deg); } }
.ip-admin-page .ip-admin-bulk-note {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
   alpha26.1 — Accessibility hardening
   ─────────────────────────────────────────────────────────────────────
   Two pieces:

   1) :focus-visible — a single, high-contrast keyboard focus ring on
      every interactive element. We deliberately scope to :focus-visible
      (not :focus) so mouse users don't see the ring on click while
      keyboard users always do. The ring uses the primary brand color
      with a subtle outer halo so it's readable on both light cards and
      dark surfaces (modals, topbar). Browsers without :focus-visible
      support fall back to their default focus ring — acceptable.

   2) .ip-skip-link — a Skip-to-content link injected at the very top of
      the unified topbar. It's visually hidden until focused (first Tab
      from the URL bar lands on it), then slides into view at top-left.
      Targets #ip-main-content which we add to the first .ip-wrap on
      pages that include the topbar.
   ───────────────────────────────────────────────────────────────────── */

/* Global focus ring — only when keyboard nav is in use. */
.ip-wrap a:focus-visible,
.ip-wrap button:focus-visible,
.ip-wrap [role="button"]:focus-visible,
.ip-wrap input:focus-visible,
.ip-wrap select:focus-visible,
.ip-wrap textarea:focus-visible,
.ip-wrap [tabindex]:focus-visible,
.ip-topbar a:focus-visible,
.ip-topbar button:focus-visible,
.ip-topbar select:focus-visible,
.ip-admin-page a:focus-visible,
.ip-admin-page button:focus-visible,
.ip-admin-page [role="button"]:focus-visible,
.ip-admin-page input:focus-visible,
.ip-admin-page select:focus-visible,
.ip-admin-page textarea:focus-visible,
.ip-admin-page [tabindex]:focus-visible,
.ip-admin-edit-modal a:focus-visible,
.ip-admin-edit-modal button:focus-visible,
.ip-admin-edit-modal input:focus-visible,
.ip-admin-edit-modal select:focus-visible,
.ip-admin-edit-modal textarea:focus-visible,
.ip-admin-edit-modal [tabindex]:focus-visible,
.ip-admin-offer-modal a:focus-visible,
.ip-admin-offer-modal button:focus-visible,
.ip-admin-offer-modal input:focus-visible,
.ip-admin-offer-modal textarea:focus-visible,
#ip-invite-modal a:focus-visible,
#ip-invite-modal button:focus-visible,
#ip-invite-modal input:focus-visible,
#ip-invite-modal select:focus-visible,
#ip-invite-modal textarea:focus-visible {
    outline: 3px solid var(--ip-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 4px;
    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.18);
    transition: outline-offset 80ms ease-out;
}

/* Don't add the outer halo on tightly-packed form controls — the
   3px outline is enough and the halo bleeds into neighbours. */
.ip-wrap input:focus-visible,
.ip-wrap select:focus-visible,
.ip-wrap textarea:focus-visible,
.ip-admin-page input:focus-visible,
.ip-admin-page select:focus-visible,
.ip-admin-page textarea:focus-visible,
.ip-admin-edit-modal input:focus-visible,
.ip-admin-edit-modal select:focus-visible,
.ip-admin-edit-modal textarea:focus-visible,
.ip-admin-offer-modal input:focus-visible,
.ip-admin-offer-modal textarea:focus-visible,
#ip-invite-modal input:focus-visible,
#ip-invite-modal select:focus-visible,
#ip-invite-modal textarea:focus-visible {
    box-shadow: none;
    outline-offset: 0;
}

/* Skip-to-content link — invisible until focused, then slides in. */
.ip-skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--ip-primary, #6366f1);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transform: translateY(-110%);
    transition: transform 120ms ease-out;
}
.ip-skip-link:focus,
.ip-skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #fff;
    outline-offset: -3px;
    color: #fff;
}

/* Target wrapper — needs tabindex="-1" to receive focus on jump. */
#ip-main-content:focus {
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────────
   alpha27.0 — Configuration tab (admin)
   ─────────────────────────────────────────────────────────────────────
   Two-column layout: section navigator on the left, auto-rendered form
   on the right. Each section pane toggles via .is-active. Form fields
   are rendered by ipa_render_config_node() server-side — this stylesheet
   only handles layout, depth indentation, and the "secret" read-only
   visual cue.
   ───────────────────────────────────────────────────────────────────── */

.ip-admin-page .ip-config-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    margin-top: 16px;
    min-height: 600px;
}
@media (max-width: 900px) {
    .ip-admin-page .ip-config-layout {
        grid-template-columns: 1fr;
    }
}

/* Left rail — section navigator. */
.ip-admin-page .ip-config-sections {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--ip-card-bg, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    padding: 8px;
    align-self: start;
    position: sticky;
    top: 70px;
}
.ip-admin-page .ip-config-section-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ip-text, #1e293b);
    text-align: left;
    transition: background 100ms ease-out;
}
.ip-admin-page .ip-config-section-btn:hover {
    background: var(--ip-surface-hover, #f1f5f9);
}
.ip-admin-page .ip-config-section-btn.is-active {
    background: var(--ip-primary, #6366f1);
    color: #fff;
    font-weight: 600;
}
.ip-admin-page .ip-config-section-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* Right pane — form for selected section. */
.ip-admin-page .ip-config-form-wrap {
    background: var(--ip-card-bg, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    padding: 24px;
    min-width: 0;
}
.ip-admin-page .ip-config-section-pane {
    display: none;
}
.ip-admin-page .ip-config-section-pane.is-active {
    display: block;
}
.ip-admin-page .ip-config-section-head h3 {
    margin: 0 0 16px;
    font-size: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
}
.ip-admin-page .ip-config-section-desc {
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
    font-style: italic;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: var(--ip-surface, #f8fafc);
    border-left: 3px solid var(--ip-primary, #6366f1);
    border-radius: 4px;
}

/* Field wrapper — every leaf renders inside one of these. */
.ip-admin-page .ip-config-field {
    margin-bottom: 14px;
}
.ip-admin-page .ip-config-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text, #1e293b);
    margin-bottom: 5px;
}
.ip-admin-page .ip-config-field-key {
    display: inline-block;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ip-text-muted, #94a3b8);
    background: var(--ip-surface, #f1f5f9);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.02em;
}
.ip-admin-page .ip-config-field input[type="text"],
.ip-admin-page .ip-config-field input[type="url"],
.ip-admin-page .ip-config-field input[type="color"],
.ip-admin-page .ip-config-field textarea,
.ip-admin-page .ip-config-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 6px;
    font-size: 13.5px;
    background: #fff;
    color: var(--ip-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
}
.ip-admin-page .ip-config-field textarea {
    line-height: 1.5;
    resize: vertical;
    min-height: 70px;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 12.5px;
}
.ip-admin-page .ip-config-field input[type="color"] {
    height: 38px;
    padding: 4px;
    cursor: pointer;
}
.ip-admin-page .ip-config-field-hint {
    font-size: 11.5px;
    color: var(--ip-text-muted, #94a3b8);
    margin: 4px 0 0;
}

/* Secret/read-only fields — visually muted. */
.ip-admin-page .ip-config-field.is-secret input,
.ip-admin-page .ip-config-field.is-secret textarea,
.ip-admin-page .ip-config-field.is-secret select {
    background: var(--ip-surface, #f1f5f9);
    color: var(--ip-text-muted, #94a3b8);
    cursor: not-allowed;
}
.ip-admin-page .ip-config-secret-badge {
    font-size: 11px;
}

/* Nested object groups — collapsible cards. */
.ip-admin-page .ip-config-subgroup {
    margin: 12px 0;
    padding: 0;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    background: var(--ip-surface, #f8fafc);
}
.ip-admin-page .ip-config-subgroup > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ip-text, #1e293b);
    list-style: none;
    user-select: none;
}
.ip-admin-page .ip-config-subgroup > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 100ms ease-out;
    margin-right: 4px;
}
.ip-admin-page .ip-config-subgroup[open] > summary::before {
    content: "▾ ";
}
.ip-admin-page .ip-config-subgroup > *:not(summary) {
    padding: 0 14px 14px;
}

/* Array repeater — list of objects (taxonomies, data_sources). */
.ip-admin-page .ip-config-repeater {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0;
}
.ip-admin-page .ip-config-repeater-card {
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--ip-surface, #f8fafc);
}
.ip-admin-page .ip-config-repeater-card h5 {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--ip-text-muted, #64748b);
    font-weight: 600;
}

/* Footer status line — Save returns here. */
.ip-admin-page .ip-config-foot {
    margin-top: 16px;
    padding: 10px 0;
    text-align: right;
    font-size: 13px;
    color: var(--ip-text-muted, #64748b);
    min-height: 22px;
}

/* ─────────────────────────────────────────────────────────────────────
   alpha27.1 — AI Config Assistant modal
   ─────────────────────────────────────────────────────────────────────
   Mirrors the existing admin modal pattern (.ip-admin-edit-modal,
   .ip-admin-offer-modal) — fixed overlay, backdrop, centered card,
   Esc/× close. Lives at z-index 9500 (above the edit modal at 9000,
   below the toast wrap). Body sections: mode chips, prompt textarea,
   generate button + status, result pane with diff list + Apply button.
   ───────────────────────────────────────────────────────────────────── */

.ip-admin-page .ip-admin-ai-modal {
    position: fixed;
    inset: 0;
    /* alpha27.2 — bumped from 9500 to 9600 to avoid collision with
       .ip-admin-offer-modal (also 9500). Different surfaces (offer modal
       lives on case-card; AI modal lives on config tab) so collision is
       unlikely in practice, but defense-in-depth costs nothing here. */
    z-index: 9600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ip-admin-page .ip-admin-ai-modal[hidden] { display: none; }
.ip-admin-page .ip-admin-ai-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.ip-admin-page .ip-admin-ai-modal-card {
    position: relative;
    background: var(--ip-card-bg, #fff);
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.4);
    overflow: hidden;
}
.ip-admin-page .ip-admin-ai-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
}
.ip-admin-page .ip-admin-ai-modal-head h3 {
    margin: 0;
    font-size: 16px;
    color: var(--ip-text, #1e293b);
}
.ip-admin-page .ip-admin-ai-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--ip-text-muted, #94a3b8);
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
.ip-admin-page .ip-admin-ai-modal-close:hover {
    background: var(--ip-surface-hover, #f1f5f9);
    color: var(--ip-text, #1e293b);
}
.ip-admin-page .ip-admin-ai-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Mode chips — three radio-as-card options. */
.ip-admin-page .ip-admin-ai-modes {
    border: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ip-admin-page .ip-admin-ai-modes legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text, #1e293b);
    margin-bottom: 8px;
    padding: 0;
    width: 100%;
}
.ip-admin-page .ip-admin-ai-mode-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1.5px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    background: var(--ip-surface, #f8fafc);
    transition: all 120ms ease-out;
}
.ip-admin-page .ip-admin-ai-mode-chip:hover {
    border-color: var(--ip-primary, #6366f1);
    background: #fff;
}
.ip-admin-page .ip-admin-ai-mode-chip.is-selected,
.ip-admin-page .ip-admin-ai-mode-chip:has(input:checked) {
    border-color: var(--ip-primary, #6366f1);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ip-admin-page .ip-admin-ai-mode-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ip-admin-page .ip-admin-ai-mode-chip-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text, #1e293b);
}
.ip-admin-page .ip-admin-ai-mode-chip-desc {
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    line-height: 1.3;
}

/* Prompt input. */
.ip-admin-page .ip-admin-ai-prompt-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ip-text, #1e293b);
    margin-bottom: 5px;
}
.ip-admin-page .ip-admin-ai-prompt {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    font-family: inherit;
    background: #fff;
    color: var(--ip-text, #1e293b);
    box-sizing: border-box;
    resize: vertical;
    min-height: 110px;
}
.ip-admin-page .ip-admin-ai-hint {
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    margin: 6px 0 0;
    line-height: 1.4;
}

/* Actions row — Generate + status. */
.ip-admin-page .ip-admin-ai-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0;
}
.ip-admin-page .ip-admin-ai-status {
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
}
.ip-admin-page .ip-admin-ai-status.is-error { color: var(--ip-error, #ef4444); }
.ip-admin-page .ip-admin-ai-status.is-success { color: var(--ip-success, #16a34a); }

/* Result pane — diff list + Apply. */
.ip-admin-page .ip-admin-ai-result {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
}
.ip-admin-page .ip-admin-ai-result-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.ip-admin-page .ip-admin-ai-result-head h4 {
    margin: 0;
    font-size: 14px;
    color: var(--ip-text, #1e293b);
}
.ip-admin-page .ip-admin-ai-result-count {
    font-weight: 400;
    color: var(--ip-text-muted, #64748b);
    margin-left: 6px;
    font-size: 12.5px;
}
.ip-admin-page .ip-admin-ai-result-model {
    font-size: 11px;
    color: var(--ip-text-muted, #94a3b8);
    font-family: ui-monospace, Consolas, monospace;
}
.ip-admin-page .ip-admin-ai-result-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    background: var(--ip-surface, #f8fafc);
    padding: 8px;
}
.ip-admin-page .ip-admin-ai-diff-row {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid var(--ip-border, #e2e8f0);
    font-size: 12.5px;
}
.ip-admin-page .ip-admin-ai-diff-path {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11.5px;
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
    margin-bottom: 4px;
    word-break: break-all;
}
.ip-admin-page .ip-admin-ai-diff-old,
.ip-admin-page .ip-admin-ai-diff-new {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
    font-family: inherit;
}
.ip-admin-page .ip-admin-ai-diff-old {
    background: rgba(239, 68, 68, 0.08);
    color: #991b1b;
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.4);
    margin-bottom: 3px;
}
.ip-admin-page .ip-admin-ai-diff-new {
    background: rgba(34, 197, 94, 0.10);
    color: #166534;
}
.ip-admin-page .ip-admin-ai-result-empty {
    padding: 24px;
    text-align: center;
    color: var(--ip-text-muted, #64748b);
    font-size: 13px;
}
.ip-admin-page .ip-admin-ai-result-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 600px) {
    .ip-admin-page .ip-admin-ai-modes {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   alpha27.2 — Config admin polish
   ─────────────────────────────────────────────────────────────────────
   Three additions:
   1. Inline diff-preview pane that appears between the toolbar and the
      section navigator when admin picks a historical version. Shows
      what Restore would change, before they click it.
   2. Starter-prompt chip row inside the AI Assist modal — one-click
      preset prompts for common vertical pivots (Genealogy, Corporate,
      Journalism).
   3. Light styling for Export/Import buttons — they reuse .ip-btn-ghost
      from the design system so no new colors needed.
   ───────────────────────────────────────────────────────────────────── */

/* Inline diff preview (history dropdown). */
.ip-admin-page .ip-config-diff-preview {
    margin: 12px 0;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    background: var(--ip-card-bg, #fff);
    overflow: hidden;
}
.ip-admin-page .ip-config-diff-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
}
.ip-admin-page .ip-config-diff-preview-head h4 {
    margin: 0;
    font-size: 13.5px;
    color: var(--ip-text, #1e293b);
}
.ip-admin-page .ip-config-diff-preview-vs {
    color: var(--ip-text-muted, #64748b);
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}
.ip-admin-page .ip-config-diff-preview-close {
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--ip-text-muted, #94a3b8);
    cursor: pointer;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
}
.ip-admin-page .ip-config-diff-preview-close:hover {
    background: var(--ip-surface-hover, #f1f5f9);
    color: var(--ip-text, #1e293b);
}
.ip-admin-page .ip-config-diff-preview .ip-admin-ai-result-list {
    border: none;
    border-radius: 0;
    max-height: 320px;
}

/* Starter prompt chips inside the AI Assist modal. */
.ip-admin-page .ip-admin-ai-starters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--ip-surface, #f8fafc);
    border: 1px dashed var(--ip-border, #cbd5e1);
    border-radius: 8px;
}
.ip-admin-page .ip-admin-ai-starters-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ip-text-muted, #64748b);
    margin-right: 4px;
}
.ip-admin-page .ip-admin-ai-starter {
    padding: 5px 10px;
    font-size: 12px;
    background: #fff;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 14px;
    color: var(--ip-text, #1e293b);
    cursor: pointer;
    transition: all 100ms ease-out;
}
.ip-admin-page .ip-admin-ai-starter:hover {
    border-color: var(--ip-primary, #6366f1);
    background: rgba(99, 102, 241, 0.05);
    color: var(--ip-primary, #6366f1);
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v0.2.0 (Phase 1) — Case Page
   ─────────────────────────────────────────────────────────────────────
   Document-style landing for an active instance. Replaces the eight-tile
   grid as the primary case surface; the grid stays installed and
   reachable via the Classic view link in the header.

   Single readable column, generous vertical rhythm, soft section
   separators. Reuses design-system primitives for the synopsis author
   badge, history dropdown, and save status. No new CSS variables.
   ───────────────────────────────────────────────────────────────────── */

/* Empty state — user has no instances yet. */
.ip-case-empty {
    max-width: 540px;
    margin: 80px auto;
    text-align: center;
}
.ip-case-empty h2 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--ip-text, #1e293b);
}
.ip-case-empty p {
    margin: 0 0 24px;
    color: var(--ip-text-muted, #64748b);
    font-size: 15px;
}

/* Page header — case title + meta on the left, action cluster on the
   right. Drops below the unified topbar. */
.ip-case-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 24px 20px;
    max-width: 920px;
    margin: 0 auto;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    flex-wrap: wrap;
}
.ip-case-header-left { flex: 1; min-width: 0; }
.ip-case-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ip-case-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ip-text-muted, #94a3b8);
    margin-bottom: 6px;
}
.ip-case-title {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
    line-height: 1.2;
}
.ip-case-subtitle {
    font-size: 14px;
    color: var(--ip-text-muted, #64748b);
    margin: 0 0 10px;
}
.ip-case-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
}
.ip-case-meta-role {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--ip-surface, #f1f5f9);
    color: var(--ip-text, #475569);
}
.ip-case-meta-dot {
    color: var(--ip-border, #cbd5e1);
}
.ip-case-classic-link {
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
}
.ip-case-classic-link:hover {
    background: var(--ip-surface, #f1f5f9);
    color: var(--ip-text, #1e293b);
}

/* Document body — vertical flow of sections.
   v1.2.3 — removed legacy max-width/auto-margin/padding. Those were
   from Phase 1 when the page was a single column needing a centered
   readable line length. Now there's a 64px rail on the left and a
   340px SOL panel on the right already constraining the doc's width,
   and the max-width was actually causing some cards (synopsis card,
   entity lists, contenteditable Notes) to render at narrow widths
   because of how flex containers interact with constrained parents.
   Padding moves up to the rail-layout container so the section
   content gets reasonable breathing room. */
.ip-case-doc {
    width: 100%;
    min-width: 0;
    padding: 24px 24px 80px;
    box-sizing: border-box;
}

.ip-case-section {
    margin-bottom: 48px;
    scroll-margin-top: 80px; /* anchor links land below the topbar */
}
.ip-case-section:last-child { margin-bottom: 0; }

.ip-case-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
}
.ip-case-section-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.ip-case-section-icon {
    font-size: 16px;
}
.ip-case-section-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ip-text-muted, #64748b);
    background: var(--ip-surface, #f1f5f9);
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 4px;
}
.ip-case-section-action {
    font-size: 13px;
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
    flex-shrink: 0;
}
.ip-case-section-action:hover {
    text-decoration: underline;
}
.ip-case-section-empty {
    color: var(--ip-text-muted, #64748b);
    font-size: 14px;
    font-style: italic;
    padding: 14px 0;
}
.ip-case-section-more {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
}
.ip-case-section-more:hover {
    text-decoration: underline;
}

/* Overview — case description block (read-only, from master). */
.ip-case-description {
    color: var(--ip-text, #334155);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    white-space: pre-line;
}

/* Synopsis sub-card inside Overview — visually distinct from the case
   description so the user sees this is the editable working summary. */
.ip-case-synopsis {
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--ip-surface, #f8fafc);
}
.ip-case-synopsis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ip-case-synopsis-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #64748b);
}
.ip-case-synopsis-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-case-synopsis-editor {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.55;
    background: #fff;
    color: var(--ip-text, #1e293b);
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
}
.ip-case-synopsis-readonly {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ip-text, #1e293b);
    white-space: pre-line;
}
.ip-case-synopsis-foot {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    min-height: 16px;
}

/* Entity lists — People / Places / Evidence / Theories. Lightweight
   rows; the deep editing surface is the existing casefile page. */
.ip-case-entity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ip-case-entity-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ip-border, #f1f5f9);
}
.ip-case-entity-item:last-child {
    border-bottom: none;
}
.ip-case-entity-label {
    font-size: 14px;
    color: var(--ip-text, #1e293b);
    font-weight: 500;
}
.ip-case-entity-meta {
    font-size: 12px;
    color: var(--ip-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* Notes (scratchpad) editor — generous height, doc-feel. */
.ip-case-notes-editor {
    width: 100%;
    min-height: 220px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 10px;
    background: #fff;
    color: var(--ip-text, #1e293b);
    font-size: 15px;
    line-height: 1.6;
    font-family: inherit;
    outline: none;
    cursor: text;
}
.ip-case-notes-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ip-text-muted, #94a3b8);
    pointer-events: none;
}
.ip-case-notes-readonly {
    min-height: 80px;
    padding: 14px 16px;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 10px;
    background: var(--ip-surface, #f8fafc);
    color: var(--ip-text, #1e293b);
    font-size: 15px;
    line-height: 1.6;
}
.ip-case-notes-foot {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    min-height: 16px;
}

@media (max-width: 720px) {
    .ip-case-header {
        padding: 20px 16px 16px;
    }
    .ip-case-title {
        font-size: 22px;
    }
    .ip-case-header-right {
        width: 100%;
    }
    .ip-case-doc {
        padding: 24px 16px 60px;
    }
    .ip-case-section {
        margin-bottom: 36px;
    }
    .ip-case-section-head {
        flex-wrap: wrap;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v0.3.0 (Phase 2) — SOL Side Panel
   ─────────────────────────────────────────────────────────────────────
   Persistent right-rail panel on every case-context page. Two-column
   layout helper lives at the `.ip-wrap.ip-with-sol-panel` modifier;
   pages that include the partial add this class.

   Panel collapses to an edge tab on user click and remembers state in
   localStorage. Below 1080px the panel auto-collapses by default.
   ───────────────────────────────────────────────────────────────────── */

/* v1.2.1 — two-column layout with the identity band spanning the full
   width above both columns. Previously the band was inside .ip-case-main
   (the left column), which meant the SOL panel sat to its right at the
   same vertical position. Now the band gets its own grid row that spans
   both columns, so it always sits ABOVE the panel regardless of state. */
.ip-wrap.ip-with-sol-panel {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "band band"
        "main panel";
    gap: 0;
    max-width: none;
    align-items: start;
}
.ip-wrap.ip-with-sol-panel > .ip-case-band       { grid-area: band; }
.ip-wrap.ip-with-sol-panel > .ip-case-band-edge  { /* edge tab is fixed-positioned; doesn't participate in grid */ }
.ip-wrap.ip-with-sol-panel > .ip-case-main       { grid-area: main; min-width: 0; }
.ip-wrap.ip-with-sol-panel > .ip-sol-panel       { grid-area: panel; }

body.ip-sol-panel-is-collapsed .ip-wrap.ip-with-sol-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
        "band"
        "main";
}
@media (max-width: 1080px) {
    .ip-wrap.ip-with-sol-panel {
        grid-template-columns: 1fr;
        grid-template-areas:
            "band"
            "main";
    }
}

/* The panel itself. Sticky to viewport so it travels with scroll.
   v1.2.1 — top offset accounts for the sticky identity band (44px)
   plus the unified topbar (56px). Height shrinks to match so the
   panel doesn't push past the viewport bottom. */
.ip-sol-panel {
    position: sticky;
    top: 100px;
    align-self: start;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    background: var(--ip-card-bg, #fff);
    border-left: 1px solid var(--ip-border, #e2e8f0);
    overflow: hidden;
}
.ip-sol-panel[hidden] { display: none; }

.ip-sol-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
    flex-shrink: 0;
}
.ip-sol-panel-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ip-sol-panel-brand-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
}
.ip-sol-panel-brand-tagline {
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
}
.ip-sol-panel-collapse {
    background: transparent;
    border: none;
    color: var(--ip-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 6px;
}
.ip-sol-panel-collapse:hover {
    background: var(--ip-surface-hover, #f1f5f9);
    color: var(--ip-text, #1e293b);
}

/* Edge tab — visible only when collapsed. */
.ip-sol-panel-edge {
    position: fixed;
    top: 80px;
    right: 0;
    z-index: 90;
    background: var(--ip-primary, #6366f1);
    color: #fff;
    border: none;
    padding: 10px 8px 10px 10px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    box-shadow: -2px 2px 8px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ip-sol-panel-edge[hidden] { display: none; }
.ip-sol-panel-edge:hover { background: var(--ip-primary-hover, #4f46e5); }
.ip-sol-panel-edge-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.05em;
}

/* Chat — the largest panel section. v1.2.4 — bumped min-height so
   the user can see more of the thread without scrolling. SOL's read,
   observations, stars, and activity are flex-shrink:0 (their natural
   height); chat takes the remainder via flex:1. */
.ip-sol-panel-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 460px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
}
.ip-sol-panel-chat-meta {
    padding: 6px 14px;
    font-size: 11px;
    color: var(--ip-text-muted, #94a3b8);
    border-bottom: 1px solid var(--ip-border, #f1f5f9);
    background: var(--ip-surface, #f8fafc);
    flex-shrink: 0;
}
.ip-sol-panel-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ip-sol-msg {
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ip-surface, #f8fafc);
    border: 1px solid var(--ip-border, #f1f5f9);
}
.ip-sol-msg.is-you {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.18);
}
.ip-sol-msg.is-thinking {
    opacity: 0.7;
}
.ip-sol-msg-who {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #64748b);
    margin-bottom: 4px;
}
.ip-sol-msg-when {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ip-text-muted, #94a3b8);
}
.ip-sol-msg-body {
    color: var(--ip-text, #1e293b);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.ip-sol-msg-body p { margin: 0 0 8px; }
.ip-sol-msg-body p:last-child { margin-bottom: 0; }
.ip-sol-msg-body img { max-width: 100%; height: auto; border-radius: 6px; }
.ip-sol-msg-body iframe { max-width: 100%; }

.ip-sol-panel-composer {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    background: #fff;
    flex-shrink: 0;
}
.ip-sol-panel-input {
    flex: 1;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13.5px;
    line-height: 1.4;
    font-family: inherit;
    resize: none;
    min-height: 38px;
    max-height: 140px;
    box-sizing: border-box;
}
.ip-sol-panel-send {
    background: var(--ip-primary, #6366f1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
}
.ip-sol-panel-send:hover { background: var(--ip-primary-hover, #4f46e5); }
.ip-sol-panel-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Compact sections (observations, stars, activity). */
.ip-sol-panel-section,
.ip-sol-panel-activity {
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    flex-shrink: 0;
}
.ip-sol-panel-section:last-of-type,
.ip-sol-panel-activity:last-of-type {
    border-bottom: none;
}
.ip-sol-panel-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--ip-surface, #f8fafc);
}
.ip-sol-panel-section-head h3 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ip-text-muted, #64748b);
}
.ip-sol-panel-section-refresh {
    background: transparent;
    border: none;
    color: var(--ip-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
}
.ip-sol-panel-section-refresh:hover {
    background: var(--ip-surface-hover, #f1f5f9);
    color: var(--ip-text, #1e293b);
}
.ip-sol-panel-list {
    list-style: none;
    margin: 0;
    padding: 8px 12px;
    /* v1.2.4 — tighter max so chat above keeps its vertical priority */
    max-height: 140px;
    overflow-y: auto;
}
.ip-sol-panel-list-empty {
    color: var(--ip-text-muted, #94a3b8);
    font-size: 12px;
    padding: 6px 4px;
}

/* Observation cards. */
.ip-sol-obs {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--ip-surface, #f8fafc);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
}
.ip-sol-obs:last-child { margin-bottom: 0; }
.ip-sol-obs-body {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ip-text, #1e293b);
}
.ip-sol-obs-type {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.10);
    color: var(--ip-primary, #6366f1);
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 4px;
}
.ip-sol-obs-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
.ip-sol-obs-when {
    font-size: 10.5px;
    color: var(--ip-text-muted, #94a3b8);
}
.ip-sol-obs-dismiss {
    background: transparent;
    border: none;
    color: var(--ip-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
}
.ip-sol-obs-dismiss:hover { color: var(--ip-error, #ef4444); }

/* Star + activity items — compact one-liners. */
.ip-sol-star-item,
.ip-sol-activity-item {
    padding: 5px 4px;
    font-size: 12px;
    color: var(--ip-text, #334155);
    border-bottom: 1px solid var(--ip-border, #f1f5f9);
    line-height: 1.4;
}
.ip-sol-star-item:last-child,
.ip-sol-activity-item:last-child { border-bottom: none; }
.ip-sol-star-body { color: var(--ip-text, #1e293b); }
.ip-sol-star-when,
.ip-sol-activity-when {
    font-size: 10.5px;
    color: var(--ip-text-muted, #94a3b8);
}
.ip-sol-activity-actor { font-weight: 600; }
.ip-sol-activity-verb { color: var(--ip-text-muted, #64748b); }

.ip-sol-panel-activity-list {
    list-style: none;
    margin: 0;
    padding: 8px 12px;
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v0.4.0 (Phase 3) — View modes on case page
   ─────────────────────────────────────────────────────────────────────
   Three-segment toggle in the case header. Document is the page body;
   Board + Timeline mount iframes of the existing standalone pages
   (which stay live as deep-link targets per brief). Switching shows
   and hides panes without unmounting — iframe state survives.
   ───────────────────────────────────────────────────────────────────── */

/* Toggle — three buttons styled as a segmented control. */
.ip-case-view-toggle {
    display: inline-flex;
    gap: 0;
    background: var(--ip-surface, #f1f5f9);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    padding: 3px;
    margin-right: 8px;
}
.ip-case-view-btn {
    background: transparent;
    border: none;
    color: var(--ip-text-muted, #64748b);
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background 80ms ease-out, color 80ms ease-out;
}
.ip-case-view-btn:hover {
    color: var(--ip-text, #1e293b);
}
.ip-case-view-btn.is-active {
    background: #fff;
    color: var(--ip-text, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Panes — only one visible at a time. */
.ip-case-view-pane {
    display: none;
}
.ip-case-view-pane.is-active {
    display: block;
}

/* Iframe panes — fill the available height. The unified topbar is
   ~56px tall and the case header is ~120px; leave a small bottom
   gutter so the panel isn't completely flush. */
.ip-case-view-iframe {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 540px;
    border: none;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v0.5.0 (Phase 4) — SOL action verbs in panel
   ───────────────────────────────────────────────────────────────────── */

/* Proposal card — appears inline in the chat stream after a user
   message that SOL parsed as actionable. */
.ip-sol-proposal-card {
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.04);
}
.ip-sol-proposals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ip-sol-proposal {
    background: #fff;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 12px;
}
.ip-sol-proposal.is-skipped {
    opacity: 0.4;
}
.ip-sol-proposal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.ip-sol-proposal-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.10);
    color: var(--ip-primary, #6366f1);
    padding: 1px 6px;
    border-radius: 8px;
}
.ip-sol-proposal-action {
    font-size: 11px;
    font-weight: 600;
    color: var(--ip-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ip-sol-proposal-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    margin-bottom: 4px;
}
.ip-sol-proposal-detail {
    font-size: 12.5px;
    color: var(--ip-text, #334155);
    line-height: 1.45;
    margin-bottom: 6px;
}
.ip-sol-proposal-rationale {
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
    font-style: italic;
    margin-bottom: 8px;
}
.ip-sol-proposal-actions {
    display: flex;
    gap: 6px;
}
.ip-sol-proposal-confirm,
.ip-sol-proposal-skip {
    border: 1px solid var(--ip-border, #cbd5e1);
    background: #fff;
    color: var(--ip-text, #1e293b);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ip-sol-proposal-confirm {
    border-color: var(--ip-primary, #6366f1);
    background: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-sol-proposal-confirm:hover {
    background: var(--ip-primary-hover, #4f46e5);
}
.ip-sol-proposal-confirm.is-done {
    background: var(--ip-success, #16a34a);
    border-color: var(--ip-success, #16a34a);
}
.ip-sol-proposal-confirm:disabled {
    opacity: 0.6;
    cursor: default;
}
.ip-sol-proposal-skip:hover {
    background: var(--ip-surface-hover, #f1f5f9);
}

/* Rollback strip — pinned at the top of the chat area when SOL has
   added items recently. */
.ip-sol-rollback-strip {
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.10);
    border-bottom: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 12px;
    color: var(--ip-text, #1e293b);
}
.ip-sol-rollback-strip[hidden] { display: none; }
.ip-sol-rollback-btn {
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #92400e;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
}
.ip-sol-rollback-btn:hover {
    background: rgba(245, 158, 11, 0.18);
}
.ip-sol-rollback-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v0.6.0 (Phase 5) — Deliverables
   ───────────────────────────────────────────────────────────────────── */

.ip-deliv-main {
    min-width: 0;
}

/* Template chooser grid on the list view. */
.ip-deliv-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.ip-deliv-tpl-card {
    text-align: left;
    background: var(--ip-card-bg, #fff);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.ip-deliv-tpl-card:hover {
    border-color: var(--ip-primary, #6366f1);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}
.ip-deliv-tpl-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-deliv-tpl-icon { font-size: 18px; }
.ip-deliv-tpl-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
}
.ip-deliv-tpl-meta {
    font-size: 11.5px;
    color: var(--ip-text-muted, #64748b);
}
.ip-deliv-tpl-audience {
    font-size: 12px;
    color: var(--ip-text, #334155);
    line-height: 1.4;
}

/* Legacy story migrate card. */
.ip-deliv-legacy-card {
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--ip-surface, #f8fafc);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.ip-deliv-legacy-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ip-text, #1e293b); }
.ip-deliv-legacy-hint { font-size: 12px; color: var(--ip-text-muted, #64748b); margin: 6px 0 0; }

/* Edit-mode chrome. */
.ip-deliv-edit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
.ip-deliv-edit-title {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 22px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
    padding: 4px 0;
    outline: none;
    border-bottom: 1px solid transparent;
}
.ip-deliv-edit-title:hover,
.ip-deliv-edit-title:focus {
    border-bottom-color: var(--ip-border, #cbd5e1);
}
.ip-deliv-edit-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-deliv-tpl-info {
    margin-bottom: 24px;
    padding: 8px 12px;
    background: var(--ip-surface, #f8fafc);
    border-left: 3px solid var(--ip-primary, #6366f1);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
    line-height: 1.5;
}
.ip-deliv-tpl-info-label {
    color: var(--ip-text, #1e293b);
    font-weight: 700;
}

/* Section blocks in edit mode. */
.ip-deliv-sections {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.ip-deliv-section {
    border-top: 1px solid var(--ip-border, #e2e8f0);
    padding-top: 18px;
}
.ip-deliv-section:first-child {
    border-top: none;
    padding-top: 0;
}
.ip-deliv-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.ip-deliv-section-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
}
.ip-deliv-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-deliv-section-byline {
    font-size: 11.5px;
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
}
.ip-deliv-section-instructions {
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
    margin-bottom: 10px;
    line-height: 1.5;
}
.ip-deliv-section-body {
    min-height: 80px;
    padding: 12px 14px;
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--ip-text, #1e293b);
    font-size: 15px;
    line-height: 1.6;
    outline: none;
}
.ip-deliv-section-body:focus {
    border-color: var(--ip-primary, #6366f1);
}
.ip-deliv-section-body:empty::before {
    content: "Empty — draft with " attr(data-companion) " or write here.";
    color: var(--ip-text-muted, #94a3b8);
    pointer-events: none;
}
.ip-deliv-section-foot {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--ip-text-muted, #64748b);
}
.ip-deliv-section-cites {
    padding: 6px 10px;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 6px;
    font-size: 12px;
    color: var(--ip-text, #334155);
}
.ip-deliv-section-gaps {
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.10);
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--ip-text, #334155);
}
.ip-deliv-section-gaps ul {
    margin: 4px 0 0 18px;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v0.7.0 (Phase 6) — Memory + habits
   ───────────────────────────────────────────────────────────────────── */

/* Decision capture card (in SOL panel). Mirrors proposal card visually
   but uses a warmer accent so it reads as "moment to reflect". */
.ip-sol-decision-card {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.06);
}
.ip-sol-decision-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ip-text, #0f172a);
    margin-bottom: 6px;
}
.ip-sol-decision-rationale {
    font-size: 12.5px;
    color: var(--ip-text, #334155);
    line-height: 1.45;
    margin-bottom: 10px;
    font-style: italic;
}
.ip-sol-decision-actions {
    display: flex;
    gap: 6px;
}
.ip-sol-decision-card.is-skipped { opacity: 0.4; }

/* Case page Decisions section — extra rationale line below each. */
.ip-case-dec-item {
    align-items: flex-start;
}
.ip-case-dec-rationale {
    font-size: 12.5px;
    color: var(--ip-text-muted, #64748b);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.45;
}

/* Retrospectives — collapsible details blocks. */
.ip-case-retro-item {
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--ip-surface, #f8fafc);
    margin-bottom: 10px;
}
.ip-case-retro-item summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--ip-text, #0f172a);
    list-style: none;
    padding: 2px 0;
}
.ip-case-retro-item summary::before {
    content: "▸ ";
    color: var(--ip-text-muted, #94a3b8);
}
.ip-case-retro-item[open] summary::before { content: "▾ "; }
.ip-case-retro-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ip-text, #1e293b);
}
.ip-case-retro-body h3 {
    font-size: 15px;
    margin: 14px 0 6px;
    color: var(--ip-text, #0f172a);
}
.ip-case-retro-body p { margin: 0 0 10px; }

/* Account page — profile add form. */
.ip-profile-add {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
}
.ip-profile-add input {
    flex: 1;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v1.1.0 (Phase 1.5) — Presence + interaction grammar
   ─────────────────────────────────────────────────────────────────────
   Identity band, section rail, document reorder via flex order,
   inline quick-add composers, entity row thumbnails, entity drawer,
   deep-work modal, SOL panel section dividers, recent activity strip.

   Principle 7: work stays on the case. Every interaction below is
   designed to keep the user on /cold-case-case/.
   ───────────────────────────────────────────────────────────────────── */

/* ───── Identity band ───── */
.ip-case-band {
    position: relative;
    width: 100%;
    margin: 0 0 24px;
    border-radius: 0;
    overflow: hidden;
    transition: height 180ms ease-out;
    --ip-band-image: none;
    height: 96px;
    z-index: 50;
}
.ip-case-band[data-state="default"]  { height: 96px; }
.ip-case-band[data-state="sticky"]   { height: 44px; position: sticky; top: 56px; box-shadow: 0 2px 8px rgba(15,23,42,0.10); }
.ip-case-band[data-state="expanded"] { height: auto; }

.ip-case-band-bg {
    position: absolute;
    inset: 0;
    background-image: var(--ip-band-image);
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: opacity 180ms ease-out;
}
.ip-case-band-dim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.75) 100%);
    z-index: 1;
}
.ip-case-band[data-state="sticky"] .ip-case-band-bg { opacity: 0.55; }

.ip-case-band-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    height: 100%;
    color: #fff;
}
.ip-case-band[data-state="sticky"] .ip-case-band-inner { padding: 6px 16px; gap: 10px; }

.ip-case-band-toggle {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: width 180ms, height 180ms;
}
.ip-case-band[data-state="sticky"] .ip-case-band-toggle { width: 32px; height: 32px; }
.ip-case-band-toggle:hover { background: rgba(255,255,255,0.14); }
.ip-case-band-thumb {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.ip-case-band-thumb.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(255,255,255,0.08);
}
.ip-case-band[data-state="sticky"] .ip-case-band-thumb.is-placeholder { font-size: 16px; }

.ip-case-band-titles {
    flex: 1;
    min-width: 0;
    line-height: 1.15;
}
.ip-case-band-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2px;
}
.ip-case-band[data-state="sticky"] .ip-case-band-eyebrow { display: none; }
.ip-case-band-name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-case-band[data-state="sticky"] .ip-case-band-name { font-size: 14px; font-weight: 600; }
.ip-case-band-instance {
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ip-case-band[data-state="sticky"] .ip-case-band-instance { display: none; }

.ip-case-band-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-case-band-role-pill {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
}
.ip-case-band[data-state="sticky"] .ip-case-band-role-pill { display: none; }

.ip-case-band-picker { position: relative; }
.ip-case-band-picker-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    border-radius: 16px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.ip-case-band-picker-trigger:hover { background: rgba(255,255,255,0.18); }
.ip-case-band-picker-menu {
    /* v1.1.1 — switched from absolute to fixed so the dropdown isn't
       clipped by .ip-case-band's overflow:hidden (which is required to
       keep the bg image cropped to the band). JS in initPicker sets
       top + right from getBoundingClientRect on open. */
    position: fixed;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    color: var(--ip-text, #1e293b);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.18);
    z-index: 9999;
    padding: 6px 0;
}
.ip-case-band-picker-menu[hidden] { display: none; }
.ip-case-band-picker-section {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ip-text-muted, #94a3b8);
    padding: 6px 14px 4px;
}
.ip-case-band-picker-item {
    display: block;
    padding: 8px 14px;
    color: var(--ip-text, #1e293b);
    text-decoration: none;
    font-size: 13.5px;
}
.ip-case-band-picker-item:hover { background: var(--ip-surface, #f1f5f9); }
.ip-case-band-picker-item.is-cta {
    color: var(--ip-primary, #6366f1);
    font-weight: 600;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    margin-top: 4px;
    padding-top: 10px;
}

.ip-case-band-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-case-band[data-state="sticky"] .ip-case-band-actions .ip-case-band-action { display: none; }
.ip-case-band-action,
.ip-case-band-classic {
    color: #fff !important;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
}
.ip-case-band-action:hover,
.ip-case-band-classic:hover { background: rgba(255,255,255,0.18); }
.ip-case-band[data-state="sticky"] .ip-case-band-classic { display: none; }

/* View toggle inside band — restyle the existing buttons against the
   dark band background. */
.ip-case-band .ip-case-view-toggle {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 2px;
    border-radius: 6px;
    margin: 0;
}
.ip-case-band .ip-case-view-btn {
    color: rgba(255,255,255,0.75);
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 11.5px;
    border-radius: 4px;
}
.ip-case-band .ip-case-view-btn:hover { color: #fff; }
.ip-case-band .ip-case-view-btn.is-active {
    background: #fff;
    color: var(--ip-text, #0f172a);
}

/* Expanded hero — full image + album + read-aloud. */
.ip-case-band-hero {
    position: relative;
    z-index: 3;
    background: rgba(15, 23, 42, 0.92);
    padding: 18px 24px 18px;
    color: #fff;
}
.ip-case-band-hero-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.ip-case-band-hero-image {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.ip-case-band-hero-image.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}
.ip-case-band-hero-meta { flex: 1; min-width: 0; }
.ip-case-band-hero-name {
    margin: 0 0 6px;
    font-size: 24px;
    color: #fff;
}
.ip-case-band-hero-blurb {
    margin: 0 0 12px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    line-height: 1.55;
}
.ip-case-band-hero-play {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.24);
    color: #fff;
    border-radius: 16px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ip-case-band-hero-play:hover { background: rgba(255,255,255,0.20); }

.ip-case-band-hero-album {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
}
.ip-case-band-hero-thumb {
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.ip-case-band-hero-thumb:hover { border-color: rgba(255,255,255,0.45); }

.ip-case-band-hero-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.ip-case-band-hero-close:hover { background: rgba(255,255,255,0.20); }

/* ───── Section rail + doc layout (v1.2.0 — narrow filter strip) ───── */
.ip-case-doc-layout {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .ip-case-doc-layout { grid-template-columns: 1fr; }
    .ip-case-rail { display: none; }
}

.ip-case-rail {
    position: sticky;
    /* v1.2.1 — sit below sticky band (56 topbar + 44 sticky band) + breathing */
    top: 116px;
    align-self: start;
    padding: 6px 0;
    border-right: 1px solid var(--ip-border, #e2e8f0);
}
/* v1.2.1 — wrap container so the partial is a single grid item. */
.ip-case-rail-wrap {
    align-self: start;
}
.ip-case-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ip-case-rail-divider {
    height: 0;
    margin: 6px 12px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    list-style: none;
}
.ip-case-rail-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    color: var(--ip-text-muted, #64748b);
    text-decoration: none;
    transition: color 100ms, background 100ms;
    border-radius: 6px;
    position: relative;
}
.ip-case-rail-link:hover {
    color: var(--ip-text, #1e293b);
    background: var(--ip-surface, #f8fafc);
}
.ip-case-rail-link.is-active {
    color: var(--ip-primary, #6366f1);
    background: rgba(99,102,241,0.08);
}
.ip-case-rail-link.is-active::before {
    /* Active accent — left vertical bar in the brand color */
    content: "";
    position: absolute;
    left: -1px; /* sit on the rail's right border */
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--ip-primary, #6366f1);
    border-radius: 1px;
}
.ip-case-rail-icon {
    width: 18px;
    height: 18px;
    display: block;
    color: inherit;
}
.ip-case-rail-count {
    font-size: 10px;
    color: var(--ip-text-muted, #94a3b8);
    font-weight: 600;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 6px;
    background: transparent;
}
.ip-case-rail-link.is-active .ip-case-rail-count {
    color: var(--ip-primary, #6366f1);
}

/* ───── Filter mode (hide non-matching sections) ───── */
.ip-case-doc.is-filtered .ip-case-section { display: none; }
.ip-case-doc.is-filtered[data-active-section="overview"]       .ip-case-section[id="overview"],
.ip-case-doc.is-filtered[data-active-section="notes"]          .ip-case-section[id="notes"],
.ip-case-doc.is-filtered[data-active-section="theories"]       .ip-case-section[id="theories"],
.ip-case-doc.is-filtered[data-active-section="open-questions"] .ip-case-section[id="open-questions"],
.ip-case-doc.is-filtered[data-active-section="decisions"]      .ip-case-section[id="decisions"],
.ip-case-doc.is-filtered[data-active-section="people"]         .ip-case-section[id="people"],
.ip-case-doc.is-filtered[data-active-section="places"]         .ip-case-section[id="places"],
.ip-case-doc.is-filtered[data-active-section="evidence"]       .ip-case-section[id="evidence"],
.ip-case-doc.is-filtered[data-active-section="description"]    .ip-case-section[id="description"],
.ip-case-doc.is-filtered[data-active-section="activity"]       .ip-case-section[id="activity"] { display: block; }

/* Show-all bar — appears above the filtered section. */
.ip-case-show-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    margin: 0 0 16px;
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ip-text, #1e293b);
}
.ip-case-show-all[hidden] { display: none; }
.ip-case-show-all-label { font-weight: 600; }
.ip-case-show-all-btn {
    background: transparent;
    border: 1px solid var(--ip-primary, #6366f1);
    color: var(--ip-primary, #6366f1);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ip-case-show-all-btn:hover {
    background: var(--ip-primary, #6366f1);
    color: #fff;
}

/* ───── Document order via flex order (v1.2.0 Think/Gather/Reference) ───── */
/* Source order doesn't matter; CSS dictates visual order per
   Phase 1.5 refinement note. Synopsis pinned at top above three
   groups: Think (cognitive work), Gather (reference material),
   Reference (static content). Hairline dividers between groups
   come from the [data-group-divider] pseudo-elements below. */
.ip-case-doc {
    display: flex;
    flex-direction: column;
}
.ip-case-section { order: 99; }
/* Pinned overview */
.ip-case-section[id="overview"]       { order:  1; }
/* Think */
.ip-case-section[id="notes"]          { order: 10; }
.ip-case-section[id="theories"]       { order: 11; }
.ip-case-section[id="open-questions"] { order: 12; }
.ip-case-section[id="decisions"]      { order: 13; }
.ip-case-section[id="retrospectives"] { order: 14; }
/* Gather */
.ip-case-section[id="people"]         { order: 20; }
.ip-case-section[id="places"]         { order: 21; }
.ip-case-section[id="evidence"]       { order: 22; }
/* Reference */
.ip-case-section[id="description"]    { order: 30; }
.ip-case-section[id="activity"]       { order: 31; }

/* Hairline dividers between groups in the document column. Same
   visual grammar as the rail dividers. Implemented with top-borders
   on the first section of each group. */
.ip-case-doc:not(.is-filtered) .ip-case-section[id="notes"],
.ip-case-doc:not(.is-filtered) .ip-case-section[id="people"],
.ip-case-doc:not(.is-filtered) .ip-case-section[id="description"] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
}

/* ───── Entity rows: clickable button with thumbnail ───── */
.ip-case-entity-item { padding: 0; }
.ip-case-entity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ip-border, #f1f5f9);
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    border-radius: 4px;
    transition: background 80ms ease-out;
}
.ip-case-entity-row:hover {
    background: var(--ip-surface, #f8fafc);
}
.ip-case-entity-item:last-child .ip-case-entity-row { border-bottom: none; }

.ip-case-entity-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--ip-surface, #f1f5f9);
    border: 1px solid var(--ip-border, #e2e8f0);
    display: inline-block;
}
.ip-case-entity-thumb.is-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--ip-text-muted, #94a3b8);
}

/* Section header actions cluster — make room for + Add button. */
.ip-case-section-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ip-case-section-add {
    background: transparent;
    border: 1px dashed var(--ip-border, #cbd5e1);
    color: var(--ip-text-muted, #64748b);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 100ms ease-out;
}
.ip-case-section-add:hover {
    color: var(--ip-primary, #6366f1);
    border-color: var(--ip-primary, #6366f1);
    background: rgba(99,102,241,0.05);
}
.ip-case-section-add[aria-expanded="true"] {
    background: var(--ip-primary, #6366f1);
    color: #fff;
    border-style: solid;
    border-color: var(--ip-primary, #6366f1);
}

/* Inline quick-add composer. */
.ip-case-quickadd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    margin: 8px 0 12px;
    background: var(--ip-surface, #f8fafc);
    border: 1px solid var(--ip-border, #e2e8f0);
    border-radius: 8px;
}
.ip-case-quickadd[hidden] { display: none; }
.ip-case-quickadd-input {
    flex: 1;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13.5px;
    background: #fff;
    font-family: inherit;
}
.ip-case-quickadd-type {
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    background: #fff;
    font-family: inherit;
    max-width: 180px;
}
.ip-case-quickadd textarea.ip-case-quickadd-input {
    min-height: 50px;
    line-height: 1.4;
    resize: vertical;
}

/* ───── Activity strip ───── */
.ip-case-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ip-case-activity-item {
    padding: 6px 6px;
    font-size: 13px;
    color: var(--ip-text, #334155);
    border-bottom: 1px solid var(--ip-border, #f1f5f9);
}
.ip-case-activity-item:last-child { border-bottom: none; }
.ip-case-activity-actor { font-weight: 600; }
.ip-case-activity-verb  { color: var(--ip-text-muted, #64748b); }
.ip-case-activity-desc  { color: var(--ip-text-muted, #475569); }
.ip-case-activity-when  { color: var(--ip-text-muted, #94a3b8); font-size: 11.5px; }

/* ───── Entity drawer ───── */
.ip-entity-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.30);
    z-index: 9400;
    backdrop-filter: blur(1px);
}
.ip-entity-drawer-backdrop[hidden] { display: none; }
.ip-entity-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 92vw;
    background: #fff;
    z-index: 9450;
    box-shadow: -8px 0 24px rgba(15,23,42,0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 200ms ease-out;
}
.ip-entity-drawer[hidden] { display: none; }
body.ip-drawer-open .ip-sol-panel { display: none; }

.ip-entity-drawer-head {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    position: relative;
}
.ip-entity-drawer-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ip-text-muted, #94a3b8);
    margin-bottom: 4px;
}
.ip-entity-drawer-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--ip-text, #0f172a);
    padding-right: 32px;
}
.ip-entity-drawer-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--ip-text-muted, #94a3b8);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
.ip-entity-drawer-close:hover {
    background: var(--ip-surface-hover, #f1f5f9);
    color: var(--ip-text, #1e293b);
}
.ip-entity-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
}
.ip-entity-drawer-loading,
.ip-entity-drawer-error {
    color: var(--ip-text-muted, #64748b);
    text-align: center;
    padding: 40px 0;
}
.ip-entity-drawer-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ip-entity-drawer-image img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 4px;
}
.ip-entity-drawer-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ip-text-muted, #64748b);
    margin-bottom: -4px;
}
.ip-entity-drawer-input,
.ip-entity-drawer-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--ip-border, #cbd5e1);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.ip-entity-drawer-textarea { line-height: 1.5; resize: vertical; min-height: 80px; }
.ip-entity-drawer-byline {
    font-size: 11.5px;
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid var(--ip-border, #f1f5f9);
    margin-top: 8px;
}
.ip-entity-drawer-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
    font-size: 12px;
}
.ip-entity-drawer-save-status {
    color: var(--ip-text-muted, #64748b);
}
.ip-entity-drawer-deep-link {
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
    font-size: 12.5px;
}
.ip-entity-drawer-deep-link:hover { text-decoration: underline; }

/* ───── Deep-work modal ───── */
.ip-case-modal {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.ip-case-modal[hidden] { display: none; }
.ip-case-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.60);
    backdrop-filter: blur(2px);
}
.ip-case-modal-card {
    position: relative;
    margin: 20px auto;
    width: min(1200px, 96vw);
    height: calc(100vh - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ip-case-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    background: var(--ip-surface, #f8fafc);
    flex-shrink: 0;
}
.ip-case-modal-title { margin: 0; font-size: 16px; color: var(--ip-text, #0f172a); }
.ip-case-modal-close {
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--ip-text-muted, #94a3b8);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
}
.ip-case-modal-close:hover {
    background: var(--ip-surface-hover, #f1f5f9);
    color: var(--ip-text, #1e293b);
}
.ip-case-modal-iframe {
    border: none;
    width: 100%;
    flex: 1;
    background: #fff;
}
body.ip-modal-open { overflow: hidden; }

/* ───── SOL panel — stronger section dividers (Phase 1.5 polish) ───── */
.ip-sol-panel-chat       { border-left: 3px solid var(--ip-primary, #6366f1); border-bottom-width: 4px; }
#ip-sol-panel-observations { border-left: 3px solid #f59e0b; }
#ip-sol-panel-stars        { border-left: 3px solid #eab308; }
#ip-sol-panel-activity     { border-left: 3px solid #94a3b8; }
.ip-sol-panel-section-head h3,
.ip-sol-panel-chat-meta {
    border-left: none; /* keep section headers themselves clean */
}

/* ─────────────────────────────────────────────────────────────────────
   Intelleqt v1.2.0 (Phase 1.5 refinement) — SOL's read + theory link
   ───────────────────────────────────────────────────────────────────── */

/* SOL's read subsection — sits above chat. v1.2.4 — compacted:
   actions live as icon-only buttons in the header, no footer, smaller
   max-height. Chat below gets the freed vertical space. */
.ip-sol-read {
    border-bottom: 1px solid var(--ip-border, #e2e8f0);
    background: rgba(99, 102, 241, 0.05);
    flex-shrink: 0;
}
.ip-sol-read-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
    gap: 8px;
}
.ip-sol-read-head h3 {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ip-primary, #6366f1);
}
.ip-sol-read-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ip-sol-read-meta {
    font-size: 10.5px;
    color: var(--ip-text-muted, #94a3b8);
    margin-right: 4px;
}
.ip-sol-read-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--ip-border, #cbd5e1);
    background: #fff;
    color: var(--ip-text, #475569);
    border-radius: 5px;
    cursor: pointer;
    transition: all 100ms ease-out;
}
.ip-sol-read-icon-btn:hover {
    background: var(--ip-surface-hover, #f1f5f9);
    color: var(--ip-text, #1e293b);
}
.ip-sol-read-icon-btn-primary {
    border-color: var(--ip-primary, #6366f1);
    background: var(--ip-primary, #6366f1);
    color: #fff;
}
.ip-sol-read-icon-btn-primary:hover {
    background: var(--ip-primary-hover, #4f46e5);
    color: #fff;
}
.ip-sol-read-icon-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.ip-sol-read-body {
    padding: 4px 12px 10px;
    min-height: 40px;
    max-height: 100px;
    overflow-y: auto;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ip-text, #1e293b);
    outline: none;
    cursor: text;
}
.ip-sol-read-body:empty::before {
    content: attr(data-placeholder);
    color: var(--ip-text-muted, #94a3b8);
    font-style: italic;
}

/* Theory row "View on Board" link — appears at the right edge of
   a theory entity row. Visible on hover or focus to avoid clutter. */
.ip-case-section[id="theories"] .ip-case-entity-row {
    position: relative;
}
.ip-case-theory-view-board {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--ip-primary, #6366f1);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 100ms ease-out;
}
.ip-case-section[id="theories"] .ip-case-entity-item:hover .ip-case-theory-view-board,
.ip-case-section[id="theories"] .ip-case-entity-item:focus-within .ip-case-theory-view-board {
    opacity: 1;
}
.ip-case-theory-view-board:hover {
    background: rgba(99,102,241,0.10);
}

/* End of Design System v1 ──────────────────────────────────────────── */