/* phone.css — a PRESET, up for grabs (it was the nurse's; she's clinical now). an iPhone shell
   (phone-frame.png) over iMessage bubbles — pick it for any agent in the injection config. the bezel PNG
   (transparent screen) rides as a background on .convo; the bubbles inset into the window. city.png /
   city-vert.png are its top-bar art, orientation-aware. (pngs live right here — same folder.) */
.convo[data-skin="phone"] {
  background: var(--phone-bg);
  border: none; border-radius: 0; padding: 0;
  position: relative; overflow: hidden;
}
/* the frame STRETCHES to fill the bar; its see-through window sits at a fixed % (measured from
   phone-frame.png: sides 6.3%, top 6.3%, bottom 3.1%) so the glass below lines up at every shape. */
.convo[data-skin="phone"]::after {
  content: ''; position: absolute; inset: 0;
  background: url('phone-frame.png') center / 100% 100% no-repeat;
  pointer-events: none; z-index: 2;
}
.convo[data-skin="phone"] .convo-screen {
  position: absolute; z-index: 1;
  top: 6.3%; bottom: 3.1%; left: 6.3%; right: 6.3%;
  width: auto; height: auto; max-height: none; margin: 0; background: none;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; overflow-x: hidden;
}
.agent-bar[data-edge] .convo[data-skin="phone"] .convo-screen { padding: 3% 5% 4%; }
/* FULL-WIDTH bubbles — both speakers fill the inner screen within the bevels; COLOR codes who's talking
   (bot vs user), so the old left/right alignment was just wasted half-screen. stacked from the top. */
.convo[data-skin="phone"] .msg {
  max-width: 100%; padding: 8px 13px; border-radius: 14px;
  font-family: -apple-system, system-ui, 'Helvetica Neue', sans-serif; font-size: 0.95em;
}
.convo[data-skin="phone"] .msg-bot { background: var(--phone-bot);  color: var(--phone-bot-text); box-shadow: 0 3px 0 var(--phone-bot-sh); }
.convo[data-skin="phone"] .msg-u   { background: var(--phone-user); color: var(--phone-user-txt); box-shadow: 0 3px 0 var(--phone-user-sh); }
.convo[data-skin="phone"] .msg-stream {
  max-width: 100%; padding: 8px 13px; border-radius: 14px;
  background: var(--phone-user); color: var(--phone-user-txt); box-shadow: 0 3px 0 var(--phone-user-sh);
}
.convo[data-skin="phone"] .msg-stream:empty { background: none; box-shadow: none; padding: 2px 4px; }
.convo[data-skin="phone"] .msg-stream:empty::before { color: var(--phone-ph); }

/* the agent-bar head wears the city skyline — a wide panorama, orientation-aware */
.agent-bar[data-skin="phone"] .ab-head {
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 2px solid var(--rt-shelf);
  box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.58);
  background-image: url('city.png');
}
.agent-bar[data-orient="vertical"][data-skin="phone"] .ab-head { background-image: url('city-vert.png'); }
.agent-bar[data-skin="phone"] { background: var(--phone-bg); border-color: rgba(80,50,120,0.4); }
.agent-bar[data-skin="phone"] .ab-name { color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.95); }
.agent-bar[data-skin="phone"] .ab-grip,
.agent-bar[data-skin="phone"] .ab-add { color: var(--phone-text); text-shadow: 0 1px 4px rgba(0,0,0,0.95); }

/* the convo box's own top bar */
.convo[data-skin="phone"] .convo-head { background-size: cover; background-position: center; box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.55); background-image: url('city.png'); }
.convo[data-skin="phone"] .head-title { color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }