/* Cicero Schools — shared interaction styles. */

/* ---------- MENU (3-dot popover) ---------- */
.cicero-menu {
  position: fixed;
  min-width: 220px;
  max-width: 280px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  box-shadow:
    0 12px 40px rgba(20, 30, 60, 0.16),
    0 2px 8px rgba(20, 30, 60, 0.06);
  padding: 6px;
  font-family: Inter, system-ui, sans-serif;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}
.cicero-menu--open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cicero-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1a1d24;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}
.cicero-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.cicero-menu-item:active {
  background: rgba(0, 0, 0, 0.08);
}
.cicero-menu-item.is-destructive {
  color: #C43C3C;
}
.cicero-menu-icon {
  width: 22px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cicero-menu-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cicero-menu-sub {
  font-size: 11px;
  font-weight: 500;
  color: #7A7A7A;
  letter-spacing: 0;
}
.cicero-menu-item.is-destructive .cicero-menu-sub { color: #B25050; }
.cicero-menu-sep {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 4px 8px;
}

/* ---------- TOAST ---------- */
.cicero-toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(40px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 14px;
  background: #1a1d24;
  color: white;
  border-radius: 14px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow:
    0 12px 32px rgba(20, 30, 60, 0.2),
    0 2px 8px rgba(20, 30, 60, 0.1);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10000;
  max-width: 90vw;
  pointer-events: auto;
}
.cicero-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cicero-toast-icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.cicero-toast--success .cicero-toast-icon { background: #30D158; color: #0A2A14; }
.cicero-toast--warn .cicero-toast-icon { background: #FFD84D; color: #3a2d00; }
.cicero-toast--error .cicero-toast-icon { background: #FF6B6B; color: #2A0A0A; }
.cicero-toast-action {
  margin-left: 8px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  color: white;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.cicero-toast-action:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- MODAL ---------- */
.cicero-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 60, 0);
  backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.22s ease, backdrop-filter 0.22s ease, background 0.22s ease;
}
.cicero-modal-overlay.cicero-modal--open {
  opacity: 1;
  background: rgba(20, 30, 60, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cicero-modal {
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 24px 60px rgba(20, 30, 60, 0.18), 0 4px 16px rgba(20, 30, 60, 0.08);
  width: min(480px, calc(100vw - 40px));
  max-height: 86vh;
  overflow: hidden;
  font-family: Inter, -apple-system, system-ui, sans-serif;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.cicero-modal-overlay.cicero-modal--open .cicero-modal { transform: translateY(0) scale(1); }
.cicero-modal-head { padding: 22px 24px 0; }
.cicero-modal-title { font-size: 18px; font-weight: 700; color: #1d1d1f; letter-spacing: -0.015em; }
.cicero-modal-sub { font-size: 13px; font-weight: 500; color: #6e6e73; margin-top: 4px; letter-spacing: -0.005em; }
.cicero-modal-body { padding: 20px 24px; overflow-y: auto; }
.cicero-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #FBFBFD;
}
.cicero-modal-btn {
  padding: 9px 16px; border-radius: 10px; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
  letter-spacing: -0.005em;
}
.cicero-modal-btn--ghost { background: transparent; color: #1d1d1f; }
.cicero-modal-btn--ghost:hover { background: rgba(0, 0, 0, 0.04); }
.cicero-modal-btn--primary { background: #1d1d1f; color: white; }
.cicero-modal-btn--primary:hover { background: #000; }
.cicero-modal-btn--primary.is-destructive { background: #C43C3C; }
.cicero-modal-btn--primary.is-destructive:hover { background: #8C1F15; }

.cicero-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cicero-field:last-child { margin-bottom: 0; }
.cicero-field label {
  font-size: 12px; font-weight: 600; color: #6e6e73;
  letter-spacing: -0.005em;
}
.cicero-field input,
.cicero-field textarea,
.cicero-field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #E5E5EA;
  background: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.005em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cicero-field input:focus,
.cicero-field textarea:focus,
.cicero-field select:focus {
  outline: none;
  border-color: #1d1d1f;
  box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.08);
}
.cicero-field textarea { resize: vertical; min-height: 84px; font-family: inherit; line-height: 1.5; }

/* ---------- SIDEBAR PLACEHOLDER (non-built pages) ---------- */
.nav-item[href="#"],
.nav-item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.nav-item[href="#"]::after {
  content: 'soon';
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  color: #86868b;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* New-feature badge (appears next to "AI Inbox" etc.) */
.nav-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  background: #FFD84D;
  color: #3a2d00;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-item.active .nav-badge { background: #FFD84D; color: #3a2d00; }

/* Sidebar icon — hosts inline SVG glyph */
.nav-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #86868b;
}
.nav-item.active .nav-icon { color: white; }
.nav-icon svg { display: block; }

/* ---------- CONFETTI ---------- */
.cicero-confetti {
  position: fixed;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 10001;
  animation: cicero-confetti-fly 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cicero-confetti-fly {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  20%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 240px)) rotate(var(--rot)); opacity: 0; }
}

/* ---------- GENERIC MOTION HELPERS ---------- */
/* Shake left-right (for errors) */
@keyframes cicero-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.cicero-shake { animation: cicero-shake 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); }

/* Pop-in scale for freshly rendered cards */
@keyframes cicero-pop {
  0%   { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.cicero-pop { animation: cicero-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

/* Slide-out for removal */
@keyframes cicero-slide-out {
  from { opacity: 1; transform: translateX(0); max-height: 80px; margin-bottom: 4px; padding-top: 10px; padding-bottom: 10px; }
  to   { opacity: 0; transform: translateX(30px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
.cicero-slide-out { animation: cicero-slide-out 0.28s cubic-bezier(0.76, 0, 0.24, 1) forwards; overflow: hidden; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .cicero-menu, .cicero-toast, .cicero-confetti,
  .cicero-shake, .cicero-pop, .cicero-slide-out {
    animation: none !important;
    transition: none !important;
  }
}