#lawnace-ai-widget,
#lawnace-ai-widget * {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

#lawnace-ai-widget {
    --la-purple:      #6559b1;
    --la-purple-dark: #4a3f99;
    --la-green:       #a9c33f;
    --la-green-dark:  #7a9a2a;
    --la-soft:        #f8faf6;
    --la-border:      #e2e7dd;
    --la-text:        #1f2a1f;
    --la-muted:       #667066;
    position: relative;
    z-index: 999999;
}

/* ── Launcher ── */
#la-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 62px;
    height: 62px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
    cursor: pointer;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
    animation: la-pulse-ring 2.8s ease-out 1.5s 3;
    padding: 0;
    overflow: hidden;
}

@keyframes la-pulse-ring {
    0%   { box-shadow: 0 8px 24px rgba(91,79,189,.35), 0 2px 8px rgba(0,0,0,.15), 0 0 0 0 rgba(91,79,189,.45); }
    60%  { box-shadow: 0 8px 24px rgba(91,79,189,.35), 0 2px 8px rgba(0,0,0,.15), 0 0 0 14px rgba(91,79,189,0); }
    100% { box-shadow: 0 8px 24px rgba(91,79,189,.35), 0 2px 8px rgba(0,0,0,.15), 0 0 0 0 rgba(91,79,189,0); }
}

#la-launcher:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 32px rgba(99,85,177,.45), 0 2px 8px rgba(0,0,0,.15);
}

#la-launcher-icon {
    font-size: 28px;
}

#la-dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 14px;
    height: 14px;
    background: #e53935;
    border: 2px solid #fff;
    border-radius: 50%;
}

/* ── Panel ── */
#la-panel {
    position: fixed;
    right: 24px;
    bottom: 96px;
    width: 420px;
    max-width: calc(100vw - 32px);
    height: min(620px, calc(100vh - 112px));
    max-height: calc(100vh - 112px);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    display: none;
    flex-direction: column;
    z-index: 999998;
    border: 1px solid #dfe5da;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

#la-panel.open {
    display: flex;
    animation: la-panel-in .22s ease-out both;
}

@keyframes la-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
#la-header {
    background: linear-gradient(150deg, #12103a 0%, #3b3294 55%, #5b4fbd 100%);
    color: #fff;
    padding: 14px 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

#la-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b4fbd, #8b7de0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.25);
}

#la-header-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
}

#la-header-sub {
    font-size: 11px;
    line-height: 1.3;
    opacity: .8;
    margin-top: 3px;
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 5px;
}

#la-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(74,222,128,.25);
    flex-shrink: 0;
}

#la-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s ease;
    flex-shrink: 0;
}

#la-close:hover {
    background: rgba(255,255,255,.22);
}

/* ── Body ── */
#la-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f4f5f8;
    padding: 10px;
    position: relative;
}

#la-body::-webkit-scrollbar        { width: 6px; }
#la-body::-webkit-scrollbar-thumb  { background: #bfc8b8; border-radius: 999px; }

/* ── Disclaimer — hidden ── */
.la-disclaimer {
    display: none;
}

/* ── Start card ── */
.la-start-card {
    background: #fff;
    border: 1px solid var(--la-border);
    border-radius: 12px;
    padding: 10px 11px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
}

.la-start-eyebrow {
    color: var(--la-green-dark);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}

.la-start-title {
    font-size: 18px;
    line-height: 1.2;
    color: var(--la-text);
    font-weight: 500;
    margin-bottom: 2px;
}

.la-start-sub {
    color: var(--la-muted);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 300;
    margin-bottom: 9px;
}

