/* Ding Web: what + offers (adding.js) and its trays (add-tray.js and the
   trays in add-*.js, camera.js). Loaded by adding.js. Colours only through
   the theme's variables (styles.css), so light, dark and the look picked in
   Settings all hold. */

/* ── The menu: the palette's four at its top, then a row each ── */
.ding-menu.add-menu { min-width: 272px; }
.add-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ding-menu .menu-html:has(> .add-palette) { padding: 2px 0 0; }
.add-pal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 62px; padding: 8px 2px 7px; border: 0; border-radius: 13px; background: var(--soft);
  color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.add-pal:hover, .add-pal:focus-visible { background: var(--hair); outline: none; }
.add-pal:disabled { opacity: 0.4; cursor: default; }
.add-pal-icon { display: grid; place-items: center; width: 22px; height: 22px; }
.add-pal-icon svg { width: 21px; height: 21px; }
.add-pal-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── A tray: the glass card over the bar, its grab bar at the top ── */
.composer-panel.has-tray, .td-add-panel.has-tray {
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.add-tray {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  padding: 0 12px 12px; border-radius: 22px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  animation: at-in 0.2s cubic-bezier(0.2, 0.9, 0.25, 1);
  transform-origin: 30% 100%;
}
@keyframes at-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.add-tray.at-going { opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 0.16s ease, transform 0.16s ease; }
/* Over the page: once it's dragged past its own size (or floating). */
.add-tray.lifted, .add-tray.floating { position: fixed; z-index: 55; margin: 0; }
/* (Moved over the page as it grows: it doesn't appear again.) */
.add-tray.lifted { animation: none; }
.add-tray.floating {
  left: max(8px, calc(50% - 290px)); right: max(8px, calc(50% - 290px));
  bottom: max(16px, env(safe-area-inset-bottom));
  max-height: calc(100dvh - 32px);
}
@media (max-width: 760px) {
  .add-tray.floating { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.add-tray.at-moving {
  transition: top 0.34s cubic-bezier(0.2, 0.9, 0.25, 1), bottom 0.34s cubic-bezier(0.2, 0.9, 0.25, 1),
    left 0.34s cubic-bezier(0.2, 0.9, 0.25, 1), right 0.34s cubic-bezier(0.2, 0.9, 0.25, 1),
    height 0.34s cubic-bezier(0.2, 0.9, 0.25, 1), border-radius 0.34s ease;
}
@media (max-width: 560px) {
  .add-tray.at-full { border-radius: 0; border-width: 0; padding-top: env(safe-area-inset-top); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
html.at-dragging, html.at-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }
.at-holder { flex: none; }

.at-grab {
  display: grid; place-items: center; align-self: center; width: 72px; height: 20px; margin: 0 0 2px;
  padding: 0; border: 0; background: none; cursor: grab; touch-action: none; flex: none;
}
.at-grab i { display: block; width: 38px; height: 5px; border-radius: 999px; background: var(--steel); opacity: 0.45; transition: opacity 0.15s ease, width 0.15s ease; }
.at-grab:hover i, .at-grab:focus-visible i { opacity: 0.8; width: 44px; }
.at-grab:focus-visible { outline: none; }
.at-grab:focus-visible i { box-shadow: 0 0 0 3px var(--soft), 0 0 0 4.5px var(--steel); }

.at-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.at-head { display: flex; align-items: center; gap: 8px; flex: none; }
.at-title { flex: 1; min-width: 0; padding-left: 4px; font-size: 15px; font-weight: 600; }
.at-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.at-search > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--steel); pointer-events: none; }
.at-search .field { flex: 1; min-width: 0; padding-left: 34px; }
.at-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.add-tray.lifted .at-scroll, .add-tray.at-tall .at-scroll { flex: 1; }
.at-label { margin: 2px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); }
.at-note { margin: 0 4px; min-height: 0; }
.at-note:empty { display: none; }
.at-foot { margin: 0; text-align: center; flex: none; }
.at-state { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin: 0; padding: 10px 4px; font-size: 13px; }
.at-state span { color: var(--steel); }
.at-state .btn { margin-top: 4px; }
.at-tabs { align-self: flex-start; box-shadow: none; flex: none; }
.at-tabs button { padding: 5px 14px; font-size: 13px; }
.at-words { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.at-words::-webkit-scrollbar { display: none; }
.at-words .c-chip { flex: none; }

/* ── GIFs and stickers: a row when small, a grid taller ── */
.tt-tiles {
  display: grid; grid-auto-flow: column; grid-auto-columns: 104px; grid-template-rows: 104px; gap: 6px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
}
.tt-tiles.stickers { grid-auto-columns: 92px; grid-template-rows: 92px; }
.add-tray.at-tall .tt-tiles {
  grid-auto-flow: row; grid-auto-columns: auto; grid-template-rows: none; grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); overflow-x: hidden; overflow-y: auto; align-content: start;
}
.add-tray.at-tall .tt-tiles.stickers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tt-tiles:has(> .tt-state) { display: block; }
/* Square, by its width (a grid's rows then always fit it). */
.tt-tile {
  position: relative; display: block; width: 100%; height: 0; padding: 0 0 100%; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--soft); cursor: pointer; transition: transform 0.12s ease;
}
.tt-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stickers .tt-tile { background: none; }
.stickers .tt-tile img { object-fit: contain; padding: 4px; box-sizing: border-box; }
.tt-tile:hover { transform: scale(0.97); }
.tt-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tt-state { margin: 0; padding: 26px 8px; text-align: center; }
.tt-state .link-btn { padding: 0 2px; font-size: inherit; }

