/*
 * ChatClipThat modal system
 *
 * Every modal is upgraded to these primitives by modal-system.js. Feature
 * styles may control their own content layout; the shell, type, spacing,
 * actions, motion and focus treatment live here.
 */
:root {
  --cct-modal-backdrop: rgba(2, 3, 12, 0.8);
  --cct-modal-surface: linear-gradient(145deg, rgba(18, 18, 45, 0.99), rgba(29, 26, 58, 0.99));
  --cct-modal-border: rgba(139, 92, 246, 0.32);
  --cct-modal-divider: rgba(167, 139, 250, 0.14);
  --cct-modal-text: #f8fafc;
  --cct-modal-muted: #a8b2c7;
  --cct-modal-radius: 16px;
  --cct-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.62), 0 0 48px rgba(99, 102, 241, 0.12);
  --cct-modal-pad-x: 24px;
  --cct-modal-pad-y: 22px;
  --cct-modal-control-height: 42px;
}

.cct-modal-overlay.cct-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--cct-modal-backdrop);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}

.cct-modal-overlay.cct-modal-overlay.is-open,
.cct-modal-overlay.cct-modal-overlay.open,
.cct-modal-overlay.cct-modal-overlay.active {
  animation: cct-modal-fade-in 180ms ease-out both;
}

.cct-modal.cct-modal {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 500px);
  max-height: min(90vh, 900px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cct-modal-text);
  background: var(--cct-modal-surface);
  border: 1px solid var(--cct-modal-border);
  border-radius: var(--cct-modal-radius);
  box-shadow: var(--cct-modal-shadow);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transform-origin: center;
  animation: cct-modal-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cct-modal.cct-modal::before {
  content: '';
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, #6366f1, #8b5cf6 56%, #a78bfa);
}

.cct-modal.cct-modal--sm { width: min(100%, 420px); }
.cct-modal.cct-modal--wide { width: min(100%, 800px); }

.cct-modal__header.cct-modal__header {
  box-sizing: border-box;
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: calc(var(--cct-modal-pad-y) + 2px) var(--cct-modal-pad-x) var(--cct-modal-pad-y);
  color: var(--cct-modal-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cct-modal-divider);
}

.cct-modal__icon.cct-modal__icon {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #c4b5fd;
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.14));
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 12px;
}

.cct-modal__icon.cct-modal__icon svg,
.cct-modal__icon.cct-modal__icon i {
  width: 21px;
  height: 21px;
  margin: 0;
  color: currentColor;
  font-size: 19px;
}

.cct-modal__heading.cct-modal__heading {
  min-width: 0;
  flex: 1;
  margin: 0;
}

