* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #e5ddd5;
  height: 100vh;
  height: 100dvh; /* 100vh ignores the mobile browser's address bar, pushing the send bar off-screen; dvh accounts for it */
  height: var(--app-height, 100dvh); /* JS-measured fallback for keyboards that open without shrinking dvh (older WebViews) */
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.screen {
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }

/* Login */

#login-screen {
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0b3d36 0%, #075e54 55%, #0e6b5c 100%);
  background-image:
    linear-gradient(160deg, #0b3d36 0%, #075e54 55%, #0e6b5c 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.8'%3E%3Ccircle cx='60' cy='60' r='58'/%3E%3Ccircle cx='60' cy='60' r='51.3'/%3E%3Cpath d='M62.1,49.9 L59.5,49.9 L57.1,49.5 L55.1,48.9 L53.5,47.9 L52.0,46.7 L50.7,45.3 L49.6,43.7 L48.7,42.0 L48.1,40.0 L47.9,37.6 L47.9,34.9 L48.1,32.5 L48.7,30.5 L49.3,28.4 L49.9,26.4 L50.8,24.7 L51.6,22.8 L52.5,21.1 L53.6,19.5 L54.7,17.9 L55.7,16.4 L56.8,14.7 L58.0,13.2 L59.3,11.9 L60.8,12.3 L62.0,13.7 L63.2,15.2 L64.4,16.7 L65.5,18.1 L66.4,19.9 L67.5,21.5 L68.4,23.3 L69.2,25.1 L70.0,26.9 L70.7,28.9 L71.3,30.9 L71.7,33.2 L72.0,35.5 L72.0,38.1 L71.7,40.5 L70.9,42.4 L70.1,44.3 L68.9,45.7 L67.6,47.1 L66.1,48.3 L64.4,49.1 Z'/%3E%3Cpath d='M62.1,49.9 L59.5,49.9 L57.1,49.5 L55.1,48.9 L53.5,47.9 L52.0,46.7 L50.7,45.3 L49.6,43.7 L48.7,42.0 L48.1,40.0 L47.9,37.6 L47.9,34.9 L48.1,32.5 L48.7,30.5 L49.3,28.4 L49.9,26.4 L50.8,24.7 L51.6,22.8 L52.5,21.1 L53.6,19.5 L54.7,17.9 L55.7,16.4 L56.8,14.7 L58.0,13.2 L59.3,11.9 L60.8,12.3 L62.0,13.7 L63.2,15.2 L64.4,16.7 L65.5,18.1 L66.4,19.9 L67.5,21.5 L68.4,23.3 L69.2,25.1 L70.0,26.9 L70.7,28.9 L71.3,30.9 L71.7,33.2 L72.0,35.5 L72.0,38.1 L71.7,40.5 L70.9,42.4 L70.1,44.3 L68.9,45.7 L67.6,47.1 L66.1,48.3 L64.4,49.1 Z' transform='rotate(180 60 60)'/%3E%3Cpath d='M87.2,72.0 L84.5,72.0 L81.9,72.0 L79.6,71.6 L77.7,70.8 L76.0,69.9 L74.5,68.7 L73.2,67.3 L72.0,65.9 L71.3,64.0 L70.5,61.7 L70.5,59.1 L71.2,57.1 L71.9,55.1 L72.9,53.5 L74.1,52.0 L75.6,50.8 L77.2,49.9 L79.1,49.1 L81.6,48.7 L84.0,48.4 L86.3,48.7 L88.7,48.9 L90.9,49.3 L92.9,50.0 L94.9,50.7 L96.8,51.5 L98.5,52.3 L100.4,53.2 L102.3,54.3 L103.7,55.5 L105.3,56.4 L106.9,57.5 L108.4,58.7 L109.7,60.0 L109.1,61.3 L107.6,62.5 L106.1,63.7 L104.3,64.9 L102.7,65.9 L101.1,66.9 L99.3,67.9 L97.6,68.7 L95.6,69.5 L93.7,70.1 L91.6,70.8 L89.6,71.3 Z'/%3E%3Cpath d='M87.2,72.0 L84.5,72.0 L81.9,72.0 L79.6,71.6 L77.7,70.8 L76.0,69.9 L74.5,68.7 L73.2,67.3 L72.0,65.9 L71.3,64.0 L70.5,61.7 L70.5,59.1 L71.2,57.1 L71.9,55.1 L72.9,53.5 L74.1,52.0 L75.6,50.8 L77.2,49.9 L79.1,49.1 L81.6,48.7 L84.0,48.4 L86.3,48.7 L88.7,48.9 L90.9,49.3 L92.9,50.0 L94.9,50.7 L96.8,51.5 L98.5,52.3 L100.4,53.2 L102.3,54.3 L103.7,55.5 L105.3,56.4 L106.9,57.5 L108.4,58.7 L109.7,60.0 L109.1,61.3 L107.6,62.5 L106.1,63.7 L104.3,64.9 L102.7,65.9 L101.1,66.9 L99.3,67.9 L97.6,68.7 L95.6,69.5 L93.7,70.1 L91.6,70.8 L89.6,71.3 Z' transform='rotate(180 60 60)'/%3E%3Cpath d='M106.3,47.3 L105.5,44.8 L104.5,42.3 L103.5,39.7 L102.3,37.7 L100.9,35.5 L99.6,33.3 L98.0,31.3 L96.5,29.6 L94.8,27.9 L92.9,26.1 L91.1,24.4 L89.3,22.9 L87.2,21.5 L85.1,20.1 L82.8,18.8 L80.5,17.9 L78.1,16.8 L75.5,15.9 L72.8,15.1 L73.7,15.7 L76.1,16.9 L78.5,18.1 L80.5,19.6 L82.0,21.3 L83.2,23.7 L84.3,25.6 L87.2,25.6 L90.0,26.1 L92.3,27.5 L94.0,29.2 L95.2,31.5 L95.6,34.4 L95.9,36.9 L98.7,37.7 L100.8,39.2 L102.4,40.8 L103.7,43.1 L104.9,45.3 Z'/%3E%3Cpath d='M106.3,47.3 L105.5,44.8 L104.5,42.3 L103.5,39.7 L102.3,37.7 L100.9,35.5 L99.6,33.3 L98.0,31.3 L96.5,29.6 L94.8,27.9 L92.9,26.1 L91.1,24.4 L89.3,22.9 L87.2,21.5 L85.1,20.1 L82.8,18.8 L80.5,17.9 L78.1,16.8 L75.5,15.9 L72.8,15.1 L73.7,15.7 L76.1,16.9 L78.5,18.1 L80.5,19.6 L82.0,21.3 L83.2,23.7 L84.3,25.6 L87.2,25.6 L90.0,26.1 L92.3,27.5 L94.0,29.2 L95.2,31.5 L95.6,34.4 L95.9,36.9 L98.7,37.7 L100.8,39.2 L102.4,40.8 L103.7,43.1 L104.9,45.3 Z' transform='rotate(90 60 60)'/%3E%3Cpath d='M106.3,47.3 L105.5,44.8 L104.5,42.3 L103.5,39.7 L102.3,37.7 L100.9,35.5 L99.6,33.3 L98.0,31.3 L96.5,29.6 L94.8,27.9 L92.9,26.1 L91.1,24.4 L89.3,22.9 L87.2,21.5 L85.1,20.1 L82.8,18.8 L80.5,17.9 L78.1,16.8 L75.5,15.9 L72.8,15.1 L73.7,15.7 L76.1,16.9 L78.5,18.1 L80.5,19.6 L82.0,21.3 L83.2,23.7 L84.3,25.6 L87.2,25.6 L90.0,26.1 L92.3,27.5 L94.0,29.2 L95.2,31.5 L95.6,34.4 L95.9,36.9 L98.7,37.7 L100.8,39.2 L102.4,40.8 L103.7,43.1 L104.9,45.3 Z' transform='rotate(180 60 60)'/%3E%3Cpath d='M106.3,47.3 L105.5,44.8 L104.5,42.3 L103.5,39.7 L102.3,37.7 L100.9,35.5 L99.6,33.3 L98.0,31.3 L96.5,29.6 L94.8,27.9 L92.9,26.1 L91.1,24.4 L89.3,22.9 L87.2,21.5 L85.1,20.1 L82.8,18.8 L80.5,17.9 L78.1,16.8 L75.5,15.9 L72.8,15.1 L73.7,15.7 L76.1,16.9 L78.5,18.1 L80.5,19.6 L82.0,21.3 L83.2,23.7 L84.3,25.6 L87.2,25.6 L90.0,26.1 L92.3,27.5 L94.0,29.2 L95.2,31.5 L95.6,34.4 L95.9,36.9 L98.7,37.7 L100.8,39.2 L102.4,40.8 L103.7,43.1 L104.9,45.3 Z' transform='rotate(270 60 60)'/%3E%3Ccircle cx='60' cy='60' r='4.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
}

