/* Hamrah Group 11.5A Dev2B — scoped messaging/composer/voice/upload polish */
:root {
  --g115b-fast: var(--hm-motion-fast, 140ms);
  --g115b-micro: var(--hm-motion-micro, 100ms);
  --g115b-standard: var(--hm-motion-standard, 190ms);
  --g115b-ease: var(--hm-ease-standard, cubic-bezier(.2,.72,.24,1));
  --g115b-enter: var(--hm-ease-enter, cubic-bezier(.16,1,.3,1));
}

/* One compact composer grid. Send and microphone share the final cell. */
#chatScreen .composer[data-dev2b-ready="true"] {
  position: relative;
  display: grid;
  grid-template-columns: 40px 40px minmax(0, 1fr) 46px;
  align-items: end;
  gap: 3px;
  contain: layout style;
}
#chatScreen .composer[data-dev2b-ready="true"] #attachButton { grid-column: 1; }
#chatScreen .composer[data-dev2b-ready="true"] #emojiButton { grid-column: 2; }
#chatScreen .composer[data-dev2b-ready="true"] #messageInput { grid-column: 3; min-width: 0; resize: none; }
#chatScreen .composer[data-dev2b-ready="true"] #voiceButton,
#chatScreen .composer[data-dev2b-ready="true"] #sendButton {
  grid-column: 4;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  transition-property: opacity, transform, background-color, border-color;
  transition-duration: var(--g115b-micro);
  transition-timing-function: var(--g115b-ease);
}
#chatScreen .composer[data-dev2b-ready="true"] :is(#voiceButton,#sendButton)[data-dev2b-visible="false"] {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  visibility: hidden;
}
#chatScreen .composer[data-dev2b-ready="true"] :is(#voiceButton,#sendButton)[data-dev2b-visible="true"] {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  visibility: visible;
}
#chatScreen .composer[data-dev2b-ready="true"] #voiceButton[data-dev2b-visible="true"] {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 7px 18px var(--accent-glow);
}
#chatScreen .composer[data-dev2b-ready="true"] #sendButton.dev2b-busy {
  opacity: .72;
  cursor: progress;
}
#chatScreen .composer[data-dev2b-ready="true"] #sendButton.dev2b-busy svg {
  opacity: .55;
}
#chatScreen .composer[data-dev2b-ready="true"] #sendButton.dev2b-busy::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: g115bSpin .72s linear infinite;
}
#chatScreen .composer[data-dev2b-ready="true"].dev2b-state-change {
  animation: g115bComposerState var(--g115b-fast) var(--g115b-enter);
}

