:root {
  --ink: #193b38;
  --green: #173f3a;
  --mint: #dcebe3;
  --cream: #f7f2e8;
  --gold: #d99b44;
  --paper: #fffdf8;
  --pastel-green: #eef8f0;
  --muted: #6f7f78;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6f0eb;
  --green: #76b7a4;
  --mint: #203c35;
  --cream: #101917;
  --gold: #e3ad62;
  --paper: #182521;
  --pastel-green: #172a25;
  --muted: #a9bbb4;
}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: ui-rounded, "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 10%, #e8d8bc55 0 9%, transparent 10%),
    var(--cream);
  min-height: 100vh;
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(440px, 100%);
  background: var(--paper);
  border: 1px solid #d8d4c9;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 24px 70px #173f3a1c;
  text-align: center;
}

.portrait,
.mini-mark {
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff5df;
  font-family: Georgia, serif;
  border-radius: 50%;
}

.portrait {
  width: 82px;
  height: 82px;
  margin: auto;
  font-size: 48px;
  border: 6px double #e6c484;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 800;
  color: #a66c28;
  margin: 18px 0 5px;
}

h1, h2 {
  font-family: Georgia, serif;
  margin: 0;
}

h1 { font-size: 36px; }

.welcome { color: var(--muted); }

label {
  font-weight: 700;
  font-size: 13px;
  display: block;
  text-align: left;
  margin: 15px 0 6px;
}

.people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0;
}

.person,
.quiet,
.bell {
  border: 1px solid #cad5ce;
  background: white;
  color: var(--ink);
  cursor: pointer;
}

.person {
  padding: 13px;
  border-radius: 12px;
  font-weight: 800;
}

.person.selected {
  background: var(--mint);
  border: 2px solid var(--green);
}

input, textarea, select {
  width: 100%;
  font: inherit;
  border: 1px solid #c8d0ca;
  border-radius: 12px;
  padding: 13px;
  background: white;
  color: var(--ink);
}

input:focus, textarea:focus, select:focus {
  outline: 3px solid #d4e7dc;
  border-color: var(--green);
}

button { font: inherit; }

