/* ── App shell (main_screen.dart layout) ── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Activity bar — 52px */
.activity-bar {
  flex: 0 0 var(--activity-bar-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  background: var(--activity-bar-background);
  border-right: 1px solid var(--activity-bar-border);
}

.activity-bar__spacer {
  flex: 1;
}

.activity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--activity-bar-icon-muted);
  cursor: pointer;
  transition: background 0.12s;
}

.activity-btn:hover {
  background: var(--activity-bar-hover-overlay);
}

.activity-btn.is-selected {
  background: var(--accent-blue);
  color: #fff;
}

.activity-btn.is-trace {
  background: var(--activity-bar-trace-highlight);
  color: #fff;
}

.activity-btn .material-symbols-outlined {
  font-size: 20px;
}

/* Sidebar — 280px */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--session-sidebar-background);
  border-right: 1px solid var(--panel-border);
  min-width: 0;
}

.sidebar__search {
  padding: 12px 12px 0;
}

.sidebar__new-session {
  padding: 10px 12px;
}

.sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 12px 10px;
}

.session-section {
  font-size: 11px;
  font-weight: 500;
  color: var(--session-section-label);
  padding: 12px 0 4px;
}

.session-item {
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0 8px 2px 0;
  padding: 0 8px 0 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--title-text);
  cursor: pointer;
  transition: background 0.12s;
}

.session-item:hover {
  background: rgba(229, 231, 235, 0.35);
}

.session-item.is-selected {
  background: var(--pill-background);
  font-weight: 500;
}

.session-item__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-item__close {
  font-size: 14px;
  color: var(--session-section-label);
  opacity: 0;
  transition: opacity 0.12s;
}

.session-item:hover .session-item__close,
.session-item.is-selected .session-item__close {
  opacity: 1;
}

/* Main column */
.main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
}

.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 8px;
}

.chat-area.is-scroll-locked {
  overflow-y: hidden;
}

/* Messages — chat_message_widget.dart */
.msg-user-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 8px 16px;
}

.msg-user-bubble {
  max-width: 75%;
  padding: 12px 18px;
  background: var(--pill-background);
  border-radius: 20px 20px 6px 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--title-text);
}

.msg-assistant {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.15);
}

.msg-assistant__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.msg-assistant__header .material-symbols-outlined {
  font-size: 14px;
  color: var(--assistant-accent);
}

.msg-assistant__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--assistant-accent);
}

.msg-assistant__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--title-text);
}

.msg-assistant__body p {
  margin-bottom: 8px;
}

.msg-assistant__body p:last-child {
  margin-bottom: 0;
}

.msg-assistant__body code {
  padding: 2px 6px;
  background: var(--panel-background);
  border-radius: 4px;
  font-size: 13px;
}

.msg-assistant__body pre {
  margin: 8px 0;
  padding: 12px;
  background: var(--panel-background);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  font-size: 12px;
  overflow-x: auto;
}

/* Composer — prompt_input.dart */
.composer-wrap {
  flex-shrink: 0;
  padding: 0 14px 14px;
  background: var(--surface);
}

.composer {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.composer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
}

.composer__input {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 8px 16px;
  border: none;
  resize: none;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  color: var(--title-text);
}

.composer__input::placeholder {
  color: rgba(107, 114, 128, 0.6);
}

.composer__footer {
  display: flex;
  align-items: center;
  padding: 0 12px 12px;
  gap: 8px;
}

.composer__footer .spacer {
  flex: 1;
}

/* Extension sidebar */
.ext-sidebar .sidebar__search {
  padding: 8px 10px;
}

.ext-sidebar .ext-tabs-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 4px;
}

.ext-sidebar .ext-tabs-row .spacer {
  flex: 1;
}

.market-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 12px;
}

.market-card {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}

.market-card:hover {
  background: var(--list-row-hover);
}

.market-card__logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-blue);
}

.market-card__body {
  flex: 1;
  min-width: 0;
}

.market-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.market-card__title {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-card__meta {
  font-size: 10px;
  color: var(--meta-muted);
}

.market-card__desc {
  font-size: 11px;
  color: var(--muted-text);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}

.market-card__action .btn-install {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.market-card__action .btn-installed {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--muted-text);
  background: var(--panel-background);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
}

.section-label-sm {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-text);
  padding: 8px 4px 6px;
}

/* Hidden panels for view toggle */
.sidebar[data-view-panel] {
  display: none;
  flex-direction: column;
  min-height: 0;
}

.sidebar[data-view-panel].is-visible {
  display: flex;
}