/*
 * 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.
 */

.appiro-thinking-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  animation: appiro-thinking 1.4s ease-in-out infinite;
}

.intake-shell { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.intake-header { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; padding: 0 1.25rem; border-bottom: 1px solid #e2e8f0; }
.intake-columns { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; }
.intake-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.intake-plan { min-width: 0; overflow: auto; padding: 1.25rem; background: #fafaf9; border-left: 1px solid #e2e8f0; }
.intake-tabs { display: none; }
.intake-conversation-list { display: none; min-height: 0; overflow-y: auto; padding: 1.5rem 1rem; border-right: 1px solid #e2e8f0; background: #f8fafc; }
tr[data-draft-changed="true"] { background: #ecfdf5; }
@media (min-width: 1100px) {
  .intake-columns.has-plan { grid-template-columns: minmax(340px, 30%) minmax(0, 1fr); }
  .intake-columns.has-conversation-list { grid-template-columns: 260px minmax(0, 1fr); }
  .intake-conversation-list { display: block; }
  .conversation-menu.has-sidebar { display: none; }
}
@media (max-width: 1099px) {
  .intake-tabs { display: flex; flex-shrink: 0; gap: .5rem; padding: .5rem 1rem; border-bottom: 1px solid #e2e8f0; }
  .intake-tabs button { flex: 1; padding: .5rem; border-radius: .5rem; font-size: .875rem; }
  .intake-tabs button[aria-pressed="true"] { background: #deefeb; color: #28584e; font-weight: 600; }
  .intake-columns[data-panel="chat"] .intake-plan { display: none; }
  .intake-columns.has-plan[data-panel="plan"] .intake-chat { display: none; }
  .intake-header { gap: .75rem; }
  .intake-plan { border-left: 0; padding: 1rem; }
}

.appiro-thinking-dot:nth-child(2) { animation-delay: 0.16s; }
.appiro-thinking-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes appiro-thinking {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .appiro-thinking-dot { animation: none; }
}