/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-prompt, mk-prompt__
 */
/* Component: mk_prompt */
.mk-prompt {
  width: 100%;
  max-width: var(--mk-prompt-width);
  min-height: var(--mk-prompt-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--mk-space-1);
  padding: var(--mk-space-1) var(--mk-space-2) var(--mk-space-1) var(--mk-space-6);
  border: 1px solid rgb(var(--mk-accent-rgb) / .22);
  border-radius: var(--mk-space-10);
  background: rgb(var(--mk-light-rgb) / .94);
  box-shadow: var(--mk-shadow-prompt);
}

.mk-prompt__input {
  width: 100%;
  min-width: 0;
  height: var(--mk-prompt-input-height);
  box-sizing: border-box;
  padding: 0 var(--mk-space-1);
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--mk-color-text);
  font-size: var(--mk-font-size-sm);
  line-height: 1.3;
  outline: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-prompt__input::placeholder {
  color: var(--mk-color-muted-strong);
}

@media (max-width: 767.98px) {
  .mk-prompt {
    max-width: 100%;
    min-height: var(--mk-prompt-height-sm);
    grid-template-columns: minmax(0, 1fr) max-content;
    padding-left: var(--mk-space-4);
    border-radius: var(--mk-space-8);
  }

  .mk-prompt__input {
    height: var(--mk-prompt-input-height-sm);
    padding-right: var(--mk-space-0-5);
    padding-left: var(--mk-space-0-5);
  }
}