/* App shell for the composed Gina screens (Robin's day). Built by ~/fx/story.py. */
:root { color-scheme: light dark; }
html { overflow: clip; }
html, body { margin: 0; background: transparent !important; }
body { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }
.app { display: grid; grid-template-columns: 64px minmax(0, 1.35fr) minmax(0, 1fr); height: 100vh; overflow: hidden; background: var(--surface-100); }
.app--wide { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); }
.app__side .tg-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
.app__side .tg-media__tile, .app__side .tg-media__tile--tall { grid-column: auto; grid-row: auto; }
.app__side .tg-media__tile--tall .tg-media__img { height: 120px; }
.app--dash { grid-template-columns: 64px minmax(0, 1fr); }
.app--solo { grid-template-columns: 64px minmax(0, 1fr); }
.app--solo .app__chat .tg-chatframe__body { padding-inline: clamp(18px, 6%, 64px); }

.app.is-measuring { height: auto !important; overflow: visible; }
.app.is-measuring .tg-chatframe__body { overflow: hidden; flex: none; height: auto; }
.app.is-measuring .app__side, .app.is-measuring .app__dash, .app.is-measuring .app__main { overflow: visible; }
.app__rail { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: 14px 8px; background: var(--surface-000); border-right: 1px solid var(--hairline); overflow: hidden; }
.app__brand { display: flex; align-items: center; gap: 10px; padding: 2px 0 6px; font: 700 18px/1 var(--font-display); }
.app__brand .tg-msg__who { display: contents; }
.app__brand b, .app__navi span, .app__me span:not(.app__av) { display: none; }
.app__nav { display: grid; gap: 2px; }
.app__navi { display: flex; justify-content: center; align-items: center; padding: 10px; border-radius: var(--radius-md); color: var(--ink-muted); text-decoration: none; }
.app__navi.is-on { background: var(--accent-soft); color: var(--accent-strong, var(--accent)); }
.app__me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 0 0; font-size: 13px; }
.app__av { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--gina-blue, var(--accent)); color: #fff; font: 600 13px/1 var(--font-body); }
.app__h { font: 500 11px/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.app__main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-000); }
.app__top { position: sticky; top: 0; z-index: var(--z-floating-gina); display: flex; justify-content: center; padding: 14px 16px 6px; background: linear-gradient(var(--surface-000) 60%, transparent); }
.tg-chatframe.app__chat { flex: 1; display: flex; flex-direction: column; min-height: 0; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.app__chat .tg-chatframe__body { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-end; padding: 8px 18px 14px; }
.app__chat .tg-chatframe__body > * { flex: none; }
.app__chat .tg-chatframe__foot { padding: 0 14px 14px; grid-template-columns: minmax(0, 1fr); }
.app__chat .tg-suggest { flex-wrap: wrap; overflow: hidden; }
.app__chat .tg-composer, .app__chat .tg-composer__row { min-width: 0; }
.app__chat .tg-composer__input { min-width: 0; width: 100%; flex: 1 1 0; }
.app__inline { max-width: 100%; }
.app__inline > * { max-width: 100%; }
.app__inline .tg-approve, .app__inline .tg-draft, .app__inline .tg-result, .app__inline .tg-run { max-width: 460px; }
.app__side { position: relative; z-index: var(--z-sheet); display: grid; gap: 14px; align-content: start; min-width: 0; min-height: 0; padding: 14px; background: var(--surface-100); border-left: 1px solid var(--hairline); overflow: hidden; }
.app__sec { display: grid; gap: 8px; min-width: 0; }
.app__sec > *:not(.app__h) { min-width: 0; max-width: 100%; }
.app__side .tg-crm__card { box-shadow: none; animation: none; cursor: default; }
.app__side .tg-crm__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app__side .tg-crm__board > .tg-crm__col:nth-of-type(n+3) { display: none; }
.app__side .tg-crm__sum .tg-crm__fwd { display: none; }
.app__side .tg-ctr__steps { margin-top: 0; }
.app__side .tg-media__drop { display: none; }
.app__side .tg-biz { padding: 16px; }
.app__side .tg-week__days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.app__side .tg-week { padding: 14px; width: 100%; max-width: none; min-width: 0; box-sizing: border-box; }
.app__side .tg-week__legend { flex-wrap: wrap; gap: 4px 12px; }
.app__side .tg-day small { white-space: normal; }
.app__side .tg-form__fields .tg-form__f:nth-of-type(n+4) { display: none; }
.app__dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 6px 18px 18px; align-content: start; min-height: 0; overflow: hidden; }
.app__dash .app__sec--wide { grid-column: 1 / -1; }
.app__dash.app__dash--one { grid-template-columns: minmax(0, 1fr); }
.app__dash--one .tg-profile { padding: 14px 18px; }
.app__dash--one .tg-profile > div { flex: 1 1 auto !important; }
.app__dash .tg-profile { padding: 18px; gap: 14px; }
.app__dash .tg-profile .tg-pfp--128 { --s: 72px; width: 72px; height: 72px; }
.app__dash .tg-profile h2 { font-size: 28px; }
.app__phonebar { display: none; }
@media (max-width: 560px) {
  .app, .app--dash, .app--wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .app__rail { display: none; }
  .app__phonebar { display: flex; align-items: center; justify-content: space-between; padding: 34px 16px 12px; background: var(--surface-000); border-bottom: 1px solid var(--hairline); font: 600 15px/1 var(--font-body); }
  .app__menu { width: 18px; height: 12px; border-block: 2px solid var(--ink); position: relative; }
  .app__menu::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid var(--ink); }
  .app__top { padding-top: 10px; }
  .app__chat .tg-chatframe__body { padding: 8px 12px 12px; }
  .app__chat .tg-chatframe__foot { padding: 0 10px 12px; }
  .app__chat .tg-suggest { display: none; }
  .app__chat .tg-chatframe__body > :nth-last-child(n+3) { display: none; }
  .app:not(.app--solo) .app__chat .tg-chatframe__body > :not(:last-child) { display: none; }
  .app__side .app__sec + .app__sec, .app__dash .app__sec:nth-of-type(3) { display: none; }
  .app__dash { grid-template-columns: minmax(0, 1fr); padding: 8px 12px 16px; }
  .app__dash .tg-profile { flex-wrap: wrap; }
  .app__dash .tg-profile > div { flex: 1 1 170px !important; }
  .app__dash .tg-profile .tg-btn { flex: 1 1 100%; }
  /* Panels become a bottom sheet under the chat. */
  .app__side { margin-top: -14px; padding: 22px 12px 14px; border-left: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgba(11, 22, 40, .14); }
  .app__side::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--hairline-strong); }
  .app__side .tg-crm__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__side .tg-crm__board > .tg-crm__col:nth-of-type(n+3) { display: none; }
  /* The sheet shows the first two items of its panel on a phone, so the whole screen stays readable. */
  .app__side .tg-media__bar, .app__side .tg-crm__sum, .app__side .tg-files__bar { display: none; }
  .app__side .tg-routine:nth-of-type(n+3), .app__side .tg-media__tile:nth-of-type(n+3), .app__side .tg-team__member:nth-of-type(n+3), .app__side .tg-tl:nth-of-type(n+4) { display: none; }
  .app__side .tg-week__next, .app__side .tg-week__bar, .app__side .tg-post__cap + .tg-post__cap, .app__side .tg-post__when, .app__side .tg-form__f:nth-of-type(n+3), .app__side .tg-ctr__doc p { display: none; }
  .tg-float__meta { display: none; }
}