/* family-redesign.css — раздел «Семья» под прототип AIMO (warm tokens).
   Scoped под #family-presence-view. Заменяет старый layout family-presence.css. */

#family-presence-view .ff-wrap{max-width:1100px;margin:0 auto;padding:28px 24px 48px}

/* Header */
#family-presence-view .ff-hd{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
#family-presence-view .ff-hd-title{font-size:var(--fs-h2,21px);font-weight:800;letter-spacing:-.02em;flex:1;color:var(--fg-1);margin:0}
#family-presence-view .ff-hd-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--radius-pill);background:var(--glass-chip-bg,rgba(255,255,255,.06));border:1px solid var(--border-2);color:var(--fg-2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--transition)}
#family-presence-view .ff-hd-btn:hover{border-color:var(--border-3);color:var(--fg-1)}
#family-presence-view .ff-hd-btn--accent{background:var(--accent-gradient);border-color:transparent;color:var(--fg-on-grad,#fff);font-weight:700}

/* Member bar */
#family-presence-view .ff-mem-bar{display:flex;gap:10px;margin-bottom:18px;overflow-x:auto;padding-bottom:4px}
#family-presence-view .ff-mem{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 15px;border-radius:var(--radius-lg);background:var(--surface-2);border:1px solid var(--border-1);cursor:pointer;transition:var(--transition);min-width:110px;text-align:center}
#family-presence-view .ff-mem:hover{border-color:var(--border-3)}
#family-presence-view .ff-mem.active{border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color),0 4px 20px rgba(var(--primary-rgb),.2)}
#family-presence-view .ff-mem-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:#fff;position:relative;flex:none}
#family-presence-view .ff-mem-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface-2)}
#family-presence-view .ff-mem-name{font-size:13px;font-weight:700;color:var(--fg-1);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#family-presence-view .ff-mem-role{font-size:10.5px;color:var(--fg-4)}
#family-presence-view .ff-mem-st{font-size:11px;color:var(--fg-3);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#family-presence-view .ff-mem-edit{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--fg-4);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}
#family-presence-view .ff-mem:hover .ff-mem-edit{opacity:1}
#family-presence-view .ff-mem-edit:hover{color:var(--fg-1);background:var(--hover-bg,rgba(255,255,255,.06))}
#family-presence-view .ff-mem-edit .material-symbols-outlined{font-size:15px}

/* Layout */
#family-presence-view .ff-layout{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:14px;align-items:start}

/* Glass panel base */
#family-presence-view .ff-panel{background:var(--glass-panel-bg);border:1px solid var(--glass-panel-border);border-radius:var(--radius-lg);backdrop-filter:var(--glass-blur-panel,blur(12px));-webkit-backdrop-filter:var(--glass-blur-panel,blur(12px))}

/* Chat box */
#family-presence-view .ff-chat{overflow:hidden;display:flex;flex-direction:column}
#family-presence-view .ff-chat-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-1)}
#family-presence-view .ff-chat-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none}
#family-presence-view .ff-chat-top-info{flex:1;min-width:0}
#family-presence-view .ff-chat-top-name{font-size:14px;font-weight:700;color:var(--fg-1)}
#family-presence-view .ff-chat-top-sub{font-size:11px;color:var(--success,#22c55e);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#family-presence-view .ff-chat-close{background:none;border:none;color:var(--fg-4);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
#family-presence-view .ff-chat-close:hover{color:var(--fg-1)}
#family-presence-view .ff-feed{padding:14px 16px;height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
#family-presence-view .ff-msg-date{text-align:center;font-size:10.5px;color:var(--fg-4);margin:2px 0}
#family-presence-view .ff-msg{display:flex;gap:7px;max-width:82%}
#family-presence-view .ff-msg.me{align-self:flex-end;flex-direction:row-reverse}
#family-presence-view .ff-msg.other,#family-presence-view .ff-msg.bot{align-self:flex-start}
#family-presence-view .ff-msg-av{width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:700;color:#fff;display:grid;place-items:center;flex:none;margin-top:2px}
#family-presence-view .ff-msg-bd{padding:8px 11px;border-radius:var(--radius-sm);font-size:13px;line-height:1.5;color:var(--fg-1)}
#family-presence-view .ff-msg.other .ff-msg-bd{background:var(--surface-2);border-radius:4px var(--radius-sm) var(--radius-sm) var(--radius-sm)}
#family-presence-view .ff-msg.me .ff-msg-bd{background:rgba(var(--primary-rgb),.18);border-radius:var(--radius-sm) 4px var(--radius-sm) var(--radius-sm)}
#family-presence-view .ff-msg.bot .ff-msg-bd{background:rgba(var(--primary-rgb),.07);border:1px solid var(--border-1);font-size:12px;color:var(--fg-2);font-style:italic;border-radius:4px var(--radius-sm) var(--radius-sm) var(--radius-sm)}
#family-presence-view .ff-msg-t{font-size:10px;color:var(--fg-4);margin-top:2px}
#family-presence-view .ff-msg.me .ff-msg-t{text-align:right}
#family-presence-view .ff-chat-empty,#family-presence-view .ff-placeholder{margin:auto;text-align:center;color:var(--fg-3);padding:24px;display:flex;flex-direction:column;gap:8px;align-items:center}
#family-presence-view .ff-chat-empty p,#family-presence-view .ff-placeholder p{font-size:13px;margin:0;max-width:240px}
#family-presence-view .ff-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
#family-presence-view .ff-chip{padding:6px 12px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border-2);color:var(--fg-2);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:var(--transition)}
#family-presence-view .ff-chip:hover{border-color:var(--border-3);color:var(--fg-1)}
#family-presence-view .ff-inbar{display:flex;align-items:center;gap:7px;padding:10px 13px;border-top:1px solid var(--border-1)}
#family-presence-view .ff-input{flex:1;background:transparent;border:none;outline:none;font:inherit;font-size:13px;color:var(--fg-1)}
#family-presence-view .ff-input::placeholder{color:var(--fg-4)}
#family-presence-view .ff-send{width:34px;height:34px;border-radius:50%;border:none;background:var(--accent-gradient);color:var(--fg-on-grad,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
#family-presence-view .ff-send .material-symbols-outlined{font-size:18px}

