/* ── UniCarpool — Chat & Rating (Stitch v2) ─────────────────────────────
   Chat da Viagem · Avaliação
────────────────────────────────────────────────────────────────────────── */

/* ── Chat wrapper ────────────────────────────────────────────────────── */
.ucp-chat-wrap {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
    height: 80vh;
    min-height: 460px;
    border: 1px solid var(--ucp-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ucp-card-bg);
    box-shadow: var(--ucp-shadow-lg);
}

/* ── Chat header (forest green) ──────────────────────────────────────── */
.ucp-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #122011;
    color: #edffe6;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.ucp-chat-header-content {
    flex: 1;
    min-width: 0;
}

.ucp-chat-title {
    margin: 0 0 2px;
    font-size: var(--ucp-text-base);
    font-weight: 600;
    color: #edffe6;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.ucp-chat-title .ucp-route-from,
.ucp-chat-title .ucp-route-to {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}

.ucp-chat-title .ucp-route-arrow { opacity: .6; flex-shrink: 0; }

.ucp-chat-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ucp-text-xs);
    color: rgba(237, 255, 230, .65);
}

/* Back button in header */
.ucp-chat-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #edffe6;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--ucp-transition);
    flex-shrink: 0;
}

.ucp-chat-back:hover { background: rgba(255,255,255,.1); }

/* ── Messages area ───────────────────────────────────────────────────── */
.ucp-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--ucp-surface-low);
    scrollbar-width: thin;
    scrollbar-color: var(--ucp-border) transparent;
}

.ucp-chat-messages::-webkit-scrollbar { width: 6px; }
.ucp-chat-messages::-webkit-scrollbar-thumb { background: var(--ucp-border); border-radius: 10px; }
.ucp-chat-messages::-webkit-scrollbar-track { background: transparent; }

.ucp-chat-empty {
    margin: auto;
    color: var(--ucp-text-muted);
    font-size: var(--ucp-text-sm);
    text-align: center;
}

/* ── Message bubbles ─────────────────────────────────────────────────── */
.ucp-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
}

.ucp-msg-mine   { align-self: flex-end;  flex-direction: row-reverse; }
.ucp-msg-theirs { align-self: flex-start; }

.ucp-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--ucp-border);
}

.ucp-msg-avatar.ucp-avatar-placeholder {
    background: var(--ucp-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}

/* Bubble: other person */
.ucp-msg-theirs .ucp-msg-bubble {
    background: var(--ucp-card-bg);
    border: 1px solid rgba(228, 237, 219, .5);
    border-radius: 16px 16px 16px 4px;
    box-shadow: 0 2px 8px rgba(18,32,17,.06);
}

/* Bubble: own message */
.ucp-msg-mine .ucp-msg-bubble {
    background: var(--ucp-primary);
    border: none;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 4px 12px rgba(27,175,82,.15);
}

.ucp-msg-bubble {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 60px;
}

.ucp-msg-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ucp-primary);
    margin-bottom: 2px;
}

.ucp-msg-text {
    margin: 0;
    font-size: var(--ucp-text-sm);
    line-height: 1.5;
    word-break: break-word;
    color: var(--ucp-text);
}

.ucp-msg-mine .ucp-msg-text { color: #fff; }

.ucp-msg-time {
    font-size: 0.65rem;
    opacity: .6;
    align-self: flex-end;
    color: var(--ucp-text-muted);
}

.ucp-msg-mine .ucp-msg-time { color: rgba(255,255,255,.75); }

/* ── Chat input bar ──────────────────────────────────────────────────── */
.ucp-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ucp-border);
    background: var(--ucp-card-bg);
    flex-shrink: 0;
}

.ucp-chat-input-wrap {
    flex: 1;
    background: var(--ucp-surface-low);
    border: 1.5px solid var(--ucp-border);
    border-radius: 20px;
    display: flex;
    align-items: flex-end;
    padding: 6px 14px;
    min-height: 48px;
    transition: border-color var(--ucp-transition);
}

.ucp-chat-input-wrap:focus-within {
    border-color: var(--ucp-primary);
    box-shadow: 0 0 0 2px rgba(var(--ucp-primary-rgb), .1);
}

.ucp-chat-input {
    flex: 1;
    resize: none;
    border: none;
    background: transparent;
    padding: 4px 0;
    font-size: var(--ucp-text-base);
    font-family: var(--ucp-font);
    line-height: 1.5;
    outline: none;
    color: var(--ucp-text);
    max-height: 120px;
    overflow-y: auto;
}

.ucp-chat-input::placeholder { color: var(--ucp-text-muted); }

/* Send button: circular green pill */
.ucp-chat-send {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ucp-primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(27,175,82,.3);
    transition: opacity var(--ucp-transition), transform var(--ucp-transition);
    font-family: var(--ucp-font);
}

