/* The app shell: the grid that holds the navigation drawer and the main column, the main column's top bar, the
 * icon button. The drawer itself is in nav.css; tokens, fonts and motion in tokens.css;
 * the conversation in thread.css and the composer in composer.css. */

.app {
  --nav-width:288px;                     /* nav.css folds it to the rail's 80px */
  display:grid; grid-template-columns:var(--nav-width) minmax(0,1fr); height:100%; background:var(--md-surface);
}
.app.nav-animate { transition:grid-template-columns var(--md-dur-medium2) var(--md-ease-standard); }

/* A button that is nothing but an icon (the menu, the voice controls, the × on a chat): M3's standard icon button,
 * a circle that only shows as a state layer. */
.iconbtn {
  display:grid; place-items:center; flex:0 0 auto; cursor:pointer; padding:0;
  border:0; border-radius:var(--md-shape-full); background:transparent; color:var(--md-on-surface-variant);
}
.iconbtn:hover { background-image:var(--md-hover-layer); }
.iconbtn:active { background-image:var(--md-press-layer); }

/* ---------- main ---------- */
.main {
  display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; background:var(--md-surface);
}
/* M3's small top app bar. The logo sits at its start, where Gemini puts its name; developer tools at its end. */
.topbar { flex:0 0 auto; display:flex; align-items:center; gap:4px; height:64px; padding-inline:16px; }
.topbar .brand { display:block; width:auto; height:32px; }
.menubtn { width:48px; height:48px; font-size:24px; display:none; }   /* only when the drawer is a modal */
.top-acts { display:flex; gap:8px; margin-inline-start:auto; }
/* the language switch a phone reaches without opening the drawer (nav.css styles the pill); wide screens have the
 * drawer's own */
.topbar .langbtn { display:none; margin-inline-start:8px; }
/* developer-only buttons: M3's outlined button */
.ghost {
  cursor:pointer; height:40px; padding-inline:16px; border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-full); background:transparent; color:var(--md-primary);
  font:var(--md-label-large); letter-spacing:var(--md-label-large-track);
}
.ghost:hover { background-image:var(--md-hover-layer); }

/* signing in (auth.js). The UAE PASS button is the kit's own image, shown whole: its guideline forbids recolouring
 * or redrawing it, and asks for at least 30 x 140 px, which the image's button is at this size */
.auth { display:flex; align-items:center; gap:8px; }
.auth[hidden] { display:none; }
.uaepass-btn { display:block; padding:0; border:0; background:none; cursor:pointer; line-height:0; border-radius:8px; }
.uaepass-btn img { width:auto; }
.uaepass-btn .uaepass-full { display:block; height:37px; }
.uaepass-btn .uaepass-logo { display:none; height:40px; }
.auth-out { white-space:nowrap; }
.uaepass-btn:focus-visible { outline:2px solid var(--md-primary); outline-offset:2px; }
.auth-who { display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--md-on-surface);
            font:var(--md-label-large); letter-spacing:var(--md-label-large-track); }
.auth-who .ic { flex:none; font-size:20px; color:var(--md-primary); }
.auth-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
.auth-mock { flex:none; padding:1px 8px; border-radius:var(--md-shape-full); background:#fef3c7; color:#92400e;
             font-size:12px; line-height:18px; }

.scroll { flex:1 1 auto; min-height:0; overflow-y:auto; position:relative; z-index:2; }
.col { max-width:840px; margin:0 auto; padding:24px 24px 10px; }

@media (max-width: 820px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .topbar { padding-inline:4px 16px; }
  .menubtn { display:grid; }
  .topbar .langbtn { display:inline-flex; }
  /* a phone's top bar has room for neither the titled button nor the name: the kit's logo-only button, and the badge
   * with Sign out */
  .uaepass-btn .uaepass-full, .auth-name, .auth-mock { display:none; }
  .uaepass-btn .uaepass-logo { display:block; }
  .auth-out { height:36px; padding-inline:12px; }
  .col { padding-inline:16px; }
}