/* ART EXEMPTION: the five gift tiers' colours and the drawn coin's golds
   (#FFF3A0 / #C8A400) are the gifts' own palette, not house chrome. The
   sheet, buttons and words around them keep the house style. */
/* The gift tray (round twelve, 2026-08-20).
   Its own file because it is the one thing that shows on three different
   screens (the Chat tab, a private message and the Live stage) and none of
   those three stylesheets owns the other two. Loaded by chat.html, live.html
   and profile.html, after style.css so the tokens are already set.

   Martin's spec and reference pictures:
   businesses/chat-app/sources/look spec 2026-08-20.md
   DRAWN ONLY this round: nothing is sent and no coins move. */

/* ---- the gift button on a send bar ---- */
.gtopen {
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;        /* 44px, thumb sized */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; color: var(--brand);
}
.gtopen img { width: 1.6rem; height: 1.6rem; object-fit: contain; display: block; }
.gtopen:active { background: #1C1C20; }

/* ---- the sheet ---- */
.gtwrap { position: fixed; inset: 0; z-index: 60; }
.gtback { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .2s ease; }
.gtwrap.up .gtback { opacity: 1; }
.gtsheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* Held inside the phone column on a laptop, the same way every other
     pinned thing on this site is (round ten). */
  max-width: 27rem; margin-inline: auto;
  background: var(--panel);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  padding: .55rem .8rem calc(.9rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .22s ease;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 -18px 50px -20px rgba(240,41,108,.5);
}
.gtwrap.up .gtsheet { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .gtback, .gtsheet { transition: none; }
}
body.gt-open { overflow: hidden; }

.gthandle {
  display: block; width: 2.4rem; height: .28rem; margin: .1rem auto .7rem;
  border-radius: 999px; background: rgba(255,255,255,.5);
  border: 0; padding: 0; cursor: pointer;
}
.gthandle::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.6rem; }

.gthead { display: flex; align-items: center; gap: .6rem; }
.gttitles { min-width: 0; }
.gthead b { display: block; font-family: var(--round); font-weight: 800; font-size: 1.15rem; color: #FFFFFF; }
.gtto { display: block; font-size: .74rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gtcoins {
  margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--round); font-weight: 800; font-size: .95rem; color: var(--gold);
  white-space: nowrap;
}
.gtx {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: #1C1C20; border: 1px solid var(--line); color: var(--text);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}

/* the gold coin beside a number */
.gtcoin {
  display: inline-block; width: .78rem; height: .78rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF3A0, var(--gold) 62%, #C8A400);
  box-shadow: 0 0 6px -1px var(--gold);
  flex: 0 0 auto;
}


/* ---- the grid ---- */
/* Round twenty-two (2026-08-21): five real pictures, not four line drawings.
   The tier tabs are gone with the seventeen drawn gifts they held. */
.gtgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin: .75rem 0 0; }
.gtgift img { width: 100%; max-width: 3rem; height: 2.6rem; object-fit: contain; display: block; margin: 0 auto .2rem; }
/* ---- one gift tile ----
   Round twenty-two (2026-08-21): a real picture, not a line drawing, and one
   look for all five. The tier flavours (line / pink / gold / vio / mega) went
   with the seventeen drawn gifts and the five tabs that held them. */
.gtgift {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: .6rem .2rem .45rem; cursor: pointer; min-height: 5.4rem;
  font: inherit; color: inherit;
}
/* Two lines, not an ellipsis. At 67px a tile "Flaming heart" came out as
   "Flaming he..." and a gift you cannot read the name of is not a gift you
   will buy. Read at 390px with the longest real name, not the shortest. */
.gtgift .gtname {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-decoration: none; font-size: .56rem; line-height: 1.15; color: var(--text-2);
  overflow: hidden; max-width: 100%; text-align: center; min-height: 1.3rem;
}
.gtgift .gtprice { display: inline-flex; align-items: center; gap: .2rem; text-decoration: none; font-family: var(--round); font-weight: 800; font-size: .68rem; color: var(--gold); }
.gtgift .gtprice .gtcoin { width: .6rem; height: .6rem; }

.gtgift.picked { border-color: var(--gold); box-shadow: inset 0 0 16px -4px var(--gold); }

/* Cannot afford it: greyed, but the name and the price stay readable, because
   a control that refuses without words reads as one that is broken. */
.gtgift.short { opacity: .45; }
.gtgift.short img { filter: grayscale(1); }
.gtgift.short .gtprice { color: var(--text-2); }

/* ---- Send ---- */
.gtsend {
  display: block; width: 100%; margin: .8rem 0 0;
  border: 0; border-radius: 999px; padding: .85rem 1rem; cursor: pointer;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #FFFFFF; font-family: var(--round); font-weight: 800; font-size: 1rem;
}
.gtsend.off { background: #1C1C20; color: var(--text-2); }
.gtnote { margin: .55rem 0 0; text-align: center; font-size: .7rem; color: var(--text-3); }

@media (min-width: 700px) {
  .gtgift svg { width: 2.2rem; height: 2.2rem; }
  .gtgift .gtname { font-size: .66rem; }
}

/* ---- the two tiers (round twenty-two, premium added 2026-08-21) ----
   A premium gift in the same grid as a 100-coin rose does not read as
   different, and being different is the entire point of the tier. */
.gttiers { margin: .75rem 0 0; }
.gttier {
  margin: .55rem 0 .3rem; font-family: var(--round); font-weight: 800;
  font-size: .7rem; color: var(--text-2);
}
.gttier:first-child { margin-top: 0; }
.gttier.gold { color: var(--gold); }
.gtgift.prem { border-color: rgba(255,215,0,.4); box-shadow: inset 0 0 16px -6px var(--gold); }
.gtgift.prem .gtname { color: var(--gold); }