.channel-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  & > .header {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  & > .header > .name {
    font-weight: 600;
    font-size: var(--font-lg);
  }

  & > .header > .auto-join-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: var(--font-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: white;
  }

  & > .header > .auto-join-form {
    display: inline-flex;
    align-items: center;
  }

  & > .header > .auto-join-form > .auto-join-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    cursor: pointer;
  }

  & > .header > .topic {
    color: var(--color-text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & > .header > .leave {
    color: var(--color-danger);
    text-decoration: none;
  }

  & > .header > .leave:hover {
    text-decoration: underline;
  }

  & > .header > .join-form {
    display: inline;
  }

  & > .header > .join-form > .join {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
  }

  & > .header > .join-form > .join:hover {
    opacity: 0.9;
  }

  & > .not-joined-banner {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--color-warning-bg, #fff3cd);
    color: var(--color-warning-text, #856404);
    text-align: center;
  }

  & > .messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  & > .input {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
  }
}