/* ==========================================================================
   main.css — Main column: topbar, messages viewport, welcome, chat logo bg.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   MAIN
══════════════════════════════════════════════════════ */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg); position: relative; }

/* ── Chat logo background ── */
#chat-logo-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
#chat-logo-bg svg {
  width: min(36vh, 260px); height: min(36vh, 260px);
  opacity: 0;
  transform-origin: center;
  animation:
    logoFadeIn 1.2s ease-out 0.4s forwards,
    logoBreathe 8s ease-in-out 5s infinite;
}
#chat-logo-bg path {
  stroke: var(--g);
  stroke-width: 5;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 790;
  stroke-dashoffset: 790;
  animation: logoDraw 4.5s cubic-bezier(.4,0,.2,1) 0.4s forwards;
}
@keyframes logoDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes logoFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 0.08; }
}
@keyframes logoBreathe {
  0%,100% { opacity: 0.07; transform: scale(1); }
  50%      { opacity: 0.12; transform: scale(1.014); }
}

/* Topbar */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; background: var(--s1);
  border-bottom: 1px solid var(--b1); flex-shrink: 0; min-height: 50px;
}
#topbar-menu { display: none; color: var(--t2); padding: 5px; border-radius: var(--r1); transition: color .15s, background .15s; }
#topbar-menu:hover { color: var(--g); background: var(--gd); }
.tb-title { flex: 1; min-width: 0; }
#chat-title { font-size: 13.5px; color: var(--t1); font-weight: 600; }
#chat-sub { font-size: 10.5px; color: var(--t2); display: none; margin-top: 1px; }
.conn-pill {
  display: flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: var(--rf); background: var(--s2); border: 1px solid var(--b1); flex-shrink: 0;
}
#conn-dot { width: 7px; height: 7px; border-radius: var(--rf); }
#conn-dot.g { background: var(--green); }
#conn-dot.y { background: var(--amber); }
#conn-dot.r { background: var(--red); }
#conn-txt { font-size: 11px; color: var(--t1); font-weight: 500; }
.tb-icon-btn {
  color: var(--t2); padding: 6px; border-radius: var(--r1);
  transition: color .15s, background .15s; flex-shrink: 0;
}
.tb-icon-btn:hover { color: var(--g); background: var(--gd); }
.tb-icon-btn svg { width: 16px; height: 16px; display: block; }

/* Messages viewport */
#messages {
  flex: 1; overflow-y: auto;
  padding: 22px 24px 88px; /* bottom pad prevents last msg hiding under input */
  display: flex; flex-direction: column;
}

/* Welcome */
#welcome { margin: auto; text-align: center; padding: 48px 24px; max-width: 400px; }
.welcome-eagle {
  font-family: var(--fh); font-size: 56px; font-weight: 900;
  color: var(--g); line-height: 1; letter-spacing: -1px;
  text-shadow: 0 0 48px rgba(202,165,90,.18);
}
.welcome-firm { font-size: 12px; color: var(--t2); margin-top: 10px; }
.welcome-prompt { font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--t1); margin-top: 22px; }
.welcome-hint { font-size: 12px; color: var(--t2); margin-top: 6px; }
.welcome-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 22px; }
.welcome-chip {
  border: 1px solid var(--b2); color: var(--t1);
  font-size: 12px; padding: 6px 14px; border-radius: var(--rf);
  background: var(--s2); transition: background .15s, border-color .15s, color .15s;
}
.welcome-chip:hover { background: var(--gd); border-color: var(--gb); color: var(--g); }