/* ── Granny's Internal Messaging — messages.css ──────────────────────────── */

:root {
    --gim-gold:        #FDB439;
    --gim-gold-dark:   #E47B02;
    --gim-dark:        #1F2933;
    --gim-dark2:       #3E4C59;
    --gim-mid:         #52606D;
    --gim-muted:       #7B8794;
    --gim-light:       #F3F4F7;
    --gim-cream:       #FFFAF5;
    --gim-border:      #E8E0D8;
    --gim-brown:       #8B5A2B;
    --gim-white:       #FFFFFF;
    --gim-red:         #C0392B;
    --gim-green:       #27AE60;
    --gim-blue-soft:   #EBF5FB;

    --gim-radius:      12px;
    --gim-radius-sm:   8px;
    --gim-shadow:      0 2px 12px rgba(31,41,51,0.10);
    --gim-shadow-lg:   0 8px 32px rgba(31,41,51,0.16);
    --gim-font:        Georgia, 'Times New Roman', serif;
    --gim-font-ui:     'Segoe UI', system-ui, sans-serif;
    --gim-transition:  0.18s ease;
}

/* ── Wrap ─────────────────────────────────────────────────────────────────── */
.gim-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 48px;
    font-family: var(--gim-font-ui);
    color: var(--gim-dark);
}

