/* One quiet material for short tooltips and longer contextual guidance. */
:root {
  --guidance-copy-size: 12px;
  --guidance-caption-size: 11px;
  --guidance-radius: 10px;
  --guidance-border: color-mix(in srgb, var(--line) 80%, transparent);
  --guidance-shadow: 0 3px 12px rgb(0 0 0 / 10%);
}
.app-tooltip {
  max-width: min(272px, calc(100vw - 20px));
  max-height: min(280px, calc(100dvh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px 9px;
  border: 1px solid var(--guidance-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--composer-card-solid) 96%, transparent);
  color: var(--text);
  box-shadow: var(--guidance-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: var(--guidance-caption-size);
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  unicode-bidi: plaintext;
  overflow-wrap: anywhere;
}

/* Alerts stay in the existing panel and never cover the image or input field. */
.topbar-launch-card > #appNotifications {
  max-height: 164px;
  margin-block-start: 8px;
  padding-block: 0;
  gap: 6px;
  border: 0;
}
#appNotifications .app-notification {
  align-items: flex-start;
  min-height: 44px;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--guidance-border);
  border-radius: var(--guidance-radius);
  background: var(--composer-card-solid);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 3%);
  font-size: var(--guidance-copy-size);
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
}
#appNotifications .app-notification + .app-notification { border-top-color: var(--guidance-border); }
#appNotifications .app-notification.is-error { color: var(--text); }
.app-notification-icon { display: grid; place-items: center; flex: 0 0 17px; margin-block-start: 2px; color: var(--muted); }
.app-notification-icon svg,
.app-notification-close svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.app-notification.is-error .app-notification-icon { color: var(--danger-text, var(--danger)); }
.app-notification-content > strong { margin-block-end: 3px; font-size: inherit; font-weight: 600; }
.app-notification-content > span { font-size: inherit; }
.app-notification-close {
  display: grid; place-items: center; flex: 0 0 24px;
  width: 24px; height: 24px; margin: -2px -2px 0 0;
  padding: 3px; border-radius: 6px; color: var(--muted);
}
.app-notification-content .message-details { margin-block-start: 6px; }
.app-notification-content .message-details > summary { color: var(--accent); font-size: 11px; font-weight: 500; }
.app-notification-content .message-details-content { margin-block-start: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); }

/* Secondary information shares a readable rhythm without competing with titles. */
#promptField .composition-guide,
.reference-region-editor .reference-region-help,
.reference-region-editor .reference-region-status,
.background-color-help,
.text-placement-help,
.gpt-account-menu-notice,
#browserStatus,
.included-status,
.image-edit-message,
.image-edit-count-help {
  font-size: var(--guidance-copy-size);
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
  overflow-wrap: anywhere;
}
#promptField .composition-guide { padding: 10px 12px; border-radius: var(--guidance-radius); }
#promptField .composition-guide-icon { flex: 0 0 15px; width: 15px; height: 15px; margin-block-start: 2px; }
.reference-region-editor .reference-region-status { color: var(--muted); font-size: var(--guidance-caption-size); }
.gallery-viewer-help { border-color: var(--guidance-border); border-radius: var(--guidance-radius); box-shadow: var(--guidance-shadow); text-align: start; }
.gallery-viewer-help :is(kbd, strong) { font-weight: 500; }
.deletion-feedback-status:not([data-placement="image-below"]) { border-radius: var(--guidance-radius); box-shadow: var(--guidance-shadow); }
.deletion-feedback-status svg { width: 18px; height: 18px; }
.deletion-feedback-status strong { font-size: var(--guidance-copy-size); font-weight: 500; }
.deletion-feedback-status small { font-size: var(--guidance-caption-size); line-height: 1.5; }
.topbar-launch-card .task-history-card #taskDrawer .job-notice-label { font-size: var(--guidance-copy-size); line-height: 1.6; }
.topbar-launch-card .task-history-card #taskDrawer .job-notice-more { font-size: var(--guidance-caption-size); }
:root[dir="rtl"] .app-notification-close { margin: -2px 0 0 -2px; }
@media (pointer: coarse) {
  .app-notification-close { flex-basis: 44px; width: 44px; height: 44px; }
}
@media (prefers-reduced-transparency: reduce) {
  .app-tooltip { background: var(--composer-card-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  .app-tooltip, #appNotifications .app-notification { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
}

/* Keep alerts visible independently of workspace scroll and card layout. */
body > #appNotifications { position: fixed; z-index: 1500; top: max(18px, env(safe-area-inset-top)); bottom: auto; left: 50%; transform: translateX(-50%); width: min(488px, calc(100vw - 32px)); max-height: min(240px, 40dvh); gap: 6px; pointer-events: none; }
body > #appNotifications .app-notification { pointer-events: auto; box-shadow: 0 6px 24px rgb(0 0 0 / 14%); }

/* Shared guidance occupies the quiet space between workspace tabs and account. */
#workspaceNav > #appNotifications { position:static; transform:none; flex:1 1 120px; align-self:center; width:auto; min-width:0; max-height:96px; margin:0 10px 8px; overflow:auto; }
#workspaceNav > #appNotifications .app-notification { min-height:0; padding:5px 0; gap:7px; border:0; background:transparent; box-shadow:none; font-size:11px; line-height:1.4; }
#workspaceNav > #appNotifications .app-notification + .app-notification { border-top:1px solid var(--line); }
#workspaceNav > #appNotifications .app-notification-icon { flex-basis:14px; margin-block-start:2px; }
#workspaceNav > #appNotifications .app-notification-close { flex-basis:22px; width:22px; height:22px; margin:0; }
@media(max-width:700px) {
 #workspaceNav:has(> #appNotifications:not(:empty)) { flex-wrap:wrap; }
 #workspaceNav > #appNotifications:not(:empty) { order:3; flex:1 0 calc(100% - 20px); margin:0 10px 8px; }
}