/* ── Quick-reply chips (start screen) ── */
.la-chip-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.la-chip {
    border: 1px solid var(--la-purple);
    border-radius: 20px;
    background: #fff;
    color: var(--la-purple);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 4px;
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la-chip:hover {
    background: var(--la-purple);
    color: #fff;
}

/* ── Route choice grid (sub-menu screen) ── */
.la-choice-grid {
    display: grid;
    gap: 6px;
}

.la-choice {
    width: 100%;
    border: 1px solid #d5ddd0;
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: all .15s ease;
}

.la-choice:hover {
    background: var(--la-purple-dark);
    border-color: var(--la-purple-dark);
    color: #fff;
}

.la-choice:hover .la-choice-main,
.la-choice:hover .la-choice-sub,
.la-choice:hover .la-choice-arrow {
    color: #fff;
}

.la-choice:hover .la-choice-icon {
    background: #fff;
    color: var(--la-purple-dark);
}

.la-choice-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--la-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
    transition: all .15s ease;
}

.la-choice-main {
    display: block;
    color: #1e321e;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
}

.la-choice-sub {
    display: block;
    color: #667066;
    font-size: 11px;
    font-weight: 300;
    margin-top: 1px;
    line-height: 1.2;
}

.la-choice-arrow {
    margin-left: auto;
    color: #777;
    font-size: 22px;
    font-weight: 300;
}

/* ── Chat bubbles ── */
.la-row {
    display: flex;
    margin: 0 0 11px;
}

.la-row.user {
    justify-content: flex-end;
}

.la-bubble {
    max-width: 86%;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 300;
}

/* Paragraph spacing inside AI bubbles */
.la-bubble p {
    margin: 0 0 9px;
}
.la-bubble p:last-child {
    margin-bottom: 0;
}

.la-bubble.ai {
    background: #fff;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.06);
    color: var(--la-text);
    border-bottom-left-radius: 4px;
}

.la-bubble.user {
    background: linear-gradient(135deg, #5b4fbd, #7b6fd4);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(91,79,189,.3);
}

/* ── AI option buttons ── */
.la-options {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.la-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid #d5ddd0;
    color: #1f2a1f;
    background: #fff;
    border-radius: 10px;
    padding: 10px 11px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all .15s ease;
}

.la-option:hover {
    background: var(--la-purple-dark);
    border-color: var(--la-purple-dark);
    color: #fff;
}

.la-option:hover .la-option-main,
.la-option:hover .la-option-sub,
.la-option:hover .la-option-arrow {
    color: #fff;
}

.la-option:hover .la-option-icon {
    background: #fff;
    color: var(--la-purple-dark);
}

.la-option-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--la-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.la-option-main  { display: block; font-size: 14px; font-weight: 400; }
.la-option-sub   { display: block; font-size: 11px; color: var(--la-muted); font-weight: 300; margin-top: 2px; }
.la-option-arrow { margin-left: auto; color: #777; font-size: 20px; }

/* ── Input area ── */
#la-input-wrap {
    display: flex;
    gap: 8px;
    padding: 9px 10px;
    border-top: 1px solid #e1e7dc;
    background: #fff;
    flex-shrink: 0;
}

#la-input {
    flex: 1;
    resize: none;
    min-height: 42px;
    max-height: 76px;
    border-radius: 9px;
    border: 1px solid #d6ddd1;
    padding: 11px 12px;
    font-size: 15px;
    font-weight: 300;
    outline: none;
    background: #fff;
    color: #1f2a1f;
}

#la-input:focus {
    border-color: var(--la-purple);
}

#la-send {
    width: 46px;
    height: 42px;
    border: none;
    border-radius: 9px;
    background: var(--la-purple);
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#la-send:hover    { background: var(--la-purple-dark); }
#la-send:disabled { background: #cbd5c0; cursor: not-allowed; }

/* ── Pay Bill Button ── */
.la-pay-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 18px;
    background: #e53935;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none !important;
    letter-spacing: .3px;
}
.la-pay-btn:hover {
    background: #c62828;
}

/* ── Footer ── */
#la-footer {
    padding: 9px;
    font-size: 11px;
    font-weight: 300;
    text-align: center;
    color: #4d5b4a;
    background: #f5f8f1;
    border-top: 1px solid #e1e7dc;
    flex-shrink: 0;
}

