/* The app's own rules. Colours, type, radii, buttons and spacing all come from the site's
   stylesheet (its variables and classes); this file only lays out what the site has no part for. */
.t-app { --t-line: color-mix(in oklab, var(--color-charcoal) 25%, transparent); }
.t-break { overflow-wrap: anywhere; }

/* top: title beside the wallet card */
.t-top { display: grid; gap: var(--spacing-fluid-lg); align-items: end; }
@media (min-width: 1000px) { .t-top { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } }

.t-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 2.5); }

/* small secondary button: the site's pill shape (see its option buttons and badges) */
.t-chip {
  display: inline-flex; align-items: center; cursor: pointer;
  min-height: calc(var(--spacing) * 10); padding: 0 calc(var(--spacing) * 4);
  border-radius: var(--radius-sm); border: 2px solid transparent;
  background: var(--color-white); color: var(--color-charcoal);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: -0.02em;
  transition: transform var(--transition-duration, .3s) var(--ease-bounce), border-color .2s var(--ease);
}
.bg-white .t-chip, form .t-chip { background: var(--color-beige-400); }
.bg-beige-400 > .t-actions .t-chip, .bg-beige-400 > .t-chip { background: var(--color-white); }
.bg-beige-400 > .t-draft_head .t-draft_pic { background: var(--color-white); }
.t-chip:hover { border-color: var(--color-charcoal); transform: translateY(-1px); }
.t-chip:active { transform: translateY(0) scale(.98); }

/* lists */
.t-list { display: grid; gap: calc(var(--spacing) * 5); }
.t-empty { border: 2px dashed var(--t-line); }
.t-draft_head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(var(--spacing) * 4); align-items: center; }
.t-draft_pic { width: calc(var(--spacing) * 18); height: calc(var(--spacing) * 18); border-radius: var(--radius-sm); object-fit: cover; background: var(--color-beige-400); }
.t-draft_pic.-empty { display: grid; place-items: center; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.1; opacity: .6; border: 2px dashed var(--t-line); background: none; padding: 4px; }
.t-status { align-self: start; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--color-yellow-500); }
.t-status.-approved { background: var(--color-blue-500); }
.t-status.-live { background: var(--color-green-500); }
.t-row:last-child { border-bottom: 0; }
.t-row dt { flex: none; }

/* form: the site's input variables */
.t-field { display: block; margin-bottom: calc(var(--spacing) * 4); }
.t-field > span { display: block; font-weight: 700; font-size: var(--text-sm); margin-bottom: calc(var(--spacing) * 1.5); }
.t-field small { display: block; margin-top: calc(var(--spacing) * 1.5); font-size: var(--text-sm); opacity: .65; }
.t-field input:not([type='file']), .t-field textarea {
  width: 100%; display: block; font: inherit; font-size: 16px; color: var(--color-charcoal);
  background: var(--color-beige-400); border: 2px solid transparent; border-radius: var(--radius-sm);
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4); outline: none; resize: vertical;
  transition: border-color .2s var(--ease);
}
.t-field input:focus, .t-field textarea:focus { border-color: var(--color-charcoal); }
.t-field input::placeholder, .t-field textarea::placeholder { color: var(--color-charcoal); opacity: .45; }
.t-pic { display: flex; align-items: center; gap: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 2.5); }
.t-pic img { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); border-radius: var(--radius-sm); object-fit: cover; }
.t-error { color: var(--color-red-600); font-weight: 700; margin-top: calc(var(--spacing) * 2); }

.t-toast {
  position: fixed; left: 50%; bottom: calc(var(--spacing) * 6); transform: translateX(-50%); z-index: 250;
  max-width: min(92vw, 520px); padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 5);
  background: var(--color-charcoal); color: var(--color-white); border-radius: var(--radius-sm); font-weight: 500; text-align: center;
}
.t-toast[hidden] { display: none; }

