/* ═══════════════════════════════════════════════════════════════
   PHONE SCREEN INNER CONTENT STYLES
   Pixel-accurate recreation of Flutter app widgets
   ═══════════════════════════════════════════════════════════════ */

/* ── App Bar (shared) ──────────────────────────────────────── */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 14px 8px;
  background: #FCF7E6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative;
  z-index: 5;
}

.app-bar-title {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-align: center;
  flex: 1;
}

.app-bar-icon {
  width: 20px;
  height: 20px;
  color: #000;
  opacity: 0.7;
}

.app-bar-leading,
.app-bar-trailing {
  display: flex;
  gap: 4px;
  min-width: 36px;
}

/* ── Timeline Screenshot Mode ────────────────────────────── */
#timelinePhoneScreen {
  background-image: url('../phonescreen/meetup_timeline_screenshot.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#timelinePhoneScreen.with-scroll {
  background-size: 100% auto;
  background-position: center 0;
  animation: timeline-scroll 15s ease-in-out infinite;
}

@keyframes timeline-scroll {
  0%, 100% { background-position: center 0%; }
  50% { background-position: center 100%; }
}

/* ── Bottom Nav Bar ────────────────────────────────────────── */
.bottom-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: 50px;
  background: #062943;
  border-radius: 20px 20px 0 0;
  padding: 6px 8px 14px 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  width: 42px;
  padding-top: 2px;
}

.bottom-nav-icon {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.bottom-nav-item.active .bottom-nav-icon {
  transform: scale(1.15);
}

.bottom-nav-label {
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  font-weight: 400;
}

.bottom-nav-item.active .bottom-nav-label {
  font-weight: 500;
  color: #FA6C4C;
}

.bottom-nav-item:not(.active) .bottom-nav-label {
  color: #F5F0DD;
}

.bottom-nav-item:not(.active) .bottom-nav-icon {
  color: #F5F0DD;
}

.bottom-nav-item.active .bottom-nav-icon {
  color: #FA6C4C;
}

/* ── Phone screen body scroll area ─────────────────────────── */
.screen-body {
  padding: 10px;
  overflow-y: auto;
  height: calc(100% - 66px - 42px); /* app-bar height - nav height */
  background: #F5F0DD;
  scroll-behavior: auto;
}

.screen-body::-webkit-scrollbar {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE SCREEN
   ══════════════════════════════════════════════════════════════ */

/* ── Section Header (Homepage) ─────────────────────────────── */
.ph-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ph-section-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.ph-section-title {
  font-family: 'Tiro Devanagari', serif;
  font-size: 14px;
  font-weight: 700;
  color: #052136;
}

/* ── Meetup Overview Card V3 ───────────────────────────────── */
.ph-meetup-card {
  background: #FCF7E6;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ph-meetup-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.ph-meetup-emoji {
  font-size: 22px;
  flex-shrink: 0;
}

.ph-meetup-info {
  flex: 1;
}

.ph-meetup-title {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #062943;
  line-height: 1.3;
}

.ph-meetup-organizer {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  color: #888;
  margin-top: 2px;
}

.ph-meetup-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  color: #555;
}

.ph-meetup-row-icon {
  font-size: 11px;
  opacity: 0.9;
  color: #333;
  flex-shrink: 0;
}

.ph-votes-badge {
  padding: 2px 5px;
  background: rgba(0,202,133,0.1);
  border-radius: 4px;
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: #00CA85;
}

.ph-meetup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.ph-rsvp-badge {
  padding: 3px 6px;
  border-radius: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  font-weight: 600;
}

.ph-rsvp-voted {
  background: rgba(0,202,133,0.1);
  color: #00CA85;
}

.ph-rsvp-pending {
  background: rgba(255,165,0,0.1);
  color: orange;
}

.ph-status-indicators {
  display: flex;
  gap: 8px;
}

.ph-status-dot {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
}

.ph-status-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 7px;
  font-weight: 700;
}

/* ── Friend Card (Homepage) ────────────────────────────────── */
.ph-friend-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #FCF7E6;
  border-radius: 12px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.ph-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ph-friend-info {
  flex: 1;
}