#la-footer-phone {
    color: var(--la-purple);
    font-weight: 700;
    text-decoration: underline;
}

#la-disclaimer {
    padding: 4px 12px 8px;
    font-size: 9.5px;
    line-height: 1.35;
    font-weight: 300;
    text-align: center;
    color: #8a948a;
    background: #f5f8f1;
}

#la-disclaimer a {
    color: #8a948a;
    text-decoration: underline;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    #la-panel {
        right: 10px;
        left: 10px;
        width: auto;
        bottom: 84px;
        height: calc(100vh - 102px);
        max-height: calc(100vh - 102px);
        border-radius: 16px;
    }

    #la-launcher {
        right: 16px;
        bottom: 16px;
        width: 60px;
        height: 60px;
    }

    #la-header        { padding: 13px; }
    #la-header-title  { font-size: 16px; }
    #la-header-sub    { font-size: 12px; }
    .la-start-title   { font-size: 20px; }
    .la-choice        { padding: 9px 10px; }
    .la-choice-main   { font-size: 15px; }
    .la-choice-sub    { font-size: 11px; }
    .la-bubble        { max-width: 92%; }
}

/* ── Message timestamps ── */
.la-timestamp {
    font-size: 10px;
    color: #b0b8ac;
    margin-top: 3px;
    padding: 0 2px;
    line-height: 1;
}

.la-row.user .la-timestamp { text-align: right; }
.la-row.ai  .la-timestamp { text-align: left; padding-left: 4px; }

/* ── Typing animation ── */
.la-typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 16px;
    min-width: 52px;
}

.la-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bbb;
    animation: la-bounce 1.2s infinite ease-in-out;
}

.la-typing-dot:nth-child(1) { animation-delay: 0s; }
.la-typing-dot:nth-child(2) { animation-delay: .18s; }
.la-typing-dot:nth-child(3) { animation-delay: .36s; }

@keyframes la-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30%            { transform: translateY(-6px); opacity: 1; }
}

/* ── Photo upload button ── */
#la-photo-btn {
    width: 42px;
    height: 42px;
    border: 2px solid var(--la-purple);
    border-radius: 9px;
    background: var(--la-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s ease;
}

#la-photo-btn:hover {
    background-color: var(--la-purple-dark);
    border-color: var(--la-purple-dark);
}

#la-photo-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Proactive nudge bubble ── */
#la-nudge {
    position: fixed;
    right: 24px;
    bottom: 100px;
    background: #fff;
    border-radius: 14px;
    padding: 13px 15px 13px 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    max-width: 230px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
    color: #1f2a1f;
    z-index: 999997;
    border: 1px solid #e0e5da;
    cursor: pointer;
    animation: la-nudge-in .4s ease;
}

#la-nudge::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-right: 1px solid #e0e5da;
    border-bottom: 1px solid #e0e5da;
    transform: rotate(45deg);
}

#la-nudge-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

#la-nudge-close:hover { color: #555; }
#la-nudge-text { padding-right: 16px; font-weight: 400; }

@keyframes la-nudge-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.la-photo-preview {
    margin-top: 8px;
    position: relative;
    display: inline-block;
}

.la-photo-preview img {
    max-width: 180px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid var(--la-border);
    display: block;
}

.la-photo-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e53935;
    color: #fff;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.la-bubble img.la-msg-photo {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 6px;
    display: block;
}

/* ── Conversation rating ── */
.la-rating-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

.la-rating-btn {
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: #fff;
    color: #888;
    font-size: 13px;
    padding: 3px 9px;
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.la-rating-btn:hover { border-color: var(--la-purple); color: var(--la-purple); }
.la-rating-btn.rated { background: #f0eeff; border-color: var(--la-purple); color: var(--la-purple); cursor: default; }
.la-rating-thanks { font-size: 11px; color: #888; }