/* ── Link ── */
.at-link-row { display: flex; gap: 8px; align-items: center; }
.at-link-row .field { flex: 1; min-width: 0; }
.at-link-row .btn { flex: none; gap: 6px; }
.at-link-row .btn svg { width: 15px; height: 15px; }

/* ── Share a Song ── */
.sg-list { display: flex; flex-direction: column; gap: 2px; max-height: min(300px, 42vh); margin: 0 -4px; padding: 0 4px; }
.add-tray.lifted .sg-list, .add-tray.at-tall .sg-list { max-height: none; }
.sg-rows { display: flex; flex-direction: column; gap: 2px; transition: opacity 0.2s; }
.sg-rows.dim { opacity: 0.55; }
.sg-row { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-radius: 14px; }
.sg-row:hover { background: var(--soft); }
.sg-play {
  position: relative; width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 9px; overflow: hidden;
  background: var(--soft); color: var(--steel); cursor: pointer; display: grid; place-items: center;
}
.sg-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-play > svg { width: 22px; height: 22px; }
.sg-play .sg-glyph {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, 0.32); opacity: 0; transition: opacity 0.15s ease;
}
.sg-play .sg-glyph svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.sg-play:hover .sg-glyph, .sg-play:focus-visible .sg-glyph, .sg-row.playing .sg-glyph { opacity: 1; }
@media (hover: none) { .sg-play .sg-glyph { opacity: 1; background: rgba(0, 0, 0, 0.22); } }
.sg-play:disabled { cursor: default; }
.sg-play:disabled .sg-glyph { display: none; }
.sg-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-words > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-words b { font-size: 14px; font-weight: 600; }
.sg-words span { font-size: 13px; color: var(--steel); }
.sg-e {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 6px; vertical-align: 1px;
  border-radius: 3px; background: var(--steel); color: var(--on-ink); font-size: 10px; font-style: normal; font-weight: 700;
}
.btn.sg-add { flex: none; gap: 4px; height: 32px; padding: 0 12px; }
.sg-add svg { width: 14px; height: 14px; flex: none; stroke-width: 2.4; }
.sg-hint { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px 4px 2px; }
.sg-hint p { margin: 0; }
.sg-hint .btn { gap: 6px; }
.sg-hint .btn svg { width: 15px; height: 15px; }
@media (max-width: 520px) {
  .sg-add span { display: none; }
  .btn.sg-add { width: 36px; padding: 0; justify-content: center; }
  /* (Place's too, in its tray: its Add a round + as well.) */
  .add-tray .btn.pl-add { width: 36px; padding: 0; justify-content: center; }
  .add-tray .pl-add svg { flex: none; }
}

/* ── Text ── */
.at-note-field { height: auto; min-height: 104px; padding: 12px 14px; resize: none; line-height: 1.45; font: inherit; }
.add-tray.lifted .at-note-field, .add-tray.at-tall .at-note-field { flex: 1; }
.at-text-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.at-text-foot .at-count { margin-right: auto; }

/* ── Place (place-search.js, in a tray) ── */
.at-place .at-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.at-place .panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.add-tray.lifted .pl-list, .add-tray.at-tall .pl-list { max-height: none; overflow: visible; }

/* ── The camera ── */
/* Small, the camera's own shape (as wide as fits that height); taller, all of the tray. */
.cam-view {
  position: relative; align-self: center; width: min(100%, calc(min(46vh, 430px) * 4 / 3)); aspect-ratio: 4 / 3; min-height: 200px;
  border-radius: 16px; overflow: hidden; background: #000; color: #fff; flex: none;
}
@media (max-width: 560px) { .cam-view { width: min(100%, calc(52vh * 3 / 4)); aspect-ratio: 3 / 4; } }
.add-tray.lifted .cam-view, .add-tray.at-tall .cam-view { flex: 1; width: 100%; aspect-ratio: auto; }
.cam-live { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-view.mirror .cam-live { transform: scaleX(-1); }
.cam-view.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: cam-flash 0.3s ease-out forwards; pointer-events: none; }
@keyframes cam-flash { to { opacity: 0; } }
.cam-state { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.86); }
.cam-time {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px;
  background: #E5352B; color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cam-bar { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 30px; }
.cam-side {
  width: 44px; height: 44px; border-radius: 999px; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, 0.38); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cam-side svg { width: 21px; height: 21px; }
.cam-side:disabled { opacity: 0.4; }
.cam-bar .cam-side[hidden] { display: grid !important; visibility: hidden; }
.cam-shutter {
  position: relative; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 999px; background: none;
  display: grid; place-items: center; cursor: pointer; touch-action: none; -webkit-touch-callout: none;
}
.cam-shutter:disabled { opacity: 0.5; cursor: default; }
.cam-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cam-ring circle { fill: none; stroke: #fff; stroke-width: 4; }
.cam-shutter i { width: 56px; height: 56px; border-radius: 999px; background: #fff; transition: transform 0.15s ease, border-radius 0.2s ease, background 0.2s ease, width 0.2s ease, height 0.2s ease; }
.cam-shutter:active i { transform: scale(0.92); }
.cam-shutter:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.recording .cam-shutter i { width: 26px; height: 26px; border-radius: 6px; background: #E5352B; }
.recording .cam-ring circle { stroke: #E5352B; }
.cam-hint { text-align: center; }

/* ── What's added, on the bar: a tile opens it; a link's while its page is looked at ── */
.composer-tray .tile, .td-add-tray .tile, .ec-thing .tile { cursor: pointer; }
.composer-tray .tile:focus-visible, .td-add-tray .tile:focus-visible, .ec-thing .tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tile.loading::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--soft) 50%, transparent 70%); background-size: 220% 100%;
  animation: at-shine 1.2s linear infinite;
}
@keyframes at-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.composer-chips .c-chip.on { background: var(--ink); color: var(--on-ink); border-color: transparent; }
/* Small tiles (a bar's): one line of name, and nothing under its ✕. */
.composer-tray .tile .tile-name, .td-add-tray .tile .tile-name { -webkit-line-clamp: 1; }
.composer-tray .tile .tile-sub, .td-add-tray .tile .tile-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-tray .tile .tile-icon, .td-add-tray .tile .tile-icon { top: 10px; left: 10px; width: 24px; height: 24px; }
.composer-tray .tile .note, .td-add-tray .tile .note { right: 30px; -webkit-line-clamp: 3; }

@media (prefers-reduced-motion: reduce) {
  .add-tray, .add-tray.at-going, .add-tray.at-moving, .tile.loading::before, .cam-view.flash::after { animation: none !important; transition: none !important; }
}