:root {--font-primary: "Inter", sans-serif; --brand:#0f766e; --brand-dark:#115e59; --brand-light:#ccfbf1; --bg:#f8fafc; }

/* Base */
html, body { height:100%; }
body { background:var(--bg); font-family:var(--font-primary); padding-bottom:80px; }
body.no-tabs { padding-bottom:0; }
body.is-chat .chat-container { min-height:100svh; height:100dvh; }

/* Utilities > Brand */
.brand { color:var(--brand); }
.bg-brand { background:var(--brand) !important; color:#ffffff; }
.text-brand { color:var(--brand); }

.btn {border-radius:30px;}

/* Buttons > Primary */
.btn-brand { background:var(--brand); color:#ffffff; border:none; }
.btn-brand:hover { background:var(--brand-dark); color:#ffffff; }
.btn-brand:focus, .btn-brand:active { background:var(--brand-dark) !important; color:#ffffff !important; }

/* Buttons > Outline */
.btn-outline-brand { border:1px solid var(--brand); color:var(--brand); background:transparent; }
.btn-outline-brand:hover { background:var(--brand); color:#ffffff; }

/* Forms */
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:#334155; }
.field-help { margin-top:6px; font-size:11px; line-height:1.4; color:#64748b; }
.section-help { margin:-6px 0 12px; font-size:12px; line-height:1.45; color:#64748b; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow:0 0 0 3px rgba(15,118,110,.18) !important; border-color:#2aa198; }
.form-check-input { border-color:#94a3b8; }
.form-check-input:checked, .form-check-input:indeterminate { background-color:var(--brand); border-color:var(--brand); }
.form-check-input:focus { border-color:var(--brand); }

/* Forms > Input Group */
.input-group:focus-within { border-radius:.375rem; box-shadow:0 0 0 3px rgba(15,118,110,.12); }
.input-group:focus-within .form-control, .input-group:focus-within .btn { box-shadow:none !important; }
.input-group > .btn { background:var(--bs-body-bg); color:#64748b; border-color:var(--bs-border-color); transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,color .15s ease-in-out,background-color .15s ease-in-out; }
.input-group > .btn:hover, .input-group > .btn:active, .input-group > .btn.show { background:var(--bs-body-bg); color:#334155; border-color:var(--bs-border-color); }
.input-group > .btn:focus, .input-group > .btn:focus-visible { background:var(--bs-body-bg); color:#334155; border-color:#2aa198; }

/* Section > Header */
.app-header { background:var(--brand); color:#ffffff; padding:5px 15px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:50; box-shadow:0 2px 8px rgba(0,0,0,.08); min-height:50px; }
.app-header h1 { font-size:17.6px; margin:0; font-weight:600; }
.app-header .back-btn { background:transparent; border:none; color:#ffffff; font-size:20px; padding:10px; line-height:1; }
.app-header a.back-btn { text-decoration:none; }

/* Section > Layout */
.screen { padding:16px; max-width:560px; margin:0 auto; }
.screen-intro { text-align:center; max-width:420px; margin:0 auto; }
.has-tabs { padding-bottom:80px; }

/* Section > Branding */
.logo-big { font-size:40px; font-weight:800; color:var(--brand); text-align:center; letter-spacing:-1px; }
.subtitle { font-size:22px; color:#334155; margin-bottom:8px; }

/* Section > Pets */
.pet-card { display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px; background:#ffffff; border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:12px; cursor:default; }
a.pet-card { color:inherit; text-decoration:none; }
.pet-avatar { width:140px; height:140px; border-radius:50%; background:var(--brand-light); display:flex; align-items:center; justify-content:center; font-size:28.8px; overflow:hidden; flex-shrink:0; }
.pet-avatar img { width:100%; height:100%; object-fit:cover; }
.pet-info { flex:1; min-width:0; text-align:center; }
.pet-info .name { font-weight:600; color:#0f172a; font-size:24px; }
.pet-info .species { font-size:13.6px; color:#64748b; }
.pet-add-placeholder { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px; background:#fff; background-size:100% 100%; border:2px dashed #cbd5e1; border-radius:14px; color:#475569; text-decoration:none; font-weight:600; margin-top:20px; }
.pet-add-placeholder .icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#ffffff; color:var(--brand); border:1px solid #dbeafe; }
.pet-add-placeholder:hover { color:#334155; border-color:#94a3b8; }

/* Section > Floating Action */
.fab { position:fixed; bottom:84px; right:24px; width:60px; height:60px; border-radius:50%; background:var(--brand); color:#ffffff; border:none; font-size:28.8px; box-shadow:0 4px 14px rgba(15,118,110,.4); display:flex; align-items:center; justify-content:center; z-index:40; text-decoration:none; }
.fab i { position:absolute; top:46%; transform:translate(0, -50%); }
.fab:hover { color:#ffffff; background:var(--brand-dark); }

/* Section > Chat */
.chat-container { display:flex; flex-direction:column; min-height:100svh; height:100dvh; }
.chat-header {position:fixed;z-index:3;top:0;width:100%; display:flex; align-items:center; gap:10px; padding:12px 16px; background:#ffffff; border-bottom:1px solid #e2e8f0; }
.chat-messages { flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; padding:16px; display:flex; flex-direction:column; gap:10px; padding-top:90px; padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
.chat-bottom-anchor { flex:0 0 0; width:100%; height:0; overflow:hidden; }
.bubble { max-width:78%; padding:10px 14px; border-radius:18px; font-size:15.2px; word-wrap:break-word; line-height:1.4; }
.bubble.user { align-self:flex-end; background:var(--brand); color:#ffffff; border-bottom-right-radius:4px; }
.bubble.ai { align-self:flex-start; background:#ffffff; color:#0f172a; border:1px solid #e2e8f0; border-bottom-left-radius:4px; }
.bubble.filler { font-style:italic; color:#64748b; background:transparent; border:none; }
.bubble-voice { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.voice-toggle { width:34px; height:34px; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }
.bubble.user .voice-toggle { background:#ffffff; color:var(--brand); }
.bubble.ai .voice-toggle { background:var(--brand-light); color:var(--brand-dark); }
.voice-content { flex:1; min-width:0; }
.voice-wave { height:24px; border-radius:999px; background-repeat:repeat-x; background-position:0 50%; background-size:auto 24px; opacity:.75; }
.bubble.user .voice-wave { background-image:url("/assets/frontend/img/voice-bars-light.svg"); }
.bubble.ai .voice-wave { background-image:url("/assets/frontend/img/voice-bars-dark.svg"); }
.voice-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; font-size:11px; opacity:.9; }
.bubble.user .voice-meta { color:#e6fffb; }
.bubble.ai .voice-meta { color:#64748b; }
.bubble-voice.is-playing .voice-wave { opacity:1; animation:voiceWaveShift 3s linear infinite; }
.bubble-file-upload { background:var(--brand); color:#ffffff; display:flex; gap:10px; align-items:flex-start; }
.bubble.user.bubble-image-upload { background:transparent; color:#ffffff; display:flex; gap:10px; align-items:flex-start;padding:0; }
.bubble-image-upload { flex-direction:column; gap:8px; }
.uploaded-image-wrap { width:100%; border-radius:12px; overflow:hidden; border:0; background:#0a4f4b; }
.uploaded-image-preview { width:100%; max-height:180px; object-fit:cover; display:block; }
.uploaded-file-icon { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.17); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.uploaded-meta { display:flex; flex-direction:column; gap:2px; min-width:0; }
.uploaded-title { font-size:12px; line-height:1.2; font-weight:600; word-break:break-word; }
.uploaded-size { font-size:11px; opacity:.88; }
.disclaimer { font-size:11.52px; color:#94a3b8; margin-top:4px; font-style:italic; }
.chat-input { display:flex; align-items:flex-end; gap:8px; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); background:#ffffff; border-top:1px solid #e2e8f0; position:fixed; bottom:0; width:100%; }
.chat-input textarea { flex:1; min-height:38px; max-height:120px; resize:none; overflow-y:auto; line-height:1.35; }
.chat-input.is-recording .form-group { display:none; }
.chat-recording-track { flex:1; min-height:38px; border:1px solid #dbe5ef; border-radius:.375rem; background:#f8fafc; padding:8px 10px; display:flex; align-items:center; gap:8px; }
.recording-dot { width:8px; height:8px; border-radius:50%; background:#ef4444; animation:recordBlink 1s ease-in-out infinite; }
.recording-wave { flex:1; height:18px; border-radius:999px; background-repeat:repeat-x; background-position:0 50%; background-size:auto 18px; background-image:url("/assets/frontend/img/voice-bars-dark.svg"); opacity:.92; animation:recordingWaveShift 2.6s linear infinite; }
.recording-time { font-size:12px; color:#64748b; letter-spacing:.03em; min-width:34px; text-align:right; }
.chat-upload-menu { position:absolute; left:10px; bottom:calc(100% + 8px); width:min(260px, calc(100% - 116px)); background:#ffffff; border:1px solid #dbe5ef; border-radius:12px; box-shadow:0 8px 28px rgba(15,23,42,.14); padding:6px; display:flex; flex-direction:column; gap:2px; z-index:30; }
.chat-upload-option { display:flex; align-items:center; gap:10px; width:100%; border:none; background:transparent; border-radius:8px; text-align:left; padding:10px 8px; color:#0f172a; font-size:14px; }
.chat-upload-option i { width:18px; color:var(--brand); }
.chat-upload-option:hover,
.chat-upload-option:focus-visible { background:#f0fdfa; color:#115e59; }

@supports not (height:100dvh) {
	body.is-chat .chat-container,
	.chat-container { height:100vh; min-height:100vh; }
}

/* Section > Documents */
.upload-zone { border:2px dashed #cbd5e1; border-radius:12px; padding:32px 16px; text-align:center; color:#64748b; background:#ffffff; }
.upload-zone.drag { border-color:var(--brand); background:var(--brand-light); }
.doc-item { display:flex; align-items:center; gap:10px; padding:10px; background:#ffffff; border-radius:10px; margin-bottom:8px; border:1px solid #e2e8f0; }
.doc-item .icon { font-size:22.4px; color:var(--brand); }

/* Section > Summary */
.summary-card { background:#ffffff; border-radius:12px; padding:16px; margin-bottom:10px; border-left:4px solid var(--brand); }
.summary-card .date { font-size:12.48px; color:#94a3b8; }
.mini-stat { background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; padding:12px; }
.mini-stat .label { font-size:12.48px; color:#64748b; }
.mini-stat .value { font-weight:700; color:#0f172a; font-size:12px; }

/* Section > Tabs */
.tab-bar { position:fixed; bottom:0; left:0; right:0; background:#ffffff; border-top:1px solid #e2e8f0; display:flex; justify-content:space-around; padding:8px 0; z-index:50; box-shadow:0 0 20px #e2e8f0;border-radius:20px 20px 0 0;}
.tab-bar a { flex:1; text-align:center; color:#64748b; text-decoration:none; font-size:12px; padding:4px; }
.tab-bar a.active { color:var(--brand); }
.tab-bar a .icon { display:block; font-size:22.4px; line-height:1; }

/* Section > Cards */
.link-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; color:#0f172a; text-decoration:none; margin-bottom:10px; }
.link-card:hover { color:#0f172a; border-color:#99f6e4; }
.static-note { font-size:13.12px; color:#64748b; background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; }

/* Section > Empty State */
.empty-state { text-align:center; padding:40px 20px; color:#64748b; }
.empty-state .icon { font-size:48px; margin-bottom:12px; }

/* Section > Legal */
.legal-text p { color:#475569; }

/* Section > Login */
.login-decor { display:flex; justify-content:center; align-items:flex-end; gap:12px; margin-bottom:16px; position:relative; min-height:72px; }


/* Animations */
@keyframes voiceWaveShift { 0% { background-position:0 50%; } 100% { background-position:84px 50%; } }
@keyframes recordingWaveShift { 0% { background-position:0 50%; } 100% { background-position:84px 50%; } }
@keyframes recordBlink { 0%, 100% { opacity:1; } 50% { opacity:.3; } }

/* Responsive > Desktop */
@media (min-width:768px) { .login-decor { gap:18px; min-height:88px; margin-bottom:18px; } .login-decor-img { width:68px; height:68px; } }