/* =========================================================================
   Nexus · compose.css — floating composer cluster with LCD model badge,
   slash-trigger button, send button, drop-target glow.
   ========================================================================= */

#nx-compose {
  position: relative;
  padding: 12px clamp(20px, 4vw, 56px) 16px;
  background: linear-gradient(0deg, var(--nx-bg) 60%, transparent);
}

.nx-compose-shell {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Top row: small LCD badge + tools */
.nx-compose-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
  font-family: var(--nx-font-mono);
  font-size: 11px;
  color: var(--nx-text-2);
  letter-spacing: .04em;
}
.nx-compose-meta .nx-spacer { flex: 1; }
.nx-compose-tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Composer frame — focus underline + drop-target glow */
.nx-compose-frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-soft), var(--nx-shadow-inset);
  transition: border-color var(--nx-dur-base) var(--nx-ease),
              box-shadow var(--nx-dur-base) var(--nx-ease);
}
.nx-compose-frame::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -1px;
  height: 1px;
  background: var(--nx-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--nx-dur-slow) var(--nx-ease);
  box-shadow: 0 0 8px var(--nx-glow);
}
.nx-compose-frame:focus-within {
  border-color: var(--nx-accent-soft);
  box-shadow: var(--nx-shadow-soft), 0 0 0 1px var(--nx-accent-soft), 0 0 24px rgba(94, 224, 200, .18);
}
.nx-compose-frame:focus-within::after { transform: scaleX(1); }

.nx-compose-frame[data-drop="true"] {
  border-color: var(--nx-accent);
  box-shadow: 0 0 0 2px var(--nx-accent-soft), 0 0 32px var(--nx-glow);
}

#nx-compose textarea, .composer textarea {
  flex: 1;
  resize: none;
  min-height: 28px;
  max-height: 220px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--nx-text);
  font-family: var(--nx-font-sans);
  font-size: 15px;
  line-height: 1.5;
  padding: 6px 4px;
}
#nx-compose textarea::placeholder { color: var(--nx-muted); }

.nx-icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--nx-radius-sm);
  color: var(--nx-text-2);
  background: transparent;
  transition: background var(--nx-dur-fast) var(--nx-ease),
              color var(--nx-dur-fast) var(--nx-ease),
              transform var(--nx-dur-fast) var(--nx-ease);
}
.nx-icon-btn:hover {
  background: var(--nx-surface-2);
  color: var(--nx-accent);
  transform: translateY(-1px);
}
.nx-icon-btn:active { transform: translateY(1px); }

.nx-send-btn {
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border-radius: var(--nx-radius);
  background: linear-gradient(180deg, var(--nx-accent) 0%, var(--nx-accent-2) 100%);
  color: var(--nx-bg);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--nx-font-display);
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--nx-shadow-soft), var(--nx-shadow-inset);
  transition: transform var(--nx-dur-fast) var(--nx-ease),
              filter var(--nx-dur-fast) var(--nx-ease),
              box-shadow var(--nx-dur-base) var(--nx-ease);
  position: relative;
  overflow: hidden;
}
.nx-send-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 0 0 1px var(--nx-accent-soft), 0 0 22px var(--nx-glow);
}
.nx-send-btn:active { transform: translateY(1px); }
.nx-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Slash trigger pill */
.nx-slash-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--nx-radius);
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-line);
  color: var(--nx-text-2);
  font-family: var(--nx-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  transition: all var(--nx-dur-fast) var(--nx-ease);
}
.nx-slash-trigger:hover {
  color: var(--nx-accent);
  border-color: var(--nx-accent-soft);
}

.nx-kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-line);
  font-family: var(--nx-font-mono);
  font-size: 10px;
  color: var(--nx-text-2);
}