.ph-friend-name {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #052136;
}

.ph-friend-lastseen {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  color: rgba(5,33,54,0.6);
}

.ph-friend-arrow {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: rgba(30,144,255,0.1);
  color: #1E90FF;
}

/* ── Empty State Cards ─────────────────────────────────────── */
.ph-empty-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #FCF7E6;
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ph-empty-illustration {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(250,108,76,0.1), rgba(168,108,255,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.ph-empty-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #062943;
  margin-bottom: 3px;
}

.ph-empty-text {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  color: #777;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
   TIMELINE / MEETUP PAGE SCREEN
   ══════════════════════════════════════════════════════════════ */
.screen-body-timeline {
  padding: 10px 0;
  background: #F5F0DD;
}

/* ── Timeline line ─────────────────────────────────────────── */
.tl-entry {
  display: flex;
  align-items: stretch;
  position: relative;
  padding: 4px 8px;
  min-height: 60px;
}

.tl-line-left {
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

/* Continuous vertical line via pseudo-element */
.tl-line-left::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #062943;
  transform: translateX(-50%);
}

.tl-line-right {
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.tl-line-right::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #062943;
  transform: translateX(-50%);
}

.tl-line-segment {
  width: 2px;
  background: transparent;
  flex: 1;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #062943;
  border: 2.5px solid #F5F0DD;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
  margin: auto 0;
}

/* Half-circle notch on card side */
.tl-line-left .tl-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  width: 8px;
  height: 8px;
  background: #F5F0DD;
  border-radius: 50%;
  transform: translateY(-50%);
  border: 1.5px solid rgba(6,41,67,0.15);
}

.tl-line-right .tl-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 8px;
  height: 8px;
  background: #F5F0DD;
  border-radius: 50%;
  transform: translateY(-50%);
  border: 1.5px solid rgba(6,41,67,0.15);
}

.tl-dot-empty {
  width: 24px;
  flex-shrink: 0;
}

/* ── Timeline Season ───────────────────────────────────────── */
.tl-season {
  display: flex;
  align-items: center;
  padding: 14px 8px;
  gap: 6px;
}

.tl-season-text {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #052136;
  white-space: nowrap;
}

.tl-season-arrow {
  font-size: 16px;
  color: #062943;
}

.tl-season-line {
  width: 12px;
  height: 2px;
  background: #062943;
}

/* ── Timeline Card ─────────────────────────────────────────── */
.tl-card {
  flex: 1;
  background: #FCF7E6;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin: 3px 0;
}

.tl-card-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.tl-card-emoji {
  font-size: 20px;
  flex-shrink: 0;
}

.tl-card-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #062943;
}

.tl-card-subtitle {
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  color: #888;
  margin-top: 2px;
}

.tl-card-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  color: #666;
  margin-bottom: 3px;
}

.tl-card-row-icon {
  font-size: 9px;
  opacity: 0.7;
}

/* ── Timeline Center ───────────────────────────────────────── */
.tl-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
}

.tl-center-label {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #062943;
}

.tl-center-btn {
  width: 32px;
  height: 32px;
  background: #00CA85;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,202,133,0.3);
}

/* ══════════════════════════════════════════════════════════════
   IDEAS PAGE SCREEN
   ══════════════════════════════════════════════════════════════ */

/* ── Counter ───────────────────────────────────────────────── */
.ph-ideas-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}

.ph-counter-text {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  color: #888;
}

.ph-counter-liked {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  color: #FA6C4C;
  font-weight: 600;
}

/* ── Activity Card (Draggable) ─────────────────────────────── */
.ph-activity-card {
  background: #FCF7E6;
  border-radius: 18px;
  border: 2px solid transparent;
  padding: 10px;
  margin: 0 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  position: relative;
}

.ph-activity-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.ph-activity-emoji {
  font-size: 36px;
}

.ph-activity-title {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #052136;
  line-height: 1.2;
}

.ph-activity-description {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  color: rgba(5,33,54,0.75);
  line-height: 1.6;
  margin-bottom: 8px;
}

.ph-activity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.ph-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  border: 1px solid;
}

