/* Smartify Chat - minimal responsive styles */
:root{
  --sfi-size: 64px;
  --sfi-size-sm: 56px;
  --sfi-gap: 16px;
  --sfi-radius: 18px;
  --sfi-primary: #2563eb;
  --sfi-z: 2147483000;
  --sfi-panel-w: min(420px, 92vw);
  --sfi-vh: 100vh;
  --sfi-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.smartify{ position:fixed; inset:auto var(--sfi-gap) calc(env(safe-area-inset-bottom) + var(--sfi-gap)) auto; z-index:var(--sfi-z); }
.smartify.sfi-left{ inset:auto auto calc(env(safe-area-inset-bottom) + var(--sfi-gap)) var(--sfi-gap); }
.smartify.sfi--hidden{ opacity:0; pointer-events:none; transition:opacity .2s; }
.smartify.sfi--shown{ opacity:1; pointer-events:auto; }

.sfi-btn{
  width:var(--sfi-size-sm); height:var(--sfi-size-sm);
  border-radius:999px; border:none; cursor:pointer;
  box-shadow:var(--sfi-shadow); background:#fff; display:grid; place-items:center;
}
@media (min-width:768px){
  .sfi-btn{ width:var(--sfi-size); height:var(--sfi-size); }
}
.sfi-btn:focus{ outline:2px solid var(--sfi-primary); outline-offset:2px; }
.sfi-btn-icon{ width:70%; height:70%; object-fit:contain; border-radius:50%; }

.sfi-panel{
  position:fixed; right:var(--sfi-gap); bottom:calc(env(safe-area-inset-bottom) + var(--sfi-gap) + var(--sfi-size-sm) + 10px);
  width:var(--sfi-panel-w); max-height:calc(var(--sfi-vh) - 110px);
  background:#fff; color:#0f172a; border-radius:var(--sfi-radius); box-shadow:var(--sfi-shadow);
  display:none; overflow:hidden;
}
.smartify.sfi-left .sfi-panel{ left:var(--sfi-gap); right:auto; }
@media (max-width:480px){
  .sfi-panel{
    left:var(--sfi-gap); right:var(--sfi-gap); width:auto;
    bottom:calc(env(safe-area-inset-bottom) + var(--sfi-gap));
    max-height:calc(var(--sfi-vh) - 80px);
  }
}

.sfi-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:linear-gradient(0deg,#fff,#f8fafc); border-bottom:1px solid #e5e7eb; }
.sfi-brand{ display:flex; gap:10px; align-items:center; }
.sfi-brand-icon{ width:24px; height:24px; border-radius:999px; object-fit:cover; }
.sfi-brand-name{ font-weight:600; font-size:14px; }
.sfi-close{ border:none; background:transparent; font-size:18px; cursor:pointer; }

.sfi-body{ padding:12px; height:min(56vh, 520px); overflow:auto; }
.sfi-inputbar{ display:flex; align-items:center; gap:8px; padding:10px; border-top:1px solid #e5e7eb; background:#fff; }
.sfi-input{ flex:1; min-width:0; border:1px solid #d1d5db; border-radius:12px; padding:10px 12px; font-size:14px; }
.sfi-send{ border:none; background:var(--sfi-primary); color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer; }
.sfi-mic{ border:1px solid #d1d5db; background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer; }

.sfi-voice{ display:none; padding:12px; border-top:1px solid #e5e7eb; background:#fff; }
.sfi-voice .sfi-audio{ width:100%; margin:8px 0; }
.sfi-voice-actions{ display:flex; gap:8px; justify-content:flex-end; }
.sfi-voice-send{ background:var(--sfi-primary); color:#fff; border:none; border-radius:10px; padding:8px 12px; }
.sfi-voice-redo,.sfi-voice-cancel{ background:#f3f4f6; border:none; border-radius:10px; padding:8px 12px; }

@media (prefers-color-scheme: dark){
  .sfi-panel{ background:#0b1020; color:#e5e7eb; border:1px solid #1f2937; }
  .sfi-head{ background:linear-gradient(0deg,#0b1020,#0e1328); border-color:#1f2937; }
  .sfi-input{ background:#0f172a; color:#e5e7eb; border-color:#334155; }
  .sfi-mic{ background:#111827; border-color:#334155; color:#e5e7eb; }
  .sfi-voice{ background:#0b1020; border-color:#1f2937; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}