/* Public presentation primitives. Keep tool state and behavior in their existing panels. */
.skip-link { position: fixed; inset-block-start: -5rem; inset-inline-start: var(--space-4); z-index: 2000; padding: var(--space-3) var(--space-5); background: var(--color-primary); color: var(--color-text-inverse); border-radius: var(--radius-lg); }
.skip-link:focus { inset-block-start: var(--space-3); color: var(--color-text-inverse); }
.public-site [hidden] { display: none !important; }
.public-site .btn { min-height: var(--tap-target); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-lg); font-weight: var(--font-weight-semibold); }
.public-site :is(.form-control, .form-select) { min-height: max(3rem, var(--tap-target)); border-radius: var(--radius-lg); background-color: var(--color-surface); }
.public-site :is(.alert, .modal-content) { border-radius: var(--radius-xl); }
.public-site .modal-content { box-shadow: var(--shadow-xl); }
.public-site main { min-width: 0; }
.public-site main:focus { outline: none; }
.public-site .section { background-color: transparent; }
.public-site .section--muted { background-color: var(--color-bg-muted); }
.public-site :is(.ut-page-title, .mt-page-title) { line-height: 1.5; }
.public-site :is(.ut-page-lead, .mt-page-lead) { max-width: 48rem; line-height: var(--line-height-loose); }
.public-site :is(.ut-card, .ut-phase-stepper, .ai-image__composer, .ai-image__canvas, .ai-tts__composer, .ai-tts__canvas, .mt-panel) { border-color: var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.public-site :is(.ai-image, .ai-tts) { padding-block: var(--space-8) var(--space-10); }
.public-site :is(.ai-image__header, .ai-tts__header) { margin-bottom: var(--space-6); }
.public-site :is(.ai-image__header, .ai-tts__header) h1 { margin-top: var(--space-3); }
.public-site :is(.ai-image__composer, .ai-tts__composer, .ai-image__canvas, .ai-tts__canvas) { padding: clamp(var(--space-4), 3vw, var(--space-6)); border-radius: var(--radius-2xl); }
.public-site :is(.ai-image, .ai-tts) :is(textarea, select) { font: inherit; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-3); width: 100%; }
.public-site :is(.ai-image, .ai-tts) select { min-height: max(3rem, var(--tap-target)); }
.public-site :is(.ai-image, .ai-tts) textarea { min-height: 12rem; line-height: var(--line-height-loose); }
.public-site :is(.ai-image, .ai-tts) label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.public-site input[type="range"] { accent-color: var(--color-primary); min-height: var(--tap-target); }
.public-site :is(.ai-image__cta, .ai-tts__cta) { padding-top: var(--space-5); border-top: 1px solid var(--color-border); margin-top: var(--space-5); }
.public-site :is(.ai-image__empty, .ai-tts__empty) { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: var(--space-6); color: var(--color-text-muted); }
.public-site :is(.ai-image__empty, .ai-tts__empty) > .bi { font-size: 2.5rem; color: var(--color-primary); }
.public-site .ai-image__empty { min-height: 25rem; background: var(--color-bg-muted); border-radius: var(--radius-xl); }
.public-site .ai-tts__empty { min-height: 13rem; }
.public-site .ai-tts__toolbar input[type="range"] { width: 100%; }
.public-site .ai-tts__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-6); }
.public-site .ai-image__grid { gap: var(--space-6); }
.public-site :is(.ai-image__quota, .ai-tts__quota) { background: var(--color-primary-soft); color: var(--color-primary-active); padding: var(--space-3); border-radius: var(--radius-lg); }
.public-site :is(.cwf-chat__header, .cwf-sidebar) { background: var(--color-surface); }
.public-site :is(.cwf-chat__composer, .ai-chat-composer) { border-radius: var(--radius-xl); }
.public-site :is(.cwf-markdown, .cwf-message) { line-height: var(--line-height-loose); }
.account-workspace { padding-block: var(--space-8) var(--space-12); }
.account-workspace__nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.account-workspace__nav a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); color: var(--color-text-muted); }
.account-workspace__nav a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--font-weight-bold); }
.empty-state { background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-6); text-align: center; margin-block: var(--space-6); }
.empty-state > .bi { display: block; color: var(--color-primary); font-size: 2.5rem; margin-bottom: var(--space-4); }
.empty-state h2 { font-size: var(--font-size-xl); }
.empty-state p { color: var(--color-text-muted); }
.public-site :is(.ai-image-account, .ai-tts-account) { max-width: var(--container-max); margin-inline: auto; }
.public-site .my-translations-page { min-height: 0; max-width: none; padding: 0; }
.public-site .my-translations-page .mt-panel { flex: 0 1 auto; }
.public-site .my-translations-page .mt-list { flex: 0 1 auto; overflow: visible; }
.public-site .ai-image__thumb { background: var(--color-surface); box-shadow: var(--shadow-sm); }
.public-site .ai-image__thumb img { aspect-ratio: 1; object-fit: contain; background: var(--color-bg-muted); }
@media (max-width: 767.98px) {
 .public-site .ai-tts__grid { grid-template-columns: minmax(0, 1fr); }
 .public-site .ai-image__empty { min-height: 15rem; }
 .account-workspace__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .account-workspace__nav a { padding: var(--space-3) var(--space-2); font-size: var(--font-size-sm); }
 .public-site :is(.ai-image__cta, .ai-tts__cta) { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
 .public-site *, .public-site *::before, .public-site *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Error alerts in the account panels carry a retry, so the state reads as
   "something failed", never as "you have nothing yet". */
.public-site .alert--retry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Empty result panels read as a short guide instead of a large blank frame. */
.public-site :is(.ai-image__empty, .ai-tts__empty) {
  text-align: center;
}

.public-site :is(.ai-image__empty-title, .ai-tts__empty-title) {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.public-site :is(.ai-image__empty-tips, .ai-tts__empty-tips) {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 26rem;
  margin-inline: auto;
  text-align: start;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.public-site :is(.ai-image__empty-tips, .ai-tts__empty-tips) li {
  padding-inline-start: var(--space-4);
  position: relative;
}

.public-site :is(.ai-image__empty-tips, .ai-tts__empty-tips) li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.public-site .ai-image__empty {
  min-height: 20rem;
}

/* --------------------------------------------------------------------------
   Touch targets on small screens
   base/rtl.css drops the root font to 14px below 768px, which quietly shrinks
   every rem-sized control. These are the named controls that ended up under
   44px; shapes (round send button, pill chips) are preserved by sizing both
   axes rather than only the height.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .public-site :is(.ai-image__mode, .ai-image__tag, .ai-tts__tag) {
    min-height: var(--tap-target);
    padding-inline: var(--space-4);
  }

  /* .chat-with-file prefix matches the tool's own selector specificity. */
  .public-site .chat-with-file :is(.cwf-sidebar__icon-btn, .cwf-chat__sidebar-toggle) {
    width: var(--tap-target);
    height: var(--tap-target);
  }

  .public-site .cwf-composer__send {
    --cwf-send-size: var(--tap-target);
  }

  .public-site :is(.cwf-sidebar__new-chat, .cwf-sidebar__search-input, .ai-chat-picker__trigger, .ps-help-accordion__summary) {
    min-height: var(--tap-target);
  }
}