/* ── CLAJAMA Blocks Core Styles ── */

/* ── ML-Inspired Adaptive Grid System ── */

/* Adaptive Grid — like a machine-learned layout that adjusts to viewport */
.adaptive-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 260px), 1fr));
}

/* Device-aware grid columns using container queries and media */
.grid-mobile-1 { --grid-min: 100%; }
.grid-mobile-2 { --grid-min: 160px; }
.grid-tablet-2 { --grid-min: 220px; }
.grid-tablet-3 { --grid-min: 200px; }
.grid-desktop-3 { --grid-min: 280px; }
.grid-desktop-4 { --grid-min: 240px; }

/* Smart grid — adapts columns based on available width */
.smart-grid {
  display: grid;
  gap: var(--grid-gap, 12px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cell-min, 260px)), 1fr));
}

/* 2-col → collapses to 1-col on small screens naturally */
@media (max-width: 639px) {
  .smart-grid {
    --cell-min: 100%;
  }
}

/* ── Chat Block (used in build previews) ── */
.ai-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.ai-chat .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-chat .chat-msg {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.ai-chat .chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-radius: 16px 4px 16px 16px;
}

.ai-chat .chat-msg.assistant,
.ai-chat .chat-msg.ai,
.ai-chat .chat-msg.jama {
  align-self: flex-start;
  background: var(--raised);
  color: var(--text-primary);
  border-radius: 4px 16px 16px 16px;
  border: 0.5px solid var(--border);
}

.ai-chat .chat-input {
  display: flex;
  padding: 12px;
  border-top: 1px solid var(--border);
  gap: 8px;
}

.ai-chat .chat-input input {
  flex: 1;
  padding: 10px 14px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 24px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

.ai-chat .chat-input button {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s;
}

.ai-chat .chat-input button:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
}

/* ── Device-aware: this block adapts naturally ── */
@media (max-width: 639px) {
  .ai-chat {
    min-height: 300px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .ai-chat .chat-msg {
    max-width: 90%;
    font-size: 15px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .ai-chat {
    min-height: 350px;
  }
  .ai-chat .chat-msg {
    max-width: 75%;
  }
}