/* ==========================================================================
   Messages — the conversation room.

   Bubbles carry the same cream, green and gold as the rest of the desk, so a
   voice note sits in the app rather than in a bolted-on chat window.
   ========================================================================== */

/* ---------- header action ---------- */
.top__msg{position:relative;width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:#fff;color:var(--green);display:grid;place-items:center;cursor:pointer}
.top__msg:hover{background:#F3F7F2}
.top__msg svg{width:17px;height:17px}
.top__dot{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--gold);color:#3A2E06;font-size:9.5px;font-weight:800;line-height:16px;text-align:center;border:1.5px solid var(--paper)}

/* ---------- the desk, at the top of the room ---------- */
.msg-agent{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:8px}
.msg-agent__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(160deg,#155C43,#0E3B2E);color:#F2D079;display:grid;place-items:center;font-family:var(--serif);font-size:.9rem;font-weight:700;flex:none}
.msg-agent__who{display:flex;flex-direction:column;min-width:0;flex:1}
.msg-agent__who b{font-family:var(--serif);font-size:.95rem;color:var(--green);line-height:1.2}
.msg-agent__who small{font-size:.66rem;color:var(--muted);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-agent__call{border:0;background:var(--green);color:#fff;border-radius:10px;padding:8px 12px;font-size:.72rem;font-weight:750;text-decoration:none;letter-spacing:.03em}
.msg-agent__wa{width:34px;height:34px;border-radius:10px;border:1px solid #CFE3D4;background:#EAF5EC;color:#1F7A46;display:grid;place-items:center;font-size:.62rem;font-weight:800;text-decoration:none;flex:none}

/* ---------- link state ---------- */
.msg-link{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.7rem;font-weight:650;color:var(--green-3)}
.msg-link__dot{width:7px;height:7px;border-radius:50%;background:var(--green-3);flex:none;box-shadow:0 0 0 3px rgba(44,122,91,.14)}
.msg-link.is-off{color:#8A6A2F}
.msg-link.is-off .msg-link__dot{background:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.16)}

/* ---------- thread ---------- */
.msg-thread{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 10px;border-radius:16px;background:#F4F0E4;
  max-height:54vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.msg-day{align-self:center;font-size:.62rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#9AA69B;background:#FBF8F1;border:1px solid var(--line);border-radius:99px;padding:3px 10px;margin:4px 0}

.msg-b{
  position:relative;max-width:82%;padding:8px 10px 18px;border-radius:14px;
  background:#fff;border:1px solid #E9E3D3;align-self:flex-start;
  box-shadow:0 1px 1px rgba(20,35,28,.04);
}
.msg-b.is-mine{align-self:flex-end;background:#E7F1E9;border-color:#CFE3D4}
.msg-b.is-pending{opacity:.78}
.msg-b__txt{margin:0;font-size:.86rem;line-height:1.42;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.msg-b__img{
  display:block;width:230px;max-width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:10px;margin:-2px 0 2px;background:#E7EBE4
}
.msg-b audio{width:230px;max-width:100%;height:34px}
.msg-b__meta{display:block;font-size:.58rem;color:var(--muted);margin-top:2px}
.msg-b__time{position:absolute;right:9px;bottom:4px;font-size:.58rem;color:#8B978D;display:flex;align-items:center;gap:3px}
.msg-tick{font-size:.62rem;color:#8B978D}
.msg-tick.is-seen{color:#2C7A5B}
.msg-b__err{display:block;margin-top:4px;font-size:.62rem;color:#8E2A1C}
.msg-resend{display:inline-block;margin-top:6px;border:1px solid #F0C9C1;background:#FDF2F0;color:#8E2A1C;
  border-radius:8px;padding:4px 9px;font:inherit;font-size:.66rem;font-weight:800;letter-spacing:.02em;cursor:pointer}
.msg-resend:active{transform:scale(.98)}
.msg-resend.is-quiet{background:#fff;border-color:var(--line);color:var(--green-3)}

/* ---------- empty ---------- */
.msg-empty{padding:18px 8px;text-align:center}
.msg-empty p{margin:0 0 6px}
.msg-empty b{font-family:var(--serif);font-size:1rem;color:var(--green)}
.msg-quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.msg-quick .chip{font-size:.72rem;padding:7px 11px}

/* ---------- composer ---------- */
.msg-bar{display:flex;align-items:center;gap:6px;padding:8px 0 2px;position:sticky;bottom:0;background:var(--paper)}
.msg-ico{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--green-3);display:grid;place-items:center;flex:none;cursor:pointer
}
.msg-ico svg{width:19px;height:19px}
.msg-ico.is-rec{background:#B42318;border-color:#B42318;color:#fff;animation:pulse 1.4s infinite}
.msg-ico.is-rec::after{content:attr(data-secs);position:absolute;font-size:9px;color:#fff;margin-top:2px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(180,35,24,.35)}70%{box-shadow:0 0 0 10px rgba(180,35,24,0)}100%{box-shadow:0 0 0 0 rgba(180,35,24,0)}}

.msg-input{flex:1;display:flex}
.msg-input input{
  width:100%;min-height:40px;border-radius:20px;border:1px solid var(--line);
  background:#fff;padding:9px 14px;font:inherit;font-size:.9rem
}
.msg-input input:focus{outline:2px solid rgba(44,122,91,.18);border-color:#9CBFAC}
.msg-send{
  width:42px;height:42px;border-radius:50%;border:0;background:var(--green);color:#fff;
  display:grid;place-items:center;flex:none;cursor:pointer
}
.msg-send svg{width:19px;height:19px}
.msg-send:active{transform:scale(.97)}

@media (max-width:360px){
  .msg-thread{max-height:50vh}
  .msg-b{max-width:88%}
  .msg-agent__call{padding:7px 9px;font-size:.68rem}
}


/* ---------------------------------------------------------- reactions */
.msg-rx-row{display:inline-flex;align-items:center;gap:4px;margin-top:5px;flex-wrap:wrap;position:relative}
.msg-rx{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line,#DCD6C6);background:#fff;border-radius:20px;padding:1px 7px;font-size:12px;line-height:1.7;cursor:pointer;font-family:inherit}
.msg-rx b{font-size:10.5px;font-weight:600;color:var(--muted,#7C8A80)}
.msg-rx.is-on{background:#EAF3EC;border-color:#0B3D2E}
.msg-rx-add{border:1px dashed var(--line,#DCD6C6);background:transparent;border-radius:50%;width:22px;height:22px;line-height:1;font-size:12px;color:var(--muted,#7C8A80);cursor:pointer}
.msg-b.is-mine .msg-rx-row{justify-content:flex-end}

/* the picker: a sheet above the composer, reachable with a thumb */
.rx-backdrop{position:fixed;inset:0;background:rgba(11,61,46,.26);z-index:70}
.rx-backdrop[hidden]{display:none}
.rx-sheet{position:fixed;left:10px;right:10px;bottom:78px;z-index:71;background:#fff;border:1px solid var(--line,#DCD6C6);border-radius:20px;padding:6px;box-shadow:0 14px 34px rgba(11,61,46,.24)}
.rx-sheet[hidden]{display:none}
.rx-sheet__bar{display:flex;gap:2px}
.rx-sheet__pick{flex:1 1 0;border:0;background:transparent;font-size:25px;line-height:1.5;padding:5px 0;border-radius:14px;cursor:pointer}
.rx-sheet__pick.is-on{background:#E7F2EC}
@media (max-width:420px){.rx-sheet__pick{font-size:23px}}

.msg-rx__who{font-style:normal;font-size:9.5px;letter-spacing:.02em;color:#7C8A80;margin-left:3px;text-transform:lowercase}
.msg-rx.is-on .msg-rx__who{color:#1F6A45}



/* ==========================================================================
   The wall behind the talk.

   It used to be a photograph of a maize field under a green veil. On a phone
   held in the sun the leaves read as noise behind every bubble, and a long
   conversation became tiring to follow. What is left is a quiet ground with
   the emblem faintly in the light: the same room, with the curtains drawn.
   ========================================================================== */
.msg-thread{
  background-color:#0C3A2C;
  background-image:
    url("img/mark.svg"),
    radial-gradient(120% 60% at 50% -10%, rgba(62,142,138,.22), rgba(62,142,138,0) 70%),
    radial-gradient(80% 50% at 100% 0%, rgba(242,196,78,.10), rgba(242,196,78,0) 68%),
    linear-gradient(180deg, #0E4234 0%, #0A3227 55%, #082A21 100%);
  background-repeat:no-repeat;
  background-position:center 16px, center, center, center;
  background-size:132px auto, cover, cover, cover;
  background-attachment:local;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.msg-b{background:#FFFDF7;border-color:rgba(255,255,255,.62);box-shadow:0 3px 12px rgba(3,22,16,.26)}
.msg-b--me{background:#EAF4E6;border-color:rgba(255,255,255,.7)}
.msg-b.is-mine{background:#EAF4EC;border-color:rgba(255,255,255,.72)}
.msg-day{background:rgba(9,48,37,.78);border-color:rgba(242,238,224,.30);color:#E4EBD9;backdrop-filter:blur(3px)}

/* The bar floats on the paper, clear of the home bar on a modern iPhone. */
.msg-bar{
  background:linear-gradient(180deg, rgba(253,251,245,0) 0%, rgba(253,251,245,.92) 22%, #FDFBF5 60%);
  padding:10px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  backdrop-filter:blur(6px)
}
/* 16px is the size below which iOS Safari zooms the page on focus. */
.msg-input input{font-size:16px;min-height:44px;border-color:#E2DCCB}
.msg-ico,.msg-send{width:44px;height:44px}
@media (max-width:400px){
  .msg-ico,.msg-send{width:42px;height:42px}
  .msg-input input{font-size:16px;padding:9px 12px}
}

/* CSAVOX — the voice note, drawn rather than inherited from the browser.
   A circular brass-ringed play key, a waveform cut to the clip, and a clock
   that counts. The <audio> element still does the playing; it is only hidden. */
.vox{
  display:flex;align-items:center;gap:11px;
  min-width:214px;max-width:100%;padding:2px 0 1px;
}
.vox.is-wired audio{display:none}
/* Never silent: a note the script has not reached yet still plays, using the
   browser's own controls. Plain, but audible. */
.vox:not(.is-wired) audio{display:block;width:100%;height:38px;margin:2px 0}
.vox:not(.is-wired) .vox__body{display:none}

.vox__btn{
  position:relative;flex:none;width:40px;height:40px;padding:0;cursor:pointer;
  border:0;border-radius:50%;color:#FFF8E7;
  background:linear-gradient(158deg,#2F8A62 0%,#1B6349 52%,#123F31 100%);
  display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(9,44,33,.34), inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 -2px 6px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.vox__btn:active{transform:scale(.94)}
.vox__btn:focus-visible{outline:2px solid #C99A2C;outline-offset:3px}
/* the brass ring, the same mark the logo wears */
.vox__btn::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(201,154,44,.55);
  pointer-events:none;
}
.vox__ico{width:17px;height:17px;margin-left:2px}
.vox__ico--pause{display:none;margin-left:0}
.vox.is-on .vox__ico--play{display:none}
.vox.is-on .vox__ico--pause{display:block}
.vox.is-on .vox__ico--pause{margin-left:0}

@keyframes voxPulse{
  0%{box-shadow:0 0 0 0 rgba(201,154,44,.45)}
  70%{box-shadow:0 0 0 9px rgba(201,154,44,0)}
  100%{box-shadow:0 0 0 0 rgba(201,154,44,0)}
}
.vox.is-on .vox__btn::after{animation:voxPulse 1.9s ease-out infinite}

.vox__body{flex:1;min-width:0}
.vox__wave{
  display:flex;align-items:center;gap:2px;height:28px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.vox__wave i{
  flex:1;min-width:2px;max-width:4px;border-radius:2px;
  background:#C4D2C6;transition:background .14s ease;
}
.vox__wave i.is-past{background:linear-gradient(180deg,#3E9E70,#1F6B4E)}
.vox.is-on .vox__wave i:nth-child(4n){background:#F0D79A}
.vox.is-on .vox__wave i.is-past:nth-child(4n){background:linear-gradient(180deg,#E7C46A,#C99A2C)}

.vox__line{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:3px;font-size:10.5px;line-height:1;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.vox__pos{color:#2C7A5B;font-weight:700;font-variant-numeric:tabular-nums;display:inline-block;min-width:2.6em}
.vox__wave i{flex:0 0 2px}
.vox__dur{color:#8B978D;font-variant-numeric:tabular-nums;display:inline-block;min-width:2.6em;text-align:right}
.vox.is-on .vox__dur{color:#6F8A79}

.vox.is-bad .vox__btn{background:linear-gradient(158deg,#B4623F,#8E3A22);box-shadow:none}
.vox.is-bad .vox__btn::after{border-color:rgba(196,99,63,.5);animation:none}
.vox.is-bad .vox__dur{color:#A6402A;font-weight:700}

@media (max-width:360px){
  .vox{min-width:180px;gap:9px}
  .vox__btn{width:36px;height:36px}
  .vox__wave i{min-width:1.5px}
}

/* CSATYPE — the page reads like a printed record: even numerals in every
   clock and count, tighter display settings on the headings, and text that is
   not thinned out by the phone's own scaling. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
h1,h2,h3,h4,.msg-empty b,.pane__head b,.masthead b,.brand b{
  letter-spacing:-.013em;
  text-wrap:balance;
  font-feature-settings:"kern" 1,"liga" 1;
}
time,.msg-b__time,.msg-b__meta,.m time,.vox__line,.kpi b,.statrow b,
.num,.hours i span{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
::selection{background:rgba(201,154,44,.28);color:#14261C}