/* Composer screen styles */

@layer components {
  .message-editor { display: flex; flex-direction: column; }
  .message-editor__toolbar {
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    padding-bottom: var(--gap-2);
    border-bottom: 1px solid var(--border-sub);
    margin-bottom: var(--gap-3);
  }
  .message-editor__spacer { flex: 1; }
  .message-editor__input {
    width: 100%;
    min-height: 280px;
    padding: var(--gap-3);
    font-size: var(--type-1-sm);
    font-family: var(--font-mono);
    line-height: var(--lh-relaxed);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-2);
    color: var(--text-main);
    resize: vertical;
  }
  .message-editor__input:focus { border-color: var(--field-focus); box-shadow: var(--field-shadow); outline: none; }

  /* Telegram-style preview bubble */
  .preview-card {
    background: var(--bg-sub);
    border-radius: var(--radius-3);
    overflow: hidden;
  }
  .preview-header {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    padding: var(--gap-3) var(--gap-4);
    border-bottom: 1px solid var(--border-sub);
  }
  .preview-name { display: block; font-size: var(--type-1-sm); font-weight: var(--fw-semibold); }
  .preview-body { padding: var(--gap-3) var(--gap-4); }
  .preview-body p { margin: 0 0 var(--gap-2); font-size: var(--type-1-sm); line-height: var(--lh-normal); }
  .preview-body p:last-child { margin-bottom: 0; }
  .preview-signature { color: var(--text-soft); }
  .preview-footer {
    padding: var(--gap-2) var(--gap-4) var(--gap-3);
    border-top: 1px solid var(--border-sub);
    display: flex;
    justify-content: flex-end;
  }

  .range-wrapper { display: flex; align-items: center; gap: var(--gap-3); }
  .range-value { font-size: var(--type-1-sm); font-weight: var(--fw-medium); color: var(--text-main); min-width: 64px; text-align: right; }

  .variable-tags { display: flex; flex-wrap: wrap; gap: var(--gap-2); margin-top: var(--gap-2); }

  .recipient-list {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-sub);
    border-radius: var(--radius-2);
  }
  .recipient-item {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    padding: var(--gap-2) var(--gap-3);
    cursor: pointer;
    border-bottom: 1px solid var(--border-sub);
    transition: background var(--transition-fast);
  }
  .recipient-item:last-child { border-bottom: none; }
  .recipient-item:hover { background: var(--bg-hover); }
  .recipient-item__content { display: flex; align-items: center; gap: var(--gap-2); flex: 1; min-width: 0; font-size: var(--type-1-sm); }

  @media (max-width: 760px) {
    .message-editor__input { min-height: 200px; }
    .recipient-list { max-height: 240px; }
  }
}