/* ==========================================================================
   layout.css — the app frame, sheets and toasts
   Desktop  : top bar + icon rail + frosted panel  (≥ 761px)
   Phone    : sticky compact top bar + floating bottom tab bar (≤ 760px)
   ========================================================================== */

/* ---------------------------------------------------------------- shell -- */
.app {
  position: relative;
  z-index: 1;
}
.shell {
  --gutter: clamp(1rem, 3.2vw, 4.5rem);
  width: min(107.5rem, calc(100% - var(--gutter) * 2));
  margin: 1.375rem auto 0;
  padding-bottom: 3rem;
}
.frame {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  margin-top: 1.25rem;
}

/* -------------------------------------------------------------- top bar -- */
.topbar {
  --in: 0s;
  z-index: 20;
  height: 4.75rem;
  margin-left: calc(var(--rail-w) / 2);
  padding: 0 .6875rem;
  border-radius: 62.4375rem;
  display: grid;
  grid-template-columns: 1fr minmax(0, 35rem) 1fr;
  align-items: center;
  gap: .875rem;
  animation: barIn 0.9s var(--spring) backwards;
}
@keyframes barIn {
  from {
    transform: translateY(-1rem) scale(0.96);
  }
}
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  justify-self: start;
  height: 3.375rem;
  padding: 0 1.125rem 0 0;
  border-radius: 62.4375rem;
  transition: background-color 0.25s;
}
.brand:hover {
  background: var(--chrome-hover);
}
.brand-mark {
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 0.2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45);
  animation: popIn 0.8s var(--spring) 0.15s backwards;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  animation: rise 0.8s var(--ease) 0.3s backwards;
}
.brand-text b {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .15rem;
  text-shadow: 0 1px .75rem rgb(0 0 0 / 0.15);
}
.brand-text small {
  font-size: .75rem;
  color: var(--chrome-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ask {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.375rem;
  padding: 0 1.25rem;
  border-radius: 62.4375rem;
  background: rgb(var(--chrome-rgb) / 0.32);
  box-shadow: inset 0 1px .1875rem rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: var(--chrome-dim);
  transition:
    background-color 0.25s,
    box-shadow 0.25s;
  animation: rise 0.8s var(--ease) 0.35s backwards;
}
.ask:focus-within {
  background: rgb(var(--chrome-rgb) / 0.45);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55);
}
.ask input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--chrome-ink);
  font-size: .9375rem;
}
.ask input::placeholder {
  color: var(--chrome-dim);
}