/* ── Flash Messages ───────────────────────────────────────────────────────── */
.gim-flash {
    padding: 14px 20px;
    border-radius: var(--gim-radius-sm);
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
}
.gim-flash--error   { background: #FADBD8; color: var(--gim-red); border: 1px solid #F1948A; }
.gim-flash--success { background: #D5F5E3; color: #1E8449; border: 1px solid #82E0AA; }

/* ── Inbox Header ─────────────────────────────────────────────────────────── */
.gim-inbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 28px 0 20px;
    border-bottom: 2px solid var(--gim-border);
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.gim-inbox__title {
    font-family: var(--gim-font);
    font-size: 26px;
    font-weight: 700;
    color: var(--gim-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Badge ────────────────────────────────────────────────────────────────── */
.gim-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gim-gold);
    color: var(--gim-dark);
    font-family: var(--gim-font-ui);
    font-size: 14px;
    font-weight: 800;
    border-radius: 99px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    line-height: 1;
}

/* ── Requests Banner ──────────────────────────────────────────────────────── */
.gim-requests-banner {
    background: linear-gradient(135deg, #FFF8E7, #FDEBD0);
    border: 1.5px solid var(--gim-gold);
    border-radius: var(--gim-radius-sm);
    padding: 14px 20px;
    margin: 12px 0 4px;
    font-size: 16px;
    font-weight: 600;
}
.gim-requests-banner a {
    color: var(--gim-gold-dark);
    text-decoration: none;
}
.gim-requests-banner a:hover { text-decoration: underline; }

/* ── Conversation List ────────────────────────────────────────────────────── */
.gim-conversation-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gim-conversation {
    border-bottom: 1px solid var(--gim-border);
    transition: background var(--gim-transition);
}
.gim-conversation:last-child { border-bottom: none; }
.gim-conversation:hover { background: var(--gim-cream); }
.gim-conversation--unread { background: #FFFBF2; }
.gim-conversation--unread:hover { background: #FFF8E8; }

.gim-conversation__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 12px;
    text-decoration: none;
    color: inherit;
}
.gim-conversation__avatar { flex-shrink: 0; }
.gim-conversation__avatar img,
.gim-conversation__avatar span {
    border-radius: 50%;
    display: block;
}
.gim-conversation__body { flex: 1; min-width: 0; }
.gim-conversation__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.gim-conversation__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--gim-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gim-conversation--unread .gim-conversation__name { color: var(--gim-brown); }
.gim-conversation__date {
    font-size: 13px;
    color: var(--gim-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.gim-conversation__preview {
    font-size: 15px;
    color: var(--gim-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gim-conversation--unread .gim-conversation__preview {
    font-weight: 600;
    color: var(--gim-dark2);
}
.gim-you { color: var(--gim-muted); font-weight: 400; }

.gim-conversation__unread {
    background: var(--gim-gold);
    color: var(--gim-dark);
    font-size: 13px;
    font-weight: 800;
    border-radius: 99px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* ── Empty State ──────────────────────────────────────────────────────────── */
.gim-empty {
    text-align: center;
    padding: 64px 24px;
}
.gim-empty--sm { padding: 32px 24px; }
.gim-empty__icon { font-size: 52px; margin-bottom: 16px; }
.gim-empty__text {
    font-family: var(--gim-font);
    font-size: 22px;
    color: var(--gim-dark2);
    margin: 0 0 8px;
}
.gim-empty__sub { font-size: 16px; color: var(--gim-muted); margin: 0; }

/* ── Thread ───────────────────────────────────────────────────────────────── */
.gim-thread { display: flex; flex-direction: column; }

.gim-thread__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0 16px;
    border-bottom: 2px solid var(--gim-border);
    margin-bottom: 0;
    flex-wrap: wrap;
}
.gim-thread__who {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.gim-thread__who img,
.gim-thread__who span.gim-avatar-fallback {
    border-radius: 50%;
}
.gim-thread__name {
    font-family: var(--gim-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--gim-dark);
}
.gim-thread__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Messages Feed ────────────────────────────────────────────────────────── */
.gim-thread__messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 0 16px;
    min-height: 200px;
}

.gim-date-divider {
    text-align: center;
    margin: 16px 0 8px;
    position: relative;
}
.gim-date-divider::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: var(--gim-border);
}
.gim-date-divider span {
    position: relative;
    background: var(--gim-white);
    padding: 0 12px;
    font-size: 13px;
    color: var(--gim-muted);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gim-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 78%;
    animation: gim-pop .18s ease;
}
@keyframes gim-pop {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gim-message--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.gim-message--theirs { align-self: flex-start; }

.gim-message__avatar img,
.gim-message__avatar span { border-radius: 50%; display: block; }

.gim-message__bubble { display: flex; flex-direction: column; }

.gim-message--mine .gim-message__body {
    background: var(--gim-gold);
    color: var(--gim-dark);
    border-radius: 18px 18px 4px 18px;
}
.gim-message--theirs .gim-message__body {
    background: var(--gim-light);
    color: var(--gim-dark);
    border-radius: 18px 18px 18px 4px;
}
.gim-message__body {
    padding: 12px 16px;
    font-size: 17px;
    line-height: 1.55;
    word-break: break-word;
}

.gim-message__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 0;
    font-size: 12px;
    color: var(--gim-muted);
}
.gim-message--mine .gim-message__meta { justify-content: flex-end; }

.gim-delete-msg {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    opacity: 0.5;
    padding: 0;
    transition: opacity var(--gim-transition);
}
.gim-delete-msg:hover { opacity: 1; }

/* ── Compose Box (Thread) ─────────────────────────────────────────────────── */
.gim-thread__compose {
    border-top: 2px solid var(--gim-border);
    padding: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gim-compose-row {
    display: flex;
    gap: 8px;
}
.gim-compose-box {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.gim-textarea {
    flex: 1;
    border: 2px solid var(--gim-border);
    border-radius: var(--gim-radius-sm);
    padding: 12px 14px;
    font-family: var(--gim-font-ui);
    font-size: 17px;
    color: var(--gim-dark);
    background: var(--gim-cream);
    resize: vertical;
    transition: border-color var(--gim-transition);
    line-height: 1.5;
}
.gim-textarea:focus {
    outline: none;
    border-color: var(--gim-gold);
}
.gim-textarea--sm { font-size: 15px; }

/* ── Compose Page ─────────────────────────────────────────────────────────── */
.gim-compose-page {}
.gim-compose-form {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gim-field { display: flex; flex-direction: column; gap: 8px; }
.gim-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--gim-dark2);
}
.gim-input {
    border: 2px solid var(--gim-border);
    border-radius: var(--gim-radius-sm);
    padding: 11px 14px;
    font-size: 17px;
    font-family: var(--gim-font-ui);
    color: var(--gim-dark);
    background: var(--gim-cream);
    transition: border-color var(--gim-transition);
}
.gim-input:focus {
    outline: none;
    border-color: var(--gim-gold);
}

/* ── Friend Picker ────────────────────────────────────────────────────────── */
.gim-friend-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gim-friend-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border: 2px solid var(--gim-border);
    border-radius: 99px;
    background: var(--gim-white);
    cursor: pointer;
    font-size: 15px;
    font-family: var(--gim-font-ui);
    color: var(--gim-dark);
    transition: border-color var(--gim-transition), background var(--gim-transition);
}
.gim-friend-chip img,
.gim-friend-chip span.gim-avatar-fallback { border-radius: 50%; }
.gim-friend-chip:hover { border-color: var(--gim-gold); background: #FFF8E7; }
.gim-friend-chip--selected {
    border-color: var(--gim-gold-dark);
    background: #FFF3CC;
    font-weight: 700;
}

/* ── User Search Dropdown ─────────────────────────────────────────────────── */
.gim-user-search { position: relative; }
.gim-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--gim-white);
    border: 2px solid var(--gim-gold);
    border-radius: var(--gim-radius-sm);
    box-shadow: var(--gim-shadow-lg);
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
}
.gim-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 16px;
    border-bottom: 1px solid var(--gim-border);
    transition: background var(--gim-transition);
}
.gim-search-result:last-child { border-bottom: none; }
.gim-search-result:hover { background: var(--gim-cream); }
.gim-search-result img,
.gim-search-result span.gim-avatar-fallback { border-radius: 50%; }

.gim-selected-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFF3CC;
    border: 2px solid var(--gim-gold-dark);
    border-radius: var(--gim-radius-sm);
    padding: 10px 14px;
    font-size: 17px;
    font-weight: 700;
}
.gim-clear-btn {
    background: none;
    border: none;
    color: var(--gim-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    margin-left: auto;
}
.gim-clear-btn:hover { color: var(--gim-red); }

/* ── Message Requests Page ────────────────────────────────────────────────── */
.gim-request-list { list-style: none; margin: 0; padding: 0; }
.gim-request-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 12px;
    border-bottom: 1px solid var(--gim-border);
    flex-wrap: wrap;
}
.gim-request-item__avatar { flex-shrink: 0; }
.gim-request-item__body { flex: 1; min-width: 0; }
.gim-request-item__name { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.gim-request-item__date { font-size: 13px; color: var(--gim-muted); margin-bottom: 6px; }
.gim-request-item__subject { font-size: 15px; font-weight: 600; color: var(--gim-dark2); margin-bottom: 4px; }
.gim-request-item__preview {
    font-size: 15px;
    color: var(--gim-mid);
    line-height: 1.5;
    background: var(--gim-light);
    border-radius: var(--gim-radius-sm);
    padding: 10px 14px;
    margin-top: 6px;
}
.gim-request-item__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.gim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: var(--gim-radius-sm);
    border: 2px solid transparent;
    font-family: var(--gim-font-ui);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--gim-transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.gim-btn--primary {
    background: var(--gim-gold);
    color: var(--gim-dark);
    border-color: var(--gim-gold);
}
.gim-btn--primary:hover {
    background: var(--gim-gold-dark);
    border-color: var(--gim-gold-dark);
    color: var(--gim-white);
}
.gim-btn--ghost {
    background: var(--gim-white);
    color: var(--gim-dark2);
    border-color: var(--gim-border);
}
.gim-btn--ghost:hover {
    border-color: var(--gim-mid);
    background: var(--gim-light);
}
.gim-btn--danger {
    background: var(--gim-white);
    color: var(--gim-red);
    border-color: #F1948A;
}
.gim-btn--danger:hover {
    background: #FADBD8;
}
.gim-btn--sm { padding: 7px 14px; font-size: 14px; }
.gim-btn--lg { padding: 15px 32px; font-size: 18px; }
.gim-btn--send { padding: 11px 20px; align-self: flex-end; }
.gim-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Back Button ──────────────────────────────────────────────────────────── */
.gim-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gim-brown);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 0;
    transition: color var(--gim-transition);
}
.gim-back-btn:hover { color: var(--gim-gold-dark); }

/* ── Notices ──────────────────────────────────────────────────────────────── */
.gim-notice {
    background: var(--gim-light);
    border: 1px solid var(--gim-border);
    border-radius: var(--gim-radius-sm);
    padding: 14px 18px;
    font-size: 15px;
    color: var(--gim-mid);
    margin-bottom: 16px;
}
.gim-notice--info {
    background: var(--gim-blue-soft);
    border-color: #AED6F1;
    color: #1A5276;
}
.gim-notice a { color: var(--gim-brown); }

.gim-hint {
    font-size: 14px;
    color: var(--gim-muted);
    margin: 0;
    font-style: italic;
}
.gim-muted { color: var(--gim-muted); font-size: 15px; }
.gim-loading { color: var(--gim-muted); font-style: italic; padding: 12px 16px; }

.gim-status-msg {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0;
}
.gim-status-msg--ok  { color: var(--gim-green); }
.gim-status-msg--err { color: var(--gim-red); }

/* ── Avatar Fallback ──────────────────────────────────────────────────────── */
span.gim-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gim-gold);
    color: var(--gim-dark);
    font-weight: 800;
    font-size: 18px;
    font-family: var(--gim-font-ui);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.gim-modal {
    position: fixed;
    inset: 0;
    background: rgba(31,41,51,0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: gim-fade-in .18s ease;
}
@keyframes gim-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.gim-modal__box {
    background: var(--gim-white);
    border-radius: var(--gim-radius);
    box-shadow: var(--gim-shadow-lg);
    padding: 32px;
    max-width: 480px;
    width: 100%;
    animation: gim-slide-up .2s ease;
}
@keyframes gim-slide-up {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.gim-modal__box h3 {
    font-family: var(--gim-font);
    font-size: 22px;
    margin: 0 0 10px;
    color: var(--gim-dark);
}
.gim-modal__box p {
    font-size: 16px;
    color: var(--gim-mid);
    margin: 0 0 14px;
    line-height: 1.55;
}
.gim-modal__btns {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ── Recipe List in Modal ─────────────────────────────────────────────────── */
.gim-recipe-list {
    border: 1px solid var(--gim-border);
    border-radius: var(--gim-radius-sm);
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 16px;
}
.gim-recipe-item {
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--gim-border);
    transition: background var(--gim-transition);
}
.gim-recipe-item:last-child { border-bottom: none; }
.gim-recipe-item:hover { background: var(--gim-cream); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gim-inbox__header { flex-direction: column; align-items: flex-start; }
    .gim-thread__header { flex-direction: column; align-items: flex-start; }
    .gim-thread__actions { align-self: flex-end; }
    .gim-message { max-width: 90%; }
    .gim-compose-box { flex-direction: column; }
    .gim-btn--send { width: 100%; }
    .gim-request-item { flex-direction: column; }
    .gim-request-item__actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
}

/* ── Friends Dropdown (Compose) ───────────────────────────────────────────── */
.gim-select {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--gim-border);
    border-radius: var(--gim-radius-sm);
    padding: 13px 42px 13px 16px;
    font-size: 18px;
    font-family: var(--gim-font-ui);
    color: var(--gim-dark);
    background: var(--gim-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2352606D' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 22px;
    width: 100%;
    cursor: pointer;
    transition: border-color var(--gim-transition);
}
.gim-select:focus {
    outline: none;
    border-color: var(--gim-gold);
}

/* ── Or divider ───────────────────────────────────────────────────────────── */
.gim-divider-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gim-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 4px 0;
}
.gim-divider-or::before,
.gim-divider-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gim-border);
}

/* ── Optional label suffix ────────────────────────────────────────────────── */
.gim-optional {
    font-weight: 400;
    color: var(--gim-muted);
    font-size: 14px;
}

/* ── Empty search result ──────────────────────────────────────────────────── */
.gim-search-result--empty {
    pointer-events: none;
    color: var(--gim-muted);
    font-style: italic;
}