/* ==========================================================================

   OSINTNova — Unified Mobile Design System

   --------------------------------------------------------------------------

   Loaded LAST so it owns the <=768px presentation layer.



   Why this file exists: mobile styling had accumulated across 16 stylesheets

   and 20+ ad-hoc breakpoints, which produced three competing control systems

   (heights 41/42/43/46px, radii 0 / 6px / asymmetric, borders none / 0.8px,

   and three different control surfaces sitting next to each other). This file

   collapses that into one token set so every command renders with the same

   rhythm, the same controls and the same card language.



   Contract: presentation only. No DOM, no behaviour, no backend.

   ========================================================================== */



@media (max-width: 768px) {



  /* ---------------------------------------------------------------- 1. Tokens */

  :root {

    /* One page gutter. Controls and result content must share it, otherwise

       the command bar and the data below it visibly fail to line up. */

    --m-gutter: 14px;

    --m-gap: 10px;

    --m-gap-lg: 14px;



    /* One control height everywhere. 46px clears the 44px touch-target floor. */

    --m-h: 46px;

    --m-h-sm: 38px;



    --m-r: 10px;

    --m-r-sm: 8px;

    --m-r-lg: 14px;

    /* Report shells (Oracle, Username Intelligence) share one larger radius. */

    --m-r-report: 24px;



    /* Two control surfaces only: a recessed field and a raised action.

       Anything that takes input uses --m-field; anything you press that is

       not a field uses --m-raise. Dropdown triggers count as fields — that

       assignment is the actual fix, since Oracle's model picker used to wear

       the card surface and so read as a third colour next to its own input.



       These alias the app's existing surface scale rather than introducing

       new literals, so mobile tracks the palette instead of drifting from it

       and desktop and mobile controls stay the same colour. */

    --m-field: var(--cmd-well);

    --m-field-focus: var(--surface-2);

    --m-raise: var(--cmd-raise);



    /* Card language for results. */

    --m-card: var(--cmd-pane);

    --m-card-sunk: var(--surface-1);

    --m-card-head: rgba(244, 239, 230, 0.025);



    --m-line: rgba(244, 239, 230, 0.12);

    --m-line-soft: rgba(244, 239, 230, 0.07);

    --m-line-hi: rgba(244, 239, 230, 0.34);



    --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

    --m-shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.55);

  }



  /* ----------------------------------------------------------- 2. App shell */



  .container > header {

    padding: 0 var(--m-gutter);

  }



  .tab-content .tab-pane {

    padding: 0 !important;

  }



  /* Results and the command bar must share one gutter. */

  .tab-content .tab-pane > .results {

    padding: 0 var(--m-gutter) 24px !important;

  }



  /* ------------------------------------------------------- 3. Command bar */



  /* 3.1 Container — column by default; the fused row is opted into below. */

  .tab-content .tab-pane > .search-container {

    display: flex;

    flex-direction: column;

    gap: var(--m-gap);

    width: 100%;

    margin: 0 0 var(--m-gap-lg);

    padding: var(--m-gap-lg) var(--m-gutter) 0;

    background: transparent;

  }



  /* 3.2 Every field in every command gets one identical treatment. */

  .tab-content .tab-pane > .search-container .search-input,

  .tab-content .tab-pane > .search-container select.search-input,

  .tab-content .tab-pane > .search-container .file-input-label {

    box-sizing: border-box;

    width: 100%;

    height: var(--m-h) !important;

    min-height: var(--m-h) !important;

    padding: 0 14px !important;

    border: 1px solid var(--m-line) !important;

    border-radius: var(--m-r) !important;

    background: var(--m-field) !important;

    color: var(--ink);

    /* 16px keeps iOS Safari from zooming the viewport on focus. */

    font-size: 16px !important;

    font-weight: 400;

    letter-spacing: 0;

    box-shadow: none !important;

    -webkit-appearance: none;

    appearance: none;

    transition: border-color 0.16s ease, background-color 0.16s ease;

  }



  .tab-content .tab-pane > .search-container .search-input:focus,

  .tab-content .tab-pane > .search-container select.search-input:focus {

    outline: none;

    border-color: var(--m-line-hi) !important;

    background: var(--m-field-focus) !important;

  }



  .tab-content .tab-pane > .search-container .search-input::placeholder {

    color: rgba(244, 239, 230, 0.36);

    font-size: 15px;

  }



  /* Native select needs room for a chevron, drawn for cross-platform parity. */

  .tab-content .tab-pane > .search-container select.search-input {

    padding-right: 38px !important;

    background-image: linear-gradient(45deg, transparent 50%, rgba(244, 239, 230, 0.55) 50%),

                      linear-gradient(135deg, rgba(244, 239, 230, 0.55) 50%, transparent 50%) !important;

    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50% !important;

    background-size: 6px 6px, 6px 6px !important;

    background-repeat: no-repeat !important;

    background-color: var(--m-field) !important;

    text-overflow: ellipsis;

  }



  /* Multi-field commands (People, Vehicle, Image) were pinned to square

     corners by a `border-radius: 0 !important` in 2d8i416bct5dyw1fgd.css. Match that

     selector shape so the shared radius wins here too. */

  .tab-content .tab-pane > .search-container:not(:has(> .search-input:first-child:nth-last-child(2))) .search-input,

  .tab-content .tab-pane > .search-container:not(:has(> .search-input:first-child:nth-last-child(2))) select.search-input,

  .tab-content .tab-pane > .search-container:not(:has(> .search-input:first-child:nth-last-child(2))) .file-input-label {

    border-radius: var(--m-r) !important;

    box-shadow: none !important;

  }



  /* 3.3 The action button — one raised surface, one radius, one height. */

  .tab-content .tab-pane > .search-container .search-btn {

    box-sizing: border-box;

    width: 100%;

    height: var(--m-h) !important;

    min-height: var(--m-h) !important;

    padding: 0 18px !important;

    border: 1px solid var(--m-line) !important;

    border-radius: var(--m-r) !important;

    background: var(--m-raise) !important;

    color: var(--ink) !important;

    font-size: 12px !important;

    font-weight: 600;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    box-shadow: none !important;

    transition: background-color 0.16s ease, border-color 0.16s ease;

  }



  /* Brightened rather than given its own surface, so the press state cannot

     drift away from the palette. */

  .tab-content .tab-pane > .search-container .search-btn:active {

    border-color: var(--m-line-hi) !important;

    filter: brightness(1.35);

  }



  /* 3.4 Single-field commands (input + button) fuse into one bar.

         Symmetric outer radius — no more 0/0/0/10px asymmetry. */

  .tab-content .tab-pane > .search-container:has(> .search-input:first-child:nth-last-child(2)) {

    flex-direction: row;

    gap: 0;

    align-items: stretch;

    padding: var(--m-gap-lg) var(--m-gutter) 0;

  }



  .tab-content .tab-pane > .search-container:has(> .search-input:first-child:nth-last-child(2)) > .search-input {

    flex: 1 1 auto;

    width: auto;

    min-width: 0;

    /* Restated in full: pcvhi8ehukalll96ed.css zeroes border-top at high specificity,

       which otherwise leaves the field without the top edge its button has. */

    border: 1px solid var(--m-line) !important;

    border-right: 0 !important;

    border-radius: var(--m-r) 0 0 var(--m-r) !important;

  }



  .tab-content .tab-pane > .search-container:has(> .search-input:first-child:nth-last-child(2)) > .search-btn {

    position: relative;

    flex: 0 0 54px !important;

    width: 54px !important;

    min-width: 54px !important;

    padding: 0 !important;

    border-radius: 0 var(--m-r) var(--m-r) 0 !important;

    /* Label is replaced by the ::after glyph inherited from pcvhi8ehukalll96ed.css. */

    font-size: 0 !important;

  }



  .tab-content .tab-pane > .search-container:has(> .search-input:first-child:nth-last-child(2)) > .search-btn::after {

    font-size: 0.9rem;

  }



  /* --------------------------------------------------- 4. Oracle controls */



  /* Oracle stacks a model picker under the fused bar. Previously the input,

     the button and the picker each used a different surface colour; they now

     share the same field/raise pair as every other command. */

  #oracle .oracle-search-container {

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 54px;

    grid-template-rows: var(--m-h) var(--m-h);

    gap: var(--m-gap) 0;

    padding: var(--m-gap-lg) var(--m-gutter) 0;

    background: transparent;

  }



  #oracle .oracle-search-container > .search-input {

    grid-column: 1;

    grid-row: 1;

    width: 100%;

    border: 1px solid var(--m-line) !important;

    border-right: 0 !important;

    border-radius: var(--m-r) 0 0 var(--m-r) !important;

    background: var(--m-field) !important;

    box-shadow: none !important;

  }



  #oracle .oracle-search-container > .search-input:focus {

    border-color: var(--m-line-hi) !important;

    background: var(--m-field-focus) !important;

    box-shadow: none !important;

  }



  #oracle .oracle-search-container > .search-btn {

    grid-column: 2;

    grid-row: 1;

    width: 54px !important;

    min-width: 54px !important;

    padding: 0 !important;

    border: 1px solid var(--m-line) !important;

    border-radius: 0 var(--m-r) var(--m-r) 0 !important;

    background: var(--m-raise) !important;

    box-shadow: none !important;

    font-size: 0 !important;

  }



  #oracle .oracle-model-picker {

    grid-column: 1 / -1;

    grid-row: 2;

    width: 100%;

    min-width: 0;

    height: var(--m-h);

  }



  /* The picker is an input affordance, so it wears the field surface. */

  #oracle .oracle-model-trigger {

    width: 100%;

    height: var(--m-h) !important;

    padding: 0 14px !important;

    border: 1px solid var(--m-line) !important;

    border-radius: var(--m-r) !important;

    background: var(--m-field) !important;

    box-shadow: none !important;

  }



  /* Opening the picker brightens only its edge. Changing the fill as well

     made the control look like it had switched to a different surface at the

     moment the panel appeared. */

  #oracle .oracle-model-trigger[aria-expanded="true"] {

    border-color: var(--m-line-hi) !important;

    background: var(--m-field) !important;

  }



  #oracle .oracle-model-trigger-caption {

    font-size: 0.52rem;

    letter-spacing: 0.14em;

  }



  #oracle .oracle-model-trigger-label {

    font-size: 0.82rem;

  }



  /* The panel carries the same fill as the idle trigger it drops out of.

     On the card surface it read as a lighter grey than the control that

     opened it, which is the mismatch the picker was meant to stop having. */

  #oracle .oracle-model-menu {

    top: calc(100% + 6px);

    right: 0;

    left: 0;

    width: 100%;

    min-width: 0;

    padding: 6px;

    border: 1px solid var(--m-line) !important;

    border-radius: var(--m-r) !important;

    background: var(--m-field) !important;

    box-shadow: var(--m-shadow-lift);

  }



  #oracle .oracle-model-option {

    min-height: 52px;

    border-radius: var(--m-r-sm);

  }



  /* ------------------------------------------- 4.5 Oracle report alignment */



  /* The Oracle report is a card, matching Username Intelligence's

     .intel-report: inset from the page edges, rounded, bordered. A @768 rule

     in djjf0t1xzxw1hcp9gq.css strips the side borders and radius to make it

     full-bleed, so both are restored here.



     --o-gutter becomes the card's internal padding rather than a page inset,

     since .results now supplies the 14px page gutter. */

  .oracle-results,

  .oracle-live-preview-card {

    --o-gutter: 18px;

    --o-space: 20px;

  }



  :is(#oracle-results, .chat-history-report[data-report-container-id="oracle-results"]) .oracle-results,

  .oracle-live-preview-card {

    overflow: hidden;

    border: 1px solid var(--m-line);

    border-right-width: 1px;

    border-left-width: 1px;

    border-radius: var(--m-r-report);

    background: #0a0a0a;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);

  }



  /* modules/y2eoae50km24kpdsry.js injects `.oracle-results { margin-top: 20px }` into the

     document at runtime, which lands after this file and wins on order. That

     20px was the whole reason the report sat further from the model selector

     than Username Intelligence's report sits from its input. The id here

     outranks it on specificity, so order no longer decides. */

  :is(#oracle-results, .chat-history-report[data-report-container-id="oracle-results"]) .oracle-results {

    margin-top: 0;

  }



  /* A @420px block in djjf0t1xzxw1hcp9gq.css pins these blocks to a hardcoded

     16px, which breaks the shared gutter on exactly the widths most phones

     use. Same selector shape, loaded later, so the token wins. */

  .oracle-results .oracle-section,

  .oracle-results .oracle-report-body,

  .oracle-results .oracle-report-structured-block,

  .oracle-results .oracle-report-images-block,

  .oracle-results .oracle-report-google-reviews-block,

  .oracle-results .oracle-activity-timeline,

  .oracle-results .oracle-refinement-section,

  .oracle-results .oracle-report-graph-section {

    padding-right: var(--o-gutter);

    padding-left: var(--o-gutter);

  }



  .oracle-results > * + * {

    border-top: 1px solid var(--m-line-soft);

  }



  /* Sticky label rails belong to the two-column desktop layout; once the grid

     collapses they only detach from the content they title. */

  .oracle-section-head,

  .oracle-report-section-label {

    position: static;

    margin-bottom: 10px;

    font-size: 0.86rem;

  }



  /* ------------------------------------------- 5. Result cards & sections */



  .tab-content .tab-pane > .results .result-section {

    margin-bottom: var(--m-gap-lg);

    border: 1px solid var(--m-line);

    border-radius: var(--m-r);

    background: var(--m-card);

    box-shadow: var(--m-shadow);

    overflow: hidden;

  }



  /* Hover lift is a pointer affordance; on touch it only causes jitter. */

  .tab-content .tab-pane > .results .result-section:hover {

    transform: none;

    box-shadow: var(--m-shadow);

  }



  .tab-content .tab-pane > .results .result-section h3 {

    padding: 13px var(--m-gutter);

    background: var(--m-card-head);

    border-bottom: 1px solid var(--m-line-soft);

    font-size: 12.5px;

    letter-spacing: 0.06em;

  }



  .tab-content .tab-pane > .results .result-content {

    padding: var(--m-gutter);

  }



  /* Key above value. Side-by-side columns cannot hold a hash, a URL or an

     ISP string at this width without either truncating or forcing the label

     column so narrow it wraps mid-word. */

  .tab-content .tab-pane > .results .result-item {

    display: block;

    margin-bottom: 12px;

    padding: 0 0 12px;

    border-bottom: 1px solid var(--m-line-soft);

  }



  .tab-content .tab-pane > .results .result-item:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0;

  }



  .tab-content .tab-pane > .results .item-key {

    display: block;

    margin-bottom: 4px;

    font-size: 10.5px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--ink-muted);

  }



  .tab-content .tab-pane > .results .item-value {

    display: block;

    width: 100%;

    font-size: 13.5px;

    line-height: 1.5;

    word-break: break-word;

    overflow-wrap: anywhere;

  }



  /* Wide content scrolls inside itself, never widens the page. */

  .tab-content .tab-pane > .results table,

  .tab-content .tab-pane > .results pre,

  .tab-content .tab-pane > .results .json-code-block {

    display: block;

    max-width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }



  /* A five-column table squeezed into 347px wraps every cell onto three lines

     and stops being readable. Keep the columns on one line and let the table

     scroll sideways instead — the block above is the scroll container, so this

     works whether or not the renderer wrapped the table in a scrolling div. */

  .tab-content .tab-pane > .results table th,

  .tab-content .tab-pane > .results table td {

    padding: 9px 12px;

    white-space: nowrap;

  }



  /* ryr3pcfq7gqqesbxja.css styles this block for a light theme (#f5f5f5 on #ddd).

     Against the inherited near-white body text that renders white-on-white. */

  .tab-content .tab-pane > .results .json-code-block {

    padding: 12px;

    border: 1px solid var(--m-line);

    border-radius: var(--m-r-sm);

    background-color: var(--m-card-sunk);

    color: var(--ink-dim);

    font-family: var(--monospace-font);

    font-size: 11.5px;

    line-height: 1.55;

  }



  /* Two section patterns coexist across the commands: .result-section is a

     bordered card (IP, Domain, URL, headers) and .di-section is a lighter

     header-led grouping (Domain intelligence, Crypto, Archive). Reports with

     many sections would drown in chrome if every one became a card, so the

     two keep their structure but share a vocabulary: same title treatment,

     same divider, same vertical rhythm. */

  .tab-content .tab-pane > .results .di-section {

    margin-bottom: 20px;

  }



  .tab-content .tab-pane > .results .di-section-header {

    gap: 10px;

    padding-bottom: 10px;

    margin-bottom: 12px;

    border-bottom: 1px solid var(--m-line-soft);

  }



  .tab-content .tab-pane > .results .di-section-title,

  .tab-content .tab-pane > .results .result-section h3 {

    font-size: 12.5px;

    font-weight: 600;

    letter-spacing: 0.06em;

  }



  .tab-content .tab-pane > .results .di-section-count {

    font-size: 11px;

  }



  /* --------------------------------------------------------- 6. Map sheets */



  /* IP and Phone render a map with an information panel over it. On mobile the

     panel covered half the map — including the marker at the map centre. It is

     now a bottom sheet sized so the marker stays visible above it. */

  .ip-info-overlay,

  .phone-info-overlay {

    top: auto !important;

    right: var(--m-gutter) !important;

    bottom: var(--m-gutter) !important;

    left: var(--m-gutter) !important;

    width: auto !important;

    max-height: 38% !important;

    border: 1px solid var(--m-line) !important;

    border-radius: var(--m-r-lg) !important;

    background: rgba(10, 9, 17, 0.96) !important;

    box-shadow: var(--m-shadow-lift) !important;

    -webkit-backdrop-filter: blur(18px);

    backdrop-filter: blur(18px);

    overscroll-behavior: contain;

  }



  .ip-info-overlay.collapsed,

  .phone-info-overlay.collapsed {

    transform: translateY(calc(100% + var(--m-gutter) + 4px)) !important;

  }



  /* Sticky header keeps the record identity visible while the body scrolls. */

  .ip-info-header,

  .phone-info-header {

    position: sticky;

    top: 0;

    z-index: 2;

    padding: 12px 46px 11px var(--m-gutter) !important;

    background: rgba(10, 9, 17, 0.98);

    border-bottom: 1px solid var(--m-line-soft);

    border-radius: var(--m-r-lg) var(--m-r-lg) 0 0;

  }



  .ip-info-body,

  .phone-info-body {

    padding: 10px var(--m-gutter) var(--m-gutter) !important;

  }



  /* Collapse and expand controls need real touch targets. */

  .info-collapse-btn {

    top: 8px !important;

    right: 8px !important;

    width: 32px !important;

    height: 32px !important;

    border-radius: var(--m-r-sm) !important;

    background: rgba(244, 239, 230, 0.06);

  }



  .map-expand-btn {

    top: auto !important;

    right: var(--m-gutter) !important;

    bottom: var(--m-gutter) !important;

    width: 44px !important;

    height: 44px !important;

    border: 1px solid var(--m-line) !important;

    border-radius: var(--m-r) !important;

    background: rgba(10, 9, 17, 0.95) !important;

  }



  /* ------------------------------------------------- 7. Touch & typography */



  .tab-content .tab-pane > .results button,

  .tab-content .tab-pane > .results .di-section-toggle,

  .tab-content .tab-pane > .results .di-intel-toggle {

    min-height: 44px;

  }



  .tab-content .tab-pane > .results .placeholder-text {

    width: 100%;

    max-width: 100%;

    padding: 22px 0;

    font-size: 12px;

    letter-spacing: 0.06em;

    text-align: center;

    color: var(--ink-muted);

  }

}



@media (max-width: 440px) {

  .account-data-overlay {

    padding: 12px;

  }



  .account-data-dialog {

    width: 100%;

    max-height: calc(100dvh - 24px);

  }



  .account-data-header {

    padding: 21px 19px 16px;

  }



  .account-data-content {

    padding: 18px 19px 6px;

  }



  .account-data-footer {

    flex-direction: column-reverse;

    padding: 12px 19px 20px;

  }



  .account-data-footer button {

    width: 100%;

    min-height: 44px;

  }

}