.login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  max-width: 90vw;
}

.login-emblem {
  width: 72px;
  height: 72px;
  min-height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9b26a, #9c7530);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  margin-bottom: -36px;
  position: relative;
  z-index: 1;
}

.login-card {
  background: white;
  border-radius: 18px;
  padding: 48px 32px 28px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.login-card h1 {
  margin: 0 0 24px;
  color: #075e54;
  font-size: 22px;
}

.input-wrap {
  position: relative;
  margin-bottom: 12px;
}

.input-wrap .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}

.login-card input {
  width: 100%;
  padding: 14px 14px 14px 42px;
  border: 1.5px solid #e3e3e3;
  border-radius: 10px;
  font-size: 18px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-card input:focus {
  outline: none;
  border-color: #075e54;
  box-shadow: 0 0 0 3px rgba(7, 94, 84, 0.15);
}

.login-card button {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.login-card button:active {
  transform: scale(0.98);
  box-shadow: 0 3px 8px rgba(37, 211, 102, 0.3);
}

.error {
  color: #c0392b;
  min-height: 20px;
  font-size: 14px;
}

/* Header */

.header {
  background: #ffffff;
  color: #111b21;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 500;
}

.header-name { flex: 1; }

.header-gradient {
  background: linear-gradient(135deg, #0b3d36, #128c7e);
  border-bottom: none;
  padding: 16px;
}

.header-greeting {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.greeting-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin-top: 2px;
}

.greeting-sub:empty {
  display: none;
}

.greeting-name {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.text-btn {
  background: none;
  border: none;
  color: #667781;
  font-size: 15px;
  cursor: pointer;
}

.text-btn-light {
  color: rgba(255, 255, 255, 0.85);
}

.icon-btn {
  background: none;
  border: none;
  color: #54656f;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  line-height: 1;
}

.avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: #128c7e;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.avatar-light {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Contacts list */

.section-label {
  margin: 0;
  padding: 14px 16px 6px;
  background: #f7f7f7;
  color: #8696a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.contacts-list {
  flex: 1;
  overflow-y: auto;
  background: #f7f7f7;
  padding: 4px 10px 10px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 8px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.contact-row:active {
  transform: scale(0.99);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  background: #fafafa;
}

.contact-row .contact-text {
  flex: 1;
  min-width: 0;
}

.contact-row .name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
}

.contact-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.contact-time {
  color: #8696a0;
  font-size: 12px;
  font-weight: 400;
}

.contact-row .preview-row {
  color: #667781;
  font-size: 14px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: #8696a0;
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.empty-state p {
  margin: 4px 0;
  font-size: 15px;
}

.empty-state-hint {
  font-size: 13px !important;
  color: #b0b8bd;
}

.window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  display: inline-block;
  margin-left: 8px;
  flex-shrink: 0;
}

.window-dot.open { background: #25d366; }

/* Chat */

.messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #e5ddd5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='rgba(101,78,42,0.09)' stroke-width='1.6'%3E%3Ccircle cx='45' cy='45' r='43.5'/%3E%3Ccircle cx='45' cy='45' r='38.5'/%3E%3Cpath d='M46.6,37.4 L44.6,37.4 L42.8,37.1 L41.3,36.7 L40.1,35.9 L39.0,35.0 L38.0,34.0 L37.2,32.8 L36.5,31.5 L36.1,30.0 L35.9,28.2 L35.9,26.2 L36.1,24.4 L36.5,22.9 L37.0,21.3 L37.4,19.8 L38.1,18.5 L38.7,17.1 L39.4,15.8 L40.2,14.6 L41.0,13.4 L41.8,12.3 L42.6,11.0 L43.5,9.9 L44.5,8.9 L45.6,9.2 L46.5,10.3 L47.4,11.4 L48.3,12.5 L49.1,13.6 L49.8,14.9 L50.6,16.1 L51.3,17.5 L51.9,18.8 L52.5,20.2 L53.0,21.7 L53.5,23.2 L53.8,24.9 L54.0,26.6 L54.0,28.6 L53.8,30.4 L53.2,31.8 L52.6,33.2 L51.7,34.3 L50.7,35.3 L49.6,36.2 L48.3,36.8 Z'/%3E%3Cpath d='M46.6,37.4 L44.6,37.4 L42.8,37.1 L41.3,36.7 L40.1,35.9 L39.0,35.0 L38.0,34.0 L37.2,32.8 L36.5,31.5 L36.1,30.0 L35.9,28.2 L35.9,26.2 L36.1,24.4 L36.5,22.9 L37.0,21.3 L37.4,19.8 L38.1,18.5 L38.7,17.1 L39.4,15.8 L40.2,14.6 L41.0,13.4 L41.8,12.3 L42.6,11.0 L43.5,9.9 L44.5,8.9 L45.6,9.2 L46.5,10.3 L47.4,11.4 L48.3,12.5 L49.1,13.6 L49.8,14.9 L50.6,16.1 L51.3,17.5 L51.9,18.8 L52.5,20.2 L53.0,21.7 L53.5,23.2 L53.8,24.9 L54.0,26.6 L54.0,28.6 L53.8,30.4 L53.2,31.8 L52.6,33.2 L51.7,34.3 L50.7,35.3 L49.6,36.2 L48.3,36.8 Z' transform='rotate(180 45 45)'/%3E%3Cpath d='M65.4,54.0 L63.4,54.0 L61.4,54.0 L59.7,53.7 L58.3,53.1 L57.0,52.4 L55.9,51.5 L54.9,50.5 L54.0,49.4 L53.5,48.0 L52.9,46.3 L52.9,44.3 L53.4,42.8 L53.9,41.3 L54.7,40.1 L55.6,39.0 L56.7,38.1 L57.9,37.4 L59.3,36.8 L61.2,36.5 L63.0,36.3 L64.7,36.5 L66.5,36.7 L68.2,37.0 L69.7,37.5 L71.2,38.0 L72.6,38.6 L73.9,39.2 L75.3,39.9 L76.7,40.7 L77.8,41.6 L79.0,42.3 L80.2,43.1 L81.3,44.0 L82.3,45.0 L81.8,46.0 L80.7,46.9 L79.6,47.8 L78.2,48.7 L77.0,49.4 L75.8,50.2 L74.5,50.9 L73.2,51.5 L71.7,52.1 L70.3,52.6 L68.7,53.1 L67.2,53.5 Z'/%3E%3Cpath d='M65.4,54.0 L63.4,54.0 L61.4,54.0 L59.7,53.7 L58.3,53.1 L57.0,52.4 L55.9,51.5 L54.9,50.5 L54.0,49.4 L53.5,48.0 L52.9,46.3 L52.9,44.3 L53.4,42.8 L53.9,41.3 L54.7,40.1 L55.6,39.0 L56.7,38.1 L57.9,37.4 L59.3,36.8 L61.2,36.5 L63.0,36.3 L64.7,36.5 L66.5,36.7 L68.2,37.0 L69.7,37.5 L71.2,38.0 L72.6,38.6 L73.9,39.2 L75.3,39.9 L76.7,40.7 L77.8,41.6 L79.0,42.3 L80.2,43.1 L81.3,44.0 L82.3,45.0 L81.8,46.0 L80.7,46.9 L79.6,47.8 L78.2,48.7 L77.0,49.4 L75.8,50.2 L74.5,50.9 L73.2,51.5 L71.7,52.1 L70.3,52.6 L68.7,53.1 L67.2,53.5 Z' transform='rotate(180 45 45)'/%3E%3Cpath d='M79.7,35.5 L79.1,33.6 L78.4,31.7 L77.6,29.8 L76.7,28.3 L75.7,26.6 L74.7,25.0 L73.5,23.5 L72.4,22.2 L71.1,20.9 L69.7,19.6 L68.3,18.3 L67.0,17.2 L65.4,16.1 L63.8,15.1 L62.1,14.1 L60.4,13.4 L58.6,12.6 L56.6,11.9 L54.6,11.3 L55.3,11.8 L57.1,12.7 L58.9,13.6 L60.4,14.7 L61.5,16.0 L62.4,17.8 L63.2,19.2 L65.4,19.2 L67.5,19.6 L69.2,20.6 L70.5,21.9 L71.4,23.6 L71.7,25.8 L71.9,27.7 L74.0,28.3 L75.6,29.4 L76.8,30.6 L77.8,32.3 L78.7,34.0 Z'/%3E%3Cpath d='M79.7,35.5 L79.1,33.6 L78.4,31.7 L77.6,29.8 L76.7,28.3 L75.7,26.6 L74.7,25.0 L73.5,23.5 L72.4,22.2 L71.1,20.9 L69.7,19.6 L68.3,18.3 L67.0,17.2 L65.4,16.1 L63.8,15.1 L62.1,14.1 L60.4,13.4 L58.6,12.6 L56.6,11.9 L54.6,11.3 L55.3,11.8 L57.1,12.7 L58.9,13.6 L60.4,14.7 L61.5,16.0 L62.4,17.8 L63.2,19.2 L65.4,19.2 L67.5,19.6 L69.2,20.6 L70.5,21.9 L71.4,23.6 L71.7,25.8 L71.9,27.7 L74.0,28.3 L75.6,29.4 L76.8,30.6 L77.8,32.3 L78.7,34.0 Z' transform='rotate(90 45 45)'/%3E%3Cpath d='M79.7,35.5 L79.1,33.6 L78.4,31.7 L77.6,29.8 L76.7,28.3 L75.7,26.6 L74.7,25.0 L73.5,23.5 L72.4,22.2 L71.1,20.9 L69.7,19.6 L68.3,18.3 L67.0,17.2 L65.4,16.1 L63.8,15.1 L62.1,14.1 L60.4,13.4 L58.6,12.6 L56.6,11.9 L54.6,11.3 L55.3,11.8 L57.1,12.7 L58.9,13.6 L60.4,14.7 L61.5,16.0 L62.4,17.8 L63.2,19.2 L65.4,19.2 L67.5,19.6 L69.2,20.6 L70.5,21.9 L71.4,23.6 L71.7,25.8 L71.9,27.7 L74.0,28.3 L75.6,29.4 L76.8,30.6 L77.8,32.3 L78.7,34.0 Z' transform='rotate(180 45 45)'/%3E%3Cpath d='M79.7,35.5 L79.1,33.6 L78.4,31.7 L77.6,29.8 L76.7,28.3 L75.7,26.6 L74.7,25.0 L73.5,23.5 L72.4,22.2 L71.1,20.9 L69.7,19.6 L68.3,18.3 L67.0,17.2 L65.4,16.1 L63.8,15.1 L62.1,14.1 L60.4,13.4 L58.6,12.6 L56.6,11.9 L54.6,11.3 L55.3,11.8 L57.1,12.7 L58.9,13.6 L60.4,14.7 L61.5,16.0 L62.4,17.8 L63.2,19.2 L65.4,19.2 L67.5,19.6 L69.2,20.6 L70.5,21.9 L71.4,23.6 L71.7,25.8 L71.9,27.7 L74.0,28.3 L75.6,29.4 L76.8,30.6 L77.8,32.3 L78.7,34.0 Z' transform='rotate(270 45 45)'/%3E%3Ccircle cx='45' cy='45' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

.bubble {
  position: relative;
  max-width: 75%;
  padding: 8px 14px 10px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.3;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.bubble.inbound {
  align-self: flex-start;
  background: white;
}

.bubble.outbound {
  align-self: flex-end;
  background: #dcf8c6;
}

.bubble.has-image {
  padding: 3px;
}

.bubble.has-image .time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
  color: white;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
}

.bubble.pending {
  opacity: 0.7;
  background: #f0f0f0;
  border: 1px dashed #bbb;
}

.bubble .time {
  display: block;
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  text-align: right;
}

.bubble.pending .time {
  color: #856404;
  font-style: italic;
}

.bubble.sending {
  opacity: 0.75;
}

.bubble.sending .time {
  font-style: italic;
}

.tick {
  font-size: 12px;
  letter-spacing: -2px;
}

.tick.sent, .tick.delivered { color: #8696a0; }
.tick.read { color: #53bdeb; letter-spacing: -1px; }
.tick.failed { color: #c0392b; letter-spacing: normal; }

.closed-banner {
  background: #fff3cd;
  color: #856404;
  padding: 10px 16px;
  font-size: 13px;
  text-align: center;
}

.send-form {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  background: #f0f0f0;
}

.send-form input {
  flex: 1;
  padding: 13px 16px;
  border: none;
  border-radius: 24px;
  font-size: 16px;
}

.round-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: #25d366;
  color: white;
  border: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.round-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


.recording-indicator {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: white;
  border-radius: 24px;
  min-width: 0;
}

.rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c0392b;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

#rec-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#rec-waveform {
  flex: 1;
  height: 32px;
}

.cancel-record-btn {
  background: none;
  border: 1px solid #c0392b;
  color: #c0392b;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 13px;
  cursor: pointer;
  margin-left: auto;
}

.bubble-media {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}

img.bubble-media {
  max-height: 260px;
  border-radius: 10px;
}

.voice-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  padding: 2px 0;
}

.voice-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
}

.voice-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #667781;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.voice-mic-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  background: #128c7e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.bubble.outbound .voice-mic-badge {
  border-color: #dcf8c6;
}

.voice-play-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.voice-waveform {
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.voice-bar {
  flex: 1;
  min-width: 2px;
  max-width: 3px;
  border-radius: 2px;
  background: #cfd9de;
}

.voice-bar.played {
  background: #128c7e;
}

.voice-duration {
  font-size: 12px;
  color: #667781;
  min-width: 34px;
  text-align: right;
}