/* THE PAGE AROUND CODER: the top bar and the sign-in card. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: #faf9f7; color: #0d1b2a; font: 14px/1.5 Inter, -apple-system, system-ui, sans-serif; }
[hidden] { display: none !important; }

.gf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #ece8e1; background: #fff; flex: none; }
.gf-brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.gf-brand b { font-size: 16px; letter-spacing: -.01em; }
.gf-logo { width: 28px; height: 28px; border-radius: 8px; background: #0d1b2a; color: #fff; display: grid; place-items: center; font: 700 11px Inter, system-ui, sans-serif; }
.gf-tag { font-size: 12px; font-weight: 600; color: #0f766e; background: #effaf7; border: 1px solid #b7e0d9; border-radius: 999px; padding: 1px 9px; }
.gf-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gf-email { color: #6b7280; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-out { border: 1px solid #e0dbd2; background: #fff; border-radius: 999px; padding: 5px 13px; font: 13px Inter, system-ui, sans-serif; color: #0d1b2a; cursor: pointer; flex: none; }

.gf-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gf-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Coder's bar sits right under the top bar here. */
.gf-app .cd-head { margin-top: 0; }

.gf-gate { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.gf-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid #ece8e1; border-radius: 18px; padding: 28px 26px; box-shadow: 0 1px 2px rgba(13,27,42,.04), 0 10px 30px rgba(13,27,42,.06); display: flex; flex-direction: column; gap: 12px; }
.gf-card h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.gf-sub { margin: 0 0 4px; color: #6b7280; }
.gf-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.gf-card input { border: 1px solid #e0dbd2; border-radius: 10px; padding: 10px 12px; font: 14px Inter, system-ui, sans-serif; color: #0d1b2a; outline: none; }
.gf-card input:focus { border-color: #0d1b2a; }
.gf-msg { margin: 0; min-height: 0; color: #b42318; font-size: 13px; }
.gf-msg:empty { display: none; }
.gf-go { border: 0; background: #0d1b2a; color: #fff; border-radius: 999px; padding: 11px 18px; font: 600 14px Inter, system-ui, sans-serif; cursor: pointer; }
.gf-go:disabled { opacity: .5; cursor: default; }
.gf-switch { border: 0; background: none; color: #6b7280; text-decoration: underline; font: 13px Inter, system-ui, sans-serif; cursor: pointer; }

@media (max-width: 520px) { .gf-email { display: none; } .gf-top { padding: 10px 14px; } }

/* THE CONVERSATIONS ON THE LEFT: Coder and the Gloopy agent. */
.gf-shell { flex: 1; min-height: 0; display: flex; }
.gf-side { width: 260px; flex: none; border-right: 1px solid #ece8e1; background: #f5f3ef; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.gf-tab { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; border-radius: 14px; padding: 10px 12px; cursor: pointer; text-align: left; font: inherit; color: #0d1b2a; }
.gf-tab:hover { background: #ece9e3; }
.gf-tab.on { background: #0d1b2a; color: #fff; }
.gf-tab.on .gf-tab-text span { color: rgba(255,255,255,.7); }
.gf-tab-text { display: flex; flex-direction: column; min-width: 0; }
.gf-tab-text b { font-size: 15px; }
.gf-tab-text span { font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.gf-av-coder { background: #0f766e; font-size: 19px; }
.gf-av-gloopy { border-radius: 0; overflow: visible; }
.gf-shell > .gf-app { flex: 1; min-width: 0; }
.gf-soon { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.gf-soon b { font-size: 22px; margin-top: 6px; }
.gf-soon p { margin: 0; color: #6b7280; }

@media (max-width: 760px) {
  .gf-shell { flex-direction: column; }
  .gf-side { width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid #ece8e1; padding: 8px; overflow-x: auto; }
  .gf-tab { width: auto; flex: 1; padding: 6px 10px; gap: 8px; }
  .gf-av { width: 32px; height: 32px; }
  .gf-av-coder { font-size: 15px; }
  .gf-tab-text span { display: none; }
}