/* =====================================================================
   BELSense — login / plant picker / smiley feedback styles
   Loaded AFTER beltalk.css so it only adds new pieces and overrides the
   old feedback row. Your original beltalk.css is left untouched.
   Uses the same CSS variables already defined in beltalk.css.
   ===================================================================== */

/* ---------------- Smiley feedback (upgrades the old ▲▼ row) ---------- */
.msg-meta .fb { display: flex; align-items: center; gap: 4px; }
.msg-meta .fb-label { color: var(--muted); margin-right: 2px; font-family: var(--mono); }
.msg-meta .fb button {
    background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
    padding: 2px 3px; border-radius: 8px; filter: grayscale(0.6); opacity: 0.7; color: inherit;
    transition: transform .15s ease, filter .15s ease, opacity .15s ease, background .15s ease;
}
.msg-meta .fb button:hover { transform: scale(1.25); filter: grayscale(0); opacity: 1; }
.msg-meta .fb button.active { filter: grayscale(0); opacity: 1; background: var(--accent-soft); transform: scale(1.15); }
.msg-meta .fb button:disabled { cursor: default; }

/* ---------------- Account (login) button in the header -------------- */
.account { display: flex; align-items: center; }
.acct-btn {
    padding: 8px 16px; border: none; border-radius: 10px; cursor: pointer; font-weight: 700;
    font-size: 13.5px; font-family: var(--sans); color: #fff;
    background: linear-gradient(135deg, var(--accent), #4a90ff);
    box-shadow: 0 4px 14px rgba(27,110,243,.28);
}
.acct-btn:hover { transform: translateY(-1px); }
.acct-info { display: flex; align-items: center; gap: 10px; }
.acct-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.acct-logout {
    padding: 6px 12px; border: 1px solid var(--glass-brdr); border-radius: 9px; cursor: pointer;
    background: var(--surface); color: var(--accent-d); font-size: 12.5px; font-weight: 600; font-family: var(--sans);
}
.acct-logout:hover { border-color: rgba(27,110,243,.5); }

/* ---------------- Plant picker (cards) ------------------------------ */
.plant-bar {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius);
}
.plant-bar-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.plant-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.plant-card {
    display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
    min-width: 150px; padding: 10px 13px; border-radius: 12px; background: var(--surface);
    border: 1.5px solid var(--glass-brdr); font-family: var(--sans); color: var(--text);
    transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.plant-card:hover { transform: translateY(-1px); border-color: rgba(27,110,243,.5); background: var(--accent-soft); }
.plant-card.active {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(27,110,243,.14);
}
.plant-card .pc-name { font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.plant-card .pc-city { font-size: 11.5px; color: var(--muted); }
.plant-card .pc-status { font-size: 11px; font-weight: 700; font-family: var(--mono); margin-top: 3px; }
.plant-card .pc-status.on { color: #12a150; }
.plant-card .pc-status.off { color: var(--muted); }

/* ---------------- Login modal --------------------------------------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(9,20,38,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-card {
    position: relative; width: 100%; max-width: 400px; border-radius: 18px; padding: 28px 26px;
    background: var(--surface); box-shadow: 0 24px 60px rgba(15,39,68,.3);
}
.modal-close {
    position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 26px;
    line-height: 1; cursor: pointer; color: var(--muted);
}
.modal-close:hover { color: var(--text); }
.modal-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.modal-head h3 { font-size: 18px; margin: 0 0 2px; }
.modal-head p { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin: 0; }
.login-error {
    background: #fdeeee; color: #c0343b; border: 1px solid rgba(229,72,77,.3);
    padding: 10px 13px; border-radius: 10px; font-size: 13px; margin-bottom: 14px;
}
.lf-row { margin-bottom: 14px; }
.lf-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.lf-row input {
    width: 100%; padding: 11px 13px; border-radius: 10px; background: var(--surface);
    border: 1.5px solid var(--glass-brdr); color: var(--text); font-family: var(--sans); font-size: 15px;
}
.lf-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(27,110,243,.12); }
.lf-submit {
    width: 100%; padding: 13px; border: none; border-radius: 12px; cursor: pointer; font-weight: 700;
    font-size: 15px; font-family: var(--sans); color: #fff;
    background: linear-gradient(135deg, var(--accent), #4a90ff); box-shadow: 0 6px 18px rgba(27,110,243,.28);
}
.lf-submit:hover { transform: translateY(-1px); }
.lf-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.lf-note { font-size: 11.5px; color: var(--muted); margin-top: 14px; text-align: center; line-height: 1.5; }

@media (max-width: 560px) {
    .acct-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .plant-bar { padding: 9px 12px; }
}

/* ---------------- RTL bubbles (Arabic / Urdu / etc.) ---------------- */
.bubble.rtl { direction: rtl; text-align: right; }
.bubble.rtl ul, .bubble.rtl ol { padding-left: 0; padding-right: 20px; }
.bubble.rtl li.mk { margin-left: 0; margin-right: -18px; }
/* Keep the feedback row (confidence + rating) left-to-right for consistency */
.bubble.rtl .msg-meta { direction: ltr; justify-content: flex-start; }

/* All-plants chip in the plant picker */
.plant-card.plant-all { border-style: dashed; }
.plant-card.plant-all .pc-name { color: var(--brand, #1b6ef3); }
.plant-card.plant-all.active { border-style: solid; }

/* ---- "WhatsApp me my plant report" button ---- */
.wa-report {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px; border: none; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 6px 18px rgba(37, 211, 102, .32);
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
    margin-top: 10px;         /* sits inside a chat bubble, under the text */
}
.wa-report:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, .42); }
.wa-report:active:not(:disabled) { transform: translateY(0); }
.wa-report:disabled { opacity: .65; cursor: progress; }
.wa-report svg {
    width: 19px; height: 19px; flex: 0 0 auto;
    fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round;
}
@media (max-width: 640px) {
    .wa-report { width: 100%; justify-content: center; }
}

/* Slim variant: sits inside a plant answer bubble, so the WhatsApp option
   is visible on every plant reply without shouting. */
.wa-report.wa-slim {
    padding: 8px 13px; font-size: 12.5px; font-weight: 600;
    background: rgba(37, 211, 102, .12);
    color: #128C7E; box-shadow: none;
    border: 1px solid rgba(37, 211, 102, .35);
}
.wa-report.wa-slim svg { width: 16px; height: 16px; stroke: #128C7E; }
.wa-report.wa-slim svg path[fill="#fff"] { fill: #128C7E; }
.wa-report.wa-slim:hover:not(:disabled) {
    background: rgba(37, 211, 102, .2); transform: none;
    box-shadow: 0 4px 12px rgba(37, 211, 102, .22);
}

/* One-time WhatsApp linking code */
.wa-code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 30px; font-weight: 700; letter-spacing: 8px; text-align: center;
    padding: 14px 10px; margin: 10px 0; border-radius: 12px;
    background: rgba(37, 211, 102, .1); color: #128C7E;
    border: 1px dashed rgba(37, 211, 102, .45);
}

/* Plant-bar top row: label on the left, Link WhatsApp button on the right */
.plant-bar-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.plant-bar-top .plant-bar-label { margin: 0; flex: 1; min-width: 180px; }

.wa-link-btn {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 7px 12px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: #128C7E; background: rgba(37, 211, 102, .1);
    border: 1px solid rgba(37, 211, 102, .4);
    transition: background .15s ease, transform .15s ease;
}
.wa-link-btn:hover { background: rgba(37, 211, 102, .18); transform: translateY(-1px); }
.wa-link-btn:active { transform: translateY(0); }
.wa-link-btn svg { color: #128C7E; }
@media (max-width: 640px) {
    .wa-link-btn { width: 100%; justify-content: center; }
}

/* Linked state of the WhatsApp button */
.wa-link-btn.linked {
    background: rgba(37, 211, 102, .16);
    border-color: #25D366;
    color: #128C7E;
}
.wa-link-btn.linked::before { content: "✓ "; font-weight: 700; }

/* Unlink confirmation buttons */
.wa-confirm-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wa-danger {
    padding: 8px 14px; border: none; border-radius: 9px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: #fff;
    background: #dc3545;
}
.wa-danger:hover:not(:disabled) { background: #c82333; }
.wa-danger:disabled { opacity: .65; cursor: progress; }
.wa-cancel {
    padding: 8px 14px; border-radius: 9px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--text, #12233f); background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.12);
}
.wa-cancel:hover:not(:disabled) { background: rgba(0,0,0,.09); }