.top-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .625rem;
}
.tool {
  position: relative;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--chrome-ink);
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  transition:
    background-color 0.25s,
    transform 0.35s var(--spring);
  animation: popIn 0.6s var(--spring) 0.45s backwards;
}
.tool:hover {
  background: var(--chrome-hover);
}
.tool:active {
  transform: scale(0.9);
}
/* the AI button — the one colourful control in the bar */
.tool.ai-btn {
  background: var(--ai-grad);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.35),
    0 .5rem 1.25rem -.5rem color-mix(in srgb, var(--accent) 80%, transparent);
  animation-delay: 0.49s;
}
.tool.ai-btn:hover {
  background: var(--ai-grad);
  filter: brightness(1.08) saturate(1.15);
}
.tool.ai-btn svg {
  transition: transform 0.6s var(--spring);
}
.tool.ai-btn:hover svg,
.tool.ai-btn[aria-expanded='true'] svg {
  transform: rotate(72deg) scale(1.08);
}
.tool.bell {
  background: #fff;
  color: #121417;
  box-shadow: 0 .5rem 1.25rem -.625rem rgb(0 0 0 / 0.4);
  animation-delay: 0.52s;
}
.bell-dot {
  position: absolute;
  top: .875rem;
  right: .9375rem;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--accent);
  border: .125rem solid #fff;
  animation: pulse 2.2s infinite 1.4s;
}
button.me {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 3.375rem;
  padding: 0 1.125rem 0 0;
  border-radius: 62.4375rem;
  color: var(--chrome-ink);
  text-align: left;
  transition: background-color 0.25s;
  animation: rise 0.8s var(--ease) 0.5s backwards;
}
button.me:hover {
  background: var(--chrome-hover);
}
button.me .avatar {
  width: 3.375rem;
  height: 3.375rem;
  font-size: 1rem;
}
.me-name {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.me-name b {
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.me-name small {
  font-size: .75rem;
  color: var(--chrome-dim);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- rail -- */
.rail {
  position: sticky;
  top: 1.375rem;
  align-self: start;
  z-index: 15;
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}
.rail-pill {
  --in: 0.3s;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .5rem;
  border-radius: 62.4375rem;
  animation: railIn 0.9s var(--ease) 0.25s backwards;
}
@keyframes railIn {
  from {
    transform: translateX(-1.125rem) scaleY(0.92);
  }
}
.rail-btn {
  position: relative;
  z-index: 1;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--chrome-ink);
  transition:
    color 0.35s,
    background-color 0.25s,
    transform 0.35s var(--spring);
  animation: popIn 0.55s var(--spring) backwards;
  animation-delay: calc(0.45s + var(--i) * 0.06s);
}
.rail-btn:hover:not(.on) {
  background: var(--chrome-hover);
  transform: scale(1.06);
}
.rail-btn:active {
  transform: scale(0.9);
}
.rail-btn.on {
  color: #121417;
}
.rail-ind,
.tab-ind {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 62.4375rem;
  background: #fff;
  box-shadow: 0 .5rem 1.375rem -.5rem rgb(0 0 0 / 0.38);
  opacity: 0;
  transition:
    transform 0.6s var(--ease),
    width 0.6s var(--ease),
    opacity 0.3s;
}
.rail-ind.ready,
.tab-ind.ready {
  opacity: 1;
}
/* tooltips */
.rail-btn::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 1.125rem);
  top: 50%;
  translate: -.375rem -50%;
  padding: .5rem .75rem;
  border-radius: .75rem;
  background: var(--glass-strong);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--edge);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1rem 2.25rem -1rem rgb(0 0 0 / 0.4);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.2s,
    translate 0.3s var(--ease);
}
.rail-btn:hover::after {
  opacity: 1;
  translate: 0 -50%;
}

/* ---------------------------------------------------------------- panel -- */
.panel {
  min-width: 0;
  margin-left: calc(var(--rail-w) / -2);
  padding: 2.375rem clamp(1.375rem, 2.6vw, 2.75rem) 2.875rem calc(var(--rail-w) / 2 + clamp(1.375rem, 2.6vw, 2.75rem));
  border-radius: var(--r-xl);
  min-height: calc(100vh - 10rem);
  min-height: calc(100dvh - 10rem);
  outline: none;
  animation: panelIn 1s var(--ease) 0.1s backwards;
}
@keyframes panelIn {
  from {
    transform: translateY(1.125rem) scale(0.985);
  }
}

/* ------------------------------------------------------------- tab bar -- */
.tabbar {
  display: none;
}

