/* Replica of the CChat app UI (hero mockup + persona demos). Class names follow the app. */

/* shared message components */
.msg { font-family: var(--font-app); font-size: var(--text-sm); line-height: 1.55; border-radius: 10px; padding: 14px 18px; }
.msg-label { display: block; margin-bottom: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.msg--user { align-self: flex-end; width: min(100%, 560px); background: var(--color-user-bubble); border: 1px solid var(--color-user-border); }
.msg--user .msg-label { color: #9fb6da; }
.msg--assistant { align-self: flex-start; width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); }
.msg--assistant ul { margin: 6px 0 0; padding-left: 20px; }
.msg--assistant li + li { margin-top: 4px; }
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--color-tool-bg); border: 1px solid var(--color-tool-border); font: 600 0.75rem/1.4 var(--font-app); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-tool-dot); }

/* draft fields (artifacts panel + persona tickets) */
.field-label { display: block; margin-bottom: 6px; font: 600 0.75rem/1 var(--font-app); color: var(--color-text-muted); }
.field { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-input); font: 400 var(--text-sm)/1.5 var(--font-app); }
.field--select { display: flex; justify-content: space-between; align-items: center; }
.field--select::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); transform: translateY(-2px) rotate(45deg); }
.draft { font-family: var(--font-app); display: grid; gap: 12px; }
.draft-title { font-weight: 600; }
.draft .tag { font-family: var(--font-app); }

/* app frame */
.app {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px;
  font-family: var(--font-app); font-size: var(--text-sm); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden;
}
.app strong { font-weight: 600; }

/* sidebar */
.app .history-panel { display: flex; flex-direction: column; min-height: 0; background: var(--color-sidebar); border-right: 1px solid var(--color-border); }
.app .workspace-switcher { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }
.app .brand-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--color-accent); color: #fff; font-weight: 700; font-size: 0.8125rem; }
.app .workspace-copy { display: grid; line-height: 1.3; min-width: 0; }
.app .workspace-copy span { font-size: 0.75rem; color: var(--color-text-muted); }
.app .history-new { margin: 12px 12px 8px; padding: 8px 12px; border-radius: 8px; background: var(--color-new-chat); color: #fff; font-weight: 600; }
.app .history-section-label { padding: 14px 16px 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.app .history-list { flex: 1; min-height: 0; overflow: hidden; padding: 0 8px; }
.app .history-item { padding: 7px 10px; border-radius: 8px; line-height: 1.35; }
.app .history-item.active { background: var(--color-active); }
.app .history-item strong { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .history-item span { font-size: 0.75rem; color: var(--color-text-muted); }

/* chat */
.app .chat-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app .messages { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 24px 28px; }
.app .composer { margin: 0 28px 20px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-soft); }
.app .composer-input { color: var(--color-text-muted); min-height: 36px; }
.app .composer-footer { display: flex; align-items: center; gap: 10px; }
.app .reasoning-select { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); }
.app .send-button { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--color-new-chat); color: #fff; font-weight: 700; }

/* artifacts panel */
.app .artifacts { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 18px 20px; background: var(--color-bg-soft); border-left: 1px solid var(--color-border); }
.app .artifacts-head { display: flex; justify-content: space-between; align-items: center; }
.app .artifacts-head strong { font-size: 0.9375rem; }
.app .pill-btn { padding: 4px 10px; border-radius: 8px; background: var(--color-accent); color: var(--color-on-btn); font-weight: 600; font-size: 0.75rem; }
.app .field--area { white-space: pre-line; }
.app .publish { align-self: flex-end; margin-top: auto; padding: 8px 18px; border-radius: 8px; background: var(--color-accent); color: var(--color-on-btn); font-weight: 600; }

@media (max-width: 1100px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); }
  .app .artifacts { display: none; }
}
@media (max-width: 600px) {
  .app { grid-template-columns: 1fr; }
  .app .history-panel { display: none; }
  .app .messages { padding: 16px; }
  .app .composer { margin: 0 16px 16px; }
}