.g115a-dev2b-composer-status {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 4px;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  font-size: .61rem;
  line-height: 1.4;
}
.g115a-dev2b-composer-status.hidden { display: none !important; }
.g115a-dev2b-composer-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--primary);
}
.g115a-dev2b-composer-status[data-state="sending"] i,
.g115a-dev2b-composer-status[data-state="uploading"] i,
.g115a-dev2b-composer-status[data-state="voice-sending"] i,
.g115a-dev2b-composer-status[data-state="voice-requesting"] i {
  animation: g115bStatusPulse 1s ease-in-out infinite;
}
.g115a-dev2b-composer-status[data-state="voice-recording"] i,
.g115a-dev2b-composer-status[data-state="voice-locked"] i,
.g115a-dev2b-composer-status[data-state="voice-paused"] i { background: #ff6170; }
.g115a-dev2b-composer-status[data-state="upload-failed"] i,
.g115a-dev2b-composer-status[data-state="voice-failed"] i { background: var(--danger, #ef5363); }

.g115a-dev2b-connection {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: calc(var(--g10-chat-header-height, 64px) + 7px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(88%, 430px);
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font-size: .62rem;
  pointer-events: auto;
}
.g115a-dev2b-connection.hidden { display: none !important; }
.g115a-dev2b-connection i { width: 7px; height: 7px; border-radius: 50%; background: #f2a745; }
.g115a-dev2b-connection[data-state="degraded"] { background: color-mix(in srgb, var(--primary, #168fd0) 10%, var(--surface, #fff)); }
.g115a-dev2b-connection[data-state="degraded"] i,
.g115a-dev2b-connection[data-state="reconnecting"] i { background: var(--primary, #168fd0); }
.g115a-dev2b-connection[data-state="offline"] i,
.g115a-dev2b-connection[data-state="failed"] i,
.g115a-dev2b-connection[data-state="permanently-failed"] i { background: var(--danger, #ef5363); }
.g115a-dev2b-connection button {
  min-height: 24px;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font: inherit;
  font-weight: 800;
}
.g115a-dev2b-connection button.hidden { display: none !important; }

.g115a-dev2b-floating-stack {
  position: absolute;
  z-index: 18;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(78px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.g115a-dev2b-new-messages,
.g115a-dev2b-pinned-shortcut {
  position: relative;
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 23%, var(--line));
  border-radius: 50%;
  color: color-mix(in srgb, var(--primary) 78%, var(--text));
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  box-shadow: 0 8px 24px rgba(4, 18, 31, .2), inset 0 1px 0 rgba(255,255,255,.1);
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  visibility: visible;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  transition: opacity 130ms ease, transform 150ms cubic-bezier(.2,.8,.2,1), background-color 120ms ease, border-color 120ms ease;
}
#chatScreen #g115aDev2bNewMessages.hidden {
  display: grid !important;
  opacity: 0;
  transform: translate3d(0,5px,0) scale(.94);
  visibility: hidden;
  pointer-events: none;
}
.g115a-dev2b-new-messages:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
  background: color-mix(in srgb, var(--surface) 86%, var(--primary) 14%);
}
.g115a-dev2b-pinned-shortcut { inline-size: 38px; block-size: 38px; color: var(--muted); }
.g115a-dev2b-pinned-shortcut svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; }
.g115a-dev2b-pinned-shortcut:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 34%, var(--line)); }
.g115a-dev2b-pinned-shortcut.hidden { display: none !important; }
.g115a-dev2b-new-messages:active { transform: translate3d(0,1px,0) scale(.96); }
.g115a-dev2b-new-messages:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 74%, #fff);
  outline-offset: 2px;
}
.g115a-dev2b-new-messages-icon {
  inline-size: 21px;
  block-size: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.g115a-dev2b-new-messages-count {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-end: -5px;
  min-inline-size: 19px;
  block-size: 19px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--primary) 30%, transparent);
  font-size: .56rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.g115a-dev2b-new-messages-count.hidden { display: none !important; }

@media (max-width: 720px) {
  .g115a-dev2b-floating-stack {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .g115a-dev2b-new-messages {
    inline-size: 40px;
    block-size: 40px;
    box-shadow: 0 7px 20px rgba(4, 18, 31, .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .g115a-dev2b-new-messages { transition: none !important; }
}

/* Short, grounded message transitions. Existing history never replays them. */
html[data-g115-dev2b="ready"] .message.message-new-in,
html[data-g115-dev2b="ready"] .message.message-new-out {
  animation-duration: var(--g115b-fast) !important;
  animation-timing-function: var(--g115b-enter) !important;
}
html[data-g115-dev2b="ready"] .message[data-dev2b-lifecycle="queued"] .bubble {
  opacity: .94;
}
html[data-g115-dev2b="ready"] .message[data-dev2b-lifecycle="queued"] .delivery-state {
  color: var(--muted);
}
html[data-g115-dev2b="ready"] .message[data-dev2b-lifecycle="failed"] .bubble {
  border-color: color-mix(in srgb, var(--danger, #ef5363) 45%, var(--line));
}
html[data-g115-dev2b="ready"] .message[data-dev2b-lifecycle="failed"] .delivery-state {
  min-height: 28px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger, #ef5363) 12%, transparent);
}
html[data-g115-dev2b="ready"] .delivery-state {
  transition-property: opacity, transform, color, background-color;
  transition-duration: var(--g115b-micro);
  transition-timing-function: var(--g115b-ease);
}
html[data-g115-dev2b="ready"] .message-removing {
  animation-duration: var(--g115b-fast) !important;
  animation-timing-function: var(--g115b-ease) !important;
}
html[data-g115-dev2b="ready"] .edit-banner.edit-banner-in,
html[data-g115-dev2b="ready"] .reply-banner.edit-banner-in {
  animation-duration: var(--g115b-fast) !important;
  animation-timing-function: var(--g115b-enter) !important;
}

/* Upload cards: truthful progress, low-cost visual updates, no animated blur. */
html[data-g115-dev2b="ready"] .upload-card {
  backdrop-filter: none;
  animation-duration: var(--g115b-fast);
  animation-timing-function: var(--g115b-enter);
}
html[data-g115-dev2b="ready"] .upload-progress i {
  transition-property: width;
  transition-duration: 90ms;
  transition-timing-function: linear;
}
html[data-g115-dev2b="ready"] .upload-card.done {
  animation-duration: var(--g115b-standard);
}

/* Voice recording uses the existing Voice Core state, with lighter motion. */
html[data-g115-dev2b="ready"] .voice-core-recorder {
  animation-duration: var(--g115b-fast);
  animation-timing-function: var(--g115b-enter);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
html[data-g115-dev2b="ready"] .voice-core-recorder.requesting {
  pointer-events: none;
}
html[data-g115-dev2b="ready"] .voice-core-recorder.paused .voice-core-live-wave {
  opacity: .38;
}
html[data-g115-dev2b="ready"] .voice-core-recorder.paused .voice-core-record-dot {
  animation-play-state: paused;
  opacity: .5;
}
html[data-g115-dev2b="ready"] .voice-core-recorder.locked {
  border-color: color-mix(in srgb, var(--primary) 48%, transparent);
}
html[data-g115-dev2b="ready"] .voice-core-cancel,
html[data-g115-dev2b="ready"] .voice-core-lock,
html[data-g115-dev2b="ready"] .voice-core-send,
html[data-g115-dev2b="ready"] .g9-record-preview button {
  transition-property: transform, opacity, background-color;
  transition-duration: var(--g115b-micro);
  transition-timing-function: var(--g115b-ease);
}
html[data-g115-dev2b="ready"] :is(.voice-core-cancel,.voice-core-lock,.voice-core-send,.g9-record-preview button):active {
  transform: scale(.96);
}
html[data-g115-dev2b="ready"] .g9-record-preview {
  animation: g115bPreviewIn var(--g115b-fast) var(--g115b-enter) both;
  backdrop-filter: none;
}

/* Reaction feedback is tiny and scoped. */
html[data-g115-dev2b="ready"] [data-g7-reaction]:active {
  transform: scale(.94);
}

@keyframes g115bComposerState {
  from { opacity: .92; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes g115bPreviewIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes g115bStatusPulse { 50% { opacity: .35; transform: scale(.78); } }
@keyframes g115bSpin { to { transform: rotate(360deg); } }

html[data-g115-motion-platform="mobile"] #chatScreen .composer[data-dev2b-ready="true"] {
  grid-template-columns: 38px 38px minmax(0,1fr) 46px;
}
html[data-g115-motion-platform="mobile"] .g115a-dev2b-connection {
  top: calc(var(--g10-chat-header-height, 60px) + 5px);
  max-width: 92%;
}

@media (max-width: 370px) {
  html[data-g115-motion-platform="mobile"] #chatScreen .composer[data-dev2b-ready="true"] {
    grid-template-columns: 38px minmax(0,1fr) 46px;
  }
  html[data-g115-motion-platform="mobile"] #chatScreen .composer[data-dev2b-ready="true"] #emojiButton { display: none !important; }
  html[data-g115-motion-platform="mobile"] #chatScreen .composer[data-dev2b-ready="true"] #messageInput { grid-column: 2; }
  html[data-g115-motion-platform="mobile"] #chatScreen .composer[data-dev2b-ready="true"] #voiceButton,
  html[data-g115-motion-platform="mobile"] #chatScreen .composer[data-dev2b-ready="true"] #sendButton { grid-column: 3; }
  .g115a-dev2b-composer-status { padding-inline: 9px; }
}

html[data-g115-motion-mode="reduced"] .g115a-dev2b-composer-status i,
html[data-g115-motion-mode="reduced"] #chatScreen .composer #sendButton.dev2b-busy::after,
html[data-g115-motion-mode="reduced"] .voice-core-record-dot {
  animation: none !important;
}
html[data-g115-motion-mode="reduced"] #chatScreen .composer.dev2b-state-change,
html[data-g115-motion-mode="reduced"] .g9-record-preview,
html[data-g115-motion-mode="reduced"] .voice-core-recorder {
  transform: none !important;
  animation-name: none !important;
}
html[data-g115-motion-mode="reduced"] #chatScreen .composer :is(#voiceButton,#sendButton) {
  transform: none !important;
}

html[data-g115-motion-mode="off"] #chatScreen .composer :is(#voiceButton,#sendButton),
html[data-g115-motion-mode="off"] .delivery-state,
html[data-g115-motion-mode="off"] .upload-progress i,
html[data-g115-motion-mode="off"] .voice-core-recorder,
html[data-g115-motion-mode="off"] .g9-record-preview {
  transition: none !important;
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .g115a-dev2b-new-messages:hover,
  .g115a-dev2b-connection button:hover { filter: brightness(1.04); }
}