/* Feature-specific UI: chat UI, command palette, loading overlays, and agent form rules */

/* Agent page: make the ask-the-agent form occupy full card width */
#agent-form{ max-width:100%; width:100%; margin:0; }

/* Chat UI */
.chat-window{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  max-height:55vh;
  overflow:auto;
  display:grid;
  gap:8px;
  background: linear-gradient(180deg, rgba(16,23,44,0.7), rgba(13,20,40,0.55));
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.msg{ display:flex; gap:12px; align-items:center; margin-top: 2px; margin-bottom: 2px; }
.msg.user{ flex-direction: row-reverse; }
.msg .avatar{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background: radial-gradient(120% 120% at 0% 0%, rgba(168,85,247,0.18), transparent 60%),
              radial-gradient(120% 120% at 100% 0%, rgba(6,182,212,0.18), transparent 60%),
              linear-gradient(180deg, rgba(23,32,56,0.7), rgba(18,26,48,0.55));
  border:1px solid rgba(99,102,241,0.35);
}
.msg .bubble{
  max-width: 68ch;
  padding:12px 14px; border-radius:12px; white-space:pre-wrap; line-height:1.6; font-size:14.25px;
  background: linear-gradient(180deg, rgba(18,26,48,0.7), rgba(14,22,44,0.55));
  border:none;
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.msg.assistant .bubble{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(168,85,247,0.25), transparent 58%),
    radial-gradient(120% 120% at 100% 0%, rgba(6,182,212,0.22), transparent 58%),
    linear-gradient(180deg, rgba(23,32,56,0.92), rgba(18,26,48,0.74));
  border-color: rgba(99,102,241,0.5);
  box-shadow: var(--glow);
  font-size: 15.5px;
}
.msg.user .bubble{
  background: linear-gradient(180deg, rgba(17,25,46,0.6), rgba(13,20,40,0.45));
  border-color: rgba(148,163,184,0.22);
}
.chat-window .meta{ color: var(--muted); font-size: 12px; margin-top: 4px; }

.chat-divider{ position:relative; text-align:center; margin: 8px 0 10px; }
.chat-divider span{
  display:inline-block; padding:4px 10px; font-size:12px; color:var(--muted);
  background: linear-gradient(180deg, rgba(16,23,44,0.65), rgba(13,20,40,0.45));
  border:1px solid var(--border); border-radius:999px; box-shadow: var(--shadow);
}

.input-bar{ display:grid; grid-template-columns: 1fr 44px; gap:10px; align-items:end; width:100%; padding:10px; border:1px solid var(--border); border-radius:14px; background: linear-gradient(180deg, rgba(16,23,44,0.55), rgba(13,20,40,0.45)); }
.input-bar textarea{
  flex:1; min-width:0; resize:none; min-height:40px; max-height:140px; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,25,46,0.7), rgba(13,20,40,0.5)); color:var(--text); font-size:14px;
}
.input-bar textarea::placeholder{ color: var(--muted); }
.input-bar textarea:focus{ outline:none; box-shadow: var(--glow); border-color: rgba(99,102,241,0.5); }

.input-bar .send-btn{
  width:44px; height:44px; border-radius:12px; display:inline-grid; place-items:center; padding:0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(168,85,247,0.22), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(6,182,212,0.22), transparent 60%),
    linear-gradient(180deg, rgba(23,32,56,0.85), rgba(18,26,48,0.6));
  border:1px solid rgba(99,102,241,0.5); color:var(--text); cursor:pointer;
  box-shadow: var(--glow);
}
.input-bar .send-btn .send-icon{ font-size:16px; transform: translateX(1px); }
.input-bar .send-btn:hover{ transform: translateY(-1px); }
.input-bar .send-btn:active{ transform: translateY(0); box-shadow: 0 0 0 0 rgba(0,0,0,0.0); }

/* Agenting indicator */
.agenting-indicator{
  display:flex; align-items:center; justify-content:center; padding:20px; border:1px solid var(--border); border-radius:14px;
  background: linear-gradient(180deg, rgba(16,23,44,0.55), rgba(13,20,40,0.45));
  min-height: 64px;
}
.agenting-text{
  font-size:16px; font-weight:500; color:var(--text);
  background: linear-gradient(120deg, var(--grad-1), var(--grad-2), var(--grad-1));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}
