/* Aegos Agro demo - chat, reviews, notifications and account. Screen-specific rules only. */

/* Emoji tile used where the other party has no photo */
.sc-tile {
  width: 40px; height: 40px; border-radius: 50%; background: var(--green-100);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; flex-shrink: 0;
}
.sc-tile-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 24px; }
.sc-when { flex-shrink: 0; padding-left: 8px; }

/* Chat thread */
.sc-thread { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h) - 40px); }
.sc-context { display: flex; align-items: center; gap: 12px; }
.sc-msgs { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 0 8px; }
.sc-msg { display: flex; flex-direction: column; max-width: 100%; }
.sc-msg.mine { align-items: flex-end; }
.sc-msg.theirs { align-items: flex-start; }
.sc-msg .bubble { white-space: pre-wrap; word-break: break-word; }
.sc-msg.mine .bubble-time { text-align: right; }

/* Composer stays above the keyboard: sticky to the bottom of the view, which has no bottom nav here */
.sc-composer {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  margin: 8px -16px -24px; padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--line);
}
.sc-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--white); font-size: 15px;
}
.sc-input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.sc-send {
  width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sc-send svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-send:active { transform: scale(.95); }

/* Review star picker */
.sc-starrow { display: flex; gap: 6px; margin-top: 12px; }
.sc-star {
  width: 48px; height: 48px; border-radius: 12px; font-size: 30px; line-height: 1;
  color: #D6D9D4; background: var(--white); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-star.on { color: var(--amber); border-color: var(--amber); background: var(--amber-100); }
.sc-star:active { transform: scale(.95); }
.sc-error { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--danger); }
.sc-count { text-align: right; }

/* Notifications */
.sc-bar { margin-bottom: 10px; }
.sc-notif { width: 100%; text-align: left; align-items: flex-start; color: inherit; }
.sc-notif:active { background: var(--green-50); }
.sc-notif .sc-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  flex-shrink: 0; margin-top: 7px;
}
.sc-notif .sc-dot.off { background: transparent; }
.sc-notif-title { display: block; line-height: 1.35; }
.sc-notif-body { display: block; margin-top: 2px; }

/* Account */
.sc-check {
  width: 28px; height: 28px; border-radius: 50%; background: var(--green-100); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sc-check svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }