/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 4px;
}

.skeleton-shimmer-violet {
  background: linear-gradient(90deg, var(--color-violet-100) 25%, var(--color-violet-200) 50%, var(--color-violet-100) 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 4px;
}

.skeleton-shimmer-olive {
  background: linear-gradient(90deg, var(--color-olive-200) 25%, var(--color-olive-300) 50%, var(--color-olive-200) 75%);
  background-size: 1200px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 4px;
}

/* Modal animations — smooth open and reverse close.
   Apply .modal-overlay to any modal backdrop div managed by a Stimulus controller.
   The controller must toggle .modal-open (with requestAnimationFrame on open,
   and a 200ms setTimeout on close to let the transition finish). */
.modal-overlay {
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.modal-overlay.modal-open {
  opacity: 1;
}

.modal-overlay > div {
  transform: scale(0.95) translateY(8px);
  opacity: 0;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease-out;
  will-change: transform, opacity;
}
.modal-overlay.modal-open > div {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Tray variant — slides up from the bottom as a full-width sheet.
   Apply `.modal-overlay--tray` alongside `.modal-overlay` and size the
   panel itself with bottom-anchored insets (e.g. inset-x-0 bottom-0 top-16).
   Opted into per-modal; most modals keep the default centered-pop behavior. */
.modal-overlay.modal-overlay--tray > div {
  transform: translateY(100%);
  opacity: 1;
  transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-overlay.modal-overlay--tray.modal-open > div {
  transform: translateY(0);
}

/* CMD+K palette active row */
.cmdk-item { cursor: pointer; }
.cmdk-item:hover { background-color: var(--color-zinc-50); }
.cmdk-item.cmdk-active { background-color: var(--color-zinc-100); }

/* Calendar day with an existing 1:1 — light green background tint */
.calendar-day-busy:not(.cal-selected):not(.cal-today) {
  background-color: #c4b5fd; /* violet-300 — light violet, solid */
  color: #3B00C0;            /* brand-violet-deep */
}

.calendar-day-busy:not(.cal-selected):not(.cal-today):hover {
  background-color: #a78bfa; /* violet-400 */
}

/* When today has a meeting, hang a violet violator off the corner */
.calendar-day-busy.cal-today::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: #7B3FFF; /* brand-violet-light — solid so it covers the circle beneath */
  border: 2px solid white;
  pointer-events: none;
}

/* Mora personality speech bubble — left-pointing tail via ::before triangle */
.mora-bubble {
  position: relative;
}
.mora-bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid white;
}

/* PIP notes editor */
.pip-editor {
  background-color: white;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 1rem;
  height: 100%;
  overflow-y: auto;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.75;
}

/* trix-toolbar is a sibling of trix-editor, so scope via the wrapper */
.pip-editor-wrapper trix-toolbar,
.notes-editor-wrapper trix-toolbar {
  display: none !important;
}

.pip-editor::placeholder {
  color: #94a3b8;
}

.pip-editor ul,
.pip-editor ol,
.notes-editor-wrapper trix-editor ul,
.notes-editor-wrapper trix-editor ol {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}

.pip-editor ul li,
.notes-editor-wrapper trix-editor ul li { list-style-type: disc !important; }
.pip-editor ol li,
.notes-editor-wrapper trix-editor ol li { list-style-type: decimal !important; }
.pip-editor li::marker,
.notes-editor-wrapper trix-editor li::marker { color: #64748b; }

.pip-editor h1,
.pip-editor h2,
.pip-editor h3,
.pip-editor h4 {
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  color: #0f172a !important;
  margin-top: 1.25em !important;
  margin-bottom: 0.25em !important;
}

/* Floating format toolbar */
.ft-bar {
  background-color: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: opacity 0.1s ease;
}

.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.1s, background-color 0.1s;
}

.ft-btn:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.1);
}

.ft-btn.is-active {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.15);
}

.ft-sep {
  display: block;
  width: 1px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0 2px;
}

/* ===== Picture-in-Picture (PIP) ============================================
 * Header + minimized strip share the meeting-mode superbar treatment:
 * dark zinc-900 base with the same diagonal violet/amber blob gradient
 * used in app/assets/tailwind/components/meeting-mode.css. Body stays
 * white so notes are readable; footer stays light so it reads as a
 * separate region from the header.
 * =========================================================================== */
.pip-window   { background: #ffffff; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05); }
.pip-header   {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(124, 58, 237, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(251, 146, 60, 0.18) 0%, transparent 60%),
    #18181b;
  border-bottom: 1px solid #3f3f46;
  color: #f4f4f5;
}
.pip-body     { background: #ffffff; }
.pip-footer   { background: #f8fafc; border-top: 1px solid #f1f5f9; }
.pip-min      {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(124, 58, 237, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(251, 146, 60, 0.18) 0%, transparent 60%),
    #18181b;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  color: #f4f4f5;
}
.pip-min:hover { filter: brightness(1.1); }

/* Text inside the dark header / minimized bar. pip-text-faint is
   reserved for the light footer copy and stays muted-dark. */
.pip-header .pip-text-primary,
.pip-min    .pip-text-primary { color: #f4f4f5; }
.pip-header .pip-text-muted,
.pip-min    .pip-text-muted   { color: #a1a1aa; }
.pip-text-faint               { color: #94a3b8; }

.pip-header .pip-icon-btn,
.pip-min    .pip-icon-btn {
  color: rgba(255, 255, 255, 0.65);
  border-radius: 0.25rem;
  padding: 0.25rem;
  transition: background 0.1s;
  cursor: pointer;
}
.pip-header .pip-icon-btn:hover,
.pip-min    .pip-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

.pip-action-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3125rem 0.75rem; font-size: 0.75rem; font-weight: 500;
  border-radius: 0.375rem; border: 1px solid #e2e8f0;
  background: #ffffff; color: #374151; cursor: pointer; transition: background 0.1s;
}
.pip-action-btn:hover { background: #f8fafc; }


/* ─── Slash command menu (used by document_editor_controller) ──────────────
 * Goal/Topic block insertion was removed from notes; this menu is now
 * formatting-only (headings, lists, quote, divider) and rendered by
 * the writing-studio editor.
 * ──────────────────────────────────────────────────────────────────────── */

.slash-menu {
  background: white;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 4px;
  min-width: 200px;
  font-size: 0.875rem;
}

.slash-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  color: #3f3f46;
  font-size: 0.875rem;
}

.slash-menu__item:hover,
.slash-menu__item--active {
  background: #f4f4f5;
  color: #18181b;
}

.slash-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #71717a;
}