.family-living-workspace {
    --family-ink: #4b3728;
    --family-muted: #766553;
    --family-gold: #a77a38;
    --family-plum: #765e70;
    --family-paper: rgba(255, 252, 244, .96);
    --family-line: rgba(154, 112, 52, .28);
    width: min(1600px, calc(100% - 36px));
    margin: 18px auto 72px;
    color: var(--family-ink);
    font-family: "Crimson Pro", Georgia, serif;
}

.family-living-workspace a { color: #76501f; }
.family-kicker {
    margin: 0 0 8px;
    color: #97703c;
    font: 700 .72rem/1.2 "Cinzel", serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.family-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr);
    gap: 48px;
    align-items: center;
    min-height: 300px;
    padding: 40px 48px;
    overflow: hidden;
    border: 1px solid var(--family-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 92%, transparent 0 76px, rgba(153,111,49,.11) 77px 78px, transparent 79px 95px, rgba(153,111,49,.08) 96px 97px, transparent 98px),
        linear-gradient(112deg, rgba(255,255,255,.98), rgba(250,241,219,.95) 57%, rgba(235,215,173,.88));
    box-shadow: 0 20px 46px rgba(83, 58, 25, .08);
}

.family-hero h1 {
    margin: 0;
    font: italic clamp(3.4rem, 5.3vw, 5.8rem)/.95 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.035em;
}
.family-hero__lead { margin: 16px 0 0; font-size: 1.14rem; color: var(--family-muted); }
.family-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.family-primary-action { background: var(--family-plum) !important; border-color: var(--family-plum) !important; color: white !important; }
.family-secondary-action { background: rgba(255,255,255,.6) !important; }
.family-hero__note {
    position: relative;
    padding: 28px 30px 24px;
    transform: rotate(.7deg);
    border: 1px solid rgba(166,129,75,.2);
    border-radius: 16px 16px 4px 16px;
    background: rgba(255,253,246,.9);
    box-shadow: 0 16px 30px rgba(77,54,25,.08);
}
.family-quote-mark { position: absolute; left: 12px; top: -16px; color: rgba(167,122,56,.26); font: 6rem/1 Georgia, serif; }
.family-hero__note p { position: relative; margin: 0; font: 600 1.35rem/1.45 "Caveat", cursive; }
.family-hero__note small { display: block; margin-top: 18px; color: #a08665; font: .72rem/1.2 "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; }

.family-return { margin: 34px 0 30px; }
.family-section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 16px; }
.family-section-heading h2 { margin: 0; font: 500 clamp(2rem, 3vw, 2.75rem)/1.05 "Cormorant Garamond", serif; }
.family-section-heading > a { font-weight: 700; text-decoration: none; }
.family-return-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.family-return-card {
    min-height: 136px;
    padding: 18px;
    border: 1px solid rgba(152,113,57,.22);
    border-radius: 16px;
    background: rgba(255,252,244,.88);
    box-shadow: 0 10px 24px rgba(91,63,30,.05);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.family-return-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(91,63,30,.1); }
