/* ==========================================================================
   Main column: topbar, welcome, conversation, composer
   ========================================================================== */

.main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.topbar{
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-soft);
}
#openSidebarBtn{ display: none; }
#newChatTopBtn{ display: none; margin-left: auto; }

.model-select{ position: relative; margin: 0 auto; }
.model-select__btn{
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: none; background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.model-select__btn:hover{ background: var(--bg-hover); }
.model-select__list{
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  list-style: none; margin: 0; padding: 6px;
  min-width: 220px;
  z-index: 60;
}
.model-select__list li{
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; flex-direction: column;
  font-size: 13.5px;
}
.model-select__list li span{ font-size: 11.5px; color: var(--text-tertiary); }
.model-select__list li:hover{ background: var(--bg-hover); }
.model-select__list li[aria-selected="true"]{ color: var(--accent); }

/* ---------- welcome ---------- */
.welcome{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  overflow-y: auto;
}
.welcome__mark{ width: 40px; height: 40px; color: var(--accent); }
.welcome__mark svg{ width: 100%; height: 100%; }
.welcome__title{
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.welcome__suggestions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  max-width: 620px;
  width: 100%;
}
.suggestion-card{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13.5px;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.suggestion-card:hover{ border-color: var(--accent); color: var(--text-primary); transform: translateY(-1px); }
.suggestion-card__icon{ font-size: 15px; }

/* ---------- conversation ---------- */
.conversation{
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 8px;
}
.conversation__inner{
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.msg{ display: flex; gap: 12px; animation: msg-in var(--dur-med) var(--ease); }
@keyframes msg-in{ from{ opacity: 0; transform: translateY(4px);} to{ opacity: 1; transform: none;} }
.msg--user{ justify-content: flex-end; }

.msg__bubble{
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: 14.5px;
  line-height: 1.55;
}
.msg--user .msg__bubble{
  background: var(--accent);
  color: var(--accent-text);
  border-bottom-right-radius: 4px;
}
.msg--ai{ max-width: 100%; }
.msg--ai .msg__bubble{
  background: transparent;
  padding: 2px 0;
  max-width: 100%;
  color: var(--text-primary);
}
.msg__bubble p{ margin: 0 0 10px; }
.msg__bubble p:last-child{ margin-bottom: 0; }
.msg__bubble ul, .msg__bubble ol{ margin: 0 0 10px; padding-left: 20px; }
.msg__bubble h1, .msg__bubble h2, .msg__bubble h3{ margin: 14px 0 8px; font-size: 1.08em; }
.msg__bubble table{ border-collapse: collapse; margin: 0 0 10px; width: 100%; font-size: .93em; }
.msg__bubble th, .msg__bubble td{ border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.msg__bubble code{
  font-family: var(--font-mono); font-size: .88em;
  background: var(--bg-input); padding: 1px 5px; border-radius: 4px;
}
.msg__bubble pre{
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 10px;
}
.msg__bubble pre code{ background: none; padding: 0; }
.msg__bubble a{ color: var(--accent); }

.msg__attachment{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.12);
  font-size: 12.5px;
  margin-bottom: 6px;
}
.msg--ai .msg__attachment{ background: var(--bg-elevated); border: 1px solid var(--border-soft); }
.msg__image{ max-width: 260px; border-radius: var(--radius-md); display: block; margin-bottom: 6px; }

.msg__actions{
  display: flex; gap: 2px; margin-top: 6px;
}
.msg__actions button{
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
}
.msg__actions button:hover{ background: var(--bg-hover); color: var(--text-primary); }
.msg__actions button.is-active{ color: var(--accent); }

.typing-dots{ display: inline-flex; gap: 4px; padding: 6px 0; }
.typing-dots span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-tertiary);
  animation: typing 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay: .15s; }
.typing-dots span:nth-child(3){ animation-delay: .3s; }
@keyframes typing{ 0%, 60%, 100%{ opacity: .3; transform: translateY(0);} 30%{ opacity: 1; transform: translateY(-3px);} }

.msg-error{
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  max-width: 380px;
}
.msg-error strong{ display: block; margin-bottom: 4px; }
.msg-error__actions{ display: flex; gap: 8px; margin-top: 10px; }

.generated-image{ max-width: 320px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-soft); }
.generated-image img{ display: block; width: 100%; }
.generated-image__actions{ display: flex; gap: 4px; padding: 6px; background: var(--bg-elevated); }

.sources{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-size: 12.5px;
}
.sources__label{ color: var(--text-tertiary); margin-bottom: 6px; }
.sources a{ display: block; margin-bottom: 3px; }

/* ---------- setup banner ---------- */
.setup-banner{
  max-width: 720px;
  margin: 0 auto 8px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  font-size: 13px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.setup-banner a{ margin-left: auto; }

/* ---------- composer ---------- */
.composer-wrap{
  padding: 10px 16px 14px;
  flex-shrink: 0;
}
.attachment-tray{
  max-width: 720px;
  margin: 0 auto 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.attachment-chip{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
}
.attachment-chip img{ width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.attachment-chip__meta{ display: flex; flex-direction: column; line-height: 1.2; }
.attachment-chip__meta span:last-child{ color: var(--text-tertiary); font-size: 11px; }
.attachment-chip button{
  border: none; background: transparent; color: var(--text-tertiary); cursor: pointer;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
}

.composer{
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 6px 6px 6px 10px;
}
.composer:focus-within{ border-color: var(--accent); }
.composer__input{
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  color: var(--text-primary);
  max-height: var(--composer-max-h);
  padding: 8px 4px;
  font-size: 14.5px;
  line-height: 1.4;
}
.composer__input::placeholder{ color: var(--text-tertiary); }
.composer__hint{
  text-align: center;
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

#voiceBtn.is-recording{ color: var(--danger); background: rgba(242,84,91,.12); }