.cct-modal__title.cct-modal__title,
.cct-modal__header.cct-modal__header > h2,
.cct-modal__header.cct-modal__header > h3 {
  margin: 0;
  color: var(--cct-modal-text);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.cct-modal__subtitle.cct-modal__subtitle {
  margin: 4px 0 0;
  color: var(--cct-modal-muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
}

.cct-modal__close.cct-modal__close {
  display: inline-flex;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 auto;
  padding: 0;
  color: #a8b2c7;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.cct-modal__close.cct-modal__close:hover {
  color: #fff;
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.32);
  transform: translateY(-1px);
}

.cct-modal__body.cct-modal__body {
  box-sizing: border-box;
  max-height: calc(90vh - 154px);
  margin: 0;
  padding: var(--cct-modal-pad-y) var(--cct-modal-pad-x);
  overflow: auto;
  color: var(--cct-modal-muted);
  scrollbar-color: rgba(139, 92, 246, 0.5) transparent;
}

.cct-modal__body.cct-modal__body > :first-child { margin-top: 0; }
.cct-modal__body.cct-modal__body > :last-child { margin-bottom: 0; }

.cct-modal__actions.cct-modal__actions {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 16px var(--cct-modal-pad-x) var(--cct-modal-pad-y);
  background: rgba(3, 5, 18, 0.16);
  border: 0;
  border-top: 1px solid var(--cct-modal-divider);
}

.cct-modal__button.cct-modal__button {
  box-sizing: border-box;
  display: inline-flex;
  min-height: var(--cct-modal-control-height);
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 1px solid rgba(167, 139, 250, 0.42);
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(99, 102, 241, 0.24);
  cursor: pointer;
  font: 700 0.875rem/1 'Inter', system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease, background 160ms ease;
}

.cct-modal__button.cct-modal__button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cct-modal__button.cct-modal__button:active { transform: translateY(0); }
.cct-modal__button.cct-modal__button:disabled { cursor: not-allowed; filter: none; opacity: 0.5; transform: none; }

.cct-modal__button.cct-modal__button--secondary {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.cct-modal__button.cct-modal__button--secondary:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }

.cct-modal__button.cct-modal__button--danger {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border-color: rgba(248, 113, 113, 0.48);
  box-shadow: 0 5px 16px rgba(220, 38, 38, 0.22);
}

.cct-modal.cct-modal input:not([type='checkbox']):not([type='radio']),
.cct-modal.cct-modal textarea,
.cct-modal.cct-modal select {
  box-sizing: border-box;
  color: #e2e8f0;
  background: rgba(15, 18, 43, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  outline: 0;
}

.cct-modal.cct-modal input:not([type='checkbox']):not([type='radio']):focus,
.cct-modal.cct-modal textarea:focus,
.cct-modal.cct-modal select:focus {
  border-color: rgba(167, 139, 250, 0.68);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13);
}

.cct-modal.cct-modal :focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

/* Editor dialogs retain their workspace geometry while sharing the shell. */
.cct-modal-overlay.cct-modal-overlay--fullscreen { padding: 0; }
.cct-modal.cct-modal--fullscreen {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
}
.cct-modal.cct-modal--fullscreen > .cct-modal__body,
.cct-modal.cct-modal--fullscreen .edit-modal-body.cct-modal__body {
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: inherit;
}

/* A few legacy pages use an id-qualified modal selector. Keep the shared
   surface authoritative without leaking id-specific styling elsewhere. */
#emailModal > .cct-modal.cct-modal {
  background: var(--cct-modal-surface);
  border: 1px solid var(--cct-modal-border);
  border-radius: var(--cct-modal-radius);
  box-shadow: var(--cct-modal-shadow);
  overflow: hidden;
}
#emailModal.cct-modal-overlay.cct-modal-overlay {
  z-index: 100000;
  padding: 20px;
  background: var(--cct-modal-backdrop);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Media lightboxes should frame the media, not add a second card around it. */
.cct-modal-overlay.cct-modal-overlay--lightbox { background: rgba(1, 2, 10, 0.92); }
.cct-modal.cct-modal--lightbox {
  width: auto;
  max-width: min(92vw, 1400px);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.cct-modal.cct-modal--lightbox::before { display: none; }

/* Bottom sheets use the same surface, type and controls with sheet geometry. */
.cct-modal-overlay.cct-modal-overlay--sheet {
  align-items: flex-end;
  padding: 0;
  background: rgba(2, 3, 12, 0.68);
}
.cct-modal.cct-modal--sheet {
  width: 100%;
  max-width: none;
  max-height: min(86vh, 760px);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 20px 20px 0 0;
  animation-name: cct-modal-sheet-enter;
}

@keyframes cct-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cct-modal-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cct-modal-sheet-enter {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  :root { --cct-modal-pad-x: 18px; --cct-modal-pad-y: 18px; }
  .cct-modal-overlay.cct-modal-overlay { padding: 12px; }
  .cct-modal.cct-modal:not(.cct-modal--fullscreen):not(.cct-modal--sheet) { width: 100%; max-height: 92vh; }
  .cct-modal__header.cct-modal__header { min-height: 68px; }
  .cct-modal__actions.cct-modal__actions { flex-direction: column-reverse; }
  .cct-modal__actions.cct-modal__actions > .cct-modal__button { width: 100%; }
  .cct-modal-overlay.cct-modal-overlay--sheet { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cct-modal-overlay.cct-modal-overlay,
  .cct-modal.cct-modal { animation-duration: 1ms !important; }
}