/* LAUNCH_FIX7: one fixed paper layer, floating chrome and masked scroll edges. */

/* body::before in r12-theme.css is the only full-screen paper owner. */
#blueink-r11.preview-shell,
#blueink-r11 .app,
#blueink-r11 .screen,
#blueink-r11 .content,
#blueink-r11 .chat-scroll,
#blueink-r11 .daily-reading,
#blueink-r11 .daily-reading__viewport {
  background:transparent;
}

#blueink-r11 .app::before,
#blueink-r11 .app::after,
#blueink-r11[data-visual="assets-v2"] .screen::before {
  content:none;
  display:none;
}

/* Headers float over the shared paper; only their individual controls frost. */
#blueink-r11 .topbar,
#blueink-r11 .topbar:not(.home-header) {
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:40;
  width:100%;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:none;
}

#blueink-r11 .topbar > *,
#blueink-r11 .topbar button {
  pointer-events:auto;
}

#blueink-r11 .topbar :is(.icon-btn,.daily-reading__back) {
  width:40px!important;
  height:40px!important;
  min-width:40px;
  min-height:40px;
  padding:0!important;
  border:1px solid color-mix(in srgb,var(--hair) 74%,rgba(255,255,255,.55));
  border-radius:50%;
  background:color-mix(in srgb,var(--glass-ui) 72%,transparent);
  box-shadow:0 4px 14px rgba(70,56,40,.07),inset 0 1px 0 rgba(255,255,255,.38);
  backdrop-filter:blur(12px) saturate(1.08);
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
}

#blueink-r11[data-theme="night"] .topbar :is(.icon-btn,.daily-reading__back) {
  border-color:color-mix(in srgb,var(--hair) 82%,transparent);
  box-shadow:0 4px 16px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);
}

#blueink-r11 .topbar :is(h1,p,.round8-title,.chat-heading,.chat-contact) {
  background:transparent;
  box-shadow:none;
}

/* The scroller runs behind floating chrome and owns both fades. */
#blueink-r11 [data-scroll] {
  --scroll-fade-top:calc(var(--top-safe) + 62px);
  --scroll-fade-bottom:calc(var(--bottom-safe) + 32px);
  --scroll-content-top:calc(var(--top-safe) + 76px);
  box-sizing:border-box;
  padding-top:var(--scroll-content-top)!important;
  padding-bottom:calc(var(--scroll-fade-bottom) + 24px)!important;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--scroll-fade-top),#000 calc(100% - var(--scroll-fade-bottom)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--scroll-fade-top),#000 calc(100% - var(--scroll-fade-bottom)),transparent 100%);
}

#blueink-r11 [data-scroll].content:not(.nonav) {
  --scroll-fade-bottom:calc(var(--bottom-safe) + 94px);
  padding-bottom:calc(var(--scroll-fade-bottom) + 30px)!important;
}

#blueink-r11 [data-scroll].content.nonav,
#blueink-r11 .daily-reading__viewport[data-scroll] {
  --scroll-fade-bottom:calc(var(--bottom-safe) + 24px);
  padding-bottom:calc(var(--bottom-safe) + 24px)!important;
}

#blueink-r11 [data-scroll="home"] {
  --scroll-fade-top:calc(var(--top-safe) + 82px);
  --scroll-content-top:calc(var(--top-safe) + 96px);
}

#blueink-r11 [data-scroll="home"] > .home-hero {
  margin-top:16px!important;
}

#blueink-r11 [data-scroll="conversation"] {
  --scroll-fade-bottom:calc(var(--bottom-safe) + 96px);
  padding-bottom:calc(var(--scroll-fade-bottom) + 30px)!important;
}

/* Keep the dock itself floating; the paper remains visible below it. */
#blueink-r11 .bottom-nav {
  background:color-mix(in srgb,var(--glass-ui) 74%,transparent);
}

/* Chat tools are their own small floating row; the textarea is one glass pill. */
#blueink-r11 .composer {
  position:absolute;
  right:12px;
  bottom:calc(12px + var(--bottom-safe));
  left:12px;
  z-index:45;
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#blueink-r11 .r12-composer::before,
#blueink-r11 .r12-composer::after {
  content:none!important;
  display:none!important;
}

