/*
 * ANGEL SHELL / WHITE v1
 * Visual shell only: all existing chat data, bubble themes and behaviours stay intact.
 */

html[data-shell="angel-white"] {
  --angel-ink: #46505b;
  --angel-ink-strong: #252c34;
  --angel-muted: #88939f;
  --angel-line: rgba(103, 126, 143, .24);
  --angel-line-soft: rgba(122, 145, 160, .14);
  --angel-ice: #cfeaf0;
  --angel-blue: #8eafbb;
  --angel-lilac: #d8d6e8;
  --angel-pearl: rgba(255, 255, 255, .82);
  --angel-pearl-solid: #f8fafb;
  --angel-metal: linear-gradient(180deg, rgba(255,255,255,.96), rgba(226,232,237,.92));
  --angel-glass: rgba(250, 252, 253, .76);
  background: #edf1f4;
  color-scheme: light;
}

html[data-shell="angel-white"] body {
  color: var(--angel-ink);
  background:
    radial-gradient(circle at 16% 5%, rgba(255,255,255,.98) 0 10%, transparent 35%),
    radial-gradient(circle at 86% 14%, rgba(204,232,238,.42), transparent 30%),
    linear-gradient(155deg, #fbfcfd 0%, #edf2f4 54%, #e4eaee 100%);
}

html[data-shell="angel-white"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .46;
  background:
    linear-gradient(112deg, transparent 0 47%, rgba(255,255,255,.48) 47.2% 47.6%, transparent 47.8%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(108,137,153,.025) 28px 29px);
}

html[data-shell="angel-white"] #app,
html[data-shell="angel-white"] #login-page { position: relative; z-index: 1; }

/* Pearl hardware panels */
html[data-shell="angel-white"] :is(.home-note,.week-wrap,.home-primary-card,.home-card-tab,.settings-card,.cal-wrap,.calendar-section,.dh-post,.dh-composer,.dh-identity,.dh-envelope,.album-card) {
  border-color: var(--angel-line) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.91), rgba(238,243,246,.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(114,137,151,.07),
    0 5px 16px rgba(99,121,136,.07) !important;
}

/* Login / boot screen */
html[data-shell="angel-white"] #login-page .title {
  color: var(--angel-ink-strong);
  text-transform: uppercase;
  letter-spacing: .18em;
}
html[data-shell="angel-white"] #login-page input {
  color: var(--angel-ink-strong);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--angel-line);
  border-radius: 14px;
  box-shadow: inset 0 1px 4px rgba(86,110,126,.08), 0 1px 0 white;
}

