/* 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; }
/* PHONES (owner, 2026-11-06: the phone apps): clear of the status bar, the notch and the home bar. Zero on computers. */
body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
[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 LEFT SIDE, LIKE THE CLAUDE APP: the agent rail, then the open agent's
   column (New chat, Repositories, Recents, the account at the bottom). */
.gf-cardbrand { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.gf-cardbrand b { font-size: 16px; }
.gf-shell { flex: 1; min-height: 0; display: flex; }
.gf-sidewrap { display: flex; flex: none; background: #f5f3ef; border-right: 1px solid #ece8e1; }
.gf-rail { width: 64px; border-right: 1px solid #e6e2db; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; }
.gf-tab { width: 46px; height: 46px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.gf-tab:hover { background: #ece9e3; }
.gf-tab.on { background: #e1ddd5; }
.gf-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.gf-av-coder { background: #0f766e; font-size: 16px; }
.gf-av-gloopy { border-radius: 0; overflow: visible; }
.gf-col { width: 252px; display: flex; flex-direction: column; padding: 12px 8px 10px; min-height: 0; }
.gf-colbrand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 14px; }
.gf-colbrand b { font-size: 16px; }
.gf-nav { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 10px; font: 15px Inter, system-ui, sans-serif; color: #0d1b2a; cursor: pointer; text-align: left; }
.gf-nav:hover:not(:disabled) { background: #ece9e3; }
.gf-nav:disabled { color: #b5b1aa; cursor: default; }
.gf-nav svg { flex: none; }
.gf-rec { font: 500 13px Inter, system-ui, sans-serif; color: #8a857d; padding: 18px 10px 6px; }
.gf-recents { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.gf-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; font: 15px Inter, system-ui, sans-serif; color: #0d1b2a; cursor: pointer; }
.gf-item:hover { background: #ece9e3; }
.gf-item.on { background: #e4e0d9; }
.gf-item-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8912d; flex: none; }
.gf-prn { font: 600 11px Inter, system-ui, sans-serif; color: #0f766e; flex: none; }
.gf-x { display: none; border: 0; background: none; color: #8a857d; font-size: 17px; line-height: 1; padding: 0 2px; cursor: pointer; flex: none; }
.gf-item:hover .gf-x { display: block; }
.gf-item:hover .gf-dot, .gf-item:hover .gf-prn { display: none; }
.gf-none { color: #8a857d; font-size: 13px; padding: 4px 10px; margin: 0; }
.gf-me { position: relative; display: flex; align-items: center; gap: 10px; border-top: 1px solid #e3ded6; padding: 12px 10px 2px; margin-top: 8px; }
.gf-meav { width: 28px; height: 28px; border-radius: 50%; background: #e4e0d9; display: grid; place-items: center; font: 600 12px Inter, system-ui, sans-serif; flex: none; }
.gf-mename { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-gear { border: 0; background: none; color: #6b7280; cursor: pointer; padding: 4px; border-radius: 8px; display: grid; }
.gf-gear:hover { background: #ece9e3; }
.gf-menu { position: absolute; left: 6px; right: 6px; bottom: 46px; background: #fff; border: 1px solid #e3ded6; border-radius: 12px; box-shadow: 0 10px 30px rgba(13,27,42,.12); padding: 6px; display: flex; flex-direction: column; z-index: 20; }
.gf-menu-mail { font-size: 12.5px; color: #8a857d; padding: 6px 10px 8px; overflow: hidden; text-overflow: ellipsis; }
.gf-menu button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font: 14px Inter, system-ui, sans-serif; color: #0d1b2a; cursor: pointer; }
.gf-menu button:hover { background: #f3f1ed; }
.gf-shell > .gf-app { flex: 1; min-width: 0; }
.gf-scrim { display: none; }

/* A phone: the left side slides in over the chat (☰). */
@media (max-width: 760px) {
  .gf-sidewrap { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(13,27,42,.18); }
  body.gf-side-open .gf-sidewrap { transform: none; }
  body.gf-side-open .gf-scrim { display: block; position: fixed; inset: 0; background: rgba(13,27,42,.25); z-index: 30; }
  .gf-col { width: min(252px, calc(100vw - 110px)); }
}

/* THE LANDING PAGE: top bar, the download buttons (look only), the ask box.
   The sign-in card shows only once asked for (.gf-gate.signing). */
.gf-gate { position: relative; padding-top: 84px; }
.gf-gate:not(.signing) .gf-card { display: none; }
.gf-gate.signing .gf-ask { display: none; }
.gf-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 44px; }
.gf-top .gf-cardbrand { margin: 0; }
.gf-signin { font: inherit; font-size: 15px; background: #fff; border: 1px solid #e5e3dd; border-radius: 999px; padding: 9px 15px; cursor: pointer; color: #0d1b2a; }
.gf-signin:hover { background: #f3f1ec; }
.gf-dlrow { position: absolute; top: 90px; right: 44px; }
.gf-inapp .gf-dlrow { display: none; } /* already in the app */
.dl-apps { display: flex; flex-direction: column; gap: 8px; }
.dl-app { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; background: #0d0d0f; color: #fff; border: 1px solid #0d0d0f; border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: default; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px -8px rgba(0,0,0,.45); transition: background .15s, transform .15s; }
.dl-app:hover { background: #26262b; transform: translateY(-1px); }
.dl-app svg { width: 15px; height: 15px; flex: none; }
.gf-ask { width: 100%; max-width: 720px; background: #fff; border: 1px solid #e5e3dd; border-radius: 22px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.25); padding: 18px 18px 12px 22px; }
.gf-ask textarea { width: 100%; border: 0; outline: 0; resize: none; font: inherit; font-size: 16px; line-height: 1.5; color: #1f1e1d; background: transparent; }
.gf-ask-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.gf-ask-chip { font-size: 13px; color: #55606d; border: 1px solid #e5e3dd; border-radius: 999px; padding: 6px 11px; }
.gf-ask-chip b { color: #1f1e1d; }
.gf-ask-go { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #0d0d0f; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
.gf-ask-go svg { width: 20px; height: 20px; }
@media (max-width: 700px) {
  .gf-top { padding: 14px 16px; }
  .gf-dlrow { position: static; margin-bottom: 20px; }
  .dl-apps { flex-direction: row; justify-content: center; }
  .dl-app { min-width: 0; padding: 10px 14px; }
  .dl-app span { display: none; }
  .gf-gate:not(.signing) { display: flex; flex-direction: column; align-items: center; justify-content: center; }
}
/* GLOOPY NEEDS YOU (the docs, 2026-11-10): a mark on its tab while it waits for your answer. */
.gf-tab { position: relative; }
.gf-tab.needs-you::after { content: ''; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: #d93025; box-shadow: 0 0 0 2px #f4f2ee; }