/* الهيكل: اللوح الجانبي لازق في الحافة، والمحادثة في النص، ولوح المشروع جنبها — زي Claude */

.app {
  position: relative;
  height: 100%;
  display: flex;
}

.stage { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }

/* ── الشريط العلوي: عنوان المحادثة بس ── */
.topbar { height: 48px; flex: 0 0 48px; display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-4); }
.topbar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-md);
  color: var(--text-secondary);
}

#sidebarOpen { display: none; }
.app[data-sidebar="closed"] #sidebarOpen { display: grid; animation: fade-in 240ms var(--ease) both; }

.status { min-height: 18px; margin: 6px auto 0; max-width: var(--measure); text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
.status.error { color: var(--danger); }

/* ── ستارة السحب والإفلات ── */
.drop-veil {
  position: fixed;
  inset: var(--space-3);
  z-index: 90;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  border: 1.5px dashed var(--accent-line);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  pointer-events: none;
  animation: fade-in 160ms var(--ease) both;
}
.drop-veil span { font-size: var(--text-lg); font-weight: 500; color: var(--accent-ink); }

@media (max-width: 900px) {
  .topbar { padding-inline: var(--space-3); }
  #sidebarOpen { display: grid; }
}