/* Your database: the drawer button, the welcome's Database row, and the sheet. Colours: ThinkerStreet's own is the
   drawer's blue; your own Supabase is Supabase green; locked is amber. */
[data-udb-button] { --udb: #4be3ff; }
[data-udb-button][data-mode="own"] { --udb: #3ecf8e; }
[data-udb-button][data-mode="locked"] { --udb: #ffbe50; }
.udb-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--udb);
  background: color-mix(in srgb, var(--udb) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--udb) 45%, transparent), 0 0 14px color-mix(in srgb, var(--udb) 25%, transparent); }
.udb-ic svg, .udb-hero svg, .udb-opt-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.udb-text { display: grid; gap: 3px; min-width: 0; text-align: left; }
.udb-text b { font: 650 14px/1.15 system-ui, sans-serif; color: #eef6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.udb-text small { font: 600 11px/1.2 system-ui, sans-serif; color: color-mix(in srgb, var(--udb) 70%, #cfe0f5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* in the drawer, under the wordmark */
.udb-drawer { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--udb) 30%, rgba(255, 255, 255, .1)); background: linear-gradient(135deg, color-mix(in srgb, var(--udb) 10%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .02)); }
.udb-drawer:hover { border-color: color-mix(in srgb, var(--udb) 60%, transparent); }

/* on the Chat welcome (the Coding welcome has its integrations row instead) */
.udb-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px auto 0; padding: 4px 6px; }
.udb-row-label { color: #8fdfff; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.udb-chip { display: flex; align-items: center; gap: 9px; max-width: min(320px, 72vw); padding: 5px 12px 5px 5px; border-radius: 12px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--udb) 35%, rgba(255, 255, 255, .1)); background: rgba(10, 16, 32, .5); }
.udb-chip .udb-ic { width: 30px; height: 30px; border-radius: 9px; }
body:is(.mode-code, .project-code) .udb-row { display: none; }

/* the sheet */
.udb-sheet { position: fixed; inset: 0; z-index: 2147480500; display: grid; place-items: center; padding: 14px; background: rgba(3, 8, 20, 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .18s ease, backdrop-filter .18s ease; overflow-y: auto; }
.udb-sheet.is-open { background: rgba(3, 8, 20, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.udb-card { width: min(560px, 100%); max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; padding: 20px 18px;
  border-radius: 14px; color: #e8f1fb; background: linear-gradient(160deg, rgba(20, 30, 54, .98), rgba(9, 14, 28, .98)); border: 1px solid rgba(120, 200, 255, .2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03) inset; transform: translateY(8px); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.udb-sheet.is-open .udb-card { transform: none; opacity: 1; }
.udb-top { display: grid; grid-template-columns: 46px minmax(0, 1fr) 38px; gap: 12px; align-items: start; }
.udb-hero { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #3ecf8e; background: rgba(62, 207, 142, .12); box-shadow: inset 0 0 0 1px rgba(62, 207, 142, .45), 0 0 20px rgba(62, 207, 142, .25); }
.udb-hero svg { width: 24px; height: 24px; }
.udb-kicker { margin: 0 0 4px; color: #8fdfff; font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
.udb-top h2 { margin: 0; font: 600 24px/1.15 "Iowan Old Style", Palatino, Georgia, serif; color: #fff; }
.udb-sub { margin: 6px 0 0; color: #b8c7dc; font-size: 14px; line-height: 1.45; }
.udb-x { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff; display: grid; place-items: center; cursor: pointer; }
.udb-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.udb-options { display: grid; gap: 8px; }
.udb-option, .udb-proj { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 12px; border-radius: 12px; text-align: left; color: inherit;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); font: inherit; }
button.udb-option, .udb-proj { cursor: pointer; }
button.udb-option:hover, .udb-proj:hover { border-color: rgba(62, 207, 142, .55); background: rgba(62, 207, 142, .08); }
.udb-option.is-on { border-color: rgba(75, 227, 255, .45); background: rgba(75, 227, 255, .08); }
.udb-option b, .udb-proj b { display: block; font: 650 15px/1.2 system-ui, sans-serif; color: #fff; }
.udb-option small, .udb-proj small { display: block; margin-top: 3px; color: #a9b9cf; font-size: 12.5px; line-height: 1.35; }
.udb-opt-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #4be3ff; background: rgba(75, 227, 255, .12); }
.udb-opt-ic.is-sb { color: #3ecf8e; background: rgba(62, 207, 142, .12); }
.udb-proj.is-busy { border-color: rgba(62, 207, 142, .6); }
.udb-proj:disabled { opacity: .55; cursor: default; }
.udb-proj.is-busy:disabled { opacity: 1; }
.udb-step { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.udb-step h3 { margin: 0; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: #8fdfff; }
.udb-projects { display: grid; gap: 6px; }
.udb-small { margin: 0; color: #a9b9cf; font-size: 13px; line-height: 1.45; }
.udb-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #cfdced; font-size: 13.5px; line-height: 1.5; }
.udb-steps a { color: #8fdfff; }
.udb-form { display: grid; gap: 10px; }
.udb-field { display: grid; gap: 6px; }
.udb-field span { font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: #9fb2cc; }
.udb-field input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; font: 16px system-ui, sans-serif; outline: none; }
.udb-field input:focus { border-color: #3ecf8e; box-shadow: 0 0 0 3px rgba(62, 207, 142, .18); }
.udb-btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; cursor: pointer; color: #04140c; font: 700 15px/1 system-ui, sans-serif;
  background: linear-gradient(135deg, #3ecf8e, #4be3ff); box-shadow: 0 10px 24px rgba(62, 207, 142, .25); }
.udb-btn:disabled { opacity: .6; cursor: progress; }
.udb-btn.is-ghost { color: #e8f1fb; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); box-shadow: none; }
.udb-link { justify-self: start; padding: 0; border: 0; background: none; color: #8fdfff; font: 600 13.5px/1.4 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.udb-actions { display: grid; gap: 8px; }
.udb-note { margin: 0; color: #93a6c0; font-size: 12.5px; line-height: 1.5; }
.udb-note.is-bad { color: #ffb4a8; }
.udb-state { display: grid; gap: 3px; padding: 12px; border-radius: 12px; border: 1px solid rgba(62, 207, 142, .45); background: rgba(62, 207, 142, .08); }
.udb-state b { color: #b8f5d8; font-size: 14.5px; }
.udb-state small { color: #a9c9b8; font-size: 12.5px; }
.udb-skel { display: block; height: 58px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: udb-shine 1.2s linear infinite; }
@keyframes udb-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .udb-skel { animation: none; } .udb-sheet, .udb-card { transition: none; } }