.primary,
.secondary,
.send {
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.primary {
  width: 100%;
  padding: 14px;
  margin-top: 18px;
}

.error {
  color: #a23d35;
  min-height: 20px;
  font-size: 13px;
}

main {
  max-width: 1280px;
  margin: auto;
  padding: 24px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

header > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-mark {
  width: 48px;
  height: 48px;
  font-size: 27px;
}

.bertie-animated {
  position: relative;
  display: block;
  width: 190px;
  height: 190px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 3px solid #e6c484;
  border-radius: 50%;
  background: #fff3d5;
  box-shadow: 0 5px 16px #173f3a30;
}

.login-bertie {
  width: 230px;
  height: 230px;
  margin: 0 auto;
}

.bertie-animated .bertie-face {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bertie-eyelid {
  position: absolute;
  top: 39.4%;
  z-index: 2;
  width: 11.5%;
  height: 7.5%;
  border-bottom: 1.5px solid #5d351c;
  border-radius: 50%;
  background: #aaa84d;
  opacity: 0;
  transform: scaleY(.15);
  transform-origin: center bottom;
  animation: bertie-blink 8.5s infinite;
}

.bertie-eyelid.left { left: 36.5%; }
.bertie-eyelid.right { left: 56.5%; }

.bertie-nose {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('/static/bertie-avatar.png?v=3') center / 100% 100% no-repeat;
  clip-path: ellipse(7% 8% at 50.5% 49%);
  animation: bertie-nose-twitch 11s ease-in-out infinite;
}

@keyframes bertie-blink {
  0%, 42%, 44.5%, 47%, 100% { opacity: 0; transform: scaleY(.15); }
  42.7%, 43.8%, 45.2%, 46.2% { opacity: 1; transform: scaleY(1); }
}

@keyframes bertie-nose-twitch {
  0%, 67%, 71%, 100% { transform: translate(0, 0) rotate(0); }
  68% { transform: translate(-1px, 0) rotate(-1.2deg); }
  69% { transform: translate(1px, -1px) rotate(1.2deg); }
  70% { transform: translate(-1px, 0) rotate(-.7deg); }
}

header h1 { font-size: 25px; }

header p {
  font-size: 12px;
  color: var(--muted);
  margin: 3px 0;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #50a36b;
}

.quiet {
  border-radius: 10px;
  padding: 9px 12px;
}

.options-menu { position: relative; }
.options-menu > summary { list-style: none; user-select: none; }
.options-menu > summary::-webkit-details-marker { display: none; }
.avatar-menu-trigger { display: block; border-radius: 50%; cursor: pointer; line-height: 0; }
.avatar-menu-trigger:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.avatar-menu-trigger .mini-mark { transition: transform .16s ease, box-shadow .16s ease; }
.avatar-menu-trigger:hover .mini-mark,
.options-menu[open] .mini-mark { transform: scale(1.06); box-shadow: 0 4px 13px #173f3a4d; }
.options-panel { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; display: grid; min-width: 175px; padding: 7px; border: 1px solid #cad5ce; border-radius: 12px; background: var(--paper); box-shadow: 0 12px 30px #173f3a30; }
.options-panel button { padding: 11px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font-weight: 750; cursor: pointer; }
.options-panel button:hover,
.options-panel button:focus-visible { background: var(--mint); outline: none; }
.briefing-dialog {
  width: min(520px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.briefing-dialog .briefing-form { min-width: 0; max-width: 100%; overflow-x: hidden; }
.briefing-dialog input,
.briefing-dialog select,
.briefing-dialog textarea { min-width: 0; max-width: 100%; }
.briefing-intro { margin-bottom: 8px; }
.toggle-row { display: flex; align-items: center; gap: 10px; min-height: 42px; margin-top: 10px; }
.toggle-row input { width: 20px; height: 20px; flex: 0 0 auto; }
.briefing-times { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.briefing-form > small { display: block; margin-top: 5px; color: var(--muted); }
.briefing-preview { margin-top: 15px; padding: 13px; border: 1px solid #bdcbc4; border-radius: 12px; background: var(--pastel-green); line-height: 1.45; }
.briefing-preview strong { display: block; margin: 10px 0 4px; }
.briefing-preview a { color: var(--green); }
.briefing-close { width: 100%; min-height: 44px; margin-top: 9px; border: 0; background: transparent; color: var(--muted); font-weight: 750; cursor: pointer; }
.backup-dialog{max-width:560px}.backup-folder{padding:9px 11px;border-radius:9px;background:var(--pastel-green);font-size:13px;overflow-wrap:anywhere}.backup-now{width:100%;min-height:48px;margin:8px 0 14px;border:0;border-radius:11px;background:var(--green);color:#fff;font-weight:850;cursor:pointer}.backup-list{max-height:330px;overflow:auto}.backup-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:11px 2px;border-bottom:1px solid #dce5df}.backup-row div{min-width:0}.backup-row strong,.backup-row small{display:block}.backup-row small{margin-top:3px;color:var(--muted)}.backup-row a,.backup-row button{padding:8px 10px;border:1px solid #82998d;border-radius:8px;background:var(--paper);color:var(--green);font-size:12px;font-weight:800;text-decoration:none;cursor:pointer}.backup-row .restore-backup{border-color:#c85a5a;color:#a52626}.backup-warning{color:#8f352e;font-size:12px;line-height:1.4}.backup-empty{color:var(--muted);text-align:center}

[data-theme="dark"] body { background: radial-gradient(circle at 8% 10%, #4e3e2855 0 9%, transparent 10%), var(--cream); }
[data-theme="dark"] .login-card,
[data-theme="dark"] .chat-panel,
[data-theme="dark"] aside { border-color: #354840; }
[data-theme="dark"] .person,
[data-theme="dark"] .quiet,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] dialog { background: #1e302b; border-color: #496057; color: var(--ink); }
[data-theme="dark"] .options-panel { border-color: #496057; background: #1e302b; }
[data-theme="dark"] .briefing-preview { border-color: #496057; }
[data-theme="dark"] .backup-row { border-color:#40554d }
[data-theme="dark"] .person.selected { background: #29483f; border-color: #76b7a4; }
[data-theme="dark"] .bubble.user { background: #315f53; color: #fff; }
[data-theme="dark"] .bubble strong { color: #a7d7c8; }
[data-theme="dark"] .table-wrap { background: #1b2c27; border-color: #496057; }
[data-theme="dark"] .bubble th { background: #315f53; }
[data-theme="dark"] .bubble th,
[data-theme="dark"] .bubble td { border-color: #40554d; }
[data-theme="dark"] .bubble tbody tr:nth-child(even) { background: #223730; }
[data-theme="dark"] .bubble.bertie.information-card { background:linear-gradient(145deg,#243a34,#1c2e29);border-color:#d99b44;box-shadow:0 7px 0 #81541f,0 13px 28px #0005; }
[data-theme="dark"] .information-card .table-wrap { background:#1b2c27;border-color:#496057; }
[data-theme="dark"] .information-card td:first-child { color:#a7d7c8; }
[data-theme="dark"] .chat-tools,
[data-theme="dark"] .composer,
[data-theme="dark"] .reminder-entry { border-color: #354840; }
[data-theme="dark"] .reminder-entry > summary { color: var(--ink); }
.reminder-form { scroll-margin-top: 12px; }
[data-theme="dark"] .clear-chat { background: #392724; color: #ffb6ad; border-color: #744842; }
[data-theme="dark"] .reminder { filter: brightness(.72) saturate(.85); color: #10201c; }
[data-theme="dark"] .reminder time { background: #f2f4ef; }
[data-theme="dark"] .phone-nav { background: #20312c; border-color: #496057; }

.phone-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:520px;margin:0 0 14px;padding:4px;border:1px solid #cad5ce;border-radius:14px;background:#e8eee9}
.phone-nav-button{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink);font-weight:800;cursor:pointer;touch-action:manipulation}
.phone-nav-button.selected{background:var(--paper);color:var(--green);box-shadow:0 2px 8px #173f3a20}
.briefing-page{min-height:calc(100vh - 190px);padding:clamp(20px,4vw,42px);overflow:auto;border:1px solid #d9d5ca;border-radius:22px;background:var(--pastel-green);box-shadow:0 12px 35px #173f3a10}
.briefing-page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.briefing-page-head h2{font-size:clamp(32px,5vw,48px)}.briefing-page-head p:last-child{margin:6px 0 0;color:var(--muted);font-size:16px}
#refresh-briefing{min-height:48px;padding:10px 16px;border:1px solid #82998d;border-radius:12px;background:var(--paper);color:var(--green);font-size:17px;font-weight:800;cursor:pointer}
#refresh-briefing.refreshing{border-color:#d99b44;background:#d99b44;color:#34240f;cursor:wait;box-shadow:0 0 0 3px #d99b4438}
.briefing-page-content{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(320px,1.15fr);gap:20px}.briefing-card{padding:clamp(20px,3vw,30px);border:1px solid #cbd9d0;border-radius:20px;background:var(--paper);box-shadow:0 8px 24px #173f3a10}.briefing-card h3{margin:0 0 16px;font:800 clamp(24px,3vw,31px)/1.2 Georgia,serif}
.weather-card,.outlook-card{padding:17px}.weather-card{position:relative;overflow:hidden;color:#173f3a;background:linear-gradient(145deg,#ccecff,#f7efbd)}.weather-card::after{content:"";position:absolute;right:-45px;top:-55px;width:155px;height:155px;border-radius:50%;background:#fff8b8aa}.weather-main{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.weather-icon{font-size:clamp(52px,7vw,70px);line-height:1;filter:drop-shadow(0 4px 6px #173f3a25)}.weather-temperature{font-size:clamp(49px,7vw,68px);font-weight:850;line-height:1;letter-spacing:-.06em}.weather-condition{margin:8px 0 2px;font-size:21px;font-weight:850;text-transform:capitalize}.weather-location{margin:0;font-size:14px}.weather-details{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.weather-details span{padding:5px 8px;border-radius:999px;background:#ffffffa8;font-size:13px;font-weight:750}
.outlook-card h3{margin-bottom:10px;font-size:22px}.weather-outlook{display:grid;grid-template-columns:repeat(4,minmax(66px,1fr));gap:6px}.weather-slot{display:grid;place-items:center;gap:2px;padding:7px 4px;border-radius:10px;background:var(--pastel-green);text-align:center}.weather-slot strong{font-size:13px}.weather-slot span{font-size:25px;line-height:1.05}.weather-slot b{font-size:18px}.weather-slot small{color:var(--muted);font-size:11px;font-weight:750}
.briefing-list{margin:0;padding:0;list-style:none}.briefing-list li{padding:13px 0;border-bottom:1px solid #dce5df;font-size:clamp(18px,2vw,21px);line-height:1.45}.briefing-list li:last-child{border-bottom:0}.briefing-list a{color:var(--green);font-weight:750;text-decoration-thickness:1px;text-underline-offset:3px}.briefing-reminder-time{display:block;margin-top:3px;color:var(--muted);font-size:16px;font-weight:700}.briefing-empty,.briefing-loading{color:var(--muted);font-size:20px}.briefing-card-wide{grid-column:1/-1}
body[data-phone-view="briefing"] .layout{display:none}
[data-theme="dark"] .briefing-page,[data-theme="dark"] .briefing-card{border-color:#354840}[data-theme="dark"] .weather-card{color:#eaf5f1;background:linear-gradient(145deg,#244c59,#574a28)}[data-theme="dark"] .weather-details span{background:#10191780}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  height: calc(100vh - 174px);
}

.chat-panel,
aside {
  background: var(--pastel-green);
  border: 1px solid #d9d5ca;
  border-radius: 22px;
  box-shadow: 0 12px 35px #173f3a10;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  overflow: hidden;
}

.messages {
  flex: 1;
  padding: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

.bubble {
  max-width: 78%;
  padding: 12px 16px;
  margin: 10px 0;
  line-height: 1.58;
  font-size: 18px;
  white-space: pre-wrap;
}

.bubble.bertie {
  background: var(--mint);
  border-radius: 5px 18px 18px 18px;
}

.bubble.bertie.information-card {
  width: calc(100% + 42px);
  max-width: calc(100% + 42px);
  margin-left: -21px;
  padding: 18px;
  border: 3px solid var(--gold);
  border-radius: 18px;
  background: linear-gradient(145deg, #fffdf5, #e7f3e9);
  box-shadow: 0 7px 0 #b77a2c, 0 13px 28px #173f3a24;
}

.information-card .message-text:first-child strong:first-child {
  display: block;
  margin: -18px -18px 13px;
  padding: 13px 17px;
  border-radius: 14px 14px 0 0;
  background: var(--green);
  color: #fff;
  font-family: Georgia, serif;
  font-size: 23px;
}

.information-card .table-wrap {
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid #b9c9bf;
  border-radius: 11px;
  background: #fffdf8;
}

.information-card table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.information-card th { padding: 8px 10px; background: #d99b44; color: #fff; text-align: left; }
.information-card td { padding: 8px 10px; border-top: 1px solid #dce4df; vertical-align: top; overflow-wrap:anywhere; }
.information-card td:first-child { width: 34%; color: var(--green); font-weight: 850; }
.information-card a { color: #175c50; font-weight: 800; }
.admin-dialog{width:min(760px,calc(100% - 24px));max-width:760px;max-height:90dvh;overflow:auto}.admin-dialog h4{margin:18px 0 8px;font-family:Georgia,serif;font-size:19px}.admin-pin-reset{padding:12px 14px 18px;border:1px solid #d8e1dc;border-radius:14px;background:var(--pastel-green)}.admin-pin-reset .save-edit{width:100%;min-height:46px;margin-top:14px;border:0;border-radius:10px;background:var(--green);color:#fff;font-weight:850}.audit-heading{display:flex;align-items:center;justify-content:space-between}.audit-heading h4{margin-bottom:8px}.audit-heading button{padding:7px 10px;border:1px solid #b9c9bf;border-radius:9px;background:var(--paper);color:var(--ink);font-weight:750}.audit-list{display:grid;gap:8px;max-height:42dvh;overflow:auto}.audit-list article{padding:10px 12px;border-left:5px solid var(--gold);border-radius:7px 11px 11px 7px;background:var(--pastel-green)}.audit-list article>div{display:flex;justify-content:space-between;gap:10px}.audit-list time,.audit-list small{color:var(--muted);font-size:12px}.audit-list p{margin:4px 0 0;color:var(--ink);font-size:13px}

.bubble.user {
  background: var(--green);
  color: white;
  border-radius: 18px 5px 18px 18px;
  margin-left: auto;
}

.bubble small {
  display: block;
  opacity: .65;
  margin-top: 5px;
  font-size: 13px;
}

.composer {
  display: flex;
  gap: 9px;
  padding: 14px 18px 5px;
  border-top: 1px solid #e6e1d7;
}

.composer textarea {
  resize: none;
  max-height: 110px;
  font-size: 18px;
  line-height: 1.45;
}

.send {
  width: 48px;
  font-size: 21px;
}

.hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin: 5px 0 12px;
}

aside {
  padding: 22px;
  overflow: auto;
}

.aside-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.aside-head > div { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }

.aside-head .eyebrow { margin: 0; }

.aside-head h2 { margin: 0; font-size: 27px; }

.reminder-filter-label {
  margin-top: 12px;
}

.reminder-filter {
  min-height: 44px;
  background: #f9fcfa;
  font-weight: 750;
}

.clear-completed {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #c85a5a;
  border-radius: 10px;
  background: #fff3f3;
  color: #a52626;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.bell {
  border-radius: 50%;
  width: 38px;
  height: 38px;
}

.reminder-form {
  padding: 15px 0 20px;
  border-bottom: 1px solid #e6e1d7;
}

.secondary {
  width: 100%;
  padding: 11px;
  margin-top: 13px;
  background: var(--gold);
  color: #34240f;
}

.show-deleted,
.download-reminders {
  width: 100%;
  min-height: 44px;
  margin-top: 9px;
  border: 1px solid #82998d;
  border-radius: 11px;
  background: #f7fbf8;
  color: var(--green);
  font-weight: 850;
  cursor: pointer;
}

.download-reminders {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.deleted-reminders {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid #cbd9d0;
  border-radius: 12px;
  background: #f9fcfa;
}

.deleted-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid #dce5df;
}

.deleted-reminder:last-child { border-bottom: 0; }
.deleted-reminder div { min-width: 0; }
.deleted-reminder strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.deleted-reminder small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.deleted-reminder button { flex: 0 0 auto; padding: 7px 9px; border: 0; border-radius: 8px; background: var(--green); color: white; font-size: 12px; font-weight: 800; cursor: pointer; }
.deleted-empty { margin: 5px; color: var(--muted); font-size: 12px; text-align: center; }

.reminders {
  min-width: 0;
  max-width: 100%;
}

.reminder-view-switch { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0;padding:4px;border:1px solid #cad5ce;border-radius:12px;background:var(--pastel-green) }
.reminder-view-switch button { min-height:40px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-weight:850;cursor:pointer }
.reminder-view-switch button.selected { background:var(--paper);color:var(--green);box-shadow:0 2px 7px #173f3a20 }
.reminder-calendar { margin:12px 0 18px }
.calendar-head { display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:6px;margin-bottom:10px }
.calendar-head h3 { margin:0;text-align:center;font-family:Georgia,serif;font-size:21px }
.calendar-head button { width:42px;height:42px;border:1px solid #bdcbc4;border-radius:10px;background:var(--paper);color:var(--green);font-size:28px;line-height:1;cursor:pointer }
.calendar-weekdays,.calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px }
.calendar-weekdays { margin-bottom:4px;color:var(--muted);font-size:10px;font-weight:850;text-align:center;text-transform:uppercase }
.calendar-day,.calendar-blank { min-width:0;aspect-ratio:1/1 }
.calendar-day { display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5px 2px 4px;border:1px solid #d9e1dc;border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation }
.calendar-day.today { border:2px solid var(--gold) }
.calendar-day.selected { outline:3px solid var(--green);outline-offset:1px }
.calendar-number { font-size:13px;font-weight:850 }
.calendar-bars { display:grid;width:calc(100% - 4px);gap:2px;min-height:5px }
.calendar-bar { --reminder-accent:#d99b44;display:block;width:100%;height:4px;border-radius:3px;background:var(--reminder-accent) }
.calendar-bar.reminder-medical{--reminder-accent:#d35d67}.calendar-bar.reminder-travel{--reminder-accent:#3d83c5}.calendar-bar.reminder-food{--reminder-accent:#dd8738}.calendar-bar.reminder-event{--reminder-accent:#865fc5}.calendar-bar.reminder-personal{--reminder-accent:#3b9970}.calendar-bar.reminder-work-shift{--reminder-accent:#275fba}
.calendar-day-details { margin-top:13px;padding-top:10px;border-top:1px solid #dce5df }
.calendar-day-details:empty { display:none }
.calendar-day-details h4 { margin:0 0 8px;font-family:Georgia,serif;font-size:17px }
.calendar-day-empty { margin:8px 0;color:var(--muted);font-size:13px }
.calendar-event { --reminder-accent:#d99b44;display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:7px 0;padding:10px;border:0;border-left:5px solid var(--reminder-accent);border-radius:5px 10px 10px 5px;background:#f1eee5;color:var(--ink);font:inherit;text-align:left }
.calendar-event.reminder-medical{--reminder-accent:#d35d67;background:#fff0f1}.calendar-event.reminder-travel{--reminder-accent:#3d83c5;background:#edf6ff}.calendar-event.reminder-food{--reminder-accent:#dd8738;background:#fff4e8}.calendar-event.reminder-event{--reminder-accent:#865fc5;background:#f5efff}.calendar-event.reminder-personal{--reminder-accent:#3b9970;background:#edf9f3}.calendar-event.reminder-work-shift{--reminder-accent:#275fba;background:#e5efff}
.calendar-event strong { min-width:0;overflow-wrap:anywhere }.calendar-event span { font-size:12px;font-weight:850;white-space:nowrap }
[data-theme="dark"] .calendar-day,[data-theme="dark"] .calendar-head button { border-color:#496057 }
[data-theme="dark"] .calendar-event { filter:brightness(.72) saturate(.85);color:#10201c }

.reminder {
  min-width: 0;
  max-width: 100%;
  background: #f1eee5;
  border-left: 4px solid var(--gold);
  padding: 11px;
  margin: 11px 0;
  border-radius: 5px 12px 12px 5px;
  position: relative;
  overflow: hidden;
}

.reminder p {
  margin: 0 25px 4px 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.reminder time {
  font-size: 12px;
  color: var(--muted);
  max-width: 100%;
  white-space: normal;
}

.reminder-flag {
  display: inline-block;
  margin: 3px 0 7px;
  padding: 3px 8px;
  border: 1px solid #8ba398;
  border-radius: 999px;
  background: #f7fbf8;
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}

.flag-birthdays { background: #fff0f5; border-color: #d88aa7; color: #8d3153; }
.flag-medical { background: #fff0f1; border-color: #d35d67; color: #8f2933; }
.flag-leisure { background: #f5efff; border-color: #865fc5; color: #59358f; }
.flag-urgent { background: #ffe8e5; border-color: #c94336; color: #9d2118; }
.flag-holidays { background: #edf6ff; border-color: #3d83c5; color: #245f96; }
.flag-garden { background: #edf9f3; border-color: #3b9970; color: #246b4d; }
.flag-shopping { background: #fff4e8; border-color: #dd8738; color: #8a4b16; }
.flag-leigh-work { background: #162f5f; border-color: #88b7ff; color: #fff; }
.flag-tasks { background: #f7f0df; border-color: #d99b44; color: #80531c; }

.reminder.reminder-work-shift {
  --reminder-accent: #275fba;
  --reminder-bg: #e5efff;
  border: 2px solid #275fba;
  border-left-width: 8px;
  box-shadow: 0 7px 18px #275fba35;
}
.reminder.reminder-work-shift p { color: #102d5b; font-size: 17px; font-weight: 900; }
.reminder-sharing { display: block; margin-top: 8px; color: #355f56; font-size: 12px; font-weight: 850; }
.reminder.reminder-shared-readonly { cursor: default; }
.reminder-shared-readonly::after { content: "Shared"; position: absolute; right: 8px; bottom: 7px; padding: 2px 7px; border-radius: 999px; background: #ffffffb8; color: #355f56; font-size: 10px; font-weight: 900; text-transform: uppercase; }
[data-theme="dark"] .reminder.reminder-work-shift { filter: none; background: #193154; border-color: #77aaff; color: #edf5ff; }
[data-theme="dark"] .reminder.reminder-work-shift p { color: #edf5ff; }
[data-theme="dark"] .reminder.reminder-work-shift .reminder-sharing { color: #c8dcff; }

.reminder .delete-reminder {
  position: absolute;
  right: 7px;
  top: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #7f6d5d;
}

.reminder-awaiting {
  border: 2px solid #d99b44;
  border-left-width: 6px;
}

.reminder .ack-reminder {
  position: static;
  width: auto;
  min-height: 42px;
  margin-top: 10px;
  padding: 9px 13px;
  border: 0;
  border-radius: 10px;
  background: var(--green);
  color: white;
  font-weight: 850;
  cursor: pointer;
}

.reminder-completed { opacity: .82; }

.completed-stamp {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 9px;
  border: 2px solid #b32626;
  border-radius: 5px;
  color: #b32626;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.notify-status {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 20px 5px;
}

.thinking { animation: pulse 1s infinite; }

@keyframes pulse {
  50% { opacity: .45; }
}

@media (max-width: 700px) {
  body {
    min-height: 100dvh;
    overscroll-behavior-x: none;
  }

  main {
    padding:
      calc(8px + env(safe-area-inset-top))
      calc(10px + env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      calc(10px + env(safe-area-inset-left));
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  header {
    padding: 2px 2px 7px;
    margin: 0;
  }

  header .mini-mark {
    width: 48px !important;
    height: 48px !important;
  }

  .login-card .login-bertie {
    width: 210px;
    height: 210px;
  }

  header .brand-name { font-size: 25px !important; }

  header p { margin-top: 0; }

  .quiet {
    min-height: 44px;
    padding: 8px 11px;
  }

  .phone-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 3px 0 9px;
    padding: 4px;
    border: 1px solid #cad5ce;
    border-radius: 14px;
    background: #e8eee9;
  }

  .phone-nav-button {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-weight: 800;
    touch-action: manipulation;
  }

  .phone-nav-button.selected {
    background: var(--paper);
    color: var(--green);
    box-shadow: 0 2px 8px #173f3a20;
  }

  .briefing-page{min-height:0;flex:1;padding:18px;border-radius:18px}
  .briefing-page-head{align-items:flex-start;margin-bottom:17px}
  .briefing-page-head h2{font-size:34px}
  #refresh-briefing{min-width:48px;padding:8px;font-size:0}
  #refresh-briefing::first-letter{font-size:24px}
  .briefing-page-content{display:block}
  .briefing-card{margin-bottom:12px;padding:18px}
  .weather-card,.outlook-card{padding:13px 14px}.weather-main{gap:9px}.weather-icon{font-size:47px}.weather-temperature{font-size:46px}.weather-condition{margin-top:5px;font-size:18px}.weather-location{font-size:13px}.weather-details{gap:5px;margin-top:9px}.weather-details span{padding:4px 7px;font-size:11px}
  .outlook-card h3{margin-bottom:8px;font-size:19px}.weather-outlook{display:flex;gap:5px;overflow-x:auto;padding-bottom:3px;scroll-snap-type:x mandatory}.weather-slot{min-width:64px;padding:6px 3px;scroll-snap-align:start}.weather-slot span{font-size:22px}.weather-slot b{font-size:16px}.weather-slot small{font-size:10px}

  .layout {
    display: block;
    height: auto;
    min-height: 0;
    min-width: 0;
    flex: 1;
  }

  .chat-panel,
  aside {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 17px;
  }

  .chat-panel { display: flex; }

  .messages {
    padding: 14px 12px;
    overscroll-behavior-x: none;
  }

  .bubble.bertie.information-card {
    width: calc(100% + 16px);
    max-width: calc(100% + 16px);
    margin-left: -8px;
  }

  .bubble {
    max-width: 92%;
    padding: 11px 13px;
    font-size: 17px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .composer { padding: 10px 10px 4px; }

  .composer textarea {
    min-height: 46px;
    font-size: 17px;
    line-height: 1.4;
  }

  .send {
    width: 48px;
    min-width: 48px;
    min-height: 46px;
    touch-action: manipulation;
  }

  .hint { margin: 4px 5px 9px; }

  aside {
    padding: 18px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
  }

  .bell {
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  .reminder-form input,
  .reminder-form select,
  .secondary {
    min-height: 48px;
    font-size: 16px;
  }

  .secondary { touch-action: manipulation; }

  .reminders {
    overflow-x: hidden;
    touch-action: pan-y;
  }

  .reminder {
    width: 100%;
    touch-action: pan-y;
  }

  .reminder time {
    display: block;
    padding-right: 2px;
    overflow-wrap: anywhere;
  }

  .reminder .delete-reminder {
    width: 44px;
    height: 44px;
    font-size: 23px;
    right: 0;
    top: 0;
    touch-action: manipulation;
  }

  .reminder p { margin-right: 38px; }

  body[data-phone-view="chat"] aside { display: none; }
  body[data-phone-view="reminders"] .chat-panel { display: none; }

  .login-wrap {
    min-height: 100dvh;
    display: block;
    overflow-y: auto;
    padding:
      calc(18px + env(safe-area-inset-top))
      calc(14px + env(safe-area-inset-right))
      calc(18px + env(safe-area-inset-bottom))
      calc(14px + env(safe-area-inset-left));
  }

  .login-card {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    padding: 24px 20px;
    border-radius: 22px;
  }

  .login-card .portrait {
    width: 88px !important;
    height: 88px !important;
  }

  .login-card .brand-name { font-size: 40px !important; }

  .login-card .eyebrow { margin-top: 12px; }

  .login-card .welcome { margin: 7px 0 14px; }

  .login-card label {
    font-size: 14px;
    margin-top: 13px;
  }

  .login-card input,
  .login-card select {
    min-height: 50px;
    font-size: 16px;
  }

  .login-card .primary {
    min-height: 50px;
    margin-top: 16px;
    font-size: 16px;
    touch-action: manipulation;
  }

  .login-card .error { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bertie-eyelid,
  .bertie-nose { animation: none; }
}