/* donr.ir — PWA chrome.
 *
 * Everything that changes how the site already looks is behind
 * (display-mode: standalone) or html.pwa-standalone, so an ordinary browser
 * visit renders exactly as it did before. Only the install button, the iOS
 * hint and the update bar are new in both modes, and all three start hidden.
 */

/* ---------------------------------------------------------------- *
 * Install button — matches .sidebar-download-btn in the chat sidebar
 * ---------------------------------------------------------------- */

.pwa-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 10px 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(127, 127, 127, .25));
  background: var(--bg-elevated, #fff);
  color: var(--text-secondary, #5c5a55);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pwa-install-btn:hover {
  background: var(--bg-hover, rgba(127, 127, 127, .1));
  color: var(--text-primary, #1a1a1a);
  border-color: var(--text-muted, #8a8780);
}
.pwa-install-btn:active { transform: scale(.98); }
.pwa-install-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
[data-pwa-install][hidden] { display: none !important; }

/* An installed app never offers to install itself. */
@media (display-mode: standalone) {
  [data-pwa-install] { display: none !important; }
}

/* ---------------------------------------------------------------- *
 * Update bar
 * ---------------------------------------------------------------- */

.pwa-update-bar {
  position: fixed;
  z-index: 9000;
  inset-inline: 0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: max-content;
  max-width: calc(100vw - 24px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(127, 127, 127, .25));
  background: var(--bg-elevated, #fff);
  color: var(--text-primary, #1a1a1a);
  box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, .18));
  font-family: inherit;
  font-size: .85rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease;
}
.pwa-update-bar.is-in { opacity: 1; transform: translateY(0); }
.pwa-update-text { white-space: nowrap; }
.pwa-update-apply {
  border: 1px solid var(--border, rgba(127, 127, 127, .3));
  background: var(--bg-hover, rgba(127, 127, 127, .12));
  color: inherit;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.pwa-update-apply:active { transform: scale(.97); }
.pwa-update-close {
  border: none;
  background: transparent;
  color: var(--text-muted, #8a8780);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- *
 * iOS "add to home screen" hint
 * ---------------------------------------------------------------- */

.pwa-ios-hint {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--overlay, rgba(0, 0, 0, .45));
  opacity: 0;
  transition: opacity .22s ease;
}
.pwa-ios-hint.is-in { opacity: 1; }
.pwa-ios-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  padding: 20px 18px 16px;
  border-radius: 18px;
  background: var(--bg-elevated, #fff);
  color: var(--text-primary, #1a1a1a);
  box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, .25));
  font-family: inherit;
  transform: translateY(18px);
  transition: transform .22s ease;
}
.pwa-ios-hint.is-in .pwa-ios-card { transform: translateY(0); }
.pwa-ios-title { font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.pwa-ios-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .87rem;
  line-height: 1.7;
  color: var(--text-secondary, #5c5a55);
  margin-bottom: 10px;
}
.pwa-ios-step b { color: var(--text-primary, #1a1a1a); font-weight: 700; }
.pwa-ios-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(127, 127, 127, .25));
  background: var(--bg-secondary, rgba(127, 127, 127, .08));
  color: var(--text-primary, #1a1a1a);
}
.pwa-ios-ico svg { width: 19px; height: 19px; }
.pwa-ios-ok {
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(127, 127, 127, .25));
  background: var(--bg-hover, rgba(127, 127, 127, .12));
  color: inherit;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.pwa-ios-close {
  position: absolute;
  top: 10px;
  inset-inline-start: 12px;
  border: none;
  background: transparent;
  color: var(--text-muted, #8a8780);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------- *
 * Installed-app feel — nothing below here applies in a browser tab
 * ---------------------------------------------------------------- */

html.pwa-standalone,
html.pwa-standalone body {
  /* No rubber-band on the document; the chat list does its own scrolling. */
  overscroll-behavior-y: none;
}

/* With apple-mobile-web-app-status-bar-style: black-translucent the page runs
   under the status bar, so the top chrome has to pay the inset back. The site
   already handles the bottom inset; this only adds the top one. */
html.pwa-standalone.pwa-translucent-status .topbar,
html.pwa-standalone.pwa-translucent-status .sidebar-header,
html.pwa-standalone.pwa-translucent-status .admin-topbar,
html.pwa-standalone.pwa-translucent-status .nav {
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
}
html.pwa-standalone.pwa-translucent-status .sidebar {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Chrome is not text. Message bodies and code blocks below are put back. */
html.pwa-standalone .topbar,
html.pwa-standalone .sidebar-header,
html.pwa-standalone .history-item,
html.pwa-standalone .history-label,
html.pwa-standalone .usage-card,
html.pwa-standalone .new-chat-btn,
html.pwa-standalone .sidebar-download-btn,
html.pwa-standalone .pwa-install-btn,
html.pwa-standalone .model-selector,
html.pwa-standalone button,
html.pwa-standalone .menu-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Reading and copying an answer is the whole point of the product. */
html.pwa-standalone .message,
html.pwa-standalone .bubble,
html.pwa-standalone .chat-area,
html.pwa-standalone pre,
html.pwa-standalone code,
html.pwa-standalone .code-table,
html.pwa-standalone input,
html.pwa-standalone textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Touch feedback without the 300ms wait. */
html.pwa-standalone button,
html.pwa-standalone .history-item,
html.pwa-standalone .new-chat-btn,
html.pwa-standalone .sidebar-download-btn {
  touch-action: manipulation;
}
html.pwa-standalone button:active,
html.pwa-standalone .new-chat-btn:active,
html.pwa-standalone .sidebar-download-btn:active {
  opacity: .82;
}