/* beach.css — ocean tank + the sandy bottom bar (the stream lives on the sand). (no png; pure CSS.) */
.convo[data-skin="beach"] {
  background: var(--beach-bg);
  border: 1px solid rgba(160,215,235,0.45);
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,255,255,0.45);
}
.convo[data-skin="beach"] .convo-screen {
  gap: 12px;
  padding: 18px;
  background: linear-gradient(to bottom, #8ab4d4 0%, #4a7ea0 18%, #1e4d6e 40%, #0f2e48 70%, #08192e 100%);
}
.convo[data-skin="beach"] .msg-u {
  align-self: flex-end; max-width: 84%; color: var(--beach-text);
  background: linear-gradient(160deg, #ffffff 0%, #e8f4fb 50%, #d4eaf6 100%);
  border-radius: 28px 6px 8px 24px; padding: 12px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.convo[data-skin="beach"] .msg-bot {
  align-self: flex-start; max-width: 90%; color: var(--beach-text);
  background: linear-gradient(200deg, #eafff8 0%, #d4f7ee 50%, #c0f0e4 100%);
  border-radius: 6px 28px 24px 8px; padding: 12px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
/* the sandy bottom bar — you type on the sand */
.convo[data-skin="beach"] .msg-stream {
  align-self: stretch; margin: 8px -18px -18px; padding: 16px 22px; color: var(--beach-sand-text);
  background: linear-gradient(to bottom, var(--wood-text) 0%, #c0a060 60%, #b09050 100%);
  border-top: 2px solid var(--wood-user); box-shadow: inset 0 2px 0 rgba(255,255,255,0.3);
}
.convo[data-skin="beach"] .msg-stream:empty::before { color: var(--beach-drift); }
/* the convo box's own top bar */
.convo[data-skin="beach"] .convo-head { background: linear-gradient(var(--beach-head), var(--beach-head-line)); border-bottom: 2px solid rgba(60,160,220,0.5); }
.convo[data-skin="beach"] .head-title { color: var(--beach-title); }