/* ------------------------------------------------------------ page head -- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.625rem;
}
.page-head h1 {
  font-size: clamp(1.75rem, 2.5vw, 2.375rem);
  font-weight: 650;
  letter-spacing: -0.9px;
  line-height: 1.1;
  text-shadow: var(--text-glow);
}
.page-head p {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .9375rem;
}
.page-head p::first-letter {
  text-transform: uppercase;
}
.head-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
  flex-shrink: 0;
}
.head-actions .btn {
  min-width: 12.5rem;
}

/* ---------------------------------------------------------------- grids -- */
.grid {
  display: grid;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.grid:last-child {
  margin-bottom: 0;
}
.g-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.g-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.g-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.span-all {
  grid-column: 1 / -1;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .875rem;
  margin-bottom: 1.125rem;
}
.card-head h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.card-head p {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .8125rem;
}

/* ---------------------------------------------------------------- sheet -- */
.sheet-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.veil {
  position: absolute;
  inset: 0;
  background: rgb(10 8 6 / 0.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sheet {
  position: relative;
  width: min(33.75rem, 100%);
  max-height: min(88vh, 53.75rem);
  max-height: min(88dvh, 53.75rem);
  display: flex;
  flex-direction: column;
  border-radius: 2rem;
  background: linear-gradient(160deg, var(--sheen), transparent 40%), var(--glass-strong);
  backdrop-filter: blur(44px) saturate(1.7);
  -webkit-backdrop-filter: blur(44px) saturate(1.7);
  border: 1px solid var(--edge);
  box-shadow: 0 2.5rem 6.25rem -1.875rem rgb(0 0 0 / 0.55);
  color: var(--ink);
  overflow: hidden;
}
.sheet.wide {
  width: min(65rem, 100%);
}
.sheet-grab {
  display: none;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.5rem 1.375rem .875rem 1.75rem;
}
.sheet-head h3 {
  font-size: 1.3125rem;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.sheet-head p {
  margin-top: .25rem;
  font-size: .8438rem;
  color: var(--muted);
}
.sheet-body {
  padding: .375rem 1.75rem 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-foot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .625rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
}
.sheet-foot .btn {
  width: 100%;
}

/* --------------------------------------------------------------- toasts -- */
.toasts {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 1.75rem;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .6875rem;
  max-width: min(28.75rem, calc(100vw - 2rem));
  padding: .5625rem 1.25rem .5625rem .5625rem;
  border-radius: 62.4375rem;
  font-size: .875rem;
  font-weight: 500;
}
.toast::before {
  background: rgb(var(--chrome-rgb) / calc(var(--chrome-a) + 0.38));
}
.toast-ic {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #121417;
  flex-shrink: 0;
}

/* -------------------------------------------------------------- dragging -- */
body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
  .me-name {
    display: none;
  }
  button.me {
    padding: 0;
  }
  .g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .g-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* an odd last card spans the row so the grid stays even */
  .g-3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .brand-text small {
    display: none;
  }
}

@media (max-width: 960px) {
  .page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .head-actions .btn {
    min-width: 0;
  }
}

/* ==========================================================================
   PHONE — its own layout, not a scaled-down desktop
   ========================================================================== */
@media (max-width: 760px) {
  :root {
    --gap: .875rem;
    --r-lg: 1.5rem;
  }
  .shell {
    width: 100%;
    margin: 0;
    padding: calc(var(--safe-t) + .625rem) calc(.875rem + var(--safe-r)) calc(var(--safe-b) + 7.25rem) calc(.875rem + var(--safe-l));
  }

  /* compact, sticky top bar: brand left, tools right */
  .topbar {
    position: sticky;
    top: calc(var(--safe-t) + .5rem);
    z-index: 30;
    height: 3.875rem;
    margin: 0;
    padding: 0 .4375rem 0 .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ask,
  .me-name {
    display: none;
  }
  .brand {
    height: 3rem;
    gap: .625rem;
  }
  .brand-mark {
    width: 2.875rem;
    height: 2.875rem;
  }
  .brand-mark svg {
    width: 1.625rem;
    height: 1.625rem;
  }
  .brand-text b {
    font-size: 1rem;
    letter-spacing: .125rem;
  }
  .top-tools {
    gap: .375rem;
  }
  .tool,
  button.me .avatar {
    width: 2.875rem;
    height: 2.875rem;
  }
  /* room for the AI button: on phones «Вигляд» opens from the profile sheet,
     language and currency from «Ще» */
  .tool-theme,
  .tool-locale {
    display: none;
  }
  .bell-dot {
    top: .6875rem;
    right: .75rem;
  }

  .frame {
    display: block;
    margin-top: 1.25rem;
  }
  .rail {
    display: none;
  }
  .panel {
    margin: 0;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    animation: none;
  }
  .panel::before {
    display: none;
  }

  /* no shared panel here, so every card frosts the wallpaper itself */
  .card {
    padding: 1.125rem;
    backdrop-filter: blur(26px) saturate(1.6);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
  }

  /* floating bottom tab bar */
  .tabbar {
    --in: 0.3s;
    display: flex;
    position: fixed;
    z-index: 40;
    left: calc(.75rem + var(--safe-l));
    right: calc(.75rem + var(--safe-r));
    bottom: calc(var(--safe-b) + .625rem);
    height: 4.375rem;
    padding: .375rem;
    border-radius: 62.4375rem;
    animation: tabIn 0.9s var(--spring) 0.2s backwards;
  }
  @keyframes tabIn {
    from {
      transform: translateY(3.75rem) scale(0.92);
    }
  }
  /* six tabs: each takes the width its word needs, then they share what is left */
  .tab {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1875rem;
    border-radius: 62.4375rem;
    color: var(--chrome-ink);
    font-size: .6562rem;
    font-weight: 600;
    letter-spacing: 0.1px;
    transition:
      color 0.35s,
      transform 0.35s var(--spring);
  }
  .tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tab:active {
    transform: scale(0.92);
  }
  .tab.on {
    color: #121417;
  }

  .page-head {
    margin-bottom: 1.125rem;
    gap: .875rem;
  }
  .page-head h1 {
    font-size: 1.875rem;
  }
  .page-head p {
    font-size: .875rem;
  }
  /* no panel behind the title on phones, so it follows the wallpaper, not the glass */
  .page-head h1,
  .page-head p {
    color: #fff;
    text-shadow: 0 1px 1rem rgb(0 0 0 / 0.35);
  }
  [data-bg='sand'] .page-head h1 {
    color: #121417;
    text-shadow: 0 1px 1rem rgb(255 255 255 / 0.5);
  }
  [data-bg='sand'] .page-head p {
    color: rgb(18 20 23 / 0.88);
    text-shadow: 0 1px .75rem rgb(255 255 255 / 0.5);
  }
  /* controls lying straight on the wallpaper get their own frosted backing */
  .head-actions .btn:not(.solid),
  .prop-top .btn,
  .code-chip,
  .toolbar .seg,
  .toolbar .search-field,
  .pane-tabs .seg {
    background: var(--glass-strong);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 0 0 1px var(--edge);
  }

  .g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .g-3,
  .g-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .g-3 > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  /* sheets rise from the bottom edge */
  .sheet-root {
    place-items: end stretch;
    padding: 0;
  }
  .sheet,
  .sheet.wide {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 1.875rem 1.875rem 0 0;
    border-bottom: 0;
    padding-bottom: var(--safe-b);
  }
  .sheet-grab {
    display: flex;
    justify-content: center;
    padding-top: .625rem;
    touch-action: none;
  }
  .sheet-grab i {
    width: 2.5rem;
    height: .3125rem;
    border-radius: .1875rem;
    background: var(--faint);
  }
  .sheet-head {
    padding: .625rem 1rem .625rem 1.375rem;
    touch-action: none;
  }
  .sheet-body {
    padding: .25rem 1.25rem 1.25rem;
  }
  .sheet-foot {
    padding: .875rem 1.125rem 1rem;
  }

  .toasts {
    top: calc(var(--safe-t) + 5.125rem);
    bottom: auto;
    width: calc(100% - 2rem);
  }
  .rail-btn::after {
    display: none;
  }
  /* iOS zooms into any field with text under 16px — keep inputs at 16px */
  .input,
  .search-field input {
    font-size: 16px;
  }
}

@media (max-width: 380px) {
  .brand-text b {
    font-size: .875rem;
    letter-spacing: 1.4px;
  }
  .tab {
    font-size: .5938rem;
  }
}