/* Groups (groups-ui.js): website, Windows and the Android groups screen. */
.group-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.group-row label{flex:1;min-width:130px}
.group-status{min-height:1em;line-height:1.5;overflow-wrap:anywhere}
.group-meta{color:var(--muted);font-size:13px}
.group-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.group-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;max-width:none;text-align:left;border:1px solid var(--line);border-left:8px solid var(--accent,#b7f45c);border-radius:12px;padding:12px 14px;background:var(--panel);position:relative;white-space:normal}
.group-card strong{font-size:16px}
.group-badge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:10px;background:#ff5757;color:#fff;font-size:12px;font-weight:700;text-align:center}
.group-card .group-badge{position:absolute;right:12px;top:12px}
.group-colors{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.group-color{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:2px solid transparent}
.group-color.selected{outline:3px solid var(--ink);outline-offset:2px}
.group-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.group-pane h3{margin:18px 0 8px}
.group-pinned{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px;background:var(--raised,var(--panel))}
.group-pinned p{margin:4px 0}
.group-chat{max-height:48vh;min-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.group-message{border:1px solid var(--line);border-radius:12px;padding:8px 12px;max-width:88%;align-self:flex-start;background:var(--panel)}
.group-message.mine{align-self:flex-end;border-color:var(--accent,#b7f45c)}
.group-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0;line-height:1.45}
.group-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.group-tools button{min-height:30px;padding:4px 10px;font-size:12px}
.group-send{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.group-send textarea{width:100%;resize:vertical}
.group-track{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;overflow-wrap:anywhere}
.group-track h3{margin:0 0 4px}
.group-member{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.group-member strong{min-width:120px}
.group-check{display:flex;flex-direction:row;align-items:center;gap:8px;margin:10px 0}
.group-check input{width:auto;min-height:0}
.group-join-as{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:12px 0}
.group-join-as legend{padding:0 6px;color:var(--muted);font-size:13px}
.group-join-as .group-check{align-items:flex-start}
.group-join-as small{color:var(--muted)}
.group-cal-title{flex:1;text-align:center;font-size:16px}
.group-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:8px 0}
.group-cal-name{text-align:center;color:var(--muted);font-size:12px;padding:4px 0;text-transform:capitalize}
.group-cal-cell{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:3px;display:flex;flex-direction:column;gap:2px;cursor:pointer;overflow:hidden}
.group-cal-blank{min-height:0}
.group-cal-cell.today{border:2px solid var(--accent,#b7f45c)}
.group-cal-num{font-size:12px;color:var(--muted)}
.group-tile{display:block;width:100%;max-width:none;min-height:0;padding:2px 5px;border:0;border-radius:5px;color:#111;font-size:11px;font-weight:600;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-tile:hover{filter:brightness(1.08)}
.group-upcoming{display:flex;flex-direction:column;gap:6px}
.group-upcoming-item{display:flex;align-items:center;gap:8px;width:100%;max-width:none;text-align:left;white-space:normal}
.group-dot{width:12px;height:12px;border-radius:50%;flex:none}
.group-event-bar{height:8px;border-radius:4px;margin-bottom:10px}
.group-when{font-size:16px;font-weight:600;margin:6px 0}
.group-popups{position:fixed;top:76px;right:16px;z-index:60;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.group-popup{pointer-events:auto;display:flex;align-items:flex-start;gap:4px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-left:6px solid var(--accent,#b7f45c);border-radius:12px;box-shadow:0 8px 28px #0007;animation:group-in .18s ease-out}
.group-popup-open{flex:1;max-width:none;min-height:0;border:0;background:transparent;text-align:left;white-space:normal;padding:10px 4px 10px 12px}
.group-popup-open p{margin:4px 0 0;max-height:4.4em;overflow:hidden}
.group-popup-close{border:0;background:transparent;min-height:0;padding:8px 10px;font-size:18px;line-height:1}
@keyframes group-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#notifications .group-badge,#groups .group-badge{margin-left:2px}
.notice-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.notice-item{width:100%;max-width:none;text-align:left;white-space:normal;border:1px solid var(--line);border-left:6px solid var(--accent,#b7f45c);border-radius:10px;padding:8px 12px;background:var(--panel)}
.notice-item p{margin:4px 0 0}
.notice-item.unread{background:var(--raised,var(--panel));font-weight:600}
/* Friends (social-ui.js): profiles, following, private messages. */
.social-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;overflow:hidden;background:var(--raised,var(--panel));border:1px solid var(--line);color:var(--ink);font-weight:700}
.social-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.social-avatar.small{width:40px;height:40px;font-size:16px}
.social-avatar.medium{width:56px;height:56px;font-size:22px}
.social-avatar.large{width:96px;height:96px;font-size:36px}
.social-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:4px 0 8px}
.social-head h3{margin:0 0 4px;font-size:20px;overflow-wrap:anywhere}
.social-head .group-row{margin:4px 0 0}
.social-person{display:flex;align-items:center;gap:12px;width:100%;max-width:none;text-align:left;white-space:normal;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:6px 0;background:var(--panel)}
.social-person-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.social-person-text small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-link{display:inline-block;margin:4px 0 8px;color:var(--accent,#b7f45c);overflow-wrap:anywhere}
.social-name{display:inline;min-height:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.social-name:hover{text-decoration-color:currentColor}
.group-member .social-name{min-width:120px;text-align:left}
#friends .group-badge{margin-left:2px}
/* Guided tour (tour.js): spotlight on the real button, an arrow and a bubble. Clicks go through to the app. */
.tour{position:fixed;inset:0;z-index:2000;pointer-events:none}
.tour.tour-dim{background:#050a0ea6}
.tour-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 200vmax #050a0ea6;outline:3px solid var(--accent,#b7f45c);outline-offset:2px;animation:tour-pulse 1.4s ease-in-out infinite}
/* Glides only when moving to the next button; while scrolling it follows the button exactly. */
.tour-hole.tour-glide{transition:left .25s,top .25s,width .25s,height .25s}
.tour-arrow{position:fixed;width:24px;height:40px;color:var(--accent,#b7f45c);filter:drop-shadow(0 2px 4px #0009)}
.tour-arrow svg{width:24px;height:40px;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.tour-arrow.up{animation:tour-up .9s ease-in-out infinite}
.tour-arrow.down{transform:rotate(180deg);animation:tour-down .9s ease-in-out infinite}
.tour-bubble{position:fixed;pointer-events:auto;width:min(360px,calc(100vw - 16px));box-sizing:border-box;background:var(--panel);color:var(--ink);border:2px solid var(--accent,#b7f45c);border-radius:16px;padding:14px 16px;box-shadow:0 14px 44px #000a;line-height:1.45}
.tour-bubble p{margin:6px 0}
.tour-bubble.tour-pill{width:min(520px,calc(100vw - 16px));padding:10px 14px}
.tour-count{color:var(--accent,#b7f45c);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tour-title{display:block;font-size:17px;margin-top:2px}
.tour-hint{color:var(--accent,#b7f45c);font-weight:600}
.tour-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tour-actions button{min-height:38px}
.tour-actions .tour-quit{margin-left:auto;background:transparent;border-color:transparent;color:var(--muted);text-decoration:underline}
@keyframes tour-pulse{50%{outline-color:transparent}}
@keyframes tour-up{50%{transform:translateY(6px)}}
@keyframes tour-down{0%,100%{transform:rotate(180deg)}50%{transform:rotate(180deg) translateY(6px)}}
@media (prefers-reduced-motion:reduce){.tour-hole,.tour-arrow.up,.tour-arrow.down{animation:none}}
.native-toast{position:fixed;left:16px;right:16px;bottom:16px;padding:12px 16px;border-radius:12px;background:#222e32;color:#f3f6f5;box-shadow:0 6px 24px #0008;z-index:10}
@media (max-width:560px){.group-cal-cell{min-height:58px}.group-tile{font-size:10px;padding:1px 3px}.group-message{max-width:100%}}