:root{font-family:system-ui,sans-serif;color:#1b2924;background:#f3f6f3}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:1000px;margin:auto;padding:1.25rem}.card{max-width:380px;margin:14vh auto;background:#fff;padding:2rem;border-radius:1.25rem;box-shadow:0 12px 35px #18392a18}label{display:grid;gap:.35rem;margin:.8rem 0}input,select,textarea{width:100%;padding:.75rem;border:1px solid #b8c8c0;border-radius:.65rem;font:inherit}textarea{resize:vertical;line-height:1.4;min-height:4.75rem}button{font:inherit;min-height:2.75rem;padding:.65rem .9rem;border:0;border-radius:.65rem;background:#315a4c;color:#fff;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #7aa893;outline-offset:2px}.secondary{background:#e1ebe5;color:#244236}header,.chatHead{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem}header h1{margin:0}.headerActions,.chatActions{display:flex;gap:.5rem}.iconButton{width:2.75rem;padding:.4rem}.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem}aside,.chat{background:#fff;border-radius:1rem;padding:1rem}nav{display:grid;gap:.35rem;margin-bottom:.75rem}.conversation{background:#f1f5f2;color:#244236;text-align:left;display:flex;justify-content:space-between;align-items:center}.conversation.selected{background:#d8eee2;outline:2px solid #315a4c}.unread{min-width:1.4rem;padding:.05rem .4rem;border-radius:1rem;background:#b12626;color:#fff;text-align:center}.chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;min-height:65vh;position:relative}#messages{overflow:auto;padding:1rem 0}.message{display:flex;padding:.3rem 0;border:0}.message.own{justify-content:flex-end}.bubble{max-width:min(82%,42rem);padding:.55rem .75rem;background:#f1f5f2;border-radius:.85rem .85rem .85rem .25rem}.message.own .bubble{background:#d8eee2;border-radius:.85rem .85rem .25rem .85rem}.message strong{display:block;color:hsl(var(--author-hue) 52% 35%);font-size:.9rem}.message p{white-space:pre-wrap;margin:.3rem 0}.message small,.muted,.admin small{color:#65766d}.error{color:#a62929}form#composer{display:flex;align-items:end;gap:.5rem;border-top:1px solid #e5ece7;padding-top:.8rem}form#composer textarea{flex:1;margin:0}.sendButton{flex:0 0 2.75rem;width:2.75rem;padding:.4rem;font-size:0}.sendButton::before{content:'➤';font-size:1.25rem}.sendMenu{position:absolute;z-index:3;right:1rem;bottom:5.5rem;display:grid;gap:.35rem;padding:.45rem;background:#fff;border:1px solid #dce6e0;border-radius:.7rem;box-shadow:0 8px 20px #18392a22}.emojiBar,.reactionPicker{display:flex;gap:.3rem;padding:.4rem 0}.emojiBar button,.reactionPicker button,.reaction{min-height:0;padding:.25rem .45rem;background:#f1f5f2;color:#244236}.reactionPicker{position:absolute;z-index:2;right:1rem;bottom:5.5rem;background:#fff;border:1px solid #dce6e0;border-radius:.7rem;box-shadow:0 8px 20px #18392a22}.reactions{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0}.reaction.reacted{background:#d8eee2;outline:1px solid #315a4c}.messageMeta{display:flex;align-items:center;gap:.35rem}.reactionAdd{margin-left:auto;font-size:.85rem;padding:.2rem .35rem}.personalList{display:grid;gap:.4rem}.personalContact{display:flex;justify-content:space-between;align-items:center;text-align:left;background:#f1f5f2;color:#244236}.actions{display:flex;justify-content:end;gap:.5rem}dialog{border:0;border-radius:1rem;box-shadow:0 12px 45px #0004}.admin{min-width:min(32rem,90vw)}.userMenu{display:grid;gap:.5rem;min-width:min(20rem,80vw)}.userMenu h2{margin:.25rem 0}.admin ul{list-style:none;padding:0;max-height:12rem;overflow:auto}.admin li{padding:.5rem;border-bottom:1px solid #e8eeea;display:grid;gap:.25rem}.removeMember{justify-self:start;padding:.3rem .5rem}.admin fieldset{border:0;padding:0;display:grid;gap:.35rem}.admin fieldset label{display:flex;align-items:center;gap:.5rem;margin:0}.admin fieldset input[type=checkbox]{width:auto;margin:0}.token{overflow-wrap:anywhere;background:#f1f5f2;padding:.75rem;border-radius:.5rem}
@media(max-width:650px){main{padding:.65rem}header{margin-bottom:.65rem}header h1{font-size:1.4rem}.layout{grid-template-columns:1fr;gap:.65rem}aside{display:flex;gap:.5rem;align-items:center;padding:.65rem;overflow:auto}aside h2{display:none}nav{display:flex;gap:.4rem;margin:0;overflow:auto;flex:1}.conversation{white-space:nowrap;flex:0 0 auto}.chat{min-height:70dvh;padding:.75rem}.chatHead{margin-bottom:.25rem}.chatHead h2{font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:.35rem 0}.chatHead .iconButton{margin-left:auto}#messages{padding:.5rem 0}.bubble{max-width:88%}form#composer{gap:.35rem;padding-top:.65rem}.sendMenu{right:.75rem;bottom:6.1rem}.reactionPicker{right:.75rem;bottom:6.1rem}.emojiBar{overflow:auto}}
@media(max-width:650px){html,body{height:100%;overflow:hidden}main{height:100dvh;overflow:hidden}.layout{min-height:0}.chat{height:calc(100dvh - 8rem);min-height:0}.sendMenu{border-radius:1rem;padding:.65rem;box-shadow:0 12px 30px #18392a33}.sendMenu button{text-align:left}}
.token{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.token span{min-width:0}
.onboarding{align-self:center;max-width:34rem;margin:auto;padding:1.25rem;border:1px solid #dce6e0;border-radius:1rem;background:#f7fbf8}.onboarding h3{margin-top:0}
.searchResults{display:grid;gap:.5rem;max-height:45vh;overflow:auto}.searchResult{padding:.65rem;border:1px solid #e1ebe5;border-radius:.65rem}.searchResult p{margin:.3rem 0;white-space:pre-wrap}
.settingsSection{padding:.75rem;border:1px solid #dce6e0;border-radius:.65rem}.settingsSection h3{margin:.1rem 0}
.success{color:#237044}
#permissionList{display:grid;gap:.65rem}#permissionList label{display:flex;align-items:flex-start;gap:.55rem;margin:0}#permissionList input[type=checkbox]{width:auto;margin:.25rem 0 0;padding:0;flex:0 0 auto}#permissionList span{display:grid;gap:.15rem}#permissionList small{line-height:1.35}
.familyMemberEditor{grid-template-columns:minmax(9rem,1fr) minmax(10rem,1fr);align-items:end}.familyMemberEditor strong,.familyMemberEditor small{grid-column:1/-1}.familyMemberEditor label{margin:.25rem 0}.familyMemberEditor button{justify-self:start}@media(max-width:650px){.familyMemberEditor{grid-template-columns:1fr}.familyMemberEditor button{width:100%}}
.familyCategories{border:0;padding:0;margin:.25rem 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem .65rem}.familyCategories legend{font-size:.9rem;color:#65766d}.familyCategories label{display:flex;align-items:center;gap:.35rem;margin:0}.familyCategories input{width:auto;margin:0;padding:0}
.feedback{position:fixed;z-index:10;right:1rem;bottom:1rem;max-width:min(28rem,calc(100vw - 2rem));margin:0;padding:.8rem 1rem;border-radius:.7rem;background:#237044;color:#fff;box-shadow:0 8px 24px #18392a33}.feedback[data-type="error"]{background:#a62929}.danger{background:#a62929}.visuallyHidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button:disabled{opacity:.55;cursor:wait}.familyFilters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.65rem}.familyFilters label{margin:0}.familySelection{font-size:.9rem}.familyMemberEditor{position:relative}.familyMemberEditor button:disabled{cursor:not-allowed}.chatActions{flex-wrap:wrap}.chatActions .iconButton{white-space:nowrap}
@media(max-width:650px){.chatActions{flex-wrap:nowrap;max-width:58vw;overflow:auto}.chatActions .iconButton{width:auto;display:flex;gap:.3rem;align-items:center}.chatActions .iconButton::after{content:attr(aria-label);font-size:.78rem}.familyFilters{grid-template-columns:1fr}.familyCategories{grid-template-columns:1fr}.feedback{bottom:calc(1rem + env(safe-area-inset-bottom))}}
@media(prefers-contrast:more){button,.secondary,input,select,textarea{border:2px solid currentColor}.muted,.admin small{color:#314039}}

/* Desktop workspace shell */
main{max-width:none;padding:0}.appShell{min-height:100dvh}.appShell .layout{min-height:100dvh;grid-template-columns:18.5rem minmax(0,1fr);gap:0}.sidebar{display:flex;min-height:100dvh;flex-direction:column;padding:.65rem;background:#f6f8f7;border-radius:0;border-right:1px solid #dce2df}.workspaceButton,.profileButton{width:100%;display:flex;align-items:center;gap:.7rem;padding:.72rem;background:transparent;color:#1b2924;text-align:left}.workspaceButton:hover,.profileButton:hover{background:#eaf0ed}.workspaceButton>span:nth-child(2),.profileButton>span:nth-child(2){display:grid;gap:.12rem;flex:1}.workspaceMark,.profileInitial{display:grid;place-items:center;width:2.15rem;height:2.15rem;border-radius:.65rem;background:#315a4c;color:#fff}.profileButton{margin-top:auto;border-top:1px solid #dce6e0;border-radius:.6rem}.navSectionTitle{margin:1rem .55rem .3rem;font-size:.72rem;font-weight:700;color:#708078;text-transform:uppercase;letter-spacing:.05em}.sidebar #conversations{display:grid;grid-auto-rows:max-content;align-content:start;overflow:auto;flex:1;gap:.15rem}.sidebar .conversation{min-height:2.5rem;padding:.5rem .65rem;border-radius:.55rem;background:transparent}.sidebar .conversation:hover{background:#eaf0ed}.sidebar .conversation.selected{background:#dcefe5;outline:0;font-weight:650}.sidebar .sectionLink{background:transparent}.appShell .chat{border-radius:0;min-height:100dvh;padding:1.1rem 1.5rem;background:#fff}.appShell .chatHead{padding-bottom:.85rem;border-bottom:1px solid #e5ece7}.appShell #messages{max-width:72rem;width:100%;margin:0 auto}.appShell .message{padding:.18rem 0}.appShell .bubble{max-width:min(80%,48rem);padding:.35rem .55rem;background:transparent;border-radius:.55rem}.appShell .message.own .bubble{padding:.5rem .65rem;background:#e5f2eb;border-radius:.7rem}.appShell .messageAuthor{padding:0;min-height:0;background:transparent}.familyDirectory,.shopping{max-width:46rem;margin:1rem auto}.emptyState{max-width:32rem;margin:3rem auto;text-align:center;padding:1.5rem;background:#f7faf8;border-radius:1rem}.shoppingAdd{display:flex;gap:.5rem}.shoppingAdd input{flex:1}.shopping ul{padding:0;list-style:none}.shoppingItem{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem .2rem;border-bottom:1px solid #e5ece7}.shoppingItem label{display:flex;align-items:center;gap:.65rem;margin:0}.shoppingItem input{width:auto}.shoppingItem.completed span{text-decoration:line-through;color:#65766d}.shoppingItem button{min-height:2rem;padding:.2rem .55rem}.familyDirectory .personalContact small{display:block}.profileCard h3{margin-top:1rem}
html[data-theme="dark"]{color-scheme:dark}html[data-theme="dark"] body,html[data-theme="dark"] .appShell .chat{background:#191b21;color:#eef1f5}html[data-theme="dark"] .sidebar{background:#202228;border-color:#383b44}html[data-theme="dark"] .workspaceButton,html[data-theme="dark"] .profileButton,html[data-theme="dark"] .secondary,html[data-theme="dark"] .conversation,html[data-theme="dark"] .personalContact{color:#eef1f5;background:#292c34}html[data-theme="dark"] .sectionLink{background:transparent}html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] dialog,html[data-theme="dark"] .sendMenu,html[data-theme="dark"] .reactionPicker{background:#292c34;color:#eef1f5;border-color:#454954}html[data-theme="dark"] .muted,html[data-theme="dark"] .admin small,html[data-theme="dark"] .navSectionTitle{color:#b8bec9}html[data-theme="dark"] .appShell .chatHead,html[data-theme="dark"] .profileButton,html[data-theme="dark"] .shoppingItem{border-color:#383b44}html[data-theme="dark"] .emptyState{background:#252830}html[data-theme="contrast"]{filter:contrast(1.15)}
@media(max-width:760px){.appShell .layout{display:block}.sidebar{min-height:auto;border-right:0;border-bottom:1px solid #dce6e0}.sidebar #conversations{display:flex;overflow:auto}.sidebar .navSectionTitle{display:none}.sidebarFooter{display:none}.appShell .chat{min-height:calc(100dvh - 10rem)}.workspaceButton{max-width:20rem}.shoppingAdd{align-items:stretch;flex-direction:column}.mobileBack{display:inline-flex}.mobileContentOpen .sidebar{display:none}.mobileContentOpen .appShell .chat{min-height:100dvh}.mobileContentOpen .chatHead{position:sticky;top:0;background:inherit;z-index:2}}
@media(min-width:761px){.mobileBack{display:none!important}}

.messageStatus{font-weight:700;letter-spacing:-.18em;margin-left:.1rem}.messageStatus.sent,.messageStatus.delivered{color:#8a9692}.messageStatus.read{color:#168ac6}

.messageAuthor{appearance:none;display:inline;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;text-align:left;font:inherit;font-size:.9rem;font-weight:700;line-height:1.2;color:hsl(var(--author-hue) 52% 35%)!important;cursor:pointer}.messageAuthor:hover{text-decoration:underline}.messageAuthor:focus-visible{outline:2px solid #7aa893;outline-offset:2px}.loadOlder{display:block;margin:0 auto .75rem}.profileCard{min-width:min(22rem,80vw)}.profileCard h2{margin-top:0}

.authorAvatar,.profileAvatar{object-fit:cover;background:#d8eee2}.authorAvatar{width:2rem;height:2rem;border-radius:50%;flex:0 0 2rem}.message .bubble{position:relative}.messageAvatar{float:left;margin:.1rem .5rem .15rem 0}.profileAvatar{display:block;width:5rem;height:5rem;border-radius:50%;margin:0 auto .75rem}.profileCard{text-align:center}.profileCard .actions{justify-content:center}
