/* ==========================================================================
   input.css — Activity bar, reply bar, input area, send-logo mask.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   ACTIVITY + TOOL DRAWER + REPLY + INPUT
══════════════════════════════════════════════════════ */
#activity-bar {
  display: none;
  background: var(--s1); border-top: 1px solid var(--gb); flex-shrink: 0;
  animation: fadeIn .15s ease;
}
.act-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 22px; user-select: none;
}
.act-dots { display: flex; gap: 4px; align-items: center; }
.adot { width: 5px; height: 5px; border-radius: var(--rf); background: var(--g); }
#act-label { font-size: 11.5px; color: var(--t2); flex: 1; }
#act-toggle { font-size: 10px; color: var(--t3); flex-shrink: 0; }


/* Reply bar */
#reply-bar {
  display: none; padding: 7px 16px;
  background: var(--s1); border-top: 1px solid var(--b0); flex-shrink: 0;
}
.reply-inner { display: flex; align-items: center; gap: 9px; }
.reply-accent { width: 2px; align-self: stretch; background: var(--g); border-radius: 2px; flex-shrink: 0; min-height: 18px; }
.reply-text { flex: 1; font-size: 12px; color: var(--t2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-clear { color: var(--t2); font-size: 14px; padding: 2px 6px; border-radius: var(--r1); transition: color .15s; flex-shrink: 0; }
.reply-clear:hover { color: var(--t1); }

/* Input */
#input-area {
  padding: 12px 16px; background: var(--s1);
  border-top: 1px solid var(--b1); flex-shrink: 0;
}

/* Long-session nudge (shown when current session has 10+ turns) */
#long-session-nudge {
  display: flex; align-items: center; gap: 10px;
  background: #fff3cd; color: #856404;
  border: 1px solid #ffc107; border-radius: var(--r2);
  padding: 8px 12px; margin: 0 auto 10px;
  width: 100%; max-width: var(--content-max);
  font-size: 12.5px;
}
#long-session-nudge .lsn-icon { font-size: 14px; flex-shrink: 0; }
#long-session-nudge .lsn-text { flex: 1; line-height: 1.5; }
#long-session-nudge .lsn-new {
  background: #856404; color: #fff; border: none;
  padding: 5px 12px; border-radius: var(--r1);
  font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
#long-session-nudge .lsn-new:hover { background: #6b4d03; }
#long-session-nudge .lsn-dismiss {
  background: transparent; border: none; color: #856404;
  font-size: 14px; cursor: pointer; padding: 2px 6px;
  border-radius: var(--r1); transition: background .15s;
}
#long-session-nudge .lsn-dismiss:hover { background: rgba(133,100,4,0.1); }
.input-wrap {
  display: flex; gap: 9px; align-items: flex-end;
  background: var(--s2); border: 1px solid var(--b2);
  border-radius: var(--r3); padding: 9px 10px 9px 14px;
  transition: border-color .2s, background .25s;
  /* align with reading column */
  width: 100%; max-width: var(--content-max);
  margin-left: auto; margin-right: auto;
}
.input-wrap:focus-within { border-color: var(--gbs); background: var(--s3); }
#msg-input {
  flex: 1; background: none; color: var(--t1); border: none; outline: none;
  font-size: 14.5px; line-height: 1.55; resize: none;
  min-height: 22px; max-height: 120px; overflow-y: auto; direction: auto;
}
#msg-input::placeholder { color: var(--t3); }
#send-btn {
  width: 38px; height: 38px; border-radius: var(--rf);
  min-width: 36px; min-height: 36px; /* never collapse below logo minimum */
  background: transparent;
  border: 1.5px solid var(--gb);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; align-self: flex-end; padding: 0;
  transition: background .2s, border-color .22s, transform .12s, box-shadow .22s;
}
#send-btn:hover {
  background: var(--gd);
  border-color: var(--gl);
  box-shadow: 0 0 0 4px rgba(202,165,90,.10), 0 2px 12px rgba(202,165,90,.14);
  transform: scale(1.07);
}
[data-theme="light"] #send-btn:hover {
  box-shadow: 0 0 0 4px rgba(122,80,24,.10), 0 2px 12px rgba(122,80,24,.14);
}
#send-btn:active { transform: scale(.88); box-shadow: none; }
#send-btn:disabled { opacity: .28; cursor: default; transform: none; box-shadow: none; }
/* Logo mask — SVG shape used as CSS mask, colored by background property */
.send-logo-mask {
  display: block;
  width: 20px; height: 16px;
  background: var(--g);
  -webkit-mask: url('/assets/Logo.svg') center / contain no-repeat;
  mask: url('/assets/Logo.svg') center / contain no-repeat;
  transition: background .2s;
  flex-shrink: 0;
}
#send-btn:hover .send-logo-mask { background: var(--gl); }
#send-btn:disabled .send-logo-mask { background: var(--t3); }