/* layout that the page this shell came from did not need */
.t-two { display: grid; gap: calc(var(--spacing) * 6); margin-top: var(--spacing-fluid-lg); }
.t-split { display: grid; gap: calc(var(--spacing) * 8); margin-top: var(--spacing-fluid-lg); align-items: start; }
@media (min-width: 1000px) {
  .t-two { grid-template-columns: 1.15fr 1fr; }
  .t-split { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
  .t-split > form { position: sticky; top: calc(var(--spacing) * 24); }
}
.t-pad { padding-top: calc(var(--spacing-safe-header) + var(--spacing-fluid-2xl)); padding-bottom: var(--spacing-fluid-2xl); }
.t-sec { padding-block: var(--spacing-fluid-2xl); }
.t-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* your dot: a solid round dot in the page green, never a face */
.t-dot { display: inline-block; flex: none; width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); border-radius: 50%; background: var(--color-green-500); }
.t-dot.-small { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); margin-top: 2px; }
.t-chat { margin-top: var(--spacing-fluid-lg); }
.t-chat_head { display: flex; align-items: center; gap: calc(var(--spacing) * 4); }
.t-chat_who { flex: 1; min-width: 0; }
.t-chat_rename { display: flex; gap: calc(var(--spacing) * 2.5); margin-top: calc(var(--spacing) * 4); }
.t-chat_rename[hidden] { display: none; }
.t-chat_rename input, .t-chat_form textarea {
  flex: 1; min-width: 0; width: 100%; display: block; font: inherit; font-size: 16px; color: var(--color-charcoal);
  background: var(--color-white); border: 2px solid transparent; border-radius: var(--radius-sm);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); outline: none; resize: none; transition: border-color .2s var(--ease);
}
.t-chat_rename input:focus, .t-chat_form textarea:focus { border-color: var(--color-charcoal); }
.t-chat_form textarea::placeholder, .t-chat_rename input::placeholder { color: var(--color-charcoal); opacity: .45; }
.t-chat_log { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); margin: calc(var(--spacing) * 6) 0; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.t-chat_log:empty { display: none; }
.t-msg { display: flex; gap: calc(var(--spacing) * 3); align-items: flex-start; max-width: min(100%, 620px); }
.t-msg_body { padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4.5); border-radius: var(--radius-sm); background: var(--color-white); min-width: 0; }
.t-msg.-owner { align-self: flex-end; }
.t-msg.-owner .t-msg_body { background: var(--color-green-500); }
.t-msg_body img { display: block; width: calc(var(--spacing) * 24); height: calc(var(--spacing) * 24); object-fit: cover; border-radius: var(--radius-sm); margin-bottom: calc(var(--spacing) * 2.5); }
.t-msg_body .t-actions { margin-top: calc(var(--spacing) * 3); }
.t-msg_body .t-chip { background: var(--color-beige-400); min-height: calc(var(--spacing) * 8.5); }
.t-msg_when { display: block; margin-top: 4px; font-size: 12px; opacity: .55; }
/* the dot at work: three small dots that pulse */
.t-typing { display: inline-flex; gap: 6px; padding: 6px 2px; }
.t-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-charcoal); opacity: .25; animation: t-pulse 1.1s var(--ease, ease) infinite; }
.t-typing i:nth-child(2) { animation-delay: .18s; }
.t-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes t-pulse { 0%, 100% { opacity: .2; transform: scale(.8); } 40% { opacity: .9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .t-typing i { animation: none; opacity: .5; } }
.t-chat_form { display: grid; gap: calc(var(--spacing) * 3); }
.t-chat_form .t-actions { justify-content: flex-end; }
.t-chat_form .t-chip { background: var(--color-white); }
.t-chat_pic { display: flex; align-items: center; gap: calc(var(--spacing) * 3); }
.t-chat_pic[hidden] { display: none; }
.t-chat_pic img { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); border-radius: var(--radius-sm); object-fit: cover; }
.t-chat[data-off] .t-chat_form { opacity: .55; }
.t-note { color: var(--color-red-600); font-weight: 700; }
.t-token_value { margin-top: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background: var(--color-white); border-radius: var(--radius-sm); font-family: ui-monospace, monospace; font-size: 13px; }
.t-token[hidden], .t-token_value[hidden] { display: none; }
.t-draft.-flash { outline: 3px solid var(--color-green-500); outline-offset: 4px; }

/* skip approval: the one card that changes what a message does, so it gets the loud colour */
.t-skip { margin-top: var(--spacing-fluid-lg); background: var(--color-yellow-500); }
.t-skip[hidden] { display: none; }
.t-skip_head { display: flex; align-items: start; justify-content: space-between; gap: calc(var(--spacing) * 5); }
.t-skip .t-chip { background: var(--color-white); }
.t-skip_wallet { margin-top: calc(var(--spacing) * 5); padding: calc(var(--spacing) * 5); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--color-white) 55%, transparent); }
/* the same switch as a chip next to Send */
.t-skipchip { gap: calc(var(--spacing) * 2); }
.t-skipchip[hidden] { display: none; }
.t-skipchip_dot { width: calc(var(--spacing) * 2.5); height: calc(var(--spacing) * 2.5); border-radius: 50%; background: color-mix(in oklab, var(--color-charcoal) 30%, transparent); transition: background .25s ease-in-out; }
.t-chat_form .t-skipchip[aria-pressed='true'] { background: var(--color-yellow-500); border-color: var(--color-charcoal); }
.t-skipchip[aria-pressed='true'] .t-skipchip_dot { background: var(--color-charcoal); }
.t-skipchip:disabled { opacity: .5; cursor: default; }
.t-switch {
  flex: none; cursor: pointer; width: calc(var(--spacing) * 16); height: calc(var(--spacing) * 9); padding: 4px;
  border-radius: 999px; border: 2px solid var(--color-charcoal); background: var(--color-white);
  transition: background .25s var(--ease);
}
.t-switch span {
  display: block; height: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--color-charcoal);
  transition: transform .3s var(--ease-bounce);
}
.t-switch[aria-checked='true'] { background: var(--color-green-500); }
.t-switch[aria-checked='true'] span { transform: translateX(calc(var(--spacing) * 7)); }
.t-switch:disabled { opacity: .5; cursor: default; }