#blueink-r11 .composer .composer-send-state {
  position:relative;
  z-index:3;
  display:grid;
  gap:7px;
  margin:0;
  padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--hair) 72%,rgba(255,255,255,.50));
  border-left-width:3px;
  border-radius:14px;
  background:color-mix(in srgb,var(--glass-ui) 88%,transparent);
  box-shadow:0 4px 16px rgba(70,56,40,.08);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  font-size:13px;
  line-height:1.55;
}

#blueink-r11 .composer .composer-send-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
}

#blueink-r11 .composer .composer-send-actions button {
  min-height:44px;
  padding:5px 0;
  color:var(--blue);
  text-align:left;
}

html[data-keyboard-open="true"] #blueink-r11 .r12-composer,
html[data-keyboard-open="true"] #blueink-r11[data-pwa-standalone] .r12-composer {
  bottom:7px;
  margin-bottom:0;
}

#blueink-r11 .composer .compose-tools {
  display:flex;
  align-items:flex-end;
  width:fit-content;
  min-height:32px;
  height:auto;
  margin:0 5px;
  padding:0;
  background:transparent;
}

#blueink-r11 .composer .native-media-tools,
#blueink-r11 .composer .daily-media {
  min-width:0;
}

/* The FIX7 tool row is fit-content, so a wide picker must grow rightward. */
#blueink-r11 .composer .daily-media-sticker-panel {
  right:auto;
  left:0;
  max-width:calc(100vw - 34px);
}

#blueink-r11 .composer .daily-media-toolbar {
  display:flex;
  gap:5px;
  min-height:32px;
}

#blueink-r11 .composer .daily-media-tool {
  width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--hair) 72%,rgba(255,255,255,.50));
  border-radius:50%;
  background:color-mix(in srgb,var(--glass-ui) 70%,transparent);
  box-shadow:0 3px 11px rgba(70,56,40,.06),inset 0 1px 0 rgba(255,255,255,.32);
  backdrop-filter:blur(10px) saturate(1.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
}

#blueink-r11 .composer .daily-media-preview,
#blueink-r11 .composer .daily-media-status {
  margin-bottom:6px;
  border-radius:14px;
  background:color-mix(in srgb,var(--glass-ui) 78%,transparent);
}

#blueink-r11 .composer .composer-box {
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px;
  align-items:end;
  gap:6px;
  min-height:48px;
  padding:6px 7px 6px 12px;
  border:1px solid color-mix(in srgb,var(--hair) 72%,rgba(255,255,255,.55));
  border-radius:999px;
  background:color-mix(in srgb,var(--glass-ui) 72%,transparent);
  box-shadow:0 5px 18px rgba(70,56,40,.08),inset 0 1px 0 rgba(255,255,255,.40);
  backdrop-filter:blur(14px) saturate(1.10);
  -webkit-backdrop-filter:blur(14px) saturate(1.10);
}

#blueink-r11[data-theme="night"] .composer .composer-box,
#blueink-r11[data-theme="night"] .composer .daily-media-tool {
  border-color:color-mix(in srgb,var(--hair) 82%,transparent);
  box-shadow:0 5px 20px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.08);
}

#blueink-r11 .composer textarea {
  align-self:center;
  min-height:32px;
  max-height:96px;
  padding:6px 2px;
  line-height:20px;
}

#blueink-r11 .composer .send-btn {
  align-self:end;
  width:36px!important;
  height:36px!important;
  margin:0;
}

#blueink-r11 .composer .reply-strip {
  margin:0 8px -2px;
  border:1px solid color-mix(in srgb,var(--hair) 70%,transparent);
  border-left:3px solid var(--ribbon);
  border-radius:14px;
  background:color-mix(in srgb,var(--glass-ui) 74%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #blueink-r11 .topbar :is(.icon-btn,.daily-reading__back),
  #blueink-r11 .bottom-nav,
  #blueink-r11 .composer .composer-send-state,
  #blueink-r11 .composer .daily-media-tool,
  #blueink-r11 .composer .composer-box,
  #blueink-r11 .composer .reply-strip {
    background:var(--glass-strong);
  }
}