/* Shared floating Claude assistant (FAB + side panel) for BioStudio studios */

.studio-ai-host {
  position: relative;
}

.studio-ai-fab {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #1a56db, #7c3aed);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(26, 86, 219, 0.35);
  z-index: 100;
  transition: transform 0.15s;
}

.studio-ai-fab:hover { transform: translateY(-2px) scale(1.05); }

.studio-ai-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  top: 16px;
  width: 360px;
  max-width: calc(100% - 32px);
  background: #fff;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.studio-ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e8ef;
  font-weight: 600;
}

.studio-ai-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #1a56db, #7c3aed);
  color: #fff;
}

.studio-ai-close {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.studio-ai-disclaimer {
  font-size: 10px;
  color: #9ca3af;
  padding: 6px 12px;
  background: #fef3c7;
}

.studio-ai-enc {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
}

.studio-ai-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px;
  max-height: 80px;
  overflow-y: auto;
}

.studio-ai-quickbtn {
  padding: 3px 8px;
  border: 1px solid #e5e8ef;
  border-radius: 12px;
  background: #f9fafb;
  font-size: 10px;
  cursor: pointer;
}

.studio-ai-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  min-height: 120px;
}

.studio-ai-msg {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.studio-ai-msg.user { background: #e8f0fe; margin-left: 20px; }
.studio-ai-msg.ai { background: #f3f4f6; margin-right: 20px; }

.studio-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px;
  border-top: 1px solid #e5e8ef;
}

.studio-ai-actions button {
  font-size: 10px;
  padding: 4px 8px;
  border: 1px solid #e5e8ef;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.studio-ai-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.studio-ai-input {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid #e5e8ef;
}

.studio-ai-prompt {
  flex: 1;
  resize: none;
  border: 1px solid #e5e8ef;
  border-radius: 6px;
  padding: 6px;
  font-size: 12px;
}

.studio-ai-send {
  padding: 6px 12px;
  background: #1a56db;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.studio-ai-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Agent action card ------------------------------------------------------
   Shown only in agent mode: the assistant proposes, the scientist approves.
   Nothing here runs until Apply is pressed. */

.studio-ai-actcard {
  margin: 8px 0;
  border: 1px solid #d7dce6;
  border-radius: 9px;
  background: #f8fafc;
  overflow: hidden;
  font-size: 12.5px;
}

.studio-ai-actcard-h {
  padding: 7px 11px;
  background: #eef2f9;
  border-bottom: 1px solid #d7dce6;
  font-weight: 700;
  color: #1f2733;
}

.studio-ai-actlist {
  margin: 0;
  padding: 8px 11px 8px 11px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-ai-actlist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  line-height: 1.4;
  color: #1f2733;
}

/* Risk is the first thing to read: a database lookup and an overwrite of the
   user's sequence should not look alike. */
.studio-ai-risk {
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.studio-ai-risk.read { background: #e2eefc; color: #1a56db; }
.studio-ai-risk.network { background: #ddf3ef; color: #0a6b52; }
.studio-ai-risk.mutation { background: #fdeacd; color: #8a5200; }

.studio-ai-acterror {
  flex-basis: 100%;
  color: #a02b2b;
  font-size: 11.5px;
}

.studio-ai-actbtns {
  display: flex;
  gap: 8px;
  padding: 0 11px 10px;
}

.studio-ai-apply,
.studio-ai-cancel {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid transparent;
}
.studio-ai-apply { background: #1a56db; color: #fff; }
.studio-ai-apply:hover { background: #1546b4; }
.studio-ai-cancel { background: #fff; border-color: #d7dce6; color: #6c7686; }
.studio-ai-cancel:hover { background: #eef2f9; color: #1f2733; }

.studio-ai-actstatus {
  padding: 7px 11px;
  border-top: 1px solid #d7dce6;
  font-size: 11.5px;
  font-weight: 600;
}
.studio-ai-actstatus.applied { background: #e7f7f1; color: #0a6b52; }
.studio-ai-actstatus.cancelled { background: #f1f3f7; color: #6c7686; }
.studio-ai-actstatus.failed { background: #fdecec; color: #a02b2b; }
.studio-ai-actstatus.partial { background: #fdeacd; color: #8a5200; }
.studio-ai-actstatus.running { background: #eef2f9; color: #1a56db; }