/* CareTales Widget — input area, suggestions, hint, footer, mobile */

/* Input area */
#ct-input-area { padding:11px 13px; background:#fff; border-top:1px solid #f0f0f0; flex-shrink:0; }
#ct-input-3d { position:relative; padding-bottom:var(--ct-depth); }
#ct-input-shadow { pointer-events:none; position:absolute; left:0; right:0; bottom:0; top:var(--ct-depth); border-radius:var(--ct-radius); background:#e5e5e5; transition:background 0.1s ease-out; }
#ct-input-3d:focus-within #ct-input-shadow { background:var(--ct-accent-light); }

#ct-input-face { position:relative; z-index:1; display:flex; align-items:flex-end; background:#fafafa; border:2px solid #e5e5e5; border-radius:var(--ct-radius); transition:transform 0.1s ease-out, border-color 0.1s, background 0.1s; }
#ct-input-3d:focus-within #ct-input-face { transform:translateY(var(--ct-depth)); border-color:var(--ct-accent); background:#fff; }

#ct-input { flex:1; padding:10px 8px 10px 16px; border:none; background:transparent; outline:none; font-size:14px; color:#262626; min-width:0; resize:none; overflow-y:auto; line-height:1.5; min-height:38px; max-height:120px; display:block; }
#ct-input::placeholder { color:#a3a3a3; }
#ct-input:disabled { opacity:0.5; }

#ct-send { width:36px; height:36px; border-radius:50%; background:transparent; border:none; cursor:pointer; padding:0; margin:0 4px 0 0; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity 0.15s; }
#ct-send:hover:not(:disabled) { opacity:0.55; }
#ct-send:disabled { opacity:0.25; cursor:not-allowed; }
#ct-send img { display:block; }

/* Suggested prompts */
#ct-widget .ct-suggestions { display:flex; flex-direction:column; gap:14px; margin-top:6px; width:100%; }
#ct-widget .ct-suggestion-group { display:flex; flex-direction:column; gap:6px; }
#ct-widget .ct-suggestion-label { font-size:10px; font-weight:700; color:#a3a3a3; text-transform:uppercase; letter-spacing:0.06em; padding:0 2px; }
#ct-widget .ct-suggestion-items { display:flex; flex-direction:column; gap:5px; }

#ct-widget .ct-suggestion-btn {
  background:#fff; border:1px solid #e5e5e5; border-radius:max(8px,calc(var(--ct-radius) - 4px));
  padding:9px 13px calc(9px + var(--ct-depth)); font-size:13px; color:#404040;
  text-align:left; cursor:pointer; line-height:1.45; width:100%;
  box-shadow:0 var(--ct-depth) 0 #e5e5e5;
  transition:background 0.12s, border-color 0.12s, transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
#ct-widget .ct-suggestion-btn:hover { background:#f5f5f5; border-color:var(--ct-accent); transform:translateY(clamp(0px,var(--ct-depth),2px)); box-shadow:0 max(0px,calc(var(--ct-depth) - 2px)) 0 #e5e5e5; }
#ct-widget .ct-suggestion-btn:active { transform:translateY(var(--ct-depth)); box-shadow:none; }

/* Suggestion button bubble variants */
#ct-widget.ct-bubble-pill  .ct-suggestion-btn { border-radius:999px; }
#ct-widget.ct-bubble-sharp .ct-suggestion-btn { border-radius:4px; }

/* Input hint */
#ct-input-hint { display:flex; align-items:center; justify-content:space-between; padding:6px 2px 0; font-size:10px; color:#c4c4c4; letter-spacing:0.01em; gap:8px; user-select:none; }
.ct-kbd-hint { display:flex; align-items:center; gap:4px; flex-shrink:0; color:#c4c4c4; }
.ct-kbd { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:4px; border:1px solid #d4d4d4; background:#f5f5f5; font-size:10px; color:#8a8a8a; line-height:1; box-shadow:0 1px 0 #c8c8c8; }

/* Footer */
#ct-footer { display:flex; align-items:center; justify-content:center; gap:4px; padding:7px 16px 9px; background:#fff; border-top:1px solid #f5f5f5; flex-shrink:0; }
#ct-footer span,#ct-footer a { font-size:10px; font-weight:500; color:#d4d4d4; letter-spacing:0.02em; }
#ct-footer a { text-decoration:none; transition:color 0.15s; }
#ct-footer a:hover { color:#a3a3a3; }

/* Mobile */
@media (max-width:480px) {
  #ct-widget { bottom:16px; right:16px; }
  #ct-window { position:fixed; inset:0; width:100%; height:100%; border-radius:0; border:none; animation:ct-slide-up 0.28s cubic-bezier(0.34,1.2,0.64,1); }
  @keyframes ct-slide-up { from { transform:translateY(100%); opacity:0.85; } to { transform:translateY(0); opacity:1; } }
  #ct-messages { padding:16px 14px 20px; }
  #ct-fab { width:52px; height:52px; }
  #ct-widget #ct-messages .ct-msg { max-width:88%; }
  #ct-widget:has(#ct-window.ct-open) #ct-fab-3d { display:none; }
}