.family-return-card > span { float: left; min-width: 50px; margin-right: 12px; color: #9b7541; font: 600 2rem/1 "Cormorant Garamond", serif; }
.family-return-card strong, .family-return-card small { display: block; }
.family-return-card strong { color: var(--family-ink); font-size: 1rem; line-height: 1.25; }
.family-return-card small { clear: both; padding-top: 14px; color: var(--family-muted); line-height: 1.35; }

.family-collage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.family-story-card {
    grid-column: span 4;
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 28px;
    border: 1px solid var(--family-line);
    border-radius: 20px;
    background: var(--family-paper);
    box-shadow: 0 14px 34px rgba(83,58,25,.07);
}
.family-collage__wide { grid-column: span 8; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); gap: 26px; align-items: center; }
.family-story-card h2 { margin: 0 0 10px; font: 500 1.9rem/1.05 "Cormorant Garamond", serif; }
.family-story-card p { color: var(--family-muted); font-size: 1rem; line-height: 1.45; }
.family-story-card a { display: inline-block; margin-top: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.family-story-card--conversation { background: linear-gradient(150deg, #fffdf8, #f3e7d2); }
.family-story-card--celebration { min-height: 320px; background: linear-gradient(150deg, #fff9ef, #f0ddb9); }
.family-story-card--discovery { min-height: 350px; background: linear-gradient(150deg, #fffdf8, #eee6d9); }
.family-story-card--tradition { min-height: 300px; background: linear-gradient(150deg, #fffaf0, #ead8b4); }
.family-photo-placeholder {
    display: grid;
    place-items: center;
    min-height: 210px;
    border: 10px solid #faf6eb;
    outline: 1px solid #b99c6a;
    background: linear-gradient(135deg, #a99a83, #81725f);
    color: rgba(255,255,255,.72);
    box-shadow: 0 8px 18px rgba(57,41,24,.16);
}
.family-photo-placeholder span { font-size: 2rem; }
.family-photo-placeholder small { display: block; font-family: "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; }
.family-conversation-preview { margin-top: 18px; padding: 14px; border-left: 3px solid rgba(121,85,47,.35); background: rgba(255,255,255,.55); }
.family-conversation-preview strong, .family-conversation-preview small { display: block; }
.family-conversation-preview small { margin-top: 6px; color: var(--family-muted); }
.family-date-token { display: grid; place-items: center; width: 86px; height: 86px; margin-top: 20px; border: 1px solid rgba(159,114,51,.34); border-radius: 50%; background: rgba(255,255,255,.5); }
.family-date-token span { font: 600 2rem/1 "Cormorant Garamond", serif; }
.family-date-token small { color: var(--family-muted); text-transform: uppercase; letter-spacing: .08em; }
.family-archive-stack { display: grid; place-items: center; min-height: 180px; transform: rotate(-2deg); border: 1px solid #a98b61; background: linear-gradient(135deg,#e7d2a9,#cfb17d); box-shadow: 8px -8px 0 #eee0c4, 16px -16px 0 #f5ead4; font: 600 2rem/1 "Cormorant Garamond", serif; }
.family-discovery-list { margin: 18px 0; padding-left: 20px; color: var(--family-muted); }
.family-discovery-list li { margin: 9px 0; line-height: 1.35; }
.family-place-sketch { display: grid; place-items: center; min-height: 180px; color: rgba(97,70,39,.72); font-size: 5rem; background: radial-gradient(circle,rgba(194,165,118,.24),transparent 62%); }
.family-reflection { margin-top: 34px; padding: 34px; text-align: center; border-top: 1px solid var(--family-line); }
.family-reflection p { margin: 0 0 15px; font: italic 1.65rem/1.2 "Cormorant Garamond", serif; }
.family-reflection div { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }

.family-child-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    margin-bottom: 22px;
    padding: 28px 34px;
    border: 1px solid var(--family-line);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,230,201,.88));
}
.family-child-header h1 { margin: 0; font: italic 3.2rem/1 "Cormorant Garamond", serif; }
.family-child-header p:last-child { max-width: 780px; margin: 10px 0 0; color: var(--family-muted); font-size: 1.05rem; }
.family-back-link { white-space: nowrap; font-weight: 700; }
.family-child-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.family-child-card { padding: 26px; border: 1px solid var(--family-line); border-radius: 18px; background: var(--family-paper); box-shadow: 0 12px 28px rgba(83,58,25,.06); }
.family-child-card--wide { grid-column: span 2; }
.family-child-card h2 { margin: 0 0 10px; font: 500 2rem/1.05 "Cormorant Garamond", serif; }
.family-child-card p { color: var(--family-muted); line-height: 1.5; }
.family-child-card textarea { width: 100%; margin: 14px 0; padding: 14px; border: 1px solid var(--family-line); border-radius: 12px; background: #fffdfa; }
.family-member-sample, .family-celebration-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; margin-top: 12px; padding: 14px; border: 1px solid rgba(154,112,52,.16); border-radius: 14px; background: rgba(255,255,255,.55); }
.family-member-sample > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #eadfc9; font-weight: 700; }
.family-member-sample strong, .family-member-sample small, .family-celebration-row strong, .family-celebration-row small { display: block; }
.family-member-sample small, .family-celebration-row small { color: var(--family-muted); }
.family-thread { margin-top: 14px; padding: 18px; border-radius: 14px; background: rgba(244,235,218,.62); }
.family-thread strong, .family-thread small { display: block; }
.family-thread p { margin: 8px 0; }
.family-memory-page, .family-history-page { padding: 26px; border: 1px solid var(--family-line); border-radius: 18px; background: var(--family-paper); }
.family-memory-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 22px; }
.family-memory-toolbar h2 { margin: 0; font: 500 2rem/1 "Cormorant Garamond", serif; }
.family-memory-toolbar p:last-child { margin: 8px 0 0; color: var(--family-muted); }
.family-memory-grid, .family-place-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.family-memory-grid article, .family-place-grid article { padding: 18px; border: 1px solid rgba(154,112,52,.18); border-radius: 16px; background: rgba(255,255,255,.55); }
.family-memory-grid .family-photo-placeholder { min-height: 190px; border-width: 7px; }
.family-memory-grid h3 { margin: 16px 0 4px; font: 600 1.35rem/1.1 "Cormorant Garamond", serif; }
.family-memory-grid p { margin: 0; color: var(--family-muted); }
.family-celebration-row time { min-width: 70px; color: #926b35; font-weight: 700; }
.family-tradition-list, .family-archive-list { display: grid; gap: 10px; margin-top: 16px; }
.family-tradition-list a, .family-archive-list a { display: block; padding: 15px; border-radius: 12px; background: rgba(243,232,211,.65); text-decoration: none; }
.family-tradition-list strong, .family-tradition-list span, .family-archive-list strong, .family-archive-list small { display: block; }
.family-tradition-list span, .family-archive-list small { margin-top: 4px; color: var(--family-muted); }
.family-history-line { position: relative; display: grid; gap: 22px; padding-left: 36px; }
.family-history-line::before { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 1px; background: #b8945c; }
.family-history-line article { position: relative; padding: 20px 24px; border-radius: 14px; background: rgba(246,237,220,.65); }
.family-history-line article::before { content: ""; position: absolute; left: -30px; top: 28px; width: 11px; height: 11px; border: 3px solid #fffaf0; border-radius: 50%; background: #a77a38; box-shadow: 0 0 0 1px #a77a38; }
.family-history-line time { color: #98713c; font-weight: 700; }
.family-history-line h3 { margin: 5px 0; font: 600 1.45rem/1.1 "Cormorant Garamond", serif; }
.family-history-line p { margin: 0; color: var(--family-muted); }
.family-place-grid article { text-align: center; }
.family-place-grid .family-place-sketch { min-height: 130px; }
.family-place-grid h2 { margin: 12px 0 6px; font: 600 1.6rem/1.1 "Cormorant Garamond", serif; }
.family-place-grid p { color: var(--family-muted); }
.family-admin-tools { margin-top: 18px; }
.family-danger-zone { border-color: rgba(145,55,45,.25); background: linear-gradient(145deg,#fffdfa,#f8e8df); }
.family-danger-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.destructive-button { background: #8b3c35 !important; border-color: #8b3c35 !important; color: white !important; }

@media (max-width: 1100px) {
    .family-hero { grid-template-columns: 1fr; }
    .family-return-ribbon { grid-template-columns: repeat(2,1fr); }
    .family-story-card { grid-column: span 6; }
    .family-collage__wide { grid-column: span 12; }
    .family-child-grid { grid-template-columns: 1fr 1fr; }
    .family-child-card--wide { grid-column: span 2; }
}
@media (max-width: 720px) {
    .family-living-workspace { width: min(100% - 20px, 1600px); margin-top: 10px; }
    .family-hero { padding: 28px 24px; gap: 28px; }
    .family-hero h1 { font-size: 3.5rem; }
    .family-return-ribbon, .family-memory-grid, .family-place-grid, .family-child-grid { grid-template-columns: 1fr; }
    .family-collage { display: block; }
    .family-story-card, .family-collage__wide { display: block; margin-bottom: 14px; }
    .family-photo-placeholder, .family-archive-stack, .family-place-sketch { margin-bottom: 20px; }
    .family-child-header, .family-section-heading, .family-memory-toolbar { align-items: flex-start; flex-direction: column; }
    .family-child-card--wide { grid-column: auto; }
    .family-member-sample { grid-template-columns: auto minmax(0,1fr); }
    .family-member-sample > a { grid-column: 2; }
}

/* Family Conversations — ordinary live chat presented as a family writing desk. */
.family-chat-shell {
    --chat-ink: #352416;
    --chat-muted: #705b43;
    --chat-line: rgba(92, 61, 29, .34);
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    min-height: 720px;
    overflow: hidden;
    border: 1px solid rgba(91, 58, 25, .45);
    border-radius: 18px;
    background: #d8b779 url('/images/warm-parchment.jpg') center / cover;
    color: var(--chat-ink);
    box-shadow: 0 22px 50px rgba(58, 38, 18, .24), inset 0 0 70px rgba(91, 55, 20, .18);
}
.family-chat-members {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px 18px 18px;
    border-right: 2px solid rgba(78, 48, 22, .35);
    background: linear-gradient(rgba(240, 217, 169, .88), rgba(216, 180, 117, .9)), url('/images/warm-parchment.jpg') center / cover;
    box-shadow: inset -16px 0 24px rgba(77, 47, 20, .08);
}
.family-chat-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px; }
.family-chat-tree { font-size: 2.8rem; line-height: 1; transform: rotate(180deg); }
.family-chat-brand h2, .family-chat-room__header h2 { margin: 0; font: italic 600 2.65rem/1 "Cormorant Garamond", Georgia, serif; }
.family-chat-brand p { margin: 5px 0 0; font: italic 1.05rem/1.1 "Cormorant Garamond", Georgia, serif; color: var(--chat-muted); }
.family-chat-search { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; margin: 0 4px 14px; padding: 0 12px; border: 1px solid rgba(89, 55, 25, .45); border-radius: 7px; background: rgba(250, 231, 190, .58); box-shadow: inset 0 1px 4px rgba(77, 47, 20, .14); }
.family-chat-search input { min-width: 0; padding: 11px 0; border: 0; outline: 0; background: transparent; color: var(--chat-ink); font: italic 1rem Georgia, serif; }
.family-presence-group { margin-top: 5px; }
.family-presence-group > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px 6px 6px; border-bottom: 1px solid var(--chat-line); font-family: Georgia, serif; text-transform: uppercase; }
.family-presence-group > header small { font-size: .8rem; }
.family-presence-dot { width: 9px; height: 9px; border: 1px solid rgba(47,36,21,.55); border-radius: 50%; background: #82827a; }
.family-presence-dot--online { background: #58a532; }
.family-presence-dot--away { background: #d49723; }
.family-presence-dot--offline { background: #8d8d83; }
.family-presence-empty { margin: 10px 8px; color: var(--chat-muted); font-size: .86rem; }
.family-chat-member { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 7px; border: 0; border-radius: 9px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.family-chat-member:hover, .family-chat-member.is-active { background: rgba(255, 241, 207, .55); box-shadow: inset 0 0 0 1px rgba(93, 60, 28, .22); }
.family-chat-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 2px solid rgba(75,47,20,.42); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f1d9a6, #8b633b); color: #fff8e8; font: 700 .83rem Georgia, serif; box-shadow: 0 2px 5px rgba(46,30,14,.24); }
.family-chat-avatar--small { width: 36px; height: 36px; }
.family-chat-member__identity { min-width: 0; }
.family-chat-member__identity strong, .family-chat-member__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-chat-member__identity strong { font: 1.02rem Georgia, serif; }
.family-chat-member__identity small { margin-top: 2px; color: var(--chat-muted); font-size: .75rem; }
.family-chat-invite { margin-top: auto; padding: 12px; border: 1px solid rgba(83,51,22,.55); border-radius: 7px; background: linear-gradient(#efd49d,#d3a966); color: var(--chat-ink); font: 1rem Georgia, serif; box-shadow: 0 3px 6px rgba(61,39,16,.17); cursor: pointer; }
.family-chat-room { display: grid; grid-template-rows: auto auto minmax(380px,1fr) auto; min-width: 0; background: linear-gradient(rgba(232, 202, 145, .78), rgba(222, 187, 124, .82)), url('/images/warm-parchment.jpg') center / cover; }
.family-chat-room__header { position: relative; display: flex; justify-content: center; min-height: 135px; padding: 25px 155px 18px 38px; border-bottom: 1px solid var(--chat-line); text-align: center; }
.family-chat-room__header p { margin: 7px auto 0; max-width: 640px; color: var(--chat-muted); font: italic 1rem/1.35 Georgia, serif; }
.family-chat-room__header .family-kicker { margin-bottom: 4px; font-style: normal; }
.family-chat-quill { position: absolute; top: 14px; right: 28px; width: 120px; height: 105px; }
.family-chat-quill span { position: absolute; right: 15px; top: 2px; font-size: 5.5rem; transform: rotate(-28deg); color: #6f4c28; text-shadow: 0 2px 2px rgba(45,26,9,.25); }
.family-chat-quill i { position: absolute; right: 79px; top: 2px; width: 48px; height: 48px; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 46% 33%, #302115, #0d0907 70%); box-shadow: 0 4px 8px rgba(35,21,9,.35); }
.family-chat-tabs { display: flex; min-height: 64px; border-bottom: 1px solid var(--chat-line); background: rgba(226,190,126,.35); }
.family-chat-tab { display: flex; align-items: center; gap: 10px; min-width: 260px; padding: 9px 18px; border: 0; border-right: 1px solid var(--chat-line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.family-chat-tab.is-active { background: rgba(251,229,184,.64); box-shadow: inset 0 -3px #795326; }
.family-chat-tab strong, .family-chat-tab small { display: block; }
.family-chat-tab strong { font: 1rem Georgia, serif; }
.family-chat-tab small { margin-top: 2px; color: var(--chat-muted); font-size: .75rem; }
.family-chat-tab__icon { font-size: 1.45rem; }
.family-chat-tab__close { margin-left: auto; padding: 5px; font-size: 1.35rem; }
.family-chat-thread { overflow-y: auto; padding: 18px 28px 28px; scrollbar-color: rgba(99,68,37,.5) transparent; }
.family-chat-thread__date { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; color: var(--chat-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.family-chat-thread__date::before, .family-chat-thread__date::after { content: ""; height: 1px; flex: 1; background: var(--chat-line); }
.family-chat-message { display: flex; gap: 11px; align-items: flex-end; max-width: 76%; margin: 0 0 20px; }
.family-chat-message--mine { margin-left: auto; flex-direction: row; }
.family-chat-message__content { min-width: 0; }
.family-chat-message__content > strong { display: block; margin: 0 10px 5px; font: italic .9rem Georgia, serif; }
.family-chat-message--mine .family-chat-message__content > strong { text-align: right; }
.family-chat-note { min-width: 230px; padding: 14px 17px 9px; border: 1px solid rgba(98,64,30,.3); border-radius: 12px 17px 12px 15px; background: linear-gradient(145deg, rgba(249,228,184,.96), rgba(221,186,123,.9)); box-shadow: 0 4px 8px rgba(64,40,17,.15), inset 0 0 18px rgba(255,249,226,.32); transform: rotate(-.25deg); }
.family-chat-message--mine .family-chat-note { background: linear-gradient(145deg, rgba(236,207,151,.96), rgba(205,163,96,.92)); transform: rotate(.25deg); }
.family-chat-note p { margin: 0; color: var(--chat-ink); font: italic 1.02rem/1.45 Georgia, serif; white-space: pre-wrap; }
.family-chat-note footer { display: flex; justify-content: flex-end; gap: 6px; align-items: center; margin-top: 6px; color: var(--chat-muted); font: italic .7rem Georgia, serif; }
.family-chat-note footer span { color: #4d6c2c; font-weight: 700; }
.family-chat-composer { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; gap: 10px; align-items: center; margin: 0 24px 18px; padding-top: 12px; border-top: 1px solid var(--chat-line); }
.family-chat-composer__quill { font-size: 2rem; color: #6d481f; }
.family-chat-composer textarea { width: 100%; min-height: 54px; max-height: 120px; resize: vertical; padding: 13px 15px; border: 1px solid rgba(94,60,27,.42); border-radius: 7px; outline: none; background: rgba(247,224,178,.55); color: var(--chat-ink); font: italic 1rem/1.35 Georgia, serif; box-shadow: inset 0 2px 5px rgba(72,44,18,.12); }
.family-chat-composer textarea:focus { border-color: #765029; box-shadow: 0 0 0 2px rgba(118,80,41,.15), inset 0 2px 5px rgba(72,44,18,.12); }
.family-chat-icon-button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--chat-ink); font-size: 1.6rem; cursor: pointer; }
.family-chat-send { min-width: 104px; padding: 12px 22px; border: 1px solid #563819; border-radius: 7px; background: linear-gradient(#986b38,#65411f); color: #fff0ce; font: italic 1.15rem Georgia, serif; box-shadow: 0 3px 7px rgba(50,30,12,.26), inset 0 1px rgba(255,255,255,.2); cursor: pointer; }
.family-chat-send:disabled { opacity: .48; cursor: default; }
@media (max-width: 1000px) {
    .family-chat-shell { grid-template-columns: 270px minmax(0,1fr); }
    .family-chat-room__header { padding-right: 35px; }
    .family-chat-quill { display: none; }
    .family-chat-message { max-width: 88%; }
}
@media (max-width: 760px) {
    .family-chat-shell { display: block; min-height: 0; overflow: visible; }
    .family-chat-members { border-right: 0; border-bottom: 2px solid rgba(78,48,22,.35); }
    .family-presence-group { display: none; }
    .family-presence-group:first-of-type { display: block; }
    .family-chat-invite { margin-top: 12px; }
    .family-chat-room { min-height: 650px; }
    .family-chat-room__header { min-height: 110px; padding: 22px; }
    .family-chat-room__header h2 { font-size: 2.15rem; }
    .family-chat-tabs { overflow-x: auto; }
    .family-chat-tab { min-width: 230px; }
    .family-chat-thread { padding: 16px; }
    .family-chat-message { max-width: 96%; }
    .family-chat-message > .family-chat-avatar { display: none; }
    .family-chat-note { min-width: 0; }
    .family-chat-composer { grid-template-columns: auto minmax(0,1fr) auto; margin: 0 12px 12px; }
    .family-chat-icon-button { display: none; }
    .family-chat-send { min-width: 74px; padding-inline: 14px; }
}

/* Family Chat premium writing-desk finish and live membership pipeline. */
.family-chat-shell {
    min-height: clamp(760px, calc(100vh - 260px), 1040px);
    border: 3px solid #2a170b;
    border-radius: 14px;
    background: #2a160b;
    box-shadow: 0 26px 65px rgba(30, 16, 7, .38), inset 0 0 0 1px #b98131, inset 0 0 0 4px #120a05;
}
.family-chat-room {
    position: relative;
    isolation: isolate;
    background-image: linear-gradient(rgba(119, 70, 24, .06), rgba(51, 27, 11, .12)), url('/images/family/family-chat-desk.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.family-chat-room::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    box-shadow: inset 0 0 80px rgba(31, 16, 6, .34);
}
.family-chat-room__header,
.family-chat-tabs,
.family-chat-composer {
    background: linear-gradient(180deg, #35200f 0%, #1d1008 100%);
    color: #f4d590;
    border-color: #b47b2b;
    box-shadow: inset 0 0 0 1px rgba(255, 216, 135, .16), 0 4px 14px rgba(29, 14, 5, .34);
}
.family-chat-room__header p,
.family-chat-tab small { color: #d2b77e; }
.family-chat-tab {
    border: 1px solid rgba(181, 125, 45, .72);
    border-radius: 8px 8px 0 0;
    background: linear-gradient(#4b2b13, #281407);
    color: #f5d896;
    box-shadow: inset 0 0 0 1px rgba(255, 220, 148, .12), 0 3px 8px rgba(21, 10, 3, .28);
}
.family-chat-tab:hover,
.family-chat-tab.is-active {
    background: linear-gradient(#6b411c, #3a210d);
    box-shadow: inset 0 0 0 1px rgba(255, 226, 164, .25), 0 4px 12px rgba(21, 10, 3, .36);
}
.family-chat-thread { scrollbar-color: #8e5c24 rgba(52, 29, 11, .18); }
.family-chat-note {
    border: 1px solid rgba(105, 66, 29, .58);
    background: linear-gradient(145deg, rgba(249, 225, 176, .95), rgba(219, 178, 111, .94));
    box-shadow: 0 5px 11px rgba(50, 27, 10, .25), inset 0 0 22px rgba(255, 244, 207, .22);
}
.family-chat-message--mine .family-chat-note {
    background: linear-gradient(145deg, rgba(238, 207, 149, .97), rgba(194, 143, 72, .95));
}
.family-chat-composer textarea {
    border: 1px solid #8b5c26;
    border-radius: 7px;
    background: linear-gradient(rgba(253, 229, 181, .96), rgba(224, 187, 124, .96));
    color: #342112;
    box-shadow: inset 0 2px 8px rgba(70, 39, 15, .25), 0 0 0 1px rgba(255, 221, 154, .12);
}
.family-chat-icon-button,
.family-chat-send,
.family-chat-invite,
.family-chat-load-error button {
    border: 1px solid #c08730;
    border-radius: 7px;
    background: linear-gradient(180deg, #5b3515 0%, #281409 100%);
    color: #f8d994;
    box-shadow: inset 0 0 0 1px rgba(255, 226, 157, .18), 0 3px 8px rgba(25, 11, 3, .36);
    text-shadow: 0 1px 1px #160b04;
}
.family-chat-icon-button:hover,
.family-chat-send:hover:not(:disabled),
.family-chat-invite:hover,
.family-chat-load-error button:hover {
    background: linear-gradient(180deg, #794b20 0%, #3b210d 100%);
    transform: translateY(-1px);
}
.family-chat-send { min-width: 112px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; }
.family-chat-send:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.family-chat-invite { display: block; text-align: center; text-decoration: none; }
.family-chat-member.is-current-user { opacity: .82; cursor: default; }
.family-chat-member__identity em {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(82, 51, 22, .14);
    font: 700 .65rem/1.5 system-ui, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.family-chat-loading,
.family-chat-load-error {
    margin: 12px 5px;
    padding: 12px;
    border: 1px solid rgba(91, 58, 25, .32);
    border-radius: 8px;
    background: rgba(255, 237, 198, .46);
    color: var(--chat-muted);
    font-size: .88rem;
}
.family-chat-loading { display: flex; align-items: center; gap: 9px; }
.family-chat-loading > span {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(78, 48, 22, .25);
    border-top-color: #5a3517;
    border-radius: 50%;
    animation: family-chat-spin .8s linear infinite;
}
.family-chat-load-error strong,
.family-chat-load-error span { display: block; }
.family-chat-load-error span { margin: 4px 0 10px; }
.family-chat-load-error button { padding: 7px 10px; cursor: pointer; }
@keyframes family-chat-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .family-chat-shell { min-height: 780px; }
    .family-chat-room { background-position: 52% center; }
}

/* Patch 404 — chat stylesheet wiring and premium Family photo upload */
.family-chat-shell { width:min(1500px,calc(100vw - 48px)); margin:24px auto 56px; border:1px solid #5b3518; border-radius:18px; background:#2b170c; box-shadow:0 22px 55px rgba(39,20,7,.34),inset 0 0 0 3px rgba(201,145,67,.3); }
.family-chat-members { background:linear-gradient(rgba(245,222,174,.93),rgba(220,181,113,.95)),url('/images/warm-parchment.jpg') center/cover; }
.family-chat-room { background-image:linear-gradient(rgba(236,208,153,.12),rgba(208,164,93,.08)),url('/images/family/family-chat-desk.png'); background-position:center top; background-size:cover; background-repeat:no-repeat; }
.family-chat-room__header,.family-chat-tabs,.family-chat-composer { background:linear-gradient(180deg,#3a2010,#1e1009); color:#f3d596; border-color:#a36b2d; }
.family-chat-room__header p,.family-chat-tabs small { color:#d7b97d; }
.family-chat-tabs { border-top:1px solid rgba(213,157,74,.45); }
.family-chat-tab { color:#f4d79f; border-right-color:rgba(205,147,65,.55); }
.family-chat-tab.is-active { background:linear-gradient(180deg,#65401f,#3c230f); box-shadow:inset 0 -3px #d6a452,inset 0 1px rgba(255,255,255,.1); }
.family-chat-thread { min-height:620px; }
.family-chat-note { border-color:rgba(88,50,18,.48); box-shadow:0 5px 13px rgba(49,25,7,.28),inset 0 1px rgba(255,255,255,.35); }
.family-chat-composer { margin:0; padding:14px 18px 16px; border-top:2px solid #8b5624; }
.family-chat-composer textarea { background:linear-gradient(180deg,#f2d59b,#dcb77a); border:1px solid #9a6327; box-shadow:inset 0 2px 8px rgba(65,35,10,.24),0 0 0 2px rgba(211,156,77,.14); }
.family-chat-icon-button,.family-chat-send,.family-chat-premium-button,.family-chat-photo-uploader>summary,.family-chat-invite { border:1px solid #bf8737; color:#f9dda1; background:linear-gradient(180deg,#69421f,#321b0d 70%,#241208); box-shadow:inset 0 1px rgba(255,255,255,.16),0 3px 8px rgba(42,21,7,.3); text-decoration:none; }
.family-chat-icon-button:hover,.family-chat-send:hover,.family-chat-premium-button:hover,.family-chat-photo-uploader>summary:hover,.family-chat-invite:hover { background:linear-gradient(180deg,#84552a,#462613 70%,#2b160b); }
.family-chat-sidebar-actions { display:grid; gap:10px; margin-top:auto; }
.family-chat-photo-uploader { border-radius:9px; }
.family-chat-photo-uploader>summary { list-style:none; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; border-radius:8px; font:600 1rem Georgia,serif; cursor:pointer; }
.family-chat-photo-uploader>summary::-webkit-details-marker { display:none; }
.family-chat-photo-uploader[open] { padding:7px; border:1px solid rgba(89,53,20,.45); background:rgba(255,239,201,.56); }
.family-chat-photo-uploader[open]>summary { margin-bottom:8px; }
.family-chat-photo-uploader form { display:grid; gap:8px; }
.family-chat-photo-uploader label:not(.family-chat-photo-picker) { display:grid; gap:4px; color:#4d2c14; font-size:.78rem; }
.family-chat-photo-uploader label span em { font-weight:400; opacity:.7; }
.family-chat-photo-uploader textarea,.family-chat-photo-uploader input:not([type='file']) { width:100%; border:1px solid rgba(91,54,21,.4); border-radius:5px; padding:8px; background:rgba(255,248,224,.75); color:#35200f; }
.family-chat-photo-picker { position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:9px; align-items:center; padding:11px; border:1px dashed #875525; border-radius:7px; background:rgba(255,245,211,.68); cursor:pointer; }
.family-chat-photo-picker>span { grid-row:1/3; font-size:1.7rem; }
.family-chat-photo-picker strong,.family-chat-photo-picker small { display:block; }
.family-chat-photo-picker input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.family-chat-premium-button { min-height:40px; border-radius:7px; font:600 .9rem Georgia,serif; cursor:pointer; }
.family-chat-upload-status { min-height:1em; margin:0; color:#5a3518; font-size:.75rem; }
@media (max-width:760px){ .family-chat-shell{width:calc(100vw - 20px)} .family-chat-thread{min-height:500px} }