/* Sidebar */
#family-presence-view .ff-side{display:flex;flex-direction:column;gap:10px}
#family-presence-view .ff-mp{padding:16px 18px;text-align:center}
#family-presence-view .ff-mp-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;color:#fff;margin:0 auto 9px}
#family-presence-view .ff-mp-name{font-size:15px;font-weight:700;color:var(--fg-1);margin-bottom:1px}
#family-presence-view .ff-mp-role{font-size:12px;color:var(--fg-3);margin-bottom:11px}
#family-presence-view .ff-mp-acts{display:flex;gap:6px}
#family-presence-view .ff-mp-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:7px 10px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--border-2);color:var(--fg-2);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--transition)}
#family-presence-view .ff-mp-btn:hover{border-color:var(--border-3);color:var(--fg-1)}
/* Обзор семьи (пустое состояние сайдбара) */
#family-presence-view .ff-ov{padding:14px 16px}
#family-presence-view .ff-ov-ttl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);margin-bottom:11px}
#family-presence-view .ff-ov-list{display:flex;flex-direction:column;gap:9px}
#family-presence-view .ff-ov-row{display:flex;align-items:center;gap:10px}
#family-presence-view .ff-ov-av{position:relative;flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff}
#family-presence-view .ff-ov-info{min-width:0;flex:1}
#family-presence-view .ff-ov-name{font-size:13px;font-weight:700;color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#family-presence-view .ff-ov-role{font-size:11px;font-weight:600;color:var(--fg-4)}
#family-presence-view .ff-ov-st{font-size:11.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#family-presence-view .ff-ov-radar{display:flex;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border-1);font-size:11.5px;line-height:1.4;color:var(--fg-3)}
#family-presence-view .ff-ov-radar .material-symbols-outlined{font-size:15px;color:var(--primary-color,var(--mfa-amber,#f59e0b));flex-shrink:0}
/* Ближайшие события */
#family-presence-view .ff-ov-events{margin-top:12px;padding-top:11px;border-top:1px solid var(--border-1);display:flex;flex-direction:column;gap:8px}
#family-presence-view .ff-ov-sub{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
#family-presence-view .ff-ov-ev{display:flex;align-items:flex-start;gap:9px}
#family-presence-view .ff-ov-ev-icon{font-size:18px;color:var(--primary-color,var(--mfa-amber,#f59e0b));flex-shrink:0}
#family-presence-view .ff-ov-ev-info{min-width:0;flex:1}
#family-presence-view .ff-ov-ev-title{font-size:12.5px;font-weight:600;color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#family-presence-view .ff-ov-ev-when{font-size:11px;color:var(--fg-3)}
#family-presence-view .ff-wl{padding:16px 18px}
#family-presence-view .ff-wl-ttl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);display:flex;align-items:center;gap:5px;margin-bottom:11px}
#family-presence-view .ff-wl-ttl .material-symbols-outlined{font-size:15px;color:var(--mfa-rose)}
#family-presence-view .ff-wl-add{margin-left:auto;padding:3px 10px;font-size:10.5px;font-weight:700;border-radius:var(--radius-pill);background:var(--accent-gradient);color:var(--fg-on-grad,#fff);border:none;cursor:pointer;font-family:inherit}
#family-presence-view .ff-wish{padding:9px 11px;border-radius:var(--radius-sm);background:var(--surface-1);border:1px solid var(--border-1);margin-bottom:6px}
#family-presence-view .ff-wish-top{display:flex;align-items:flex-start;gap:6px}
#family-presence-view .ff-wish-n{flex:1;font-size:12.5px;font-weight:600;color:var(--fg-1);margin-bottom:1px}
#family-presence-view .ff-wish-stars{font-size:10px;color:var(--mfa-amber-light,#fbbf24);flex:none}
#family-presence-view .ff-wish-m{font-size:11px;color:var(--fg-4)}
#family-presence-view .ff-wish-acts{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;align-items:center}
#family-presence-view .ff-wish-icon{background:none;border:none;padding:3px;border-radius:var(--radius-xs);color:var(--fg-4);cursor:pointer;display:flex}
#family-presence-view .ff-wish-icon:hover{color:var(--fg-1)}
#family-presence-view .ff-wish-icon.danger:hover{color:var(--error,#ef4444)}
#family-presence-view .ff-wish-icon .material-symbols-outlined{font-size:15px}
#family-presence-view .ff-wish-give{padding:4px 10px;border-radius:var(--radius-pill);background:var(--accent-gradient);color:var(--fg-on-grad,#fff);border:none;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
#family-presence-view .ff-wish-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--radius-pill)}
#family-presence-view .ff-wish-badge.mine{color:var(--success,#22c55e);background:rgba(34,197,94,.12)}
#family-presence-view .ff-wish-badge.taken{color:var(--fg-3);background:var(--surface-2)}
#family-presence-view .ff-wish-textbtn{background:none;border:none;color:var(--fg-4);font-size:11px;cursor:pointer;font-family:inherit;text-decoration:underline}
#family-presence-view .ff-wl-empty,#family-presence-view .ff-link{font-size:11px;color:var(--fg-4)}
#family-presence-view .ff-link{display:inline-flex;align-items:center;gap:2px;text-decoration:none;color:var(--info,#60a5fa)}