/* Home screen */
html[data-shell="angel-white"] #home-page {
  color: var(--angel-ink);
  background:
    radial-gradient(circle at 88% 2%, rgba(187,222,230,.35), transparent 29%),
    linear-gradient(165deg, rgba(255,255,255,.82), rgba(231,237,241,.93));
}
html[data-shell="angel-white"] .home-scroll {
  gap: 12px;
  padding: calc(15px + env(safe-area-inset-top, 0px)) 14px 20px;
}
html[data-shell="angel-white"] .home-top {
  min-height: 94px;
  padding: 16px 104px 16px 16px;
  border: 1px solid var(--angel-line);
  border-radius: 18px 18px 12px 12px;
  background: var(--angel-metal);
  box-shadow: inset 0 1px 0 white, 0 5px 15px rgba(90,112,126,.07);
  overflow: hidden;
  align-items: center;
}
html[data-shell="angel-white"] :is(.home-weather-temp,.home-days-count,.home-note-name,.home-section-title,.page-header-title) {
  color: var(--angel-ink-strong) !important;
}
html[data-shell="angel-white"] :is(.home-weather,.home-days-date,.home-section-meta) { color: var(--angel-muted); }
html[data-shell="angel-white"] .home-days-count {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -.05em;
  font-size: 38px;
  line-height: .96;
}
html[data-shell="angel-white"] .home-days {
  position: absolute;
  right: 60px;
  top: 17px;
  min-width: 52px;
}
html[data-shell="angel-white"] .home-more-btn {
  top: 16px;
  right: 14px;
  color: #71818c;
  border-color: var(--angel-line);
  background: linear-gradient(145deg,#fff,#e0e7eb);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(79,99,112,.12);
}
html[data-shell="angel-white"] .home-note,
html[data-shell="angel-white"] .week-wrap,
html[data-shell="angel-white"] .home-primary-card { border-radius: 17px; }
html[data-shell="angel-white"] .home-note { padding: 13px; }
html[data-shell="angel-white"] .home-note-avatar {
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px var(--angel-line), 0 3px 9px rgba(84,105,118,.12);
}
html[data-shell="angel-white"] .home-note-status,
html[data-shell="angel-white"] .status-tag {
  color: #718e99;
  background: rgba(201,231,236,.48);
  border: 1px solid rgba(128,169,179,.19);
}
html[data-shell="angel-white"] .week-header {
  border-bottom-color: var(--angel-line-soft);
}
html[data-shell="angel-white"] :is(.week-title,.week-open) { color: #6d8490; }
html[data-shell="angel-white"] .week-day.today .week-date,
html[data-shell="angel-white"] .week-date.active {
  color: #40515a;
  background: linear-gradient(145deg,#e6f5f7,#cddfe4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(120,157,168,.25);
}
html[data-shell="angel-white"] .home-primary-card { padding: 13px; }
html[data-shell="angel-white"] :is(.todo-filter,.home-card-tab,.home-panel-add button) {
  color: #627681;
  border-color: var(--angel-line);
  background: linear-gradient(180deg,rgba(255,255,255,.9),rgba(228,235,239,.86));
  box-shadow: inset 0 1px 0 white;
}
html[data-shell="angel-white"] :is(.todo-filter.active,.home-card-tab.active) {
  color: #4d727e;
  border-color: rgba(116,162,174,.48);
  background: linear-gradient(180deg,#f5ffff,#d9eef1);
}
html[data-shell="angel-white"] :is(.home-panel-add input,.todo-add-fields input,.todo-add-fields select) {
  color: var(--angel-ink-strong);
  border-color: var(--angel-line);
  background: rgba(247,250,251,.88);
}

/* Chat shell: wallpaper and custom bubbles remain user-controlled */
html[data-shell="angel-white"] #chat-page {
  background: linear-gradient(165deg,#f9fbfc,#e8edf1);
}
html[data-shell="angel-white"] #header {
  color: var(--angel-ink);
  background: rgba(248,251,252,.84);
  border-bottom: 1px solid var(--angel-line);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(89,109,122,.06);
}
html[data-shell="angel-white"] #header .name { color: var(--angel-ink-strong); }
html[data-shell="angel-white"] #header .avatar {
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(106,134,150,.24), 0 2px 7px rgba(80,103,117,.13);
}
html[data-shell="angel-white"] #paw-btn,
html[data-shell="angel-white"] #user-status-btn { color: #71838d; }
html[data-shell="angel-white"] #input-area {
  background: rgba(244,248,250,.84);
  border-top: 1px solid var(--angel-line);
  box-shadow: 0 -5px 18px rgba(89,109,122,.045);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
html[data-shell="angel-white"] #input-area textarea {
  color: var(--angel-ink-strong);
  border-color: rgba(108,135,150,.26);
  background: linear-gradient(180deg,rgba(255,255,255,.9),rgba(239,243,246,.82));
  box-shadow: inset 0 1px 4px rgba(84,106,120,.075), 0 1px 0 white;
}
html[data-shell="angel-white"] #attach-btn {
  color: #718993;
  border: 1px solid rgba(111,140,155,.24);
  background: linear-gradient(145deg,#fff,#e0e8ec);
  box-shadow: inset 0 1px 0 white, 0 2px 4px rgba(80,101,114,.09);
}
html[data-shell="angel-white"] #send-btn {
  color: #42545c;
  background: linear-gradient(145deg,#effbfc,#c9dfe4);
  border: 1px solid rgba(101,144,155,.3);
  box-shadow: inset 0 1px 0 white, 0 2px 5px rgba(76,105,116,.13);
}
html[data-shell="angel-white"] #send-btn:disabled { opacity: .46; }

/* Popovers / sheets */
html[data-shell="angel-white"] :is(#paw-menu,#status-picker,.secondary-sheet,.backup-sheet-card,.dh-sheet) {
  color: var(--angel-ink);
  background: rgba(247,250,251,.96) !important;
  border-color: var(--angel-line) !important;
  box-shadow: 0 14px 36px rgba(69,91,105,.15), inset 0 1px 0 white !important;
}
html[data-shell="angel-white"] :is(.paw-item,#model-select,#backend-select,#effort-select) { color: var(--angel-ink); }

/* Console dock */
html[data-shell="angel-white"] #nav-bar {
  position: relative;
  color: var(--angel-muted);
  background:
    linear-gradient(180deg,rgba(255,255,255,.91),rgba(224,231,235,.96));
  border-top: 1px solid rgba(103,127,141,.28);
  box-shadow: inset 0 1px 0 white, 0 -4px 14px rgba(77,99,112,.06);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
html[data-shell="angel-white"] #nav-bar::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 34px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(112,137,151,.2);
  box-shadow: 0 1px 0 white;
}
html[data-shell="angel-white"] .nav-item {
  color: #7f8d95;
  padding-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
html[data-shell="angel-white"] .nav-item.active { color: #527684; }
html[data-shell="angel-white"] .nav-item.active .nav-icon {
  filter: drop-shadow(0 0 5px rgba(116,178,188,.34));
}

/* Settings/calendar/doghouse share the same hardware language */
html[data-shell="angel-white"] :is(#settings-page,#calendar-page,#doghouse-page) {
  color: var(--angel-ink);
  background: linear-gradient(165deg,#fafcfd,#e8edf0);
}
html[data-shell="angel-white"] .settings-header {
  color: var(--angel-ink-strong);
  background: rgba(248,251,252,.9);
  border-bottom-color: var(--angel-line);
  box-shadow: inset 0 -1px 0 white;
}
html[data-shell="angel-white"] .settings-group-title,
html[data-shell="angel-white"] .theme-sub-title,
html[data-shell="angel-white"] .calendar-section-title {
  color: #69818c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

@media (max-width: 420px) {
  html[data-shell="angel-white"] .home-scroll { padding-inline: 11px; }
  html[data-shell="angel-white"] .home-top { border-radius: 15px 15px 10px 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-shell="angel-white"] .page.active { animation: angel-page-in .22s ease-out; }
  html[data-shell="angel-white"] :is(.home-note,.week-wrap,.home-primary-card,.home-card-tab) {
    transition: border-color .18s ease, transform .18s ease;
  }
  html[data-shell="angel-white"] .home-card-tab:active { transform: translateY(1px); }
}
@keyframes angel-page-in {
  from { opacity: .65; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}