.ph-chip-time {
  background: rgba(6,41,67,0.08);
  border-color: rgba(6,41,67,0.2);
  color: #062943;
}

.ph-chip-price {
  background: rgba(0,202,133,0.08);
  border-color: rgba(0,202,133,0.2);
  color: #00CA85;
}

.ph-chip-group {
  background: rgba(168,108,255,0.08);
  border-color: rgba(168,108,255,0.2);
  color: #A86CFF;
}

.ph-activity-categories {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  color: rgba(5,33,54,0.6);
  font-weight: 600;
}

/* ── Action Buttons ────────────────────────────────────────── */
.ph-action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.ph-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.ph-action-btn-skip {
  background: rgba(250,108,76,0.1);
  color: #FA6C4C;
  border: 1px solid rgba(250,108,76,0.2);
}

.ph-action-btn-back {
  background: rgba(0,0,0,0.05);
  color: #333;
  border: 1px solid rgba(0,0,0,0.08);
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.ph-action-btn-like {
  background: rgba(0,202,133,0.1);
  color: #00CA85;
  border: 1px solid rgba(0,202,133,0.2);
}

.ph-plan-now-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
  padding: 8px 16px;
  background: linear-gradient(135deg, #00CA85, rgba(0,202,133,0.85));
  border-radius: 10px;
  color: white;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,202,133,0.3);
}

/* ══════════════════════════════════════════════════════════════
   FRIENDS PAGE SCREEN
   ══════════════════════════════════════════════════════════════ */

/* ── Search Bar ────────────────────────────────────────────── */
.ph-search-bar {
  margin: 8px 8px 10px;
  padding: 8px 12px;
  background: #FCF7E6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ph-search-icon {
  font-size: 14px;
  color: #999;
}

.ph-search-placeholder {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  color: #bbb;
}

/* ── Friend List Card ──────────────────────────────────────── */
.ph-friend-list-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #FCF7E6;
  border-radius: 12px;
  margin: 0 8px 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.ph-friend-list-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.ph-friend-list-info {
  flex: 1;
}

.ph-friend-list-name {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #052136;
}

.ph-friend-list-username {
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  color: rgba(5,33,54,0.5);
}

.ph-friend-list-online {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00CA85;
  flex-shrink: 0;
}

.ph-friend-list-offline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

/* ── FAB ───────────────────────────────────────────────────── */
.ph-fab {
  position: absolute;
  bottom: 46px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: #00CA85;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,202,133,0.3);
  z-index: 6;
}

/* ══════════════════════════════════════════════════════════════
   PROFILE PAGE SCREEN
   ══════════════════════════════════════════════════════════════ */

/* ── Profile Avatar ────────────────────────────────────────── */
.ph-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}

.ph-profile-avatar::after {
  content: '✏️';
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 12px;
  background: #FCF7E6;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ── Profile Name ──────────────────────────────────────────── */
.ph-profile-name {
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #052136;
  margin-bottom: 2px;
}

.ph-profile-bio {
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  color: rgba(5,33,54,0.6);
  margin-bottom: 12px;
  padding: 0 12px;
}

/* ── Activity Tags ─────────────────────────────────────────── */
.ph-activity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 0 8px;
  margin-bottom: 12px;
}

.ph-activity-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #FCF7E6;
  border-radius: 16px;
  border: 1px solid #ddd;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: #052136;
}

.ph-tag-emoji {
  font-size: 12px;
}

/* ── Profile Stats ─────────────────────────────────────────── */
.ph-stats-card {
  background: #FCF7E6;
  border-radius: 12px;
  padding: 10px;
  margin: 0 8px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ph-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}

.ph-stat-row + .ph-stat-row {
  border-top: 1px solid rgba(245,240,221,0.5);
}

.ph-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  color: #555;
}

.ph-stat-label-icon {
  font-size: 11px;
}

.ph-stat-value {
  padding: 3px 8px;
  background: #F5F0DD;
  border-radius: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #062943;
}

/* ── Settings Items ────────────────────────────────────────── */
.ph-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #FCF7E6;
  border-radius: 10px;
  margin: 0 8px 5px;
}