.ucp-chat-send:hover:not(:disabled) { opacity: .9; transform: scale(1.04); }
.ucp-chat-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.ucp-chat-error {
    background: rgba(186,26,26,.08);
    color: var(--ucp-error);
    font-size: var(--ucp-text-xs);
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    text-align: center;
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
[data-theme="dark"] .ucp-chat-messages { background: rgba(255,255,255,.02); }
[data-theme="dark"] .ucp-msg-theirs .ucp-msg-bubble { background: var(--ucp-surface-mid); border-color: var(--ucp-border); }
[data-theme="dark"] .ucp-chat-input-wrap { background: var(--ucp-surface-mid); }

/* ── Rating page ─────────────────────────────────────────────────────── */
.ucp-rate-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px calc(24px + 90px);
}

.ucp-rating-list { display: flex; flex-direction: column; gap: 16px; }

.ucp-rating-card {
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-left: 4px solid var(--ucp-primary);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--ucp-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ucp-rating-trip-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ucp-text-sm);
    font-weight: 600;
    color: var(--ucp-text);
    flex-wrap: wrap;
}

.ucp-rating-trip-info .ucp-route-arrow { color: var(--ucp-text-muted); flex-shrink: 0; }
.ucp-rating-trip-info .ucp-route-from,
.ucp-rating-trip-info .ucp-route-to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

.ucp-rating-trip-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ucp-text-xs);
    font-weight: 400;
    color: var(--ucp-text-muted);
}

.ucp-rating-target {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ucp-rating-role {
    display: block;
    font-size: var(--ucp-text-xs);
    color: var(--ucp-text-muted);
    margin-top: 2px;
}

/* ── Star picker (JS-driven) ─────────────────────────────────────────── */
.ucp-star-picker {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    margin-bottom: 8px;
    justify-content: flex-end;
}

.ucp-star-picker input[type="radio"] { display: none; }

.ucp-star-picker label {
    font-size: 2rem;
    color: var(--ucp-border);
    cursor: pointer;
    transition: color 100ms ease;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Highlight all stars from the checked one leftward (row-reverse) */
.ucp-star-picker input:checked ~ label,
.ucp-star-picker label:hover,
.ucp-star-picker label:hover ~ label { color: #F59E0B; }

.ucp-star-picker.ucp-star-error label { color: rgba(252, 165, 165, .8); }

.ucp-rating-comment {
    width: 100%;
    border: 1.5px solid var(--ucp-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: var(--ucp-text-sm);
    font-family: var(--ucp-font);
    resize: vertical;
    outline: none;
    transition: border-color var(--ucp-transition);
    background: var(--ucp-surface-low);
    color: var(--ucp-text);
    box-sizing: border-box;
}

.ucp-rating-comment:focus { border-color: var(--ucp-primary); background: var(--ucp-card-bg); }

.ucp-rating-submit {
    width: 100%;
    height: 52px;
    background: var(--ucp-primary);
    color: #fff;
    border: none;
    border-radius: var(--ucp-radius-full);
    font-size: var(--ucp-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--ucp-shadow-green);
    transition: opacity var(--ucp-transition), transform var(--ucp-transition);
    font-family: var(--ucp-font);
}

.ucp-rating-submit:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.ucp-rating-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.ucp-rating-done {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(142, 245, 169, .2);
    border-radius: 10px;
    font-size: var(--ucp-text-sm);
    font-weight: 600;
    color: #005321;
}

[data-theme="dark"] .ucp-rating-done { background: rgba(27,175,82,.1); color: #75db92; }

/* ── Dark mode overrides ─────────────────────────────────────────────── */
[data-theme="dark"] .ucp-chat-wrap {
    box-shadow: 0 4px 24px rgba(0,0,0,.6);
}

[data-theme="dark"] .ucp-rating-card { border-color: var(--ucp-border); }

[data-theme="dark"] .ucp-rating-comment {
    background: var(--ucp-surface-mid);
    border-color: var(--ucp-border);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Reserva espaço para o bottom nav no chat */
    .ucp-chat-wrap {
        margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .ucp-chat-wrap {
        height: calc(100dvh - 72px - 72px - env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        border: none;
        margin-bottom: 0;
    }
    .ucp-msg       { max-width: 90%; }
    .ucp-chat-title .ucp-route-from,
    .ucp-chat-title .ucp-route-to { max-width: 100px; }
    .ucp-rating-trip-info .ucp-route-from,
    .ucp-rating-trip-info .ucp-route-to { max-width: 110px; }

    /* Input de mensagem: 16px previne zoom no iOS */
    .ucp-chat-input { font-size: 16px; }
}

@media (max-width: 360px) {
    .ucp-msg { max-width: 95%; font-size: 0.875rem; }
}