.chat-giphy-image {
    display: block;
    width: min(360px, 100%);
    max-height: 300px;
    margin-top: 9px;
    object-fit: contain;
    border-radius: 12px;
}

.giphy-panel {
    position: fixed;
    z-index: 1000;
    right: 24px;
    bottom: 96px;
    width: min(520px, calc(100vw - 24px));
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text, #fff);
    background: var(--surface, #0b1629);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.giphy-panel[hidden] { display: none; }
.giphy-panel header { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.giphy-panel input { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text, #fff); background: var(--surface-soft, #071020); }
.giphy-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; max-height: 330px; margin-top: 10px; overflow: auto; }
.giphy-results button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: transparent; cursor: pointer; }
.giphy-results img { display: block; width: 100%; height: 105px; object-fit: cover; }
.giphy-panel small { display: block; margin-top: 8px; color: var(--muted); text-align: right; }

@media (max-width: 520px) {
    html.giphy-panel-open { overflow: hidden; }
    .giphy-panel {
        inset: max(64px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
        width: auto;
        max-height: none;
        display: flex;
        flex-direction: column;
    }
    .giphy-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        min-height: 0;
        flex: 1;
    }
    .giphy-panel header input { font-size: 16px; }
    .giphy-panel [data-close] { min-width: 44px; min-height: 44px; }
}