.ph-settings-label {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  color: #052136;
}

.ph-toggle {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: #ccc;
  position: relative;
}

.ph-toggle.active {
  background: #00CA85;
}

.ph-toggle::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
}

.ph-toggle.active::after {
  left: 14px;
}

/* ── Logout Button (Profile) ───────────────────────────────── */
.ph-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 8px;
  padding: 8px;
  background: rgba(250,108,76,0.08);
  border: 1px solid rgba(250,108,76,0.2);
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #FA6C4C;
}

/* ── Action buttons row (Profile) ──────────────────────────── */
.ph-profile-actions {
  display: flex;
  gap: 6px;
  padding: 0 8px;
  margin-bottom: 12px;
}

.ph-profile-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
}

.ph-btn-premium {
  background: linear-gradient(135deg, rgba(168,108,255,0.1), rgba(255,185,46,0.1));
  border: 1px solid rgba(168,108,255,0.2);
  color: #A86CFF;
}

.ph-btn-invite {
  background: rgba(30,144,255,0.1);
  border: 1px solid rgba(30,144,255,0.2);
  color: #1E90FF;
}

/* ── Weekly Calendar View ──────────────────────────────────── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: #FCF7E6;
}

.cal-month {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #052136;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 0;
  background: #F5F0DD;
  border-radius: 8px;
  padding: 0 2px;
}

.cal-nav-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #052136;
  cursor: pointer;
}

.cal-nav-now {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #FA6C4C;
  padding: 2px 6px;
}

.cal-day-headers {
  display: flex;
  padding: 4px 0 4px 28px;
  background: #FCF7E6;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cal-day-col {
  flex: 1;
  text-align: center;
}

.cal-day-name {
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  color: #888;
  margin-bottom: 2px;
}

.cal-day-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #052136;
  margin: 0 auto;
}

.cal-day-num.today {
  background: #FA6C4C;
  color: white;
  font-weight: 700;
}

.cal-grid-scroll {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.cal-grid-scroll::-webkit-scrollbar {
  display: none;
}

.cal-grid {
  display: flex;
  position: relative;
  min-height: 100%;
}

.cal-time-col {
  width: 28px;
  flex-shrink: 0;
}

.cal-time-label {
  height: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 3px;
  font-family: 'Sora', sans-serif;
  font-size: 7px;
  font-weight: 500;
  color: #999;
  letter-spacing: -0.3px;
}

.cal-days-area {
  flex: 1;
  display: flex;
  position: relative;
  border-left: 1px solid rgba(0,0,0,0.06);
}

.cal-day-lane {
  flex: 1;
  position: relative;
  border-right: 1px solid rgba(0,0,0,0.04);
}

.cal-day-lane:last-child {
  border-right: none;
}

.cal-hour-slot {
  height: 26px;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  background: #FCF7E6;
}

.cal-hour-slot:nth-child(odd) {
  background: #F9F4E2;
}

.cal-event {
  position: absolute;
  left: 1px;
  right: 1px;
  border-radius: 4px;
  padding: 2px 3px;
  overflow: hidden;
  font-family: 'Sora', sans-serif;
  font-size: 6.5px;
  font-weight: 600;
  color: white;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.cal-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-now-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10;
  display: flex;
  align-items: center;
}

.cal-now-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FA6C4C;
  margin-left: -3px;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(250,108,76,0.5);
}

.cal-now-line {
  flex: 1;
  height: 1.5px;
  background: #FA6C4C;
  margin-left: -1px;
}

/* ═══════════════════════════════════════════════════════════════
   PLANNING MEETUP PHONE SCREEN — Poll, ResponseProgress, Header
   ═══════════════════════════════════════════════════════════════ */
/* Planning screen override: use bgMain color */
#planningPhoneScreen .screen-body {
  background: #ece8d6;
}

/* ── Planning Card (generic Material card) ──────────────── */
.ph-planning-card {
  background: #F5F0DD;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ── Meetup Header ──────────────────────────────────────── */
.ph-planning-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ph-planning-emoji {
  font-size: 22px;
  line-height: 1;
}

.ph-planning-title {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #062943;
}

.ph-planning-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  color: #666;
}

