/* Build 03B capture hierarchy from PrincipalGO brand system.
   GO Green = voice/capture, Sky Blue = photo/context, Soft White = commit action. */

/* Voice is the primary on-the-go input everywhere. */
.capture-actions #voiceButton,
.topbar #newCaptureTop,
.mic-wrap{
  background:#22D573;
  color:#052814;
  border:1px solid #43e68a;
}

.capture-actions #voiceButton{
  box-shadow:0 3px 10px rgba(34,213,115,.20);
}

.capture-actions #voiceButton:hover,
.topbar #newCaptureTop:hover,
.mic-wrap:hover{
  background:#1fc66a;
  border-color:#56e99a;
  filter:none;
}

.capture-actions #voiceButton:focus-visible,
.topbar #newCaptureTop:focus-visible,
.mic-wrap:focus-visible{
  outline:3px solid #8cf0b9;
  outline-offset:3px;
}

.capture-actions #voiceButton[aria-pressed="true"],
.topbar #newCaptureTop[aria-pressed="true"],
.mic-wrap[aria-pressed="true"]{
  background:#16a95a;
  color:#fff;
  border-color:#71edaa;
  box-shadow:0 0 0 4px rgba(34,213,115,.18);
}

/* Photo is supporting visual context, using the official Sky Blue. */
.capture-actions #photoButton{
  background:#2196F3;
  color:#fff;
  border:1px solid #66b9fa;
  box-shadow:0 3px 10px rgba(33,150,243,.22);
}

.capture-actions #photoButton:hover{
  background:#1685dc;
  border-color:#83c7fb;
  filter:none;
}

.capture-actions #photoButton:focus-visible{
  outline:3px solid #9fd3fc;
  outline-offset:3px;
}

.capture-actions #photoButton.photo-active{
  background:#126fbc;
  color:#fff;
  border-color:#a7dcff;
  box-shadow:0 0 0 3px rgba(33,150,243,.16),0 4px 12px rgba(18,111,188,.24);
}

.capture-actions #photoButton.photo-active::after{
  content:'✓';
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-left:2px;
  border-radius:50%;
  background:#fff;
  color:#126fbc;
  font-size:.7rem;
  font-weight:900;
}

/* GO stays compact and its label shares the same vertical center as Tell GO and Photo. */
.capture-actions #sendButton{
  position:relative;
  width:96px;
  min-width:96px;
  min-height:44px;
  padding:12px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
  background:#FAFBFC;
  color:#0B1D33;
  border:1px solid #fff;
  box-shadow:0 4px 13px rgba(0,0,0,.16);
}

/* Match the wordmark treatment exactly: italic GO, with the arrow anchored 7px below the text. */
.capture-actions #sendButton .go-motion{
  position:relative;
  display:inline-block;
  font-style:italic;
  font-weight:800;
  line-height:1;
}

.capture-actions #sendButton .go-motion::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-7px;
  width:1.7em;
  height:.42em;
  transform:translateX(-50%);
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' fill='none'%3E%3Cpath d='M1 4h26' stroke='%2321c76a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='m23 1.3 4 2.7-4 2.7' stroke='%2321c76a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.capture-actions #sendButton::after{display:none!important}

.capture-actions #sendButton:hover{
  background:#fff;
  border-color:#dfe7ee;
  filter:none;
  transform:translateY(-1px);
}

/* The large microphone is a real voice CTA, not decoration. */
.mic-wrap{
  padding:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

/* Orange is the user's own state/attention cue. Synced stays a quiet status, not an action button. */
.sync-state{
  color:#ffd0a0;
}

.sync-state::before{
  background:#FF8500;
  box-shadow:0 0 0 3px rgba(255,133,0,.16);
}

.sync-state.sync-error{
  color:#f2c1c1;
}

.sync-state.sync-error::before{
  background:#ef6b6b;
  box-shadow:0 0 0 3px rgba(239,107,107,.12);
}

@media(max-width:600px){
  .capture-actions #voiceButton,
  .capture-actions #photoButton,
  .capture-actions #sendButton{
    box-shadow:none;
  }
  .capture-actions #sendButton{
    width:96px;
    min-width:96px;
    min-height:48px;
    align-self:flex-end;
  }
}