/* Empty family state */
#family-presence-view .ff-empty{text-align:center;padding:48px 24px;background:var(--surface-2);border:1px dashed var(--border-2);border-radius:var(--radius-xl)}
#family-presence-view .ff-empty h3{margin:16px 0 8px;font-weight:700;color:var(--fg-1)}
#family-presence-view .ff-empty p{color:var(--fg-3);margin:0 0 20px}
#family-presence-view .ff-empty-cta{background:var(--accent-gradient);color:var(--fg-on-grad,#fff);border:none;padding:12px 24px;border-radius:var(--radius-md);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}

/* Mobile */
@media(max-width:920px){#family-presence-view .ff-layout{grid-template-columns:1fr}}
@media(max-width:768px){#family-presence-view .ff-wrap{padding:20px 14px 48px}#family-presence-view .ff-feed{height:300px}}

/* Modals (warm) */
.ff-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:999999}
.ff-modal{background:var(--glass-modal-bg,var(--surface-1));border:1px solid var(--glass-panel-border);border-radius:var(--radius-xl);padding:28px;width:90%;max-width:440px;box-shadow:var(--shadow-modal,0 20px 48px rgba(0,0,0,.4));font-family:inherit}
.ff-modal h3{margin:0 0 16px;font-weight:800;color:var(--fg-1)}
.ff-modal-sub{color:var(--fg-3);font-size:14px;margin-bottom:20px}
.ff-modal form{display:flex;flex-direction:column;gap:16px}
.ff-modal label{font-size:12px;font-weight:700;color:var(--fg-3);display:block;margin-bottom:6px}
.ff-modal input,.ff-modal select,.ff-modal textarea{width:100%;padding:11px 12px;border-radius:var(--radius-md);border:1px solid var(--border-2);background:var(--surface-2);color:var(--fg-1);font-family:inherit;box-sizing:border-box;outline:none}
.ff-modal input:focus,.ff-modal select:focus,.ff-modal textarea:focus{border-color:var(--primary-color)}
.ff-modal textarea{height:80px;resize:none}
.ff-modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ff-modal-foot{display:flex;gap:12px;margin-top:12px;justify-content:flex-end}
.ff-modal-btn{padding:11px 20px;border-radius:var(--radius-md);border:none;font-weight:700;cursor:pointer;font-family:inherit}
.ff-modal-btn--ghost{background:var(--surface-2);color:var(--fg-2)}
.ff-modal-btn--primary{background:var(--accent-gradient);color:var(--fg-on-grad,#fff)}