/* ============================================================
   css/guest-room-home.css — 会客厅总页面（屋主）
   ------------------------------------------------------------
   手册第二十二节（会客厅首页 / 对话列表）+ 第六十五节窗口6第 1、2、10 条。
   全屏内容页（不是居中弹窗）：挂 #app 内、absolute inset 0、滚动区底留安全区。
   颜色只走 token；图标全是自绘线条；一个 emoji 都没有。
   ============================================================ */

.grh-shell {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 80% at 88% 2%, var(--rose-light, rgba(201,168,168,0.16)), transparent 58%),
        linear-gradient(178deg, var(--bg-primary, #F8F4EF) 0%, var(--bg-chat, #FCFAF6) 62%);
}

/* ---- 顶栏（让出 iOS 顶部安全区）---- */
.grh-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 4px;
    padding: calc(10px + var(--safe-top)) 10px 10px;
    border-bottom: 1px solid var(--border-faint, rgba(201,168,168,0.18));
    background: var(--surface, rgba(248,244,239,0.9));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.grh-hdr-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--guestroom-ink-soft, #6F6862);
    cursor: pointer;
    transition: transform 0.16s cubic-bezier(0.22,0.61,0.36,1);
    -webkit-tap-highlight-color: transparent;
}
.grh-hdr-btn:active { transform: scale(0.9); }
.grh-hdr-btn svg { width: 20px; height: 20px; }
.grh-hdr-invite { color: var(--rose-dark, #A88080); }
.grh-hdr-center { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.grh-hdr-en {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--rose, #C9A8A8);
}
.grh-hdr-cn {
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--text-primary, #1E1C1A);
}

/* ---- 主体滚动区 ---- */
.grh-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px 14px calc(24px + var(--safe-bottom));
}
.grh-skeleton {
    height: 64px;
    border-radius: 16px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--rose-light, rgba(201,168,168,0.10)), var(--sage-light, rgba(168,184,160,0.10)), var(--rose-light, rgba(201,168,168,0.10)));
    background-size: 200% 100%;
    animation: grhSkeleton 1.6s ease-in-out infinite;
}
.grh-skeleton-short { height: 64px; }
@keyframes grhSkeleton { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ---- 邀请卡 ---- */
.grh-invite {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--surface-solid, #FFFFFF);
    border: 1px solid var(--border-faint, rgba(201,168,168,0.22));
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.05)), var(--shadow-sm, 0 2px 6px rgba(30,28,26,0.05));
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}
.grh-invite::after {
    content: '';
    position: absolute;
    right: -18px; top: -18px;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--rose-light, rgba(201,168,168,0.12));
}
.grh-invite:active { transform: scale(0.985); box-shadow: var(--shadow-sm, 0 2px 6px rgba(30,28,26,0.08)); }
.grh-invite-big { padding: 22px 18px; }
.grh-invite-deco {
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px;
    background: var(--rose-light, rgba(201,168,168,0.14));
    color: var(--rose-dark, #A88080);
    position: relative;
}
.grh-invite-deco svg { width: 22px; height: 22px; }
.grh-invite-dot {
    position: absolute;
    right: 6px; top: 6px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold, #C4A86A);
    opacity: 0.7;
}
.grh-invite-main { flex: 1; min-width: 0; }
.grh-invite-title {
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 15px;
    color: var(--text-primary, #1E1C1A);
    letter-spacing: 0.5px;
}
.grh-invite-hint {
    font-size: 12px;
    line-height: 1.65;
    color: var(--guestroom-ink-soft, #6F6862);
    margin-top: 4px;
}
.grh-invite-go { display: flex; width: 18px; height: 18px; color: var(--guestroom-ink-mute, #8C847A); flex-shrink: 0; }
.grh-invite-go svg { width: 18px; height: 18px; }

/* ---- 分节小标题（金色细线 + 细字，全站语言）---- */
.grh-sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 2px 10px;
    font-size: 11.5px;
    letter-spacing: 1px;
    color: var(--guestroom-ink-soft, #6F6862);
}
.grh-sec-line { flex: 1; height: 1px; background: var(--gold, #C4A86A); opacity: 0.28; }
/* ★ 会客厅第8部分：「已移出」那一行标题是**可以点开合**的（JS 里 data-grh="toggle-removed"），
   而它原先只靠一行 11.5px 文字撑高 —— 真浏览器里量出来只有 20px，手指点上去很难点中
   （长期规则 #214 第④条：触摸目标一律显式给下限 44px，不许只靠内容撑）。
   只给这一个可点的标题加下限；「我的房间」那行没有点击行为，保持原样。 */
.grh-sec-removed { cursor: pointer; min-height: 44px; margin: 4px 2px 4px; }

/* ---- 房间行（微信式：头像 / 名字 / 一句预览 / 时间 + 状态小签）---- */
.grh-list { display: flex; flex-direction: column; gap: 8px; }
.grh-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-solid, #FFFFFF);
    border: 1px solid var(--border-faint, rgba(201,168,168,0.18));
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.04));
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
.grh-row:active { transform: scale(0.988); box-shadow: var(--shadow-sm, 0 2px 6px rgba(30,28,26,0.07)); }
.grh-row-ended { opacity: 0.82; }
.grh-row-deleted { opacity: 0.6; border-style: dashed; }
.grh-avatar {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--rose-light, rgba(201,168,168,0.12));
    color: var(--rose-dark, #A88080);
}
.grh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grh-avatar-room svg { width: 24px; height: 24px; }
.grh-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.grh-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.grh-row-name {
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 14.5px;
    color: var(--text-primary, #1E1C1A);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.grh-tag {
    flex-shrink: 0;
    font-size: 10.5px;
    padding: 1px 8px;
    border-radius: 9px;
    border: 1px solid var(--border, rgba(180,160,140,0.26));
    color: var(--guestroom-ink-soft, #6F6862);
    background: transparent;
}
.grh-tag-waiting { color: var(--guestroom-ink-soft, #6F6862); border-color: var(--border, rgba(180,160,140,0.3)); }
.grh-tag-live { color: var(--sage, #A8B8A0); border-color: var(--sage, #A8B8A0); }
.grh-tag-ended { color: var(--guestroom-ink-mute, #8C847A); border-color: var(--border-faint, rgba(180,160,140,0.2)); }
.grh-tag-deleted { color: var(--guestroom-ink-mute, #8C847A); border-style: dashed; }
.grh-row-preview {
    font-size: 12.5px;
    line-height: 1.55;
    /* ★ 用 text-secondary 而不是再调淡：更淡的那档在暖米底上只有 3.8:1，
       量过（探针第③节）达不到正文 4.5:1 的要求，看起来也会「灰得发虚」。 */
    color: var(--guestroom-ink-soft, #6F6862);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grh-row-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.grh-row-time { font-size: 11px; color: var(--guestroom-ink-mute, #8C847A); }

/* 已移出：默认收起，点标题展开 */
.grh-list-removed { display: none; }
.grh-list-removed.grh-removed-open { display: flex; }

/* ---- 空态 ---- */
.grh-empty {
    padding: 40px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.grh-empty-en {
    font-family: 'Great Vibes', 'Playfair Display', Georgia, serif;
    font-size: 28px;
    color: var(--rose, #C9A8A8);
    opacity: 0.9;
}
.grh-empty-text {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--guestroom-ink-soft, #6F6862);
    max-width: 250px;
}
.grh-btn {
    min-width: 120px;
    min-height: 42px;
    margin-top: 4px;
    padding: 0 20px;
    border: 1px solid var(--border, rgba(201,168,168,0.45));
    border-radius: 21px;
    background: transparent;
    color: var(--rose-dark, #A88080);
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 13.5px;
    cursor: pointer;
}
.grh-btn:active { transform: scale(0.97); }

/* ---- 页脚：客人从哪进来 ---- */
.grh-foot {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--border-faint, rgba(201,168,168,0.16));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.grh-foot-btn {
    border: none; background: transparent;
    color: var(--guestroom-ink-soft, #6F6862);
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 12.5px;
    cursor: pointer;
    /* ★ 会客厅第8部分：统一触摸目标下限 44（长期规则 #214④）。原来是 40 —— 真量出来的。 */
    min-height: 44px;
}
.grh-foot-btn:active { color: var(--rose-dark, #A88080); }
.grh-foot-url {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 11.5px;
    letter-spacing: 0.5px;
    color: var(--guestroom-ink-mute, #8C847A);
    word-break: break-all;
    text-align: center;
}

/* ---- 房间操作小窗（复用 guest-room.css 的 .gr-sheet / .gr-scrim，这里只补名字那两行）---- */
.grh-actions-sheet .gr-sheet-sub { margin-bottom: 12px; }

/* ---- 窄屏 / 大屏 ---- */
@media (max-width: 370px) {
    .grh-body { padding-left: 10px; padding-right: 10px; }
    .grh-row { padding: 10px 11px; gap: 10px; }
    .grh-avatar { width: 42px; height: 42px; border-radius: 14px; }
    .grh-invite { padding: 14px 12px; }
    .grh-row-name { font-size: 14px; }
}
@media (min-width: 431px) {
    .grh-body { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .grh-skeleton { animation: none; }
    .grh-row, .grh-invite, .grh-hdr-btn, .grh-btn { transition: none; }
}