.ph-planning-info-icon {
  font-size: 10px;
  color: #333;
  opacity: 0.8;
  flex-shrink: 0;
  width: 12px;
  text-align: center;
}

.ph-planning-notes {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  color: #555;
  margin-top: 6px;
  font-style: italic;
}

/* ── Unified Poll ───────────────────────────────────────── */
.ph-poll-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #062943;
  margin-bottom: 8px;
}

.ph-poll-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ph-poll-bar-wrap {
  flex: 1;
  height: 26px;
  border-radius: 13px;
  overflow: hidden;
  position: relative;
  background: #fff9e6;
  transition: box-shadow 0.3s;
}

.ph-poll-bar-wrap.selected {
  background: rgba(77, 166, 255, 0.368);
  box-shadow: 0 2px 8px rgba(30,144,255,0.15);
}

.ph-poll-bar-bg {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  overflow: hidden;
}

.ph-poll-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 13px;
  background: #D0D0D0;
  transition: width 0.5s ease-in-out;
}

.ph-poll-bar-fill.selected {
  background: #1E90FF;
}

.ph-poll-bar-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
}

.ph-poll-vote-num {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: #555;
  background: #F5F0DD;
  border: 0.5px solid #ccc;
  flex-shrink: 0;
  transition: all 0.3s;
}

.ph-poll-vote-num.selected {
  background: #00CA85;
  color: #fff;
  border-color: transparent;
}

/* Poll details toggle */
.ph-poll-details-toggle {
  display: flex;
  align-items: center;
  margin-top: 6px;
  gap: 4px;
}

.ph-poll-details-text {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #062943;
  flex: 1;
}

.ph-poll-details-avatars {
  display: flex;
  gap: 2px;
  align-items: center;
}

.ph-poll-details-arrow {
  font-size: 10px;
  color: #062943;
  margin-left: 4px;
}

/* ── Response Progress ──────────────────────────────────── */
.ph-rp-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #062943;
  margin-bottom: 10px;
}

.ph-rp-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ph-rp-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}

.ph-rp-noreply {
  width: 100%;
  background: #FF9800;
}

.ph-rp-declined {
  background: #FA6C4C;
}

.ph-rp-accepted {
  background: #00CA85;
}

/* Legend row */
.ph-rp-legend {
  display: flex;
  justify-content: space-around;
  margin-bottom: 6px;
}

.ph-rp-legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ph-rp-legend-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.ph-rp-legend-count {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.ph-rp-legend-label {
  font-family: 'Sora', sans-serif;
  font-size: 7px;
  color: #888;
  font-weight: 500;
}

/* ── Comment Section ────────────────────────────────────── */
.ph-comment-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ph-comment-title {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #062943;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.ph-comment-bubble {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
    background: #FCF7E6;
    border-radius: 10px;
}

.ph-comment-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ph-comment-author {
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #062943;
}

.ph-comment-text {
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  color: #555;
  line-height: 1.3;
}

.ph-comment-input {
  display: flex;
  align-items: center;
  padding: 8px 12px;
    border: none;
    border-radius: 20px;
    background: #FCF7E6;
    margin-top: 4px;
}

.ph-comment-input-placeholder {
  flex: 1;
  font-family: 'Sora', sans-serif;
  font-size: 8px;
  color: #aaa;
}

.ph-comment-send {
  font-size: 10px;
  color: #FA6C4C;
  }
  
  /* ── Poll Voter Names (expanded details) ────────────────── */
  .ph-poll-voters {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0px 0 8px 8px;
    padding: 0px 4px;
    background: #F5F0DD;
    border-radius: 16px;
    border: 0.5px solid #ccc;
    flex-wrap: wrap;
  }
  
  .ph-poll-voters-icon {
    font-size: 9px;
    color: #999;
    flex-shrink: 0;
  }
  
  .ph-poll-voter-name {
    font-family: 'Sora', sans-serif;
    font-size: 8px;
    color: #555;
    white-space: nowrap;
  }
  
  .ph-poll-voter-name.you {
    font-weight: 700;
    color: #00CA85;
}