.agenting-dots{
  display:inline-block; width:1.5em; text-align:left;
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes dots {
  0%, 25% { content: ''; }
  26%, 50% { content: '.'; }
  51%, 75% { content: '..'; }
  76%, 100% { content: '...'; }
}

@media (max-width: 720px){
  .chat-window{ padding:12px; max-height:60vh; }
  .msg .bubble{ max-width: calc(100% - 56px); }
  .chat-divider{ margin: 6px 0 8px; }
}

/* Hide any implicit/extra submit elements */
.input-bar input[type="submit"]{ display:none !important; }
.input-bar button[type="submit"]:not(.send-btn){ display:none !important; }
#agent-form input[type="submit"],
#agent-form button[type="submit"]:not(.send-btn){ display:none !important; }

/* Command Palette */
.cmdk-overlay{ position:fixed; inset:0; background: rgba(4,8,18,0.45); backdrop-filter: blur(6px) saturate(140%); display:flex; align-items:flex-start; justify-content:center; padding:10vh 16px 16px; z-index:1000; }
.cmdk{ width:min(680px, 100%); border:1px solid var(--border); border-radius:14px; background: linear-gradient(180deg, rgba(16,23,44,0.86), rgba(13,20,40,0.7)); box-shadow: var(--glow); overflow:hidden; }
.cmdk-input-wrap{ display:flex; align-items:center; gap:10px; padding:15px; border-bottom:1px solid var(--border); }
.cmdk-input-wrap input{ flex:1; min-width:0; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(17,25,46,0.7), rgba(13,20,40,0.5)); color:var(--text); }
.cmdk-input-wrap input::placeholder{ color: var(--muted); }
.cmdk-hint{ color: var(--muted); font-size:12px; }
.cmdk-list{ list-style:none; margin:0; padding:13px; max-height:50vh; overflow:auto; }
.cmdk-item{ padding:12px 12px; border-radius:10px; border:1px solid transparent; transition: all 0.15s ease; }
.cmdk-item a{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.cmdk-item .cmdk-icon{ width:1.25em; display:inline-grid; place-items:center; }
.cmdk-item.active{ 
  background: linear-gradient(180deg, rgba(99,102,241,0.15), rgba(79,70,229,0.1)); 
  border-color: rgba(99,102,241,0.6);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.1), 0 2px 8px rgba(99,102,241,0.15);
}
.cmdk-list:not(.keyboard-mode) .cmdk-item:hover{ 
  background: linear-gradient(180deg, rgba(99,102,241,0.15), rgba(79,70,229,0.1)); 
  border-color: rgba(99,102,241,0.6);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.1), 0 2px 8px rgba(99,102,241,0.15);
}
.cmdk-item.current{  cursor: not-allowed; background: transparent; }
.cmdk-item.current a{ color: #00ff32; pointer-events: none; cursor: not-allowed; }
.cmdk-overlay[hidden]{ display: none !important; }

/* Loading overlay for app creation */
.loading-overlay{
  position:fixed; inset:0; z-index:1100;
  display:grid; place-items:center;
  background: rgba(6,10,22,0.55);
  backdrop-filter: blur(6px) saturate(140%);
}
.loading-overlay[hidden]{ display:none !important; }
.loading-card{
  width:min(520px, 92vw);
  padding:20px; border-radius:14px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(16,23,44,0.86), rgba(13,20,40,0.7));
  box-shadow: var(--glow);
  display:grid; gap:12px; justify-items:center; text-align:center;
}
.spinner{
  width:36px; height:36px; border-radius:999px;
  border:3px solid rgba(148,163,184,0.25);
  border-top-color: var(--grad-2);
  border-right-color: var(--grad-1);
  animation: spin 1s linear infinite;
}
.loading-text{ color:var(--muted); }
.loading-actions{ display:flex; gap:10px; }

/* Small spinner for inline button loading state */
.spinner-btn{
  width:16px; height:16px; border-radius:999px; display:inline-block;
  border:2px solid rgba(148,163,184,0.25);
  border-top-color: var(--grad-2);
  border-right-color: var(--grad-1);
  animation: spin .9s linear infinite;
}

/* Ensure elements with the HTML [hidden] attribute are actually hidden,
   overriding any component display defaults (e.g., inline-block